homework/js/Project/project/src/components/user/userData.js

import { url } from "../../App"

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, Badge, TextField, InputAdornment } from '@mui/material';
import Button from '@mui/material-next/Button';
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 ".";



// Функция отображения кнопки редактирования своего профиля/отписки или подписки на другого юзера
function UptadeProfileButton({ data }) {
    // console.log('UserData: ', data)

    const history = useHistory()
    const { userId } = useParams()
    const dispatch = useDispatch()

    // отслеживание нажатия кнопки редактирования профиля
    const [isEditProfile, setIsEditProfile] = useContext(EditProfile)

    // контекст обновления профиля
    const [updateProfile, setUpdateProfile] = useContext(UpdateProfile)
    // console.log('updateProfile: ', updateProfile)

    // определяем мой id
    const myId = updateProfile?._id

    // определяем всех моих подписчиков
    const myFollowingList = updateProfile?.following?.map(user => user?._id)

    // проверка, является ли пользователь моим подписчиком
    const isFollowing = myFollowingList && (myFollowingList)?.some(item => item === (data?.owner?._id || data?._id))


    // функция подписки/отписки - это чисто кнопка
    function isSubscribing() {

        // при клике на посте
        const newData = {
            ...updateProfile, following: (isFollowing
                ? updateProfile?.following?.filter(item => item?._id !== (data?.owner?._id || data?._id)) // отписка
                // : [...updateProfile?.following, { _id: (data?.owner?._id || data?._id) }] // подписка
                : updateProfile?.following
                    ? [...updateProfile?.following, { _id: (data?.owner?._id || data?._id) }] // подписка если уже есть кто-то в подписках
                    : [{ _id: (data?.owner?._id || data?._id) }] // подписка, если это первая подписка
            )
        }

        dispatch(actionUserPageSubscribing(newData, userId))
    }

    // функция перехода на редактирование профиля
    function upsertProfile() {
        // 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}
        //     >
        //         <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
            >
                <Typography
                    variant='button'
                    display='block'
                >
                    {(userId === myId) && 'Редактировать аккаунт' ||
                        (myFollowingList?.includes(userId)) && 'Отписаться' ||
                        (userId !== myId && !myFollowingList?.includes(userId)) && 'Подписаться'
                    }
                </Typography>
            </Button>
        </Box>
    )
}



// блок пользовательских данных
export default function BasicCard({ userData }) {
    // console.log('userData: ', 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}`
        })
    }

    function userFollowing() {
        handleOpenModal({
            arr: userData?.following, name: `Подписки ${userData?.login}`
        })
    }


    return (
        <Container sx={{
            display: 'flex',
            alignItems: 'center'
        }}
        >
            {/* <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={{
                    position: 'relative',
                    display: 'inline-block'
                }}>
                <Avatar
                    alt={userData?.login}
                    src={url + userData?.avatar?.url}
                    sx={{
                        width: 130,
                        height: 130
                    }}
                />
                {isEditProfile &&
                    <Box
                        sx={{
                            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%',
                            }
                        }}
                    >
                        <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"
                        >
                            {userData?.nick || ''}
                        </Typography>
                    </CardContent>

                    <Stack
                        direction="row"
                        spacing={5}
                        padding={2}
                        paddingTop={1}
                    >
                        <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={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>
    )
}