19.03.2023 03:00

js/Project/project/src/App.js

@@ -86,8 +86,8 @@ const MainRoutes = () => {
                 : <Switch>
                     <Route path="/" component={AuthReg} exact />
                     <Route path="/registration" component={AuthReg} />
-                    <Route path="/post/:postId" component={CComments} />
-                    <Route path="/user/:userId" component={CUser} />
+                    {/* <Route path="/post/:postId" component={CComments} /> */}
+                    {/* <Route path="/user/:userId" component={CUser} /> */}
                     <Route path="*" component={Page404} />
                 </Switch>
             }

js/Project/project/src/components/auth_reg/index.js

@@ -1,231 +1,24 @@
-import React, {
-    // createContext,
-    forwardRef,
-    // useContext,
-    useState
-} from 'react';
-import { store } from '../redux';
+import * as React from 'react';
 import {
     useHistory,
     useLocation
 } from "react-router-dom";
-import { actionFullLogin, actionFullRegistration } from "../redux/action";
+
+import LoginForm from './login_form';
 
 import {
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogContentText,
-    DialogTitle,
     Paper,
     Box,
-    Typography,
-    Button,
-    Stack,
-    OutlinedInput,
-    IconButton,
-    InputLabel,
-    InputAdornment,
-    FormControl,
-    TextField,
-    Slide
+    Typography
 } from "@mui/material";
 
-import {
-    Visibility,
-    VisibilityOff
-} from '@mui/icons-material';
-
-
-// анимация появление модального окна
-const Transition = forwardRef(function Transition(props, ref) {
-    return <Slide direction="up" ref={ref} {...props} />;
-})
-
-
-// поля ввода и кнопки
-function LoginForm() {
-    const location = useLocation().pathname === '/';
-    const history = useHistory();
-
-    // отслеживаем введение данных в полях логин/пароль
-    const [data, setData] = useState({ login: '', pass: '', confirmPass: '' })
-    console.log('data: ', data)
-
-    //  модальное окно открытие/закрытие
-    const [open, setOpen] = useState(false);
-    const openModalAlertWindow = () => {
-        setOpen(true);
-    }
-    const closeModalAlertWindow = () => {
-        setOpen(false);
-    }
-
-    // регулярка для проверки нового пароля
-    const pattern = /(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])/g
-    // указываем минимальную длинну для нового пароля
-    const passLength = 8;
-
-    let isValidate, isCorrect;
-
-    ((data.pass.length < passLength) || !(pattern.test(data.pass))) && (isValidate = true);
-    (data.pass != data.confirmPass) && (isCorrect = true);
-
-    const validation = (data.login == '') || (data.pass == '')
-
-
-    // включаем,выклюаем отображение пароля
-    const [showPassword, setShowPassword] = useState(false);
-    const handleClickShowPassword = () => setShowPassword((show) => !show);
-    const handleMouseDownPassword = (event) => {
-        event.preventDefault();
-    };
-
-    // включаем,выклюаем отображение подтверждения пароля
-    const [showPasswordConfirm, setShowPasswordConfirm] = useState(false);
-    const handleClickShowPasswordConfirm = () => setShowPasswordConfirm((show) => !show);
-    const handleMouseDownPasswordConfirm = (event) => {
-        event.preventDefault();
-    };
-
 
