|
@@ -1,17 +1,20 @@
|
|
|
import { url } from "../../App"
|
|
|
|
|
|
-import React, { useContext } from 'react';
|
|
|
+import React, { useContext, useState } from 'react';
|
|
|
import { useHistory, useParams } from 'react-router-dom';
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
|
|
-import { CardContent, Typography, Stack, Avatar, Box, Container } from '@mui/material';
|
|
|
+import { CardContent, Typography, Stack, Avatar, Box, Container, Badge, TextField, InputAdornment } from '@mui/material';
|
|
|
import Button from '@mui/material-next/Button';
|
|
|
-import { PersonRemoveRounded, PersonAddRounded, ManageAccountsRounded } from '@mui/icons-material';
|
|
|
+import { PersonRemoveRounded, PersonAddRounded, ManageAccountsRounded, BorderColorRounded, ImageSearchRounded, AccountCircle, HttpsRounded } from '@mui/icons-material';
|
|
|
import { actionUserPageSubscribing } from "../../redux/thunks";
|
|
|
|
|
|
import ModalWindow from '../structure/modal';
|
|
|
+import ChangeData from "./change_data";
|
|
|
import { ModalForCountsContext, UpdateProfile } from "../../App";
|
|
|
|
|
|
+import { EditProfile } from ".";
|
|
|
+
|
|
|
|
|
|
|
|
|
// Функция отображения кнопки редактирования своего профиля/отписки или подписки на другого юзера
|
|
@@ -22,9 +25,12 @@ function UptadeProfileButton({ data }) {
|
|
|
const { userId } = useParams()
|
|
|
const dispatch = useDispatch()
|
|
|
|
|
|
+ // отслеживание нажатия кнопки редактирования профиля
|
|
|
+ const [isEditProfile, setIsEditProfile] = useContext(EditProfile)
|
|
|
+
|
|
|
// контекст обновления профиля
|
|
|
const [updateProfile, setUpdateProfile] = useContext(UpdateProfile)
|
|
|
- console.log('updateProfile: ', updateProfile)
|
|
|
+ // console.log('updateProfile: ', updateProfile)
|
|
|
|
|
|
// определяем мой id
|
|
|
const myId = updateProfile?._id
|
|
@@ -36,7 +42,7 @@ function UptadeProfileButton({ data }) {
|
|
|
const isFollowing = myFollowingList && (myFollowingList)?.some(item => item === (data?.owner?._id || data?._id))
|
|
|
|
|
|
|
|
|
- // функция подписки/отписки
|
|
|
+ // функция подписки/отписки - это чисто кнопка
|
|
|
function isSubscribing() {
|
|
|
|
|
|
// при клике на посте
|
|
@@ -55,80 +61,117 @@ function UptadeProfileButton({ data }) {
|
|
|
|
|
|
// функция перехода на редактирование профиля
|
|
|
function upsertProfile() {
|
|
|
- history.push('/updateprofile')
|
|
|
+ // history.push('/updateprofile')
|
|
|
+ setIsEditProfile(true)
|
|
|
}
|
|
|
|
|
|
|
|
|
return (
|
|
|
- <React.Fragment>
|
|
|
- {userId === myId && <Box
|
|
|
- onClick={upsertProfile}
|
|
|
- >
|
|
|
- <Button
|
|
|
- size="large"
|
|
|
- variant="elevated"
|
|
|
- sx={{
|
|
|
- minWidth: '300px'
|
|
|
- }}
|
|
|
- startIcon={
|
|
|
- <ManageAccountsRounded />
|
|
|
- }
|
|
|
- disableRipple
|
|
|
- >
|
|
|
- <Typography
|
|
|
- variant='button'
|
|
|
- display='block'
|
|
|
- >
|
|
|
- Редактировать аккаунт
|
|
|
- </Typography>
|
|
|
- </Button>
|
|
|
- </Box>}
|
|
|
- {myFollowingList?.includes(userId) && <Box
|
|
|
- onClick={isSubscribing}
|
|
|
+ // <React.Fragment>
|
|
|
+ // {userId === myId && <Box
|
|
|
+ // onClick={upsertProfile}
|
|
|
+ // >
|
|
|
+ // <Button
|
|
|
+ // size="large"
|
|
|
+ // variant="elevated"
|
|
|
+ // sx={{
|
|
|
+ // minWidth: '300px'
|
|
|
+ // }}
|
|
|
+ // startIcon={
|
|
|
+ // <ManageAccountsRounded />
|
|
|
+ // }
|
|
|
+ // disableRipple
|
|
|
+ // >
|
|
|
+ // <Typography
|
|
|
+ // variant='button'
|
|
|
+ // display='block'
|
|
|
+ // >
|
|
|
+ // Редактировать аккаунт
|
|
|
+ // </Typography>
|
|
|
+ // </Button>
|
|
|
+ // </Box>}
|
|
|
+ // {myFollowingList?.includes(userId) && <Box
|
|
|
+ // onClick={isSubscribing}
|
|
|
+ // >
|
|
|
+ // <Button
|
|
|
+ // size="large"
|
|
|
+ // variant="elevated"
|
|
|
+ // sx={{
|
|
|
+ // minWidth: '300px'
|
|
|
+ // }}
|
|
|
+ // startIcon={
|
|
|
+ // <PersonRemoveRounded />
|
|
|
+ // }
|
|
|
+ // disableRipple
|
|
|
+ // >
|
|
|
+ // <Typography
|
|
|
+ // variant='button'
|
|
|
+ // display='block'
|
|
|
+ // >
|
|
|
+ // Отписаться
|
|
|
+ // </Typography>
|
|
|
+ // </Button>
|
|
|
+ // </Box>}
|
|
|
+ // {(userId !== myId && !myFollowingList?.includes(userId)) && <Box
|
|
|
+ // onClick={isSubscribing}
|
|
|
+ // >
|
|
|
+ // <Button
|
|
|
+ // size="large"
|
|
|
+ // variant="filledTonal"
|
|
|
+ // sx={{
|
|
|
+ // minWidth: '300px'
|
|
|
+ // }}
|
|
|
+ // startIcon={
|
|
|
+ // <PersonAddRounded />
|
|
|
+ // }
|
|
|
+ // disableRipple
|
|
|
+ // >
|
|
|
+ // <Typography
|
|
|
+ // variant='button'
|
|
|
+ // display='block'
|
|
|
+ // >
|
|
|
+ // Подписаться
|
|
|
+ // </Typography>
|
|
|
+ // </Button>
|
|
|
+ // </Box>}
|
|
|
+ // </React.Fragment>
|
|
|
+
|
|
|
+
|
|
|
+ <Box
|
|
|
+ onClick={
|
|
|
+ (userId === myId && upsertProfile) ||
|
|
|
+ (myFollowingList?.includes(userId) && isSubscribing) ||
|
|
|
+ ((userId !== myId && !myFollowingList?.includes(userId)) && isSubscribing)}
|
|
|
+ >
|
|
|
+ <Button
|
|
|
+ size="large"
|
|
|
+ // variant="elevated"
|
|
|
+ variant={
|
|
|
+ ((userId === myId) && 'elevated') ||
|
|
|
+ ((myFollowingList?.includes(userId)) && 'elevated') ||
|
|
|
+ ((userId !== myId && !myFollowingList?.includes(userId)) && 'filledTonal')
|
|
|
+ }
|
|
|
+ sx={{
|
|
|
+ minWidth: '300px'
|
|
|
+ }}
|
|
|
+ startIcon={
|
|
|
+ ((userId === myId) && <ManageAccountsRounded />) ||
|
|
|
+ ((myFollowingList?.includes(userId)) && <PersonRemoveRounded />) ||
|
|
|
+ ((userId !== myId && !myFollowingList?.includes(userId)) && <PersonAddRounded />)
|
|
|
+ }
|
|
|
+ disableRipple
|
|
|
>
|
|
|
- <Button
|
|
|
- size="large"
|
|
|
- variant="elevated"
|
|
|
- sx={{
|
|
|
- minWidth: '300px'
|
|
|
- }}
|
|
|
- startIcon={
|
|
|
- <PersonRemoveRounded />
|
|
|
- }
|
|
|
- disableRipple
|
|
|
+ <Typography
|
|
|
+ variant='button'
|
|
|
+ display='block'
|
|
|
>
|
|
|
- <Typography
|
|
|
- variant='button'
|
|
|
- display='block'
|
|
|
- >
|
|
|
- Отписаться
|
|
|
- </Typography>
|
|
|
- </Button>
|
|
|
- </Box>}
|
|
|
- {(userId !== myId && !myFollowingList?.includes(userId)) && <Box
|
|
|
- onClick={isSubscribing}
|
|
|
- >
|
|
|
- <Button
|
|
|
- size="large"
|
|
|
- variant="filledTonal"
|
|
|
- sx={{
|
|
|
- minWidth: '300px'
|
|
|
- }}
|
|
|
- startIcon={
|
|
|
- <PersonAddRounded />
|
|
|
+ {(userId === myId) && 'Редактировать аккаунт' ||
|
|
|
+ (myFollowingList?.includes(userId)) && 'Отписаться' ||
|
|
|
+ (userId !== myId && !myFollowingList?.includes(userId)) && 'Подписаться'
|
|
|
}
|
|
|
- disableRipple
|
|
|
- >
|
|
|
- <Typography
|
|
|
- variant='button'
|
|
|
- display='block'
|
|
|
- >
|
|
|
- Подписаться
|
|
|
- </Typography>
|
|
|
- </Button>
|
|
|
- </Box>}
|
|
|
- </React.Fragment>
|
|
|
-
|
|
|
+ </Typography>
|
|
|
+ </Button>
|
|
|
+ </Box>
|
|
|
)
|
|
|
}
|
|
|
|
|
@@ -141,9 +184,25 @@ export default function BasicCard({ userData }) {
|
|
|
// определяем количество постов пользоваеля
|
|
|
const userPostsCount = useSelector(state => state?.promise?.UserPostsCount?.payload)
|
|
|
|
|
|
+ // контекст обновления профиля
|
|
|
+ const [updateProfile, setUpdateProfile] = useContext(UpdateProfile)
|
|
|
+ // console.log('updateProfile: ', updateProfile)
|
|
|
+
|
|
|
+ // отслеживание нажатия кнопки редактирования профиля
|
|
|
+ const [isEditProfile, setIsEditProfile] = useContext(EditProfile)
|
|
|
+
|
|
|
// контекст модального окна
|
|
|
const [modalName, setModalName, modalArray, setModalArray, openModal, setOpenModal, handleOpenModal, handleCloseModal] = useContext(ModalForCountsContext)
|
|
|
|
|
|
+ // отслеживание статуса изменения пароля
|
|
|
+ const [changePassword, setChangePassword] = useState(false)
|
|
|
+
|
|
|
+ // открытие поля редактирвоания пароля
|
|
|
+ function changePasswordButton() {
|
|
|
+ setChangePassword(true)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
function userFollowers() {
|
|
|
handleOpenModal({
|
|
|
arr: userData?.followers, name: `Подписчики ${userData?.login}`
|
|
@@ -163,85 +222,269 @@ export default function BasicCard({ userData }) {
|
|
|
alignItems: 'center'
|
|
|
}}
|
|
|
>
|
|
|
- <Avatar
|
|
|
+ {/* <Avatar
|
|
|
alt={userData?.login}
|
|
|
src={url + userData?.avatar?.url}
|
|
|
sx={{
|
|
|
width: 130,
|
|
|
height: 130
|
|
|
}}
|
|
|
- />
|
|
|
+ // children={
|
|
|
+ // <BorderColorRounded />
|
|
|
+ // }
|
|
|
+ >
|
|
|
+ <BorderColorRounded sx={{
|
|
|
+ color: 'black',
|
|
|
+ zIndex: 999
|
|
|
+ }} />
|
|
|
+ </Avatar> */}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
<Box
|
|
|
sx={{
|
|
|
- display: 'flex',
|
|
|
- flexDirection: 'column',
|
|
|
- marginLeft: '50px '
|
|
|
- }}
|
|
|
- >
|
|
|
- <CardContent sx={{
|
|
|
- flex: '1 0 auto'
|
|
|
- }}
|
|
|
- >
|
|
|
- <Stack
|
|
|
+ position: 'relative',
|
|
|
+ display: 'inline-block'
|
|
|
+ }}>
|
|
|
+ <Avatar
|
|
|
+ alt={userData?.login}
|
|
|
+ src={url + userData?.avatar?.url}
|
|
|
+ sx={{
|
|
|
+ width: 130,
|
|
|
+ height: 130
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ {isEditProfile &&
|
|
|
+ <Box
|
|
|
sx={{
|
|
|
- justifyContent: 'space-between'
|
|
|
+ position: 'absolute',
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ width: '100%',
|
|
|
+ height: '100%',
|
|
|
+ display: 'flex',
|
|
|
+ justifyContent: 'center',
|
|
|
+ alignItems: 'center',
|
|
|
+ zIndex: 1,
|
|
|
+ '&:before': {
|
|
|
+ content: '""',
|
|
|
+ position: 'absolute',
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ width: '100%',
|
|
|
+ height: '100%',
|
|
|
+ backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
+ zIndex: -1,
|
|
|
+ borderRadius: '50%',
|
|
|
+ }
|
|
|
}}
|
|
|
- direction="row"
|
|
|
- spacing={2}
|
|
|
>
|
|
|
+ <ImageSearchRounded
|
|
|
+ sx={{
|
|
|
+ color: '#FFF',
|
|
|
+ fontSize: '40px'
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </Box>}
|
|
|
+ </Box>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ {!isEditProfile &&
|
|
|
+ <Box
|
|
|
+ sx={{
|
|
|
+ display: 'flex',
|
|
|
+ flexDirection: 'column',
|
|
|
+ marginLeft: '50px '
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <CardContent sx={{
|
|
|
+ flex: '1 0 auto'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Stack
|
|
|
+ sx={{
|
|
|
+ justifyContent: 'space-between'
|
|
|
+ }}
|
|
|
+ direction="row"
|
|
|
+ spacing={2}
|
|
|
+ >
|
|
|
+ <Typography
|
|
|
+ component="div"
|
|
|
+ variant="h4"
|
|
|
+ >
|
|
|
+ {userData?.login}
|
|
|
+ </Typography>
|
|
|
+
|
|
|
+ <UptadeProfileButton data={userData} />
|
|
|
+ </Stack>
|
|
|
+
|
|
|
<Typography
|
|
|
+ variant="subtitle1"
|
|
|
+ color="text.secondary"
|
|
|
component="div"
|
|
|
- variant="h4"
|
|
|
>
|
|
|
- {userData?.login}
|
|
|
+ {userData?.nick || ''}
|
|
|
</Typography>
|
|
|
+ </CardContent>
|
|
|
|
|
|
- <UptadeProfileButton data={userData} />
|
|
|
- </Stack>
|
|
|
-
|
|
|
- <Typography
|
|
|
- variant="subtitle1"
|
|
|
- color="text.secondary"
|
|
|
- component="div"
|
|
|
- >
|
|
|
- {userData?.nick || ''}
|
|
|
- </Typography>
|
|
|
- </CardContent>
|
|
|
-
|
|
|
- <Stack
|
|
|
- direction="row"
|
|
|
- spacing={5}
|
|
|
- padding={2}
|
|
|
- paddingTop={1}
|
|
|
- >
|
|
|
- <Typography
|
|
|
- variant="subtitle1"
|
|
|
+ <Stack
|
|
|
+ direction="row"
|
|
|
+ spacing={5}
|
|
|
+ padding={2}
|
|
|
+ paddingTop={1}
|
|
|
>
|
|
|
- {userPostsCount || '0'} публикаций
|
|
|
- </Typography>
|
|
|
+ <Typography
|
|
|
+ variant="subtitle1"
|
|
|
+ >
|
|
|
+ {userPostsCount || '0'} публикаций
|
|
|
+ </Typography>
|
|
|
|
|
|
- <Typography
|
|
|
- sx={{
|
|
|
- cursor: 'pointer'
|
|
|
- }}
|
|
|
- variant="subtitle1"
|
|
|
- onClick={userFollowers}
|
|
|
- >
|
|
|
- {userData?.followers?.length || '0'} подписчиков
|
|
|
- </Typography>
|
|
|
+ <Typography
|
|
|
+ sx={{
|
|
|
+ cursor: 'pointer'
|
|
|
+ }}
|
|
|
+ variant="subtitle1"
|
|
|
+ onClick={userFollowers}
|
|
|
+ >
|
|
|
+ {userData?.followers?.length || '0'} подписчиков
|
|
|
+ </Typography>
|
|
|
|
|
|
- <Typography
|
|
|
- sx={{
|
|
|
- cursor: 'pointer'
|
|
|
- }}
|
|
|
- variant="subtitle1"
|
|
|
- onClick={userFollowing}
|
|
|
- >
|
|
|
- {userData?.following?.length || '0'} подписок
|
|
|
- </Typography>
|
|
|
- </Stack>
|
|
|
- </Box>
|
|
|
+ <Typography
|
|
|
+ sx={{
|
|
|
+ cursor: 'pointer'
|
|
|
+ }}
|
|
|
+ variant="subtitle1"
|
|
|
+ onClick={userFollowing}
|
|
|
+ >
|
|
|
+ {userData?.following?.length || '0'} подписок
|
|
|
+ </Typography>
|
|
|
+ </Stack>
|
|
|
+ </Box>}
|
|
|
+
|
|
|
+ {isEditProfile && <ChangeData />
|
|
|
+ // <Box
|
|
|
+ // sx={{
|
|
|
+ // display: 'flex',
|
|
|
+ // flexDirection: 'column',
|
|
|
+ // marginLeft: '50px '
|
|
|
+ // }}
|
|
|
+ // >
|
|
|
+ // {/* <CardContent sx={{
|
|
|
+ // flex: '1 0 auto'
|
|
|
+ // }}
|
|
|
+ // > */}
|
|
|
+ // <Stack
|
|
|
+ // sx={{
|
|
|
+ // justifyContent: 'space-between',
|
|
|
+ // marginBottom: '10px'
|
|
|
+ // }}
|
|
|
+ // direction="row"
|
|
|
+ // spacing={2}
|
|
|
+ // >
|
|
|
+ // <Box
|
|
|
+ // sx={{
|
|
|
+ // display: 'flex',
|
|
|
+ // alignItems: 'flex-end'
|
|
|
+ // }}>
|
|
|
+ // <AccountCircle
|
|
|
+ // sx={{
|
|
|
+ // color: 'action.active',
|
|
|
+ // mr: 1, my: 0.5
|
|
|
+ // }} />
|
|
|
+ // <TextField
|
|
|
+ // id="input-new-login"
|
|
|
+ // label="Новый логин"
|
|
|
+ // variant="standard" />
|
|
|
+ // </Box>
|
|
|
+
|
|
|
+ // <Box
|
|
|
+ // sx={{
|
|
|
+ // display: 'flex',
|
|
|
+ // alignItems: 'flex-end'
|
|
|
+ // }}>
|
|
|
+ // <AccountCircle
|
|
|
+ // sx={{
|
|
|
+ // color: 'action.active',
|
|
|
+ // mr: 1, my: 0.5
|
|
|
+ // }} />
|
|
|
+ // <TextField
|
|
|
+ // id="input-new-nick"
|
|
|
+ // label="Новый ник-нейм"
|
|
|
+ // variant="standard" />
|
|
|
+ // </Box>
|
|
|
+ // </Stack>
|
|
|
+
|
|
|
+ // <Stack
|
|
|
+ // sx={{
|
|
|
+ // justifyContent: 'space-between',
|
|
|
+ // marginBottom: '10px'
|
|
|
+ // }}
|
|
|
+ // direction="row"
|
|
|
+ // spacing={2}
|
|
|
+ // >
|
|
|
+ // <Box
|
|
|
+ // onClick={changePasswordButton}
|
|
|
+ // >
|
|
|
+ // <Button
|
|
|
+ // sx={{
|
|
|
+ // padding: '5px 20px'
|
|
|
+ // }}
|
|
|
+ // size="small"
|
|
|
+ // variant="text"
|
|
|
+ // >
|
|
|
+ // Редактировать пароль
|
|
|
+ // </Button>
|
|
|
+ // </Box>
|
|
|
+
|
|
|
+ // {changePassword &&
|
|
|
+ // <React.Fragment>
|
|
|
+ // <Box
|
|
|
+ // sx={{
|
|
|
+ // display: 'flex',
|
|
|
+ // alignItems: 'flex-end'
|
|
|
+ // }}>
|
|
|
+ // <HttpsRounded
|
|
|
+ // sx={{
|
|
|
+ // color: 'action.active',
|
|
|
+ // mr: 1, my: 0.5
|
|
|
+ // }} />
|
|
|
+ // <TextField
|
|
|
+ // id="input-new-login"
|
|
|
+ // label="Старый пароль"
|
|
|
+ // variant="standard" />
|
|
|
+ // </Box>
|
|
|
+
|
|
|
+ // <Box
|
|
|
+ // sx={{
|
|
|
+ // display: 'flex',
|
|
|
+ // alignItems: 'flex-end'
|
|
|
+ // }}>
|
|
|
+ // <HttpsRounded
|
|
|
+ // sx={{
|
|
|
+ // color: 'action.active',
|
|
|
+ // mr: 1, my: 0.5
|
|
|
+ // }} />
|
|
|
+ // <TextField
|
|
|
+ // id="input-new-nick"
|
|
|
+ // label="Новый пароль"
|
|
|
+ // variant="standard" />
|
|
|
+ // </Box>
|
|
|
+ // </React.Fragment>}
|
|
|
+ // </Stack>
|
|
|
+
|
|
|
+ // <Button
|
|
|
+ // size="medium"
|
|
|
+ // variant="filledTonal"
|
|
|
+ // sx={{
|
|
|
+ // maxWidth: '300px'
|
|
|
+ // }}
|
|
|
+ // >
|
|
|
+ // Сохранить изменения
|
|
|
+ // </Button>
|
|
|
+ // </Box>
|
|
|
+ }
|
|
|
|
|
|
{modalArray && <ModalWindow />}
|
|
|
</Container>
|