GoodUpdate

shop/src/App.css

@@ -17,6 +17,16 @@ input {
   color: rgb(58, 58, 65);
   
 }
+textarea {
+  background-color: rgb(229, 229, 243);
+  border-radius: 10%;
+  color: rgb(58, 58, 65);
+  width: 300px;
+}
+textarea:hover {
+  background-color: rgb(248, 238, 238);
+}
+
 input:hover {
   background-color: rgb(248, 238, 238);
 }

shop/src/components/goodCard.js

@@ -1,7 +1,7 @@
 import { connect } from "react-redux";
-import {gql, urlUpload, actionPromise, actionGoodCard, getData, actionCartAdd} from "../reducers";
+import {gql, urlUpload, actionGoodUpdate, actionPromise, actionGoodCard, updateImgAction, getData, actionCartAdd} from "../reducers";
 import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from 'react-router-dom';
 
 
@@ -12,13 +12,20 @@ import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from
     state: state,
     basket: state.basket,
     isAdmin: state.auth && state.auth.payload && state.auth.payload.sub && state.auth.payload.sub.acl && state.auth.payload.sub.acl.indexOf("admin") > -1,
-    goodCard: getData(state, "goodCard", "GoodFindOne")
+    goodCard: getData(state, "goodCard", "GoodFindOne"),
+    newPictureStatus: state.promiseRed && state.promiseRed.photo &&
+    state.promiseRed.photo.status,
+    newImg: state.promiseRed && state.promiseRed.photo &&
+    state.promiseRed.photo.payload && state.promiseRed.photo.payload,
+    updateStatus: state.promiseRed && state.promiseRed.newGood &&
+    state.promiseRed.newGood.status,
   });
   
   const mapDispatchToProps = dispatch => bindActionCreators({
     getGood: actionGoodCard,
-    onAdd: actionCartAdd
-
+    onAdd: actionCartAdd,
+    updateImg: updateImgAction,
+    goodUpdate: actionGoodUpdate
   }, dispatch);
   
 
@@ -27,16 +34,25 @@ import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from
 
 
 
-  const GoodCard = ({id, goodCard = null, getGood, state, onAdd, getData, className = "goodCard", isAdmin}) => {
+  const GoodCard = ({id, updateStatus = {}, newPictureStatus = {}, newImg, goodUpdate, goodCard = null, updateImg, getGood, state, onAdd, getData, className = "goodCard", isAdmin}) => {
     const history = useHistory();
     useEffect(() =>  getGood(id), [id]);
-    console.log(state)
+
+    useEffect(() => updateStatus == "RESOLVED" && window.location.reload(), [updateStatus])
+
 
 
     const [width, setWidth] = useState(window.innerWidth);
     const [startWidth, setStartwidth] = useState(true);
     const [finallyWidth, setFinallyWidth] = useState(true);
 
+
+    const [isUpdateImg, changeImg] = useState(false);
+    const [showUpdate, onShow] = useState(false);
+    const [description, changeDescription] = useState(null);
+    const [price, changePrice] = useState(null);
+    const [name, changeName] = useState(null);
+
     useEffect(() => startWidth !== finallyWidth && window.location.reload(), [startWidth, finallyWidth])
 
 
@@ -60,9 +76,59 @@ import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from
             <span>{`${goodCard.price}грн`}</span>
             <p>{goodCard.description}</p>
             <button onClick = {() => onAdd(goodCard.name, goodCard.price, goodCard._id,  goodCard.description, goodCard.images)}>В кошик</button>
-            {isAdmin && <button>Редагувати</button>}
+            {isAdmin && <button onClick = {() => onShow(!showUpdate)}>Редагувати</button>}
+              
+            {showUpdate && 
+            <div className = "updateWrapper">
+              <input onChange = {(e) => changeName(e.target.value)} placeholder = "Змінити назву"/>
+              <textarea  onChange = {(e) => changeDescription(e.target.value)} placeholder = "Змінити опис товару"/>
+              <input onChange = {(e) => changePrice(e.target.value)} type = "number" placeholder = "Змінити Ціну"/>
+              <input type="file"  name="photo" id='photo' 
+                  onChange={(ev) => {
+                    updateImg(ev.target.files[0])
+                
+                    changeImg(true);
+                  }
+                  }/>
+              <button disabled = {newPictureStatus == "PENDING"}
+                onClick = {
+                  () => {
+                    let newGood = {};
+                    newGood._id = goodCard._id;
+                    if (name) {
+                      newGood.name = name;
+                    }
+                    if (description) {
+                      newGood.description = description;
+                    }
+                    if (price) {
+                      newGood.price = +price;
+                    }
+                    if(isUpdateImg) {
+                      newGood.images = [];
+
+                      newGood.images[0] = {
+
+                         _id: newImg._id
+                      }
+
+
+                    }
+                    goodUpdate(newGood);
+
+
+                  }
+                }
+              >
+                
+                Зберегти
+
+              </button>
+            </div>
+          }
           </div>
         }
+
         </>
     )
   }

