userUpdate done

shop/src/App.css

@@ -11,6 +11,7 @@ a {
 input {
   background-color: rgb(229, 229, 243);
   border-radius: 10%;
+  color: rgb(58, 58, 65);
   
 }
 input:hover {
@@ -24,9 +25,14 @@ button:disabled {
 
  .links {
    text-decoration: none;
-
    color: rgb(229, 229, 243);
  }
+ .catalog li {
+   padding-left: 5px;
+ }
+ /* .catalog li:hover {
+   transform: scale(1.05);
+ } */
 
  .subCatalog .subLink li {
   background-color: rgb(10, 10, 10);
@@ -131,7 +137,7 @@ button:disabled {
 .search input{
   width: 50%;
   margin: 0 15px 0 0px;
-  color: rgb(58, 58, 65);
+
 }
 .search button {
   width: 100px;
@@ -294,6 +300,15 @@ button {
   width: 250px;
 }
 
+.updateWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.updateWrapper input {
+  margin: 5px;
+}
+
 .basketInner {
   display: flex;
   justify-content: center;
@@ -382,6 +397,9 @@ button {
   display: flex;
   justify-content: space-around;
 }
+/* .contacts svg {
+  margin: 0px 5px;
+} */
 
 
 @media screen and (max-width: 900px) {
@@ -422,7 +440,13 @@ button {
   .profilePage {
     width: 100%;
   }
-
+  .profilePage .click {
+    font-size: 8px;
+    padding: 2px 3px;
+  }
+  .updateImg input{
+    width: 250px;
+  }
   .order {
     padding-left: 10px;
     padding-right: 10px;
@@ -446,6 +470,7 @@ button {
 
   .catalog li{
     font-size: 10px;
+
   }
   
 .catalogInput {
@@ -525,4 +550,7 @@ button {
   .footer {
     font-size: 8px;
   }
+  .contacts {
+    width: 70%;
+  }
 }

shop/src/components/goodCard.js

@@ -29,7 +29,7 @@ import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from
   const GoodCard = ({id, goodCard = null, state, onAdd, getData, className = "goodCard"}) => {
     const history = useHistory();
     useEffect(() =>  getData(id), [id]);
-    console.log(state)
+    //console.log(state)
 
 
     const [width, setWidth] = useState(window.innerWidth);

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 UpdateForm from "./updateForm";
+import CUpdateForm from "./updateForm";
 import CYourProfile from "./profilePage";
 import CBasketPage from "./basket";
 import COrderPage from "./orderDonePage";
@@ -24,7 +24,7 @@ import COrderPage from "./orderDonePage";
 
 
 export {Header,Footer, actionCatalogCard, Main, Links, CGoodsCategory, OneGood, CGoodsList, SearchInput, CGoodsSearch, CGoodsListSearch, GoodsNotFound, 
-LoginForm, CGoodCard, UpdateForm, CYourProfile, CBasketPage, COrderPage};
+LoginForm, CGoodCard, CUpdateForm, CYourProfile, CBasketPage, COrderPage};
 
 
 

shop/src/components/loginOnPage.js

@@ -7,7 +7,12 @@ import jwt_decode from "jwt-decode"
 import { bindActionCreators } from 'redux';
 import {actionLogin, authReducer, actionAuthLogout, actionReg} from "../reducers/";
 
-
+const actionClearLogin = () => ({
+    
+    type: "PROMISE",
+    status: "CLEAR",
+    name: "login"
+})
 
 const ButtonLogout = ({onLogout, isLoggedIn}) => 
     <button onClick={onLogout}
@@ -26,11 +31,16 @@ const ButtonLogout = ({onLogout, isLoggedIn}) =>
 
 
 
-const PasswordConfirm = ({status, loginStatus, state, login, isLoggedIn, onLogin = null, }) => {
+const PasswordConfirm = ({status, loginStatus, state, login, isLoggedIn, onLogin = null, clearLogin}) => {
     const [pass1, setPass1] = useState("");
     const [pass2, setPass2] = useState("");
     const history = useHistory();
-    useEffect(() => login ?  history.push(`/profile/` + login) : history.push(`/login`),[login])
+    useEffect(() => {
+        //debugger
+            login ?  history.push(`/profile/` + login) : history.push(`/login`);
+            clearLogin()
+        },[login]
+)
     console.log(state)
 
     function Login() {
@@ -118,7 +128,7 @@ const FormReg = ({onReg, onLogin, login, state, isReg}) => {
                     onKeyDown = {(e) => {
                         if (e.keyCode == 13 ) {
                             onReg(pass1, pass2)
-                            debugger
+                            //debugger
                             if(!isReg) {
                                 onLogin(pass1, pass2)
                             } else {
@@ -168,7 +178,7 @@ const CFormLogin = connect((s) => ({
     loginStatus: s.promiseRed.login && s.promiseRed.login.payload &&
     s.promiseRed.login.payload.data &&  s.promiseRed.login.payload.data.login
     }), {
-    onLogin:actionLogin})(PasswordConfirm);
+    onLogin: actionLogin, clearLogin: actionClearLogin})(PasswordConfirm);
 
 
 const LoginForm = ({}) => {

shop/src/components/profilePage.js

@@ -1,15 +1,16 @@
-import {UpdateForm} from "./index";
+import {CUpdateForm} from "./index";
 import {gql, urlUpload, actionPromise, actionGoodCard, getGoods,
-    actionUserFindOne, updateAction} from "../reducers";
+    actionUserFindOne, updateImgAction} from "../reducers";
 import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
 import { connect } from "react-redux";
 import { useEffect, useState, useRef } from "react";
 
 
-const YourProfile = ({data, getData, match:{params:{login}}}) => {
-     useEffect(() =>  getData(`${login}`),[])
+const YourProfile = ({state, data, getData, match:{params:{login}}}) => {
+     useEffect(() =>  getData(`${login}`),[login, data])
      const date = new Date(data ? +data.createdAt : 0);
-     console.log(data)
+     const [showUpdate, onShow] = useState(false)
+     //console.log(data)
      if(data){
         return (
             <>
@@ -20,13 +21,16 @@ const YourProfile = ({data, getData, match:{params:{login}}}) => {
                         Сторінку створено {`${date.getDate()}. ${date.getMonth() + 1}. ${date.getFullYear()} о ${date.getHours()}: ${date.getMinutes()}: ${date.getSeconds()}  `}
                     </span>
                     <span>
+                    {/* <p><a href="http://htmlbook.ru" target="_blank">Ссылка 
+  открывает новое окно на сайт www.htmlbook.ru</a></p>  */}
                         Пс.. не подобається аватар, логін чи нікнейм? То зміни їх
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                         <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
                         </svg>
-                        <span className = "click">ТИЦ</span>
+                        <span className = "click" onClick = {() => onShow(!showUpdate)}>ТИЦ</span>
                     </span>
-                    <UpdateForm onchange = {updateAction}/>
+                    {showUpdate && <CUpdateForm id = {data._id}/>}
+                    
                 </div>
             </>
     )

shop/src/components/updateForm.js

@@ -1,21 +1,90 @@
 import { useState, useRef } from 'react';
-import {gql, urlUpload, actionPromise, actionGoodCard, getGoods} from "../reducers";
+import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from 'react-router-dom';
+import {gql, urlUpload, actionPromise, actionGoodCard, getGoods, updateImgAction, actionUserUpdate} from "../reducers";
+import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
+import { connect } from 'react-redux';
 
-
-const UpdateForm = ({onchange}) => {
+const UpdateForm = ({updateImg, updateUser, id}) => {
+    const history = useHistory();
     const formRef = useRef(null);
-    // const [isUpdate, changeIt] = useState(false)
+    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)
 
 
   return(
     <>
-    <form action="/upload" method="post" enctype="multipart/form-data" id='form' ref={formRef} onChange = {() => onchange(formRef)}>
-      <input type="file" name="photo" id='photo'/>
-    </form>
+    <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 = "Повторіть пароль"/>
+      <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)
+         
+      }}>Зберегти</button>
+    </div>
 
     {/* <img src = {`${urlUpload}/images/cbd7145dbc78ced471951c70f571f871`}/> */}
     </>
   )
 }
 
-export default UpdateForm;
+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
+ // basket: state.basket,
+ // GoodsArr: arrFromObj(ObjFilter(state.basket, "price")),
+ // order: orderArr(arrFromObj(ObjFilter(state.basket, "price"))),
+ // orderDone: state.promiseRed && state.promiseRed.order && 
+ // state.promiseRed.order.payload && 
+ // state.promiseRed.order.payload.data.OrderUpsert
+});
+
+
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+ updateImg: updateImgAction,
+ updateUser: actionUserUpdate,
+ // onDel: actionCartDelete,
+ // onClear: actionCartClear,
+ // onOrder: actionOrder
+}, dispatch);
+
+
+const CUpdateForm = connect(mapStateToProps, mapDispatchToProps)(UpdateForm)
+
+export default CUpdateForm;

shop/src/reducers/actionUpdateImg.js

@@ -3,7 +3,7 @@ import {gql, urlUpload, actionPromise} from "./index";
 
 
 
-async function updateAction(ref) {
+async function updateImgAction(ref) {
  
     fetch(`${urlUpload}/upload`, {
       method: "POST",
@@ -15,4 +15,4 @@ async function updateAction(ref) {
   
   }    
 
-  export default updateAction;
+  export default updateImgAction;

shop/src/reducers/actionUserUpdate.js

@@ -0,0 +1,28 @@
+import {actionPromise, gql} from "./index";
+
+
+const actionUserUpdate = (data) => {
+
+    return async dispatch => {
+        const queryJson = JSON.stringify(
+            {
+                user: data
+            }
+        )
+        await dispatch(actionPromise('user', gql(
+            `mutation updateMe($user:UserInput){
+                UserUpsert(user: $user){
+                  _id
+                  nick
+                  login
+                  avatar{
+                  url
+                  }
+                }
+              }`, queryJson
+        )))
+    }
+
+}
+
+export default actionUserUpdate;

shop/src/reducers/cartReducer.js

@@ -18,7 +18,7 @@ function cartReducer(state, { type, count, id, image,  name, description,  price
         state = {
             ...state,
             
-            price: price + (state.price ||0),
+            price: price + (state.price || 0),
              [id]:{ price: price,
                     id: id,
                     description: description,

shop/src/reducers/index.js

@@ -9,11 +9,12 @@ import actionLogin from "./actionLogin";
 import authReducer from "./authReducer";
 import {actionAuthLogin, actionAuthLogout} from "./actionAuthLog";
 import actionGoodCard from "./actionGoodCard";
-import updateAction from "./actionUpdateImg";
+import updateImgAction from "./actionUpdateImg";
 import {cartReducer, actionCartClear, actionCartDelete, actionCartAdd} from "./cartReducer";
 import actionOrder from "./actionOrder";
 import actionReg from "./actionReg";
 import actionUserFindOne from "./actionFindOneUser";
+import actionUserUpdate from "./actionUserUpdate";
 
 
 
@@ -39,8 +40,8 @@ function promiseReducer(state={}, action){
 
 export {actionPromise, gql, actionGoods, getGoods, promiseReducer, store, actionSearch,
    actionLogin, authReducer, actionAuthLogin, actionAuthLogout, urlUpload, actionGoodCard, 
-   updateAction, actionCartAdd, actionCartDelete, actionCartClear, actionOrder,
-    actionReg, actionUserFindOne};
+   updateImgAction, actionCartAdd, actionCartDelete, actionCartClear, actionOrder,
+    actionReg, actionUserFindOne, actionUserUpdate};