add avatar and ownerData component upd

src/components/Auth.js

@@ -32,7 +32,7 @@ const Auth = (props) => {
     const [login, setLogin] = useState("")
     const [password, setPassword] = useState("")
     const navigate = useNavigate();
-    console.log(navigate)
+
 
 
     const btnHandler = (type) => {

src/components/OwnerHeader.js

@@ -1,38 +1,50 @@
 import {Avatar} from '@mui/material';
 import styled from 'styled-components';
 import {connect} from "react-redux";
-import {useEffect, useState} from "react";
+import {useEffect} from "react";
 import {changeAuthData, changeAuthDataAsync} from "../store/actionCreators/authActionCreators";
 import {useNavigate} from "react-router-dom";
+import avatar from "../assets/img/avatarGolub.jpg"
 
-const StyledHeader = styled.div`
-display: flex;
+const HeaderWrapper = styled.div`
+  display: flex;
   justify-content: space-around;
-  box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(41,78,255,0);
+  box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(41, 78, 255, 0);
 `
 
 const OwnerHeader = (props) => {
-
-    const [id, setId] = useState(props.id);
     const navigate = useNavigate();
 
-    useEffect(()=>{
+    useEffect(() => {
         // props.changeAuthDataAsync({login, password, "ownerData", navigateCallback: navigate})
-    }, [id])
+    }, [props.id])
 
-    const Logo =()=>{
-        return(
+    const Logo = () => {
+        return (
             <p>HIPSTARGAM</p>
         )
     }
+    const logout = () => {
+        localStorage.authToken = "";
+        props.changeAuthData({
+            token: "",
+            user: ""
+        })
+        navigate("/auth")
+
+    }
 
     return (
-        <StyledHeader>
+        <HeaderWrapper>
             <Logo/>
-            <Avatar src="/broken-image.jpg"/>
+
+            <Avatar  src={avatar} alt={"avatar"} sx={{border:"1px solid grey"}}/>
+
 
             <p>Hello</p>
-        </StyledHeader>
+            <button onClick={logout}>Logout</button>
+
+        </HeaderWrapper>
     )
 };
 

src/components/Profile.js

@@ -1,10 +1,13 @@
 import OwnerHeader from "./OwnerHeader";
+import UserContent from "./UserContent";
+
 
 
 const Profile =()=>{
     return(
         <>
         <OwnerHeader/>
+        <UserContent/>
 
         </>
     )

src/components/UserContent.js

@@ -0,0 +1,107 @@
+import {connect} from "react-redux";
+import styled from 'styled-components';
+import {useEffect} from "react";
+import {setActiveUserDataAsync} from "../store/actionCreators/authActionCreators";
+import avatar from "../assets/img/avatarGolub.jpg"
+
+const UserContentWrapper = styled.div`
+  margin-top: 30px;
+  width: 100%;
+`
+const AvatarBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  width: 40%;
+`
+const PostsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+const UserInfoWrapper = styled.div`
+  display: flex;
+  width: 100%;
+`
+const UserInfoBlockWrapper = styled.div`
+  display: flex;
+
+  justify-content: space-around;
+  width: 60%;
+`
+const UserInfoBlockStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 33%;
+`
+const AvatarWrapper = styled.div`
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  border: 1px solid grey;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+`
+
+function UserContent(props) {
+
+    useEffect(() => {
+        if (!props.activeUser) {
+            props.setActiveUserDataAsync(props.id)
+        }
+    })
+
+    console.log(props)
+
+    const UserInfoBlock = ({count, description}) => {
+        return (<UserInfoBlockStyled>
+            <p>{count?.count ? count.count : 0}</p>
+            <p>{description}</p>
+        </UserInfoBlockStyled>)
+    }
+
+    return (
+        <>
+            {props.activeUser && <UserContentWrapper>
+                <UserInfoWrapper>
+                    <AvatarBlock>
+                        <AvatarWrapper>
+                            <img style={{height:"100%"}} src={props.activeUser.avatar ? props.activeUser.avatar : avatar} alt={"avatar"}/>
+                        </AvatarWrapper>
+                        <h2>{props.activeUser.login}</h2>
+                    </AvatarBlock>
+                    <UserInfoBlockWrapper>
+                        <p>кол-во публикаций</p>
+                        <UserInfoBlock count={props.activeUser.followers} description={"followers"}/>
+                        <UserInfoBlock count={props.activeUser.following} description={"followings"}/>
+                    </UserInfoBlockWrapper>
+                </UserInfoWrapper>
+
+                <PostsContainer>
+                    посты
+                </PostsContainer>
+
+
+            </UserContentWrapper>
+            }
+        </>
+    )
+};
+
+const mapStateToProps = (state) => {
+
+    return {
+        id: state.auth.user.sub.id,
+        activeUser: state.activeUser,
+
+    }
+}
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setActiveUserDataAsync: (id) => dispatch(setActiveUserDataAsync(id))
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(UserContent);

src/store/actionCreators/authActionCreators.js

@@ -1,6 +1,5 @@
-import {gqlLogin, gqlRegistration} from "../../shared/services&utilits/gqlRequest";
+import {actionAboutMe, gqlLogin, gqlRegistration} from "../../shared/services&utilits/gqlRequest";
 import {jwtDecode} from "../../shared/services&utilits/utilits";
-import {Link} from "react-router-dom";
 
 export const changeAuthData = authData => ({
     type: "CHANGE_AUTH_DATA",
@@ -13,11 +12,9 @@ export const setError = error => ({
 })
 
 export const changeAuthDataAsync = ({login, password, authType, navigateCallback}) => {
-    console.log(navigateCallback)
      return async (dispatch) => {
         let response = ""
         if (authType === "signUp") {
-            console.log("Регистрация")
             response = await gqlRegistration(login, password)
             if (!response.ok) {
                 dispatch(setError("Server is not answer"))
@@ -26,17 +23,16 @@ export const changeAuthDataAsync = ({login, password, authType, navigateCallback
             const responseData = await response.json();
             console.log(responseData)
             const user = responseData.data.createUser;
-
+            console.log(user)
             if (user) {
                 dispatch(changeAuthDataAsync({login, password, authType: "signIn", navigateCallback}))
+
             } else {
                 dispatch(setError("Login is already exist"))
             }
         }
         if (authType === "signIn") {
-            console.log(login,password)
             response = await gqlLogin(login, password)
-            console.log(response)
             if (!response.ok) {
                 dispatch(setError("Server is not answer"))
             }
@@ -47,20 +43,33 @@ export const changeAuthDataAsync = ({login, password, authType, navigateCallback
             if (jwtDecode(token)){
                 localStorage.authToken = token
             }
-            // console.log(jwtDecode(token))
-
 
             if (!token) {
                 dispatch(setError("Wrong login or password"))
             } else {
                 dispatch(changeAuthData({token: token, user: jwtDecode(token)}))
                 dispatch(setError(null))
-                console.log(navigateCallback)
                 navigateCallback("../profile")
             }
         }
-         if (authType === "ownerData") {
-
-         }
     }
 };
+
+export const setActiveUserDataAsync = (id) => {
+    return async (dispatch) => {
+        let response = ""
+
+            response = await actionAboutMe(id)
+
+            if (!response.ok) {
+                dispatch(setError("No user data received"))
+            }
+            const responseData = await response.json();
+            console.log(responseData)
+        dispatch(setActiveUserData(responseData.data.UserFindOne))
+        }
+};
+export const setActiveUserData =(data)=>({
+    type: "SET_ACTIVE_USER_DATA",
+    payload: data,
+} )

src/store/rootReducer.js

@@ -1,26 +1,40 @@
-
-const initialState={
+const initialState = {
     auth: {
-        token: "",
-        user: ""
+        token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOnsiaWQiOiI2MmNiMDJiNWY2Y2FmODM3ODZmNzRkZTAiLCJsb2dpbiI6InBlbmcxMzgiLCJhY2wiOlsiNjJjYjAyYjVmNmNhZjgzNzg2Zjc0ZGUwIiwidXNlciJdfSwiaWF0IjoxNjU3NDcxNjcwfQ.dKAgmQ2J-85XONErHC9JNz1yjctwYnIILFow1NPlyIo",
+        user: {
+            sub: {
+                id: "62cb02b5f6caf83786f74de0",
+                login: "peng138",
+                acl: {
+                    0: "user",
+                    1: 1657471670,
+                }
+            }
+        }
     },
-    error:{
+    activeUser: null,
+    error: {
         auth: null,
     }
 }
-const rootReducer=(state = initialState, action)=>{
+const rootReducer = (state = initialState, action) => {
     switch (action.type){
-        case "CHANGE_AUTH_DATA" :
-            return {
+        case "CHANGE_AUTH_DATA":
+            return{
                 ...state, auth: action.payload
-
             }
-        case "SET_ERROR" :
-            return {
+        case "SET_ERROR":
+            return{
                 ...state, error: {...state.error, auth: action.payload}
             }
+        case "SET_ACTIVE_USER_DATA":
+            console.log(action.payload)
+            return{
+                ...state, activeUser: action.payload,
+            }
+        default:
+            return state
     }
-    return state
 }
 
 export default rootReducer;