shop/src/components/goodsList.js

@@ -31,7 +31,9 @@ const GoodsList = ({arr = [], className = "goods", onAdd}) => {
       {arr.map((good) => 
       
       <div key = {`${Math.random}${good._id}`}className = "oneGood">
-        <OneGood  id = {good._id} name = {good.name} price = {good.price} image = {good.images ? `${urlUpload}/${good.images[0].url}` : `https://images.ua.prom.st/2259265311_korobka-syurpriz-dlya.jpg`}/>
+        <OneGood  id = {good._id} name = {good.name} price = {good.price} 
+        image = {good.images ? `${urlUpload}/${good.images[0].url}` : `https://images.ua.prom.st/2259265311_korobka-syurpriz-dlya.jpg`}
+        />
         <div>
             <button onClick = {() => onAdd(good.name, good.price, good._id,  good.description, good.images)}>В кошик</button>
         </div>

shop/src/components/index.js

@@ -16,7 +16,7 @@ import CGoodsListSearch from "./goodsListSearch";
 import GoodsNotFound from "./goodsNotFound";
 import LoginForm from "./loginOnPage";
 import CGoodCard from "./goodCard";
-import {CUpdateForm} from "./updateForm";
+// import {CUpdateForm} from "./updateForm";
 import CYourProfile from "./profilePage";
 import CBasketPage from "./basket";
 import COrderPage from "./orderDonePage";
@@ -25,7 +25,7 @@ import CUsersList from "./usersList";
 
 
 export {Header,Footer, actionCatalogCard, Main, Links, CGoodsCategory, OneGood, CGoodsList, SearchInput, CGoodsSearch, CGoodsListSearch, GoodsNotFound, 
-LoginForm, CGoodCard, CUpdateForm, CYourProfile, CBasketPage, COrderPage, CUsersList, SearchUserInput};
+LoginForm, CGoodCard, CYourProfile, CBasketPage, COrderPage, CUsersList, SearchUserInput};
 
 
 

shop/src/components/profilePage.js

@@ -1,4 +1,4 @@
-import {CUpdateForm, CUsersList, SearchUserInput, CUpdateAdminForm} from "./index";
+import {CUsersList, SearchUserInput, CUpdateAdminForm} from "./index";
 import {gql, urlUpload, actionPromise, actionGoodCard, getGoods,
     actionUserFindOne, updateImgAction, actionAuthLogin, actionAuthLogout,
     actionUserUpdate,getData, actionLogin } from "../reducers";
@@ -10,29 +10,43 @@ import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from
 import { NewAuth } from "../reducers/actionAuthLog";
 
 
-const YourProfile = ({state, updatedUser = {}, isImg, token, onLogin, onLogout, updateImg, 
+const YourProfile = ({state, updateStatus, updatedUser = {}, newImg, token, onLogin, onLogout, updateImg, 
                         updateUser, isUserAdmin = {}, status, data = {}, getData, 
                         match:{params:{_id}}, isAdmin = [], isOwner = {}, newPicture = "clear"}) => {
 
     const history = useHistory();
 
-    const formRef = useRef(null);
     const [nick, changeNick] = useState(null);
     const [newLogin, changeLogin] = useState(null);
     const [nowPassword, superPassword] = useState(null);
     const [password, changePassword] = useState(null);
     const [password2, changePassword2] = useState(null);
     const [isUpdateImg, changeImg] = useState(false);
-    const [isUpdatePage, changePage] = useState(false);
-    const [newImage, getImage] = useState({});
+    // const [isUpdatePage, changePage] = useState(false);
+    // const [newImage, getImage] = useState({});
 
      useEffect(() =>  history.location.pathname.includes(`/profile/`) ? getData(`${isOwner.id}`) : getData(`${_id}`),[history.location.pathname])
 
-     useEffect(() => updatedUser && updatedUser.data && updatedUser.data.UserUpsert && window.location.reload(), [updatedUser])
+     useEffect( 
+       async() => {
+
+       if(updateStatus == "RESOLVED" && updatedUser && updatedUser.data && updatedUser.data.UserUpsert) {
+                           
+          if(!isAdmin || (isAdmin && isOwner.id == data._id)){
+
+              await onLogin(newLogin|| data.login, password || nowPassword);
+
+           } 
+          window.location.reload()
+
+      }
+    }, [updateStatus])
+     
+     
+
      
      const date = new Date(data ? +data.createdAt : 0);
      const [showUpdate, onShow] = useState(false);
-     const [showAdminUpdate, onAdmin] = useState(false);
      const [searchInput, changeValue] = useState("Пошук");
      
 
@@ -82,12 +96,12 @@ const YourProfile = ({state, updatedUser = {}, isImg, token, onLogin, onLogout,
                     
 
                     {(!isAdmin  || (isAdmin && isOwner.id == data._id))&&
-                    <input onChange = {(e) => superPassword(e.target.value)} placeholder = "Пароль для зміни даних"/>}
+                    <input type = "password" onChange = {(e) => superPassword(e.target.value)} placeholder = "Пароль"/>}
                     
                     <input onChange = {(e) => changeNick(e.target.value)} placeholder = "Новий нікнейм"/>
                     <input onChange = {(e) => changeLogin(e.target.value)} placeholder = "Новий логін"/>
-                    <input onChange = {(e) => changePassword(e.target.value)} placeholder = "Новий пароль"/>
-                    <input onChange = {(e) => changePassword2(e.target.value)} placeholder = "Повторіть пароль"/>
+                    <input type = "password" onChange = {(e) => changePassword(e.target.value)} placeholder = "Новий пароль"/>
+                    <input type = "password" onChange = {(e) => changePassword2(e.target.value)} placeholder = "Повторіть пароль"/>
                     <input type="file"  name="photo" id='photo' 
                       onChange={(ev) => {
                         updateImg(ev.target.files[0])
@@ -95,16 +109,13 @@ const YourProfile = ({state, updatedUser = {}, isImg, token, onLogin, onLogout,
                         changeImg(true);
                       }
                         }/>
-
-
-
                     <button disabled = {(newPicture == "PENDING") ||
                        ( !isAdmin && !nowPassword) || 
                         ((isAdmin && isOwner.id == data._id) && !nowPassword )}  
                          onClick = {
                         () => {
               
-                      let newUser = {}
+                      let newUser = {};
                       newUser._id = data._id;
                       if(nick){
                         newUser.nick = nick;
@@ -121,29 +132,13 @@ const YourProfile = ({state, updatedUser = {}, isImg, token, onLogin, onLogout,
                       if(isUpdateImg) {
 
                         newUser.avatar = {};
-                        newUser.avatar._id = isImg._id;
-                        newUser.avatar.url = isImg._url;
+                        newUser.avatar._id = newImg._id;
+                        newUser.avatar.url = newImg._url;
                       }
                         updateUser(newUser);
 
 
 
-                    
-                          if(!isAdmin || (isAdmin && isOwner.id == data._id)){
-
-                            onLogin(newLogin|| data.login, password || nowPassword);
-
-                           } else {
-                            window.location.reload();
-                           }
-
-
-                        
-                      
-
-
-                       
-                       
                     }}>Зберегти</button>
                   </div>
 
@@ -181,6 +176,9 @@ const mapStateToProps = state => ({
      state.promiseRed.newUser.payload && state.promiseRed.newUser.payload.data &&
      state.promiseRed.newUser.payload,
 
+     updateStatus: state.promiseRed && state.promiseRed.newUser &&
+     state.promiseRed.newUser.status,
+
      isUserAdmin: state.promiseRed && state.promiseRed.user &&
      state.promiseRed.user.payload && state.promiseRed.user.payload.data &&
      state.promiseRed.user.payload.data.UserFindOne && 
@@ -190,7 +188,7 @@ const mapStateToProps = state => ({
      isOwner: state.auth && state.auth.payload && state.auth.payload.sub &&
      state.auth.payload.sub,
 
-     isImg: state.promiseRed && state.promiseRed.photo &&
+     newImg: state.promiseRed && state.promiseRed.photo &&
      state.promiseRed.photo.payload && state.promiseRed.photo.payload,
 
      isAdmin: state.auth && state.auth.payload && state.auth.payload.sub &&

shop/src/components/updateForm.js

@@ -1,181 +0,0 @@
-import { useState, useRef, useEffect } from 'react';
-import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from 'react-router-dom';
-import {gql, urlUpload, actionPromise, actionGoodCard, actionUserFindOne, getGoods, updateImgAction, actionUserUpdate, actionAuthLogout, actionAuthLogin} from "../reducers";
-import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
-import { connect } from 'react-redux';
-
-
-
-const UpdateAdminForm = ({onLogin, onLogout, data, getData, updateImg, updateUser, id, token}) => {
-  const history = useHistory();
-  const formRef = useRef(null);
-  const [nick, changeNick] = useState(null);
-  const [login, changeLogin] = useState(null);
-  const [password, changePassword] = useState(null);
-  const [password2, changePassword2] = useState(null);
-  const [isUpdateImg, changeImg] = useState(false);
-  const [isUpdatePage, changePage] = useState(false);
-  const [newImage, getImage] = useState({});
-
-  return(
-    <>
-    <div className = "updateWrapper">
-      <h4>Редагування</h4>
-      <input onChange = {(e) => changeNick(e.target.value)} placeholder = "Новий нікнейм"/>
-      <input onChange = {(e) => changeLogin(e.target.value)} placeholder = "Новий логін"/>
-      <input onChange = {(e) => changePassword(e.target.value)} placeholder = "Новий пароль"/>
-      <input onChange = {(e) => changePassword2(e.target.value)} placeholder = "Повторіть пароль"/>
-      <button>Назначити адміном</button>
-      <button>Зняти з адміна</button>
-      <button>Зтерти юзера</button>
-      <form className = "updateImg" action="/upload" method="post" enctype="multipart/form-data" id='form' ref={formRef} 
-      onChange = {
-        () => {
-          updateImg(formRef);
-          // changeImg(true);
-      }}>
-        <input type="file"  name="photo" id='photo'/>
-      </form>
-      <button onClick = {() => {
-        let newUser = {}
-        newUser._id = id;
-        if(nick){
-          newUser.nick = nick;
-        }
-        if(login) {
-          newUser.login = login;
-        } 
-        if (password && password == password2) {
-          newUser.password = password
-        } else if (password !== password2) {
-          history.push("/loginError");
-          return
-        }
-        if(isUpdateImg) {
-          newUser.avatar = {
-            _id:123,
-            url:"est"
-          }
-        }
-         updateUser(newUser);
-         changePage(true);
-         
-         
-      }}>Зберегти</button>
-    </div>
-    </>
-  )
-}
-
-
-
-
-
-
-const UpdateForm = ({state, onLogin, onLogout, isImg, data, getData, updateImg, updateUser, id, token}) => {
-    const history = useHistory();
-    const formRef = useRef(null);
-    const [nick, changeNick] = useState(null);
-    const [login, changeLogin] = useState(null);
-    const [password, changePassword] = useState(null);
-    const [password2, changePassword2] = useState(null);
-    const [isUpdateImg, changeImg] = useState(false);
-    const [isUpdatePage, changePage] = useState(false);
-    const [newImage, getImage] = useState({});
-    
-    useEffect(() => {
-      if(isUpdatePage) {
-        let jwt = token;
-        onLogout();
-        onLogin(jwt);
-        history.push("/login")
-
-      }
-    },
-      [isUpdatePage])
-
-  return(
-    <>
-    <div className = "updateWrapper">
-      <h4>Редагування</h4>
-      <input onChange = {(e) => changeNick(e.target.value)} placeholder = "Новий нікнейм"/>
-      <input onChange = {(e) => changeLogin(e.target.value)} placeholder = "Новий логін"/>
-      <input onChange = {(e) => changePassword(e.target.value)} placeholder = "Новий пароль"/>
-      <input onChange = {(e) => changePassword2(e.target.value)} placeholder = "Повторіть пароль"/>
-      <input type="file"  name="photo" id='photo' 
-        onChange={(ev) => {
-          updateImg(ev.target.files[0])
-
-          changeImg(true);
-        }
-          }/>
-      <button onClick = {() => {
-
-        let newUser = {}
-        newUser._id = id;
-        if(nick){
-          newUser.nick = nick;
-        }
-        if(login) {
-          newUser.login = login;
-        } 
-        if (password && password == password2) {
-          newUser.password = password
-        } else if (password !== password2) {
-          history.push("/loginError");
-          return
-        }
-        if(isUpdateImg) {
-          
-        }
-        updateUser(newUser);
-        changePage(true)
-        // let jwt = token;
-
-        //  onLogout();
-        //  onLogin(jwt)
-        //  history.push("/login/")
-         
-         
-      }}>Зберегти</button>
-    </div>
-
-    {/* <img src = {`${urlUpload}/images/cbd7145dbc78ced471951c70f571f871`}/> */}
-    </>
-  )
-}
-
-const mapStateToProps = state => ({
-  state: state,
-
-  data: state.promiseRed && state.promiseRed.user &&
-  state.promiseRed.user.payload && state.promiseRed.user.payload.data &&
-  state.promiseRed.user.payload.data.UserFindOne,
-
-  token: state.auth && state.auth.token,
-  
-  isImg: state.promiseRed && state.promiseRed.photo &&
-  state.promiseRed.photo.payload && state.promiseRed.photo.payload.data &&
-  state.promiseRed.photo.payload
-
-});
-
-
-
-const mapDispatchToProps = dispatch => bindActionCreators({
- updateImg: updateImgAction,
- updateUser: actionUserUpdate,
- getData: actionUserFindOne,
- onLogout: actionAuthLogout,
- onLogin: actionAuthLogin
- // onDel: actionCartDelete,
- // onClear: actionCartClear,
- // onOrder: actionOrder
-}, dispatch);
-
-
-const CUpdateAdminForm = connect(mapStateToProps, mapDispatchToProps)(UpdateAdminForm)
-
-const CUpdateForm = connect(mapStateToProps, mapDispatchToProps)(UpdateForm)
-
-export {CUpdateForm};

shop/src/reducers/actionGoodCard.js

@@ -14,7 +14,7 @@ const actionGoodCard = (_id) => {
                 name
                 description
                 price
-                images{url}
+                images{url _id}
             }
           }
     ` ,{ query: queryJson})))

shop/src/reducers/actionGoodUpdate.js

@@ -0,0 +1,26 @@
+import {actionPromise, gql} from "./index";
+
+
+const actionGoodUpdate = (data) => {
+    return async dispatch => {
+        const queryJson = JSON.stringify(
+            {
+                good: data
+            }
+        )
+        await dispatch(actionPromise("newGood", gql(
+            `mutation updateGood($good:GoodInput) {
+                GoodUpsert(good: $good) {
+                    _id
+                    name
+                    description
+                    price
+                    images{url}
+                    
+                }
+              }`, queryJson
+        )))
+    }
+}
+
+export default actionGoodUpdate;

shop/src/reducers/index.js

@@ -16,6 +16,7 @@ import actionReg from "./actionReg";
 import actionUserFindOne from "./actionFindOneUser";
 import actionUserUpdate from "./actionUserUpdate";
 import actionSearchUser from "./actionSearchUser";
+import actionGoodUpdate from "./actionGoodUpdate";
 
 
 function promiseReducer(state={}, action){
@@ -41,7 +42,7 @@ function promiseReducer(state={}, action){
 export {actionPromise, gql, actionGoods, getData, promiseReducer, store, actionSearch,
    actionLogin, authReducer, actionAuthLogin, actionAuthLogout, urlUpload, actionGoodCard, 
    updateImgAction, actionCartAdd, actionCartDelete, actionCartClear, actionOrder,
-    actionReg, actionUserFindOne, actionUserUpdate, actionSearchUser};
+    actionReg, actionUserFindOne, actionUserUpdate, actionSearchUser, actionGoodUpdate};