profileWorstka

shop/src/App.css

@@ -267,6 +267,31 @@ button {
   width: 100px;
   border-radius: 15%;
 }
+.profilePage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 80%;
+  background-color: rgb(58, 58, 65);
+  border: 2px solid;
+  border-color:rgb(229, 229, 243);
+  border-radius: 5%;
+  padding: 15px;
+}
+.profilePage svg {
+  margin: 15px;
+}
+.profilePage .click {
+  background-color: rgb(10, 10, 10);
+  padding: 5px 10px;
+  border: 2px solid;
+  border-color:rgb(229, 229, 243);
+  border-radius: 5%;
+
+}
+.profilePage img {
+  width: 250px;
+}
 
 .basketInner {
   display: flex;

shop/src/components/Main.js

@@ -7,7 +7,7 @@ import thunk from 'redux-thunk';
 import store from "../reducers";
 import Catalog from "./catalog";
 import {actionCatalogCard, CBasketPage, searchInput, CGoodsCategory, 
-    SearchInput, CGoodsSearch, LoginForm, CGoodCard, YourProfile,
+    SearchInput, CGoodsSearch, LoginForm, CGoodCard, CYourProfile,
     COrderPage} from "./index";
 
 
@@ -40,7 +40,7 @@ const Main = ({className = "MainImg" }) => {
                         <Route path = "/good/:id" component = {({match}) => <CGoodCard id = {match.params.id}/>}/>
                         <Route path = "/order" component = {COrderPage}/>
                         <Route path = "/login" component = {LoginForm}/>
-                        <Route path = "/profile/:login" component = {YourProfile}/>
+                        <Route path = "/profile/:login" component = {CYourProfile}/>
                         <Route path = "/basket" component = {CBasketPage}/>
                         <Route path="/about" component = {About} exact/>
                         <Route path = "/post" component = {Post} exact/>

shop/src/components/index.js

@@ -17,14 +17,14 @@ import GoodsNotFound from "./goodsNotFound";
 import LoginForm from "./loginOnPage";
 import CGoodCard from "./goodCard";
 import UpdateForm from "./updateForm";
-import YourProfile from "./profilePage";
+import CYourProfile from "./profilePage";
 import CBasketPage from "./basket";
 import COrderPage from "./orderDonePage";
 
 
 
 export {Header,Footer, actionCatalogCard, Main, Links, CGoodsCategory, OneGood, CGoodsList, SearchInput, CGoodsSearch, CGoodsListSearch, GoodsNotFound, 
-LoginForm, CGoodCard, UpdateForm, YourProfile, CBasketPage, COrderPage};
+LoginForm, CGoodCard, UpdateForm, CYourProfile, CBasketPage, COrderPage};
 
 
 

shop/src/components/loginOnPage.js

@@ -26,13 +26,23 @@ const ButtonLogout = ({onLogout, isLoggedIn}) =>
 
 
 
-const PasswordConfirm = ({state, login, isLoggedIn, onLogin = null, }) => {
+const PasswordConfirm = ({status, loginStatus, state, login, isLoggedIn, onLogin = null, }) => {
     const [pass1, setPass1] = useState("");
     const [pass2, setPass2] = useState("");
     const history = useHistory();
     useEffect(() => login ?  history.push(`/profile/` + login) : history.push(`/login`),[login])
     console.log(state)
 
+    function Login() {
+        
+            onLogin(pass1, pass2)
+            debugger
+            if(status == "RESOLVED" && !loginStatus){
+                history.push("/loginError")
+            }
+        
+    }
+
     return (
         <>
             <div>
@@ -44,10 +54,7 @@ const PasswordConfirm = ({state, login, isLoggedIn, onLogin = null, }) => {
                     }}
                     onKeyDown = {(e) =>  {
                         if (e.keyCode == 13) {
-                            onLogin(pass1, pass2)
-                            if(!login){
-                                history.push("/loginError")
-                            }
+                            Login()
                         } 
                     }}
                 />
@@ -59,22 +66,14 @@ const PasswordConfirm = ({state, login, isLoggedIn, onLogin = null, }) => {
                     }}
                     onKeyDown = {(e) =>  {
                         if (e.keyCode == 13) {
-                            onLogin(pass1, pass2)
-                            if(!login){
-                                history.push("/loginError")
-                            }
+                            Login()
                         } 
                     }}
                 />
             </div>
             <div>
-                <button disabled = {isLoggedIn} onClick={() => {
-                    onLogin(pass1, pass2)
-                    if(!login){
-                        history.push("/loginError")
-                    }
-                }
-                }>Login</button>
+                <button disabled = {isLoggedIn} onClick={() => Login()}
+                >Login</button>
                 <CButtonLogout />
             </div>
 
@@ -162,7 +161,13 @@ const CFormReg = connect((state) => ({
 
 
 
-const CFormLogin = connect((s) => ({state: s, isLoggedIn: s.auth.payload, login: s.auth.payload && s.auth.payload.sub.login}), {
+const CFormLogin = connect((s) => ({
+    state: s, isLoggedIn: s.auth.payload, 
+    login: s.auth.payload && s.auth.payload.sub.loginь,
+    status: s.promiseRed.login && s.promiseRed.login.status,
+    loginStatus: s.promiseRed.login && s.promiseRed.login.payload &&
+    s.promiseRed.login.payload.data &&  s.promiseRed.login.payload.data.login
+    }), {
     onLogin:actionLogin})(PasswordConfirm);
 
 

shop/src/components/profilePage.js

@@ -1,14 +1,58 @@
 import {UpdateForm} from "./index";
-import { useState, useRef } from 'react';
-import {gql, urlUpload, actionPromise, actionGoodCard, getGoods, updateAction} from "../reducers";
+import {gql, urlUpload, actionPromise, actionGoodCard, getGoods,
+    actionUserFindOne, updateAction} from "../reducers";
+import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
+import { connect } from "react-redux";
+import { useEffect, useState, useRef } from "react";
 
 
-const YourProfile = ({}) => {
+const YourProfile = ({data, getData}) => {
+    useEffect(() =>  getData('ML'), [])
+    const date = new Date(+data.createdAt);
+    console.log(data)
     return (
         <>
-            <div>Ну привет, мистер</div>
-            <UpdateForm onchange = {updateAction}/>
+            <div className = "profilePage">
+                <h2>Привіт, {data.nick || "людино"}!</h2>
+                <img src={data.avatar ? data.avatar : 'https://pngicon.ru/file/uploads/picca-1.png'} />
+                <span>
+                    Сторінку створено {`${date.getDate()}. ${date.getMonth() + 1}. ${date.getFullYear()} о ${date.getHours()}: ${date.getMinutes()}: ${date.getSeconds()}  `}
+                </span>
+                <span>
+                    Пс.. не подобається аватар, логін чи нікнейм? То зміни їх
+                    <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>
+                <UpdateForm onchange = {updateAction}/>
+            </div>
         </>
     )
 }
-export default YourProfile;
+
+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({
+    getData: actionUserFindOne,
+    // onDel: actionCartDelete,
+    // onClear: actionCartClear,
+    // onOrder: actionOrder
+  }, dispatch);
+
+const CYourProfile = connect(mapStateToProps, mapDispatchToProps)
+(YourProfile)
+export default CYourProfile;

shop/src/components/updateForm.js

@@ -13,7 +13,7 @@ const UpdateForm = ({onchange}) => {
       <input type="file" name="photo" id='photo'/>
     </form>
 
-    <img src = {`${urlUpload}/images/cbd7145dbc78ced471951c70f571f871`}/>
+    {/* <img src = {`${urlUpload}/images/cbd7145dbc78ced471951c70f571f871`}/> */}
     </>
   )
 }

shop/src/reducers/actionFindOneUser.js

@@ -0,0 +1,26 @@
+import {actionPromise, gql} from "./index";
+
+
+
+
+const actionUserFindOne = (user) => {
+    //debugger
+    return async dispatch => {
+        const queryJson = JSON.stringify([{
+            "login": user}]);
+        await dispatch(actionPromise(`user`, gql(
+            `query userOne ($query: String){
+                UserFindOne(query: $query){
+                  login
+                  _id
+                  createdAt
+                      avatar {_id url}
+                  acl
+                  nick
+                }
+              }`, {query: queryJson}
+        )))
+    }
+}
+
+export default actionUserFindOne;

shop/src/reducers/index.js

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