|
@@ -0,0 +1,291 @@
|
|
|
|
+import { url } from '../../App';
|
|
|
|
+
|
|
|
|
+import React, { createContext, useEffect, useState } from 'react';
|
|
|
|
+import {
|
|
|
|
+ List,
|
|
|
|
+ ListItem,
|
|
|
|
+ Divider,
|
|
|
|
+ ListItemText,
|
|
|
|
+ ListItemAvatar,
|
|
|
|
+ Avatar,
|
|
|
|
+ Typography,
|
|
|
|
+ IconButton,
|
|
|
|
+ Backdrop,
|
|
|
|
+ Box,
|
|
|
|
+ Modal,
|
|
|
|
+ Fade,
|
|
|
|
+ Button,
|
|
|
|
+ Stack
|
|
|
|
+} from '@mui/material'
|
|
|
|
+
|
|
|
|
+import {
|
|
|
|
+ AddRounded,
|
|
|
|
+ CloseRounded
|
|
|
|
+} from '@mui/icons-material';
|
|
|
|
+import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
+import { useHistory, useParams } from 'react-router-dom';
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+import {
|
|
|
|
+ actionFullFindCollections
|
|
|
|
+ , actionFullFinCollectionOne
|
|
|
|
+} from '../../redux/thunks';
|
|
|
|
+
|
|
|
|
+import { actionFeedFindOne } from '../../redux/action';
|
|
|
|
+
|
|
|
|
+import ModalCarousel from './collections_carousel';
|
|
|
|
+import CreateCollection from './collections_create';
|
|
|
|
+
|
|
|
|
+export const CollectionContext = createContext()
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+// стили модального окна карусели коллекции
|
|
|
|
+const style = {
|
|
|
|
+ position: 'absolute',
|
|
|
|
+ top: '50%',
|
|
|
|
+ left: '50%',
|
|
|
|
+ transform: 'translate(-50%, -50%)',
|
|
|
|
+ width: '80%',
|
|
|
|
+ height: '80%',
|
|
|
|
+ // bgcolor: 'background.paper',
|
|
|
|
+ bgcolor: '#FFF',
|
|
|
|
+ // border: '2px solid #000',
|
|
|
|
+ // boxShadow: 12,
|
|
|
|
+ p: 4,
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// стили модального окна создания коллекции
|
|
|
|
+// стили модального окна
|
|
|
|
+const style2 = {
|
|
|
|
+ position: 'absolute',
|
|
|
|
+ top: '50%',
|
|
|
|
+ left: '50%',
|
|
|
|
+ transform: 'translate(-50%, -50%)',
|
|
|
|
+ width: '50%',
|
|
|
|
+ maxWidth: '500px',
|
|
|
|
+ maxHeight: '80%',
|
|
|
|
+ bgcolor: '#FFF',
|
|
|
|
+ p: 2,
|
|
|
|
+ bgcolor: 'background.paper',
|
|
|
|
+ boxShadow: 24,
|
|
|
|
+ outline: 0,
|
|
|
|
+ borderRadius: 3,
|
|
|
|
+ padding: '5px 0'
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+export default function Collections({ userData }) {
|
|
|
|
+ // console.log('userData: ', userData)
|
|
|
|
+
|
|
|
|
+ const history = useHistory()
|
|
|
|
+ const dispatch = useDispatch()
|
|
|
|
+
|
|
|
|
+ // отслеживаю мой ид
|
|
|
|
+ const myId = useSelector(state => state?.auth?.payload?.sub?.id)
|
|
|
|
+
|
|
|
|
+ // запуск загрузки всех коллекций юзера при изменении ид
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ dispatch(actionFullFindCollections(userData))
|
|
|
|
+ }, [userData])
|
|
|
|
+
|
|
|
|
+ // подписываемся на загрузку коллекций
|
|
|
|
+ const allCollections = useSelector(state => state?.collection?.FindCollections?.payload)
|
|
|
|
+ // console.log('allCollections: ', allCollections)
|
|
|
|
+
|
|
|
|
+ // управление модальным окном коллекции
|
|
|
|
+ const [openCarousel, setOpenCarousel] = useState(false)
|
|
|
|
+ const handleOpenCarousel = () => setOpenCarousel(true)
|
|
|
|
+ const handleCloseCarousel = () => setOpenCarousel(false)
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ // управление модальным окном создания коллекции
|
|
|
|
+ const [openCreateCollection, setOpenCreateCollection] = useState(false)
|
|
|
|
+ const handleOpenCreateCollection = () => {
|
|
|
|
+ dispatch(actionFeedFindOne([myId], -1, 100, 'PostListCollection', 'COLLECTIONS', 0)).then(res => {
|
|
|
|
+ if (res) setOpenCreateCollection(true)
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ const handleCloseCreateCollection = () => setOpenCreateCollection(false)
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ function openCollection(id) {
|
|
|
|
+ dispatch(actionFullFinCollectionOne(id)).then(res => res && handleOpenCarousel())
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ return (
|
|
|
|
+ <CollectionContext.Provider value={[openCreateCollection, setOpenCreateCollection]}>
|
|
|
|
+ <React.Fragment>
|
|
|
|
+ <List sx={{ width: '100%', bgcolor: 'background.paper', display: 'flex', flexDirection: 'row', }} className='collection-scroll'>
|
|
|
|
+ {/* иконка создания коллекций */}
|
|
|
|
+ {userData === myId &&
|
|
|
|
+ <ListItem
|
|
|
|
+ alignItems="flex-start"
|
|
|
|
+ sx={{
|
|
|
|
+ flexDirection: 'column',
|
|
|
|
+ alignItems: 'center',
|
|
|
|
+ width: 'fit-content'
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ <ListItemAvatar
|
|
|
|
+ className='cursor-pointer'
|
|
|
|
+ onClick={handleOpenCreateCollection}
|
|
|
|
+ >
|
|
|
|
+ <Avatar sx={{ width: 100, height: 100 }}>
|
|
|
|
+ <AddRounded
|
|
|
|
+ fontSize='large'
|
|
|
|
+ sx={{ color: '#FFF' }}
|
|
|
|
+ />
|
|
|
|
+ </Avatar>
|
|
|
|
+ </ListItemAvatar>
|
|
|
|
+
|
|
|
|
+ <ListItemText
|
|
|
|
+ sx={{
|
|
|
|
+ whiteSpace: 'nowrap',
|
|
|
|
+ overflow: 'hidden',
|
|
|
|
+ textOverflow: 'ellipsis',
|
|
|
|
+ textAlign: 'center',
|
|
|
|
+ width: 90
|
|
|
|
+ }}
|
|
|
|
+ primary={
|
|
|
|
+ <Typography
|
|
|
|
+ sx={{ display: 'inline' }}
|
|
|
|
+ component="span"
|
|
|
|
+ variant="body2"
|
|
|
|
+ color="text.primary"
|
|
|
|
+ >
|
|
|
|
+ Новая коллекция
|
|
|
|
+ </Typography>
|
|
|
|
+ }
|
|
|
|
+ />
|
|
|
|
+
|
|
|
|
+ <Modal
|
|
|
|
+ aria-labelledby="modal-collection"
|
|
|
|
+ aria-describedby="modal-collection"
|
|
|
|
+ open={openCreateCollection}
|
|
|
|
+ onClose={handleCloseCreateCollection}
|
|
|
|
+ closeAfterTransition
|
|
|
|
+ slots={{ backdrop: Backdrop }}
|
|
|
|
+ slotProps={{
|
|
|
|
+ backdrop: {
|
|
|
|
+ timeout: 500,
|
|
|
|
+ },
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ <Fade in={openCreateCollection}>
|
|
|
|
+ <Box sx={style2}>
|
|
|
|
+ <Stack
|
|
|
|
+ direction="row"
|
|
|
|
+ justifyContent="space-between"
|
|
|
|
+ alignItems="center"
|
|
|
|
+ sx={{
|
|
|
|
+ padding: '0 24px'
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ <Typography
|
|
|
|
+ variant="h6"
|
|
|
|
+ color='text.primary'
|
|
|
|
+ textAlign='center'
|
|
|
|
+ gutterBottom
|
|
|
|
+ >
|
|
|
|
+ Создание коллекции
|
|
|
|
+ </Typography>
|
|
|
|
+
|
|
|
|
+ <IconButton
|
|
|
|
+ onClick={handleCloseCreateCollection}
|
|
|
|
+ sx={{
|
|
|
|
+ position: 'absolute',
|
|
|
|
+ top: '0px',
|
|
|
|
+ right: '0px',
|
|
|
|
+ fontSize: '25px',
|
|
|
|
+ cursor: 'default'
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ <CloseRounded className='cursor-pointer' />
|
|
|
|
+ </IconButton>
|
|
|
|
+ </Stack>
|
|
|
|
+
|
|
|
|
+ <Divider />
|
|
|
|
+
|
|
|
|
+ <CreateCollection />
|
|
|
|
+ </Box>
|
|
|
|
+ </Fade>
|
|
|
|
+ </Modal>
|
|
|
|
+ </ListItem>}
|
|
|
|
+
|
|
|
|
+ {/* список всех коллекций пользователя */}
|
|
|
|
+ {allCollections?.length > 0 && allCollections?.map(item =>
|
|
|
|
+ <ListItem
|
|
|
|
+ alignItems="flex-start"
|
|
|
|
+ key={item?._id}
|
|
|
|
+ title={item?.text}
|
|
|
|
+ sx={{
|
|
|
|
+ flexDirection: 'column',
|
|
|
|
+ alignItems: 'center',
|
|
|
|
+ width: 'fit-content'
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ <ListItemAvatar>
|
|
|
|
+ <Avatar
|
|
|
|
+ className='cursor-pointer'
|
|
|
|
+ alt={item?.text}
|
|
|
|
+ src={url + item?.posts[0]?.images[0]?.url}
|
|
|
|
+ onClick={() => openCollection(item?._id)}
|
|
|
|
+ sx={{ width: 100, height: 100 }}
|
|
|
|
+ />
|
|
|
|
+ </ListItemAvatar>
|
|
|
|
+
|
|
|
|
+ <ListItemText
|
|
|
|
+ sx={{
|
|
|
|
+ whiteSpace: 'nowrap',
|
|
|
|
+ overflow: 'hidden',
|
|
|
|
+ textOverflow: 'ellipsis',
|
|
|
|
+ textAlign: 'center',
|
|
|
|
+ width: 90
|
|
|
|
+ }}
|
|
|
|
+ primary={
|
|
|
|
+ <Typography
|
|
|
|
+ sx={{ display: 'inline' }}
|
|
|
|
+ component="span"
|
|
|
|
+ variant="body2"
|
|
|
|
+ color="text.primary"
|
|
|
|
+ >
|
|
|
|
+ {item?.text}
|
|
|
|
+ </Typography>
|
|
|
|
+ }
|
|
|
|
+ />
|
|
|
|
+
|
|
|
|
+ <Modal
|
|
|
|
+ aria-labelledby="modal-collection"
|
|
|
|
+ aria-describedby="modal-collection"
|
|
|
|
+ open={openCarousel}
|
|
|
|
+ onClose={handleCloseCarousel}
|
|
|
|
+ closeAfterTransition
|
|
|
|
+ slots={{ backdrop: Backdrop }}
|
|
|
|
+ slotProps={{
|
|
|
|
+ backdrop: {
|
|
|
|
+ timeout: 500,
|
|
|
|
+ },
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ <Fade in={openCarousel}>
|
|
|
|
+ <Box sx={style}>
|
|
|
|
+ <ModalCarousel />
|
|
|
|
+ </Box>
|
|
|
|
+ </Fade>
|
|
|
|
+ </Modal>
|
|
|
|
+ </ListItem>
|
|
|
|
+ )}
|
|
|
|
+ </List>
|
|
|
|
+
|
|
|
|
+ {(userData === myId || allCollections?.length > 0) && <Divider sx={{ marginTop: 1 }} />}
|
|
|
|
+ </React.Fragment>
|
|
|
|
+ </CollectionContext.Provider>
|
|
|
|
+ )
|
|
|
|
+}
|