19.04.2023 15:30

js/Project/project/src/components/post/carousel.js

@@ -7,6 +7,7 @@ import { Box } from '@mui/system';
 
 // карусель
 export function MyCarouselPost({ postImages }) {
+    // console.log('postImages: ', postImages)
 
     return (
         <React.Fragment>

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

@@ -23,7 +23,7 @@ const Item = styled(Paper)(() => ({
 export function Comments({ post = {}, loadPost }) {
     const { postId } = useParams()
     useEffect(() => { loadPost(postId) }, [postId])
-    console.log('post: ', post)
+    // console.log('post: ', post)
 
     return (
         <React.Fragment>

js/Project/project/src/components/user/collections.js

@@ -34,30 +34,34 @@ import {
 
 import { actionFeedFindOne } from '../../redux/action';
 
-import ModalCarousel from './collections_carousel';
+import ModalCarousel from './collections_card';
 import CreateCollection from './collections_create';
 
 export const CollectionContext = createContext()
 
 
 // стили модального окна карусели коллекции
-const style = {
+const styleModal = {
     position: 'absolute',
     top: '50%',
     left: '50%',
     transform: 'translate(-50%, -50%)',
-    width: '80%',
+    minWidth: '400px',
+    width: '50%',
+    // width: '100%',
+    minHeigth: '500px',
     height: '80%',
-    // bgcolor: 'background.paper',
     bgcolor: '#FFF',
-    // border: '2px solid #000',
-    // boxShadow: 12,
-    p: 4,
+    // p: 2,
+    bgcolor: 'background.paper',
+    // boxShadow: 24,
+    outline: 0,
+    borderRadius: 3,
+    padding: '5px 0'
 }
 
 // стили модального окна создания коллекции
-// стили модального окна
-const style2 = {
+const styleCreate = {
     position: 'absolute',
     top: '50%',
     left: '50%',
@@ -82,7 +86,7 @@ const style2 = {
 export default function Collections({ userData }) {
     // console.log('userData: ', userData)
 
-    const history = useHistory()
+    // const history = useHistory()
     const dispatch = useDispatch()
 
     // отслеживаю мой ид
@@ -113,16 +117,51 @@ export default function Collections({ userData }) {
     }
     const handleCloseCreateCollection = () => setOpenCreateCollection(false)
 
+    // отслеживание названия коллекции
+    const [collectionName, setCollectionName] = useState('')
 
     function openCollection(id) {
-        dispatch(actionFullFinCollectionOne(id)).then(res => res && handleOpenCarousel())
+        dispatch(actionFullFinCollectionOne(id)).then(res => {
+            res && handleOpenCarousel()
+            setCollectionName(res?.text)
+        })
+    }
+
+    // горизонтальный скорлл на коллекциях
+    const horizontalScroll = document.getElementById('collection-horizontal-scroll')
+    if (horizontalScroll) {
+        horizontalScroll.addEventListener('wheel', function (event) {
+            if (event.deltaMode == event.DOM_DELTA_PIXEL) {
+                var modifier = 1;
+                // иные режимы возможны в Firefox
+            } else if (event.deltaMode == event.DOM_DELTA_LINE) {
+                var modifier = parseInt(getComputedStyle(this).lineHeight)
+            } else if (event.deltaMode == event.DOM_DELTA_PAGE) {
+                var modifier = this.clientHeight
+            }
+            if (event.deltaY != 0) {
+                // замена вертикальной прокрутки горизонтальной
+                this.scrollLeft += modifier * event.deltaY
+                event.preventDefault()
+            }
+        })
     }
 
 
     return (
         <CollectionContext.Provider value={[openCreateCollection, setOpenCreateCollection]}>
             <React.Fragment>
-                <List sx={{ width: '100%', bgcolor: 'background.paper', display: 'flex', flexDirection: 'row', }} className='collection-scroll'>
+                <List
+                    // className='collection-scroll'
+                    id='collection-horizontal-scroll'
+                    sx={{
+                        width: '100%',
+                        bgcolor: 'background.paper',
+                        display: 'flex',
+                        flexDirection: 'row',
+                        overflowX: 'hidden'
+                    }}
+                >
                     {/* иконка создания коллекций */}
                     {userData === myId &&
                         <ListItem
@@ -179,7 +218,7 @@ export default function Collections({ userData }) {
                                 }}
                             >
                                 <Fade in={openCreateCollection}>
-                                    <Box sx={style2}>
+                                    <Box sx={styleCreate}>
                                         <Stack
                                             direction="row"
                                             justifyContent="space-between"
@@ -275,7 +314,41 @@ export default function Collections({ userData }) {
                                 }}
                             >
                                 <Fade in={openCarousel}>
-                                    <Box sx={style}>
+                                    <Box sx={styleModal}>
+                                        <Stack
+                                            direction="row"
+                                            justifyContent="space-between"
+                                            alignItems="center"
+                                            sx={{
+                                                padding: '0 24px'
+                                            }}
+                                        >
+                                            <Typography
+                                                variant="h6"
+                                                color='text.primary'
+                                                textAlign='center'
+                                                gutterBottom
+                                            >
+                                                {/* Коллекция... */}
+                                                {collectionName}
+                                            </Typography>
+
+                                            <IconButton
+                                                onClick={handleCloseCarousel}
+                                                sx={{
+                                                    position: 'absolute',
+                                                    top: '0px',
+                                                    right: '0px',
+                                                    fontSize: '25px',
+                                                    cursor: 'default'
+                                                }}
+                                            >
+                                                <CloseRounded className='cursor-pointer' />
+                                            </IconButton>
+                                        </Stack>
+
+                                        <Divider />
+
                                         <ModalCarousel />
                                     </Box>
                                 </Fade>

js/Project/project/src/components/user/collections_card.js

@@ -0,0 +1,63 @@
+import { url } from '../../App';
+
+import { useSelector } from 'react-redux';
+
+import { Box } from '@mui/material';
+
+import Carousel from 'react-material-ui-carousel'
+
+import { Comments } from '../post';
+
+import CollectionPost from './collections_card_post';
+
+
+export default function ModalCarousel() {
+
+    // отслеживаем изменения в карусели
+    const collection = useSelector(state => state?.collection?.FindCollectionOne?.payload)
+    // console.log('collection: ', collection)
+
+
+
+    return (
+        <Carousel
+            autoPlay={false}
+            cycleNavigation={false}
+            animation={"slide"}
+            indicatorContainerProps={{
+                style: {
+                    marginTop: '-100px',
+                    zIndex: 999,
+                    position: 'inherit'
+                }
+            }}
+            className='myCarousel'
+            sx={{
+                width: '100%',
+                height: '90%'
+            }}
+        >
+            {collection &&
+                collection?.posts?.map(item =>
+                    <Box
+                        className='carousel-box'
+                        key={item?._id}
+                        sx={{
+                        }}
+                    >
+                        <Box
+                            sx={{
+                                position: 'absolute',
+                                top: '50%',
+                                left: '50%',
+                                transform: 'translate(-50%, -50%)',
+                                width: '80%'
+                            }}
+                        >
+                            <CollectionPost postData={item} />
+                        </Box>
+                    </Box>
+                )}
+        </Carousel>
+    )
+}

js/Project/project/src/components/user/collections_card_post.js

@@ -0,0 +1,14 @@
+import { Box } from "@mui/material"
+import { MyCarouselPost } from "../post/carousel"
+
+export default function CollectionPost({ postData }) {
+    // console.log('postData: ', postData)
+
+    return (
+        <Box>
+            {postData?.title}
+            {postData?.text}
+            <MyCarouselPost postImages={postData?.images} />
+        </Box>
+    )
+}

js/Project/project/src/components/user/collections_carousel.js

@@ -1,37 +0,0 @@
-import { useSelector } from 'react-redux';
-
-import Carousel from 'react-material-ui-carousel'
-
-import { Comments } from '../post';
-
-
-export default function ModalCarousel() {
-
-    // отслеживаем изменения в карусели
-    const collection = useSelector(state => state?.collection?.FindCollectionOne?.payload)
-    console.log('collection: ', collection)
-
-
-
-    return (
-        <Carousel
-            autoPlay={false}
-            cycleNavigation={false}
-            animation={"slide"}
-            indicatorContainerProps={{
-                style: {
-                    marginTop: '-50px',
-                    zIndex: 999,
-                    position: 'inherit'
-                }
-            }}
-            className='myCarousel'
-            sx={{
-                width: '100%',
-                height: '100%'
-            }}
-        >
-            тут будет поста
-        </Carousel>
-    )
-}

js/Project/project/src/components/user/style.scss

@@ -13,26 +13,24 @@
 
 }
 
-.collection-scroll {
-    overflow-x: auto;
-}
-
-.collection-scroll::-webkit-scrollbar {
-    height: 8px;
-}
-
-.collection-scroll::-webkit-scrollbar-track {
-    -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
-    background-color: #f9f9fd;
-    border-radius: 8px;
-}
-
-.collection-scroll::-webkit-scrollbar-thumb {
-    border-radius: 8px;
-    background-color: #e8def8;
-}
-
-
+// .collection-scroll {
+//     overflow-x: hidden;
+// }
+
+// .collection-scroll::-webkit-scrollbar {
+//     height: 8px;
+// }
+
+// .collection-scroll::-webkit-scrollbar-track {
+//     -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
+//     background-color: #f9f9fd;
+//     border-radius: 8px;
+// }
+
+// .collection-scroll::-webkit-scrollbar-thumb {
+//     border-radius: 8px;
+//     background-color: #e8def8;
+// }
 
 @media(max-width: 768px) {
     .user-container {

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

@@ -171,7 +171,7 @@ export default function BasicCard({ userData }) {
             dispatch(actionFilesUpload(selectedFile)).then((res) => {
                 // ставим на аватар после загрузки
                 const newAvatarUrl = url + res[0]?.url;
-                console.log('newUrl', res)
+                // console.log('newUrl', res)
                 setUserAvatarUrl(newAvatarUrl)
 
                 setUpdateProfile({ ...updateProfile, avatar: { _id: res[0]?._id } })

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

@@ -470,7 +470,7 @@ export const actionFindCollectionOne = id => actionPromise('COLLECTIONS', 'FindC
 posts {
   _id createdAt title text likesCount
     images {
-      url
+      _id url
     }
     comments {
       _id createdAt text answers {

js/Project/project/src/redux/thunks.js

@@ -181,7 +181,7 @@ function fileUpload(file) {
 }
 
 function filesUpload(files) {
-    console.log('files', files)
+    // console.log('files', files)
 
     // if (files.length > 1) {
     return Promise.all(files?.map(fileUpload))