-    // Thunk регистрация
-    async function fullRegistration() {
-        const token = await store.dispatch(actionFullRegistration(data.login, data.confirmPass))
 
-        if (token !== null) {
-            history.push('/')
-        } else {
-            openModalAlertWindow()
-        }
-    }
-
-    // Thunk логинизация
-    async function fullLogin() {
-        const token = await store.dispatch(actionFullLogin(data.login, data.pass))
-
-        if (token == null) {
-            openModalAlertWindow()
-        }
-    }
-
-
-    return (
-        <Box sx={{ width: '100%' }}>
-            <form>
-                <Stack spacing={2}>
-                    <TextField
-                        fullWidth
-                        variant='outlined'
-                        id='login'
-                        label='Логин'
-                        size='normal'
-                        value={data.login}
-                        onChange={e => setData({ ...data, login: e.target.value })}
-                    />
-
-                    <FormControl variant="outlined">
-                        <InputLabel htmlFor="outlined-adornment-password">Пароль</InputLabel>
-                        <OutlinedInput
-                            error={isValidate}
-                            fullWidth
-                            id="password"
-                            label="Пароль"
-                            size="normal"
-                            type={showPassword ? 'text' : 'password'}
-                            value={data.pass}
-                            onChange={e => setData({ ...data, pass: e.target.value })}
-
-                            endAdornment={
-                                <InputAdornment position="end">
-                                    <IconButton
-                                        aria-label="visibility"
-                                        onClick={handleClickShowPassword}
-                                        onMouseDown={handleMouseDownPassword}
-                                        edge="end"
-                                    >
-                                        {showPassword ? <VisibilityOff /> : <Visibility />}
-                                    </IconButton>
-                                </InputAdornment>
-                            }
-                        />
-                    </FormControl>
-
-                    {!location && <FormControl variant="outlined">
-                        <InputLabel htmlFor="outlined-adornment-password">Подтвердите пароль</InputLabel>
-                        <OutlinedInput
-                            error={isCorrect}
-                            fullWidth
-                            id="confirmPassword"
-                            label="Подтвердите пароль"
-                            size="normal"
-                            type={showPasswordConfirm ? 'text' : 'password'}
-                            value={data.confirmPass}
-                            onChange={e => setData({ ...data, confirmPass: e.target.value })}
-
-                            endAdornment={
-                                <InputAdornment position="end">
-                                    <IconButton
-                                        aria-label="visibility"
-                                        onClick={handleClickShowPasswordConfirm}
-                                        onMouseDown={handleMouseDownPasswordConfirm}
-                                        edge="end"
-                                    >
-                                        {showPasswordConfirm ? <VisibilityOff /> : <Visibility />}
-                                    </IconButton>
-                                </InputAdornment>
-                            }
-                        />
-                    </FormControl>}
-
-                    <Button
-                        size="large"
-                        variant="contained"
-                        disabled={location
-                            ? (validation || false)
-                            : (validation || isCorrect) || false}
-                        onClick={location ? fullLogin : fullRegistration}
-                    >
-                        {location
-                            ? 'Войти' : 'Регистрация'}
-                    </Button>
-                </Stack>
-            </form>
-
-            <div>
-                <Dialog
-                    open={open}
-                    onClose={closeModalAlertWindow}
-                    TransitionComponent={Transition}
-                // keepMounted // всегда держит компонент смонтированным в DOM
-                >
-                    <DialogTitle>Что-то пошло не так!</DialogTitle>
-                    <DialogContent>
-                        <DialogContentText>
-                            {
-                                location
-                                    ? 'Вы ввели неправильный логин или пароль. Повторите попытку.'
-                                    : 'Введенные логин и/или пароль уже зарегистрированы'
-                            }
-                        </DialogContentText>
-                    </DialogContent>
-                    <DialogActions>
-                        <Button onClick={closeModalAlertWindow}>Ок</Button>
-                    </DialogActions>
-                </Dialog>
-            </div>
-        </Box>
-    )
-}
-
-
-// действия при нажатии по ссылке на регистрацию
+// ссылка на страницу регистрации
 function RegistrationLink() {
     const history = useHistory()
-    // const test = useContext(MyContext)
 
     return (
-        // { console.log('test: ', test.location) }
         < Typography
             variant="subtitle1"
             sx={{
@@ -246,8 +39,6 @@ function RegistrationLink() {
 }
 
 
-// const MyContext = createContext()
-
 // Основное окно регистрации (без полей ввода и кнопок)
 function AuthReg() {
     let location = useLocation().pathname === '/'
@@ -259,7 +50,6 @@ function AuthReg() {
             justifyContent: 'center',
             alignItems: 'center'
         }}>
-            {/* <MyContext.Provider value={{ location: location, text: 'text' }}> */}
             <Paper elevation={3}
                 sx={{
                     padding: '5px',
@@ -296,7 +86,6 @@ function AuthReg() {
 
                 {location && <RegistrationLink />}
             </Paper>
-            {/* </MyContext.Provider > */}
         </Box >
     )
 }

js/Project/project/src/components/auth_reg/login_form.js

@@ -0,0 +1,218 @@
+import React, {
+    forwardRef,
+    useState
+} from 'react';
+import { store } from '../redux';
+import {
+    useHistory,
+    useLocation
+} from "react-router-dom";
+import { actionFullLogin, actionFullRegistration } from "../redux/action";
+
+import {
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    Box,
+    Button,
+    Stack,
+    OutlinedInput,
+    IconButton,
+    InputLabel,
+    InputAdornment,
+    FormControl,
+    TextField,
+    Slide
+} from "@mui/material";
+
+import {
+    Visibility,
+    VisibilityOff
+} from '@mui/icons-material';
+
+
+// анимация появление модального окна
+const Transition = forwardRef(function Transition(props, ref) {
+    return <Slide direction="up" ref={ref} {...props} />;
+})
+
+
+
+// поля ввода и кнопки
+function LoginForm() {
+    const location = useLocation().pathname === '/';
+    const history = useHistory();
+
+    // отслеживаем введение данных в полях логин/пароль
+    const [data, setData] = useState({ login: '', pass: '', confirmPass: '' })
+    console.log('data: ', data)
+
+    //  модальное окно открытие/закрытие
+    const [open, setOpen] = useState(false);
+    const openModalAlertWindow = () => {
+        setOpen(true);
+    }
+    const closeModalAlertWindow = () => {
+        setOpen(false);
+    }
+
+    // регулярка для проверки нового пароля
+    const pattern = /(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])/g
+    // указываем минимальную длинну для нового пароля
+    const passLength = 8;
+
+    let isValidate, isCorrect;
+
+    ((data.pass.length < passLength) || !(pattern.test(data.pass))) && (isValidate = true);
+    (data.pass != data.confirmPass) && (isCorrect = true);
+
+    const validation = (data.login == '') || (data.pass == '')
+
+
+    // включаем,выклюаем отображение пароля
+    const [showPassword, setShowPassword] = useState(false);
+    const handleClickShowPassword = () => setShowPassword((show) => !show);
+    const handleMouseDownPassword = (event) => {
+        event.preventDefault();
+    };
+
+    // включаем,выклюаем отображение подтверждения пароля
+    const [showPasswordConfirm, setShowPasswordConfirm] = useState(false);
+    const handleClickShowPasswordConfirm = () => setShowPasswordConfirm((show) => !show);
+    const handleMouseDownPasswordConfirm = (event) => {
+        event.preventDefault();
+    };
+
+
+    // Thunk регистрация
+    async function fullRegistration() {
+        const token = await store.dispatch(actionFullRegistration(data.login, data.confirmPass))
+
+        if (token !== null) {
+            history.push('/')
+        } else {
+            openModalAlertWindow()
+        }
+    }
+
+    // Thunk логинизация
+    async function fullLogin() {
+        const token = await store.dispatch(actionFullLogin(data.login, data.pass))
+
+        if (token == null) {
+            openModalAlertWindow()
+        }
+    }
+
+
+    return (
+        <Box sx={{ width: '100%' }}>
+            <form>
+                <Stack spacing={2}>
+                    <TextField
+                        fullWidth
+                        variant='outlined'
+                        id='login'
+                        label='Логин'
+                        size='normal'
+                        value={data.login}
+                        onChange={e => setData({ ...data, login: e.target.value })}
+                    />
+
+                    <FormControl variant="outlined">
+                        <InputLabel htmlFor="outlined-adornment-password">Пароль</InputLabel>
+                        <OutlinedInput
+                            error={isValidate}
+                            fullWidth
+                            id="password"
+                            label="Пароль"
+                            size="normal"
+                            type={showPassword ? 'text' : 'password'}
+                            value={data.pass}
+                            onChange={e => setData({ ...data, pass: e.target.value })}
+
+                            endAdornment={
+                                <InputAdornment position="end">
+                                    <IconButton
+                                        aria-label="visibility"
+                                        onClick={handleClickShowPassword}
+                                        onMouseDown={handleMouseDownPassword}
+                                        edge="end"
+                                    >
+                                        {showPassword ? <VisibilityOff /> : <Visibility />}
+                                    </IconButton>
+                                </InputAdornment>
+                            }
+                        />
+                    </FormControl>
+
+                    {!location && <FormControl variant="outlined">
+                        <InputLabel htmlFor="outlined-adornment-password">Подтвердите пароль</InputLabel>
+                        <OutlinedInput
+                            error={isCorrect}
+                            fullWidth
+                            id="confirmPassword"
+                            label="Подтвердите пароль"
+                            size="normal"
+                            type={showPasswordConfirm ? 'text' : 'password'}
+                            value={data.confirmPass}
+                            onChange={e => setData({ ...data, confirmPass: e.target.value })}
+
+                            endAdornment={
+                                <InputAdornment position="end">
+                                    <IconButton
+                                        aria-label="visibility"
+                                        onClick={handleClickShowPasswordConfirm}
+                                        onMouseDown={handleMouseDownPasswordConfirm}
+                                        edge="end"
+                                    >
+                                        {showPasswordConfirm ? <VisibilityOff /> : <Visibility />}
+                                    </IconButton>
+                                </InputAdornment>
+                            }
+                        />
+                    </FormControl>}
+
+                    <Button
+                        size="large"
+                        variant="contained"
+                        disabled={location
+                            ? (validation || false)
+                            : (validation || isCorrect) || false}
+                        onClick={location ? fullLogin : fullRegistration}
+                    >
+                        {location
+                            ? 'Войти' : 'Регистрация'}
+                    </Button>
+                </Stack>
+            </form>
+
+            <div>
+                <Dialog
+                    open={open}
+                    onClose={closeModalAlertWindow}
+                    TransitionComponent={Transition}
+                // keepMounted // всегда держит компонент смонтированным в DOM
+                >
+                    <DialogTitle>Что-то пошло не так!</DialogTitle>
+                    <DialogContent>
+                        <DialogContentText>
+                            {
+                                location
+                                    ? 'Вы ввели неправильный логин или пароль. Повторите попытку.'
+                                    : 'Введенные логин и/или пароль уже зарегистрированы'
+                            }
+                        </DialogContentText>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={closeModalAlertWindow}>Ок</Button>
+                    </DialogActions>
+                </Dialog>
+            </div>
+        </Box>
+    )
+}
+
+export default LoginForm

js/Project/project/src/components/auth_reg/modal.js

@@ -1,212 +0,0 @@
-import { store } from '../redux';
-import { useState } from "react";
-import { useHistory, useParams, useLocation } from "react-router-dom";
-import { actionFullLogin } from "../redux/action";
-import { ExampleModal } from './modal';
-
-import { Paper, Box, Typography, Button, Stack, OutlinedInput, IconButton, InputLabel, InputAdornment, FormControl, TextField } from "@mui/material";
-
-import { Visibility, VisibilityOff } from '@mui/icons-material';
-
-
-// поля ввода и кнопки
-function LoginForm() {
-    const history = useHistory();
-
-    // отслеживаем введение данных в полях логин/пароль
-    const [data, setData] = useState({ login: '', pass: '' })
-
-    // включаем,выклюаем отображение пароля
-    const [showPassword, setShowPassword] = useState(false);
-    const handleClickShowPassword = () => setShowPassword((show) => !show);
-    const handleMouseDownPassword = (event) => {
-        event.preventDefault();
-    };
-
-    async function fullLogin() {
-        const answer = await store.dispatch(actionFullLogin(data.login, data.pass))
-
-        console.log('answer: ', answer)
-        if (answer == null) {
-            console.log('nul')
-            return (
-                <ExampleModal />
-            )
-        }
-
-        if (store.getState()?.auth?.token) {
-            history.push('/')
-        }
-    }
-
-    return (
-        <Box sx={{ width: '100%' }}>
-            <form>
-                <Stack spacing={2}>
-                    <TextField
-                        fullWidth
-                        variant='outlined'
-                        id='login'
-                        label='Логин'
-                        size='normal'
-                        value={data.login}
-                        onChange={e => setData({ ...data, login: e.target.value })}
-                    />
-
-                    <FormControl variant="outlined">
-                        <InputLabel htmlFor="outlined-adornment-password">Пароль</InputLabel>
-                        <OutlinedInput
-                            fullWidth
-                            id="password"
-                            label="Пароль"
-                            size="normal"
-                            type={showPassword ? 'text' : 'password'}
-                            value={data.pass}
-                            onChange={e => setData({ ...data, pass: e.target.value })}
-
-                            endAdornment={
-                                <InputAdornment position="end">
-                                    <IconButton
-                                        aria-label="visibility"
-                                        onClick={handleClickShowPassword}
-                                        onMouseDown={handleMouseDownPassword}
-                                        edge="end"
-                                    >
-                                        {showPassword ? <VisibilityOff /> : <Visibility />}
-                                    </IconButton>
-                                </InputAdornment>
-                            }
-                        />
-                    </FormControl>
-
-                    <Button
-                        size="large"
-                        variant="contained"
-                        disabled={((data.login == '') || (data.pass == '')) || false}
-                        onClick={fullLogin}
-                    >
-                        Войти
-                    </Button>
-                </Stack>
-            </form>
-        </Box>
-    )
-}
-
-
-function RegistrationLink() {
-    const history = useHistory()
-
-    function goToRegistration() {
-        history.push('/registration')
-    }
-
-    return (
-        <Typography
-            variant="subtitle1"
-            sx={{
-                display: 'grid',
-                alignSelf: 'end',
-                justifyContent: 'center',
-                cursor: 'pointer'
-            }}
-            onClick={goToRegistration}
-        >
-            Зарегистрироваться
-        </Typography>
-    )
-}
-
-
-function AuthReg() {
-
-    let location = useLocation();
-    console.log('location: ', location.pathname)
-
-    return (
-        <Box sx={{
-            display: 'grid',
-            height: '80vh',
-            justifyContent: 'center',
-            alignItems: 'center'
-        }}>
-
-            <Paper elevation={3}
-                sx={{
-                    padding: '5px',
-                    width: '400px',
-                    height: '500px',
-                    display: 'grid',
-                    justifyContent: 'center',
-                    alignItems: 'center'
-                }}>
-                <Typography
-                    variant="h4"
-                    noWrap
-                    sx={{
-                        display: 'grid',
-                        fontFamily: 'monospace',
-                        fontWeight: 700,
-                        letterSpacing: '.3rem',
-                        color: 'inherit',
-                        textDecoration: 'none',
-                        flexGrow: '1',
-                        marginTop: '20px',
-                        justifyContent: 'center'
-                    }} >
-                    Hipstagram
-                </Typography>
-
-                <Box
-                    sx={{
-                        display: 'grid',
-                        alignSelf: 'start'
-                    }}>
-                    <LoginForm />
-                </Box>
-
-                {(location.pathname === '/') && <RegistrationLink />}
-            </Paper>
-        </Box >
-    )
-}
-
-
-
-
-function Registration2() {
-    let location = useLocation();
-    console.log('location: ', location.pathname)
-
-
-    return (
-        <div> тут будет регистрация, которая из авторизации</div>
-    )
-}
-
-
-
-
-
-
-// function AuthReg() {
-
-//     let location = useLocation();
-//     console.log('location: ', location.pathname)
-
-
-//     return (
-//         <>
-//             {(location.pathname === '/') ? <Authorization /> : <Registration2 />}
-//         </>
-//     )
-
-// }
-function Authorization() {
-    return (
-        <></>
-    )
-}
-
-
-export { Authorization, Registration2, AuthReg }

js/Project/project/src/components/redux/action.js

@@ -1,5 +1,6 @@
 import { store } from "."
 import { useGetState } from 'react-redux';
+import { useHistory } from "react-router-dom";
 
 const url = 'http://hipstagram.node.ed.asmer.org.ua/graphql'
 
@@ -85,7 +86,7 @@ login(login: $login, password: $password)
 // акшон для логинизации в authReduser
 const actionAuthLogin = token => ({ type: 'AUTH_LOGIN', token })
 // акшон для раззлогинивания
-const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' })
+export const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' })
 
 
 //  запрос на изменение пароля юзера
@@ -247,17 +248,8 @@ export const actionFullRegistration = (login, password) =>
 // Thunk разлогина и последующей полной очистки localStorage
 export const actionFullLogout = () =>
   async dispatch => {
-    // чистим полностью localStorage
     await dispatch(actionAuthLogout())
-
-    // и перебрасываем пользователя на страницу авторизации
-    // window.location.replace('/authorization')
-
-
-    setTimeout(function () {
-      window.location.replace('/')
-    }, 500)
-
+    return {}
   }
 
 
@@ -281,12 +273,15 @@ export const actionAboutMe = () =>
     // парсим все мои посты
     dispatch(actionFeedFindOne([myId], -1, 'MyPosts'))
 
-    // получаем id всех подписок
-    const followingList = (userData?.following).map(user => user?._id)
+    // проверяем, есть ли вообще подписчики и если да, парсим их
+    if (userData?.following) {
+      // получаем id всех подписок
+      const followingList = (userData.following).map(user => user?._id)
 
-    // запрашиваем формирование ленты моих постов (первый параметр - список id, второй - это сортировка постов от новых)
-    dispatch(actionFeedFindOne(followingList, -1, 'MyFeed'))
+      // запрашиваем формирование ленты моих постов (первый параметр - список id, второй - это сортировка постов от новых)
+      dispatch(actionFeedFindOne(followingList, -1, 'MyFeed'))
 
+    }
   }
 
 

js/Project/project/src/components/redux/reducers.js

@@ -51,7 +51,6 @@ export function authReducer(state = {}, { type, token }) {
     }
 
     if (type === 'AUTH_LOGOUT') {
-        // localStorage.removeItem('authToken')
         localStorage.clear()
         return {}
     }

js/Project/project/src/components/structure/header.js

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { connect, useDispatch } from 'react-redux';
+import { store } from '../redux';
+import React, { createContext, useContext, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { connect, useSelector } from 'react-redux';
 
 import { AppBar, Box, Toolbar, Typography, Menu, Container, Avatar, Tooltip, MenuItem, IconButton, Stack } from '@mui/material'
 import { Instagram, AddAPhotoRounded, Search } from '@mui/icons-material';
@@ -9,33 +10,36 @@ import { actionFullLogout } from '../redux/action';
 import { url } from '../../App';
 
 
-
-function UserMenu({ login }) {
+function UserMenu() {
     let history = useHistory()
-    const dispatch = useDispatch()
+    const location = useLocation().pathname
+    const user = useContext(UserContext)
+
+    // потому что запрос на логин не отдает аватар, а только id и login
+    const userData = useSelector(state => state?.promise?.AboutMe?.payload)
 
     const [anchorElUser, setAnchorElUser] = useState(null)
 
+    // отображение/скрытие меню на аватарке
     const handleOpenUserMenu = (event) => {
         setAnchorElUser(event.currentTarget)
     }
-
     const handleCloseUserMenu = () => {
         setAnchorElUser(null)
     }
 
-    function toMyAccount() {
-        history.push(`/user/${login?._id}`)
-    }
+    // Thunk для разлогина и редирект на главную, потому что остальные запросы не работают, если нет токена
+    async function onLogout() {
 
-    function toCreatePost() {
-        history.push('/createpost')
-    }
+        const result = await store.dispatch(actionFullLogout())
 
-    function toSearch() {
-        history.push('/search')
+        // проверяем, реально ли очистили токен (и все хранилище)
+        if (Object.keys(result).length === 0 && location != '/') {
+            history.push('/')
+        }
     }
 
+
     return (
         <Stack
             direction='row'
@@ -45,7 +49,9 @@ function UserMenu({ login }) {
                     color: '#000',
                     transform: 'scale(-1, 1)'
                 }}
-                onClick={toSearch}
+                onClick={() => {
+                    history.push('/search')
+                }}
             >
                 <Search />
             </IconButton>
@@ -54,7 +60,9 @@ function UserMenu({ login }) {
                 sx={{
                     color: '#000'
                 }}
-                onClick={toCreatePost}
+                onClick={() => {
+                    history.push('/createpost')
+                }}
             >
                 <AddAPhotoRounded />
             </IconButton>
@@ -65,8 +73,8 @@ function UserMenu({ login }) {
                         onClick={handleOpenUserMenu}
                     >
                         <Avatar
-                            alt={login?.login}
-                            src={url.slice(0, -7) + login?.avatar?.url}
+                            alt={user?.login}
+                            src={url.slice(0, -7) + userData?.avatar?.url}
                         />
                     </IconButton>
                 </Tooltip>
@@ -90,18 +98,20 @@ function UserMenu({ login }) {
                     onClose={handleCloseUserMenu}
                 >
                     <MenuItem
-                        onClick={toMyAccount}
+                        onClick={() => {
+                            history.push(`/user/${user?.id}`)
+                        }}
                     >
                         <Typography
                             textAlign="center">
                             <span>
-                                {login?.login}
+                                {user?.login}
                             </span>
                         </Typography>
                     </MenuItem>
 
                     <MenuItem
-                        onClick={() => { dispatch(actionFullLogout()) }}
+                        onClick={onLogout}
                     >
                         <Typography
                             textAlign="center"
@@ -117,6 +127,9 @@ function UserMenu({ login }) {
     )
 }
 
+
+const UserContext = createContext()
+
 function Header({ login }) {
     let history = useHistory()
 
@@ -129,48 +142,51 @@ function Header({ login }) {
             position='sticky'
             color='inherit'
         >
-            <Container
-                maxWidth="xl"
-            >
-                <Toolbar
-                    disableGutters
+            <UserContext.Provider value={login}>
+                <Container
+                    maxWidth="xl"
                 >
-                    <Stack
-                        direction='row'
-                        sx={{
-                            display: 'flex',
-                            flexGrow: '1'
-                        }}
+                    <Toolbar
+                        disableGutters
                     >
-                        <IconButton
-                            edge='start'
+                        <Stack
+                            direction='row'
                             sx={{
-                                color: '#000'
+                                display: 'flex',
+                                flexGrow: '1'
                             }}
-                            onClick={toMain}
                         >
-                            <Instagram />
-
-                            <Typography
-                                variant="h6"
+                            <IconButton
+                                edge='start'
                                 sx={{
-                                    fontFamily: 'monospace',
-                                    fontWeight: 700,
-                                    letterSpacing: '.3rem',
-                                    ml: 1
+                                    color: '#000'
                                 }}
+                                onClick={toMain}
                             >
-                                Hipstagram
-                            </Typography>
-                        </IconButton>
-                    </Stack>
-
-                    {login && <UserMenu login={login} />}
-
-                </Toolbar>
-            </Container>
+                                <Instagram />
+
+                                <Typography
+                                    variant="h6"
+                                    sx={{
+                                        fontFamily: 'monospace',
+                                        fontWeight: 700,
+                                        letterSpacing: '.3rem',
+                                        ml: 1
+                                    }}
+                                >
+                                    Hipstagram
+                                </Typography>
+                            </IconButton>
+                        </Stack>
+
+                        {/* {login && <UserMenu login={login} />} */}
+                        {login && <UserMenu />}
+
+                    </Toolbar>
+                </Container>
+            </UserContext.Provider>
         </AppBar>
     )
 }
 
-export const CHeader = connect(state => ({ login: state?.promise?.AboutMe?.payload }))(Header)
+export const CHeader = connect(state => ({ login: state?.auth?.payload?.sub }))(Header)