11.03.2023 12:00

js/Project/project/src/App.css

@@ -32,7 +32,12 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
 }
+
+a {
+  text-decoration: none;
+}

js/Project/project/src/components/feed/card.js

@@ -4,11 +4,13 @@ import Grid from '@mui/material/Unstable_Grid2';
 
 import { Link } from 'react-router-dom';
 
-import { MyCarousel } from './carousel';
+import { MyCarousel } from './carousel_feed';
 
 import { url } from '../../App';
 
 export function RecipeReviewCard({ postData }) {
+    // console.log('test ', postData)
+
     // формируем дату поста
     const dateofPost = new Date(+postData.createdAt)
     const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']

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

@@ -9,7 +9,7 @@ import { Container } from '@mui/system';
 import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
 
 import { actionfindPosts, actionFindUserOne } from '../redux/action';
-import { RecipeReviewCard as Card } from './card';
+import { RecipeReviewCard as Card } from './card_feed';
 import AboutMe from './aboutMe';
 
 // сам item для поста

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

@@ -0,0 +1,139 @@
+import { url } from "../../App";
+import { Link } from "react-router-dom";
+
+import { Card, CardHeader, CardContent, CardActions, Avatar, IconButton, Typography, Box, Divider, TextField } from '@mui/material'
+import { FavoriteBorderRounded, Send, ChatBubbleOutline, TurnedInNot, AccountCircle } from '@mui/icons-material/'
+import Grid from '@mui/material/Unstable_Grid2';
+
+
+
+
+export function CardPost({ postData }) {
+    console.log('test: ', postData)
+
+    // дата поста
+    const dateofPost = new Date(+postData.createdAt)
+    const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
+    const dateofPostParse = `${dateofPost.getDate() < 10 ? '0' + dateofPost.getDate() : dateofPost.getDate()} ${months[dateofPost.getMonth()]} ${dateofPost.getFullYear()}  ${dateofPost.getHours()}:${dateofPost.getMinutes() < 10 ? '0' + dateofPost.getMinutes() : dateofPost.getMinutes()}`
+
+
+
+
+
+    return (
+        <Card className="tututu" sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '80vh',
+            borderRadius: 0
+        }}>
+            <CardHeader
+                avatar={
+                    <Avatar
+                        alt=""
+                        src={(url.slice(0, -7) + postData?.owner?.avatar?.url)}
+                        sx={{ width: 50, height: 50 }}
+                        style={{ margin: '5px', border: '3px solid black', borderRadius: '50%', flexShrink: '0', overflow: 'hidden' }}
+                    />
+                }
+                title={
+                    <Link
+                        to={`/user/${postData?.owner?._id}`}>
+                        {postData?.owner?.login}
+                    </Link>
+                }
+                subheader={dateofPostParse}
+            />
+
+            <Divider />
+
+            <CardActions sx={{
+                flex: '1 1 auto',
+                alignItems: 'flex-start'
+            }}>
+                <CardContent>
+                    <Grid container spacing={1}>
+                        <Grid xs={3}>
+                            {/* <Item> */}
+                            <Avatar
+                                alt=""
+                                src={(url.slice(0, -7) + postData?.owner?.avatar?.url)}
+                                sx={{ width: 50, height: 50 }}
+                                style={{ margin: '5px', border: '3px solid black', borderRadius: '50%', flexShrink: '0', overflow: 'hidden' }}
+                            />
+                            {/* </Item> */}
+                        </Grid>
+                        <Grid xs={9}>
+                            {/* <Item> */}
+                            <Typography variant="subtitle2" color="text.secondary">
+                                {postData.title}
+                            </Typography>
+                            <Typography variant="body2" color="text.secondary">
+                                {postData.text}
+                            </Typography>
+                            {/* </Item> */}
+                        </Grid>
+                    </Grid>
+                </CardContent>
+            </CardActions>
+
+            <Divider />
+
+            <CardActions disableSpacing>
+                <Box sx={{ flexGrow: 1 }}>
+                    <Grid container>
+                        <Grid
+                            xs={12}
+                            container
+                            justifyContent="space-between"
+                            alignItems="center"
+                            flexDirection={{ xs: 'column', sm: 'row' }}
+                            sx={{ fontSize: '12px' }}
+                        >
+                            <Grid container columnSpacing={1} sx={{ order: { xs: 2, sm: 1 } }}>
+                                <Grid>
+                                    <IconButton aria-label="add to favorites">
+                                        <FavoriteBorderRounded />
+                                    </IconButton>
+                                </Grid>
+                                <Grid>
+                                    <IconButton>
+                                        <ChatBubbleOutline />
+                                    </IconButton>
+                                </Grid>
+                                <Grid>
+                                    <IconButton aria-label="share">
+                                        <Send />
+                                    </IconButton>
+                                </Grid>
+                            </Grid>
+                            <Grid sx={{ order: { xs: 1, sm: 2 } }}>
+                                <IconButton>
+                                    <TurnedInNot />
+                                </IconButton>
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                </Box>
+            </CardActions>
+
+
+            <CardContent>
+                Нравится: {postData.likesCount ? postData.likesCount : '0'}
+                {/* Нравится: {postData.likesCount || '0'} // сработает или нет - проверить */}
+            </CardContent>
+
+            <Divider />
+
+            <CardActions>
+                <Box sx={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
+                    <AccountCircle sx={{ color: 'action.active', mr: 1, my: 0.5 }} />
+                    <TextField id="input-with-sx" label="Add comment..." variant="standard" />
+                    <Send sx={{ color: 'action.active', mr: 1, my: 0.5 }} />
+                </Box>
+
+            </CardActions>
+
+        </Card>
+    )
+}

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

@@ -0,0 +1,53 @@
+import Carousel from 'react-material-ui-carousel'
+
+// айтемы для каждой картинки
+function Item(props) {
+    return (
+        <div className="tut-kartinka" style={{
+            display: 'flex',
+            justifyContent: 'center'
+        }}>
+            <img alt='alt' src={props.item.url} style={{
+                maxWidth: '100%',
+                maxHeight: '100%'
+            }} />
+        </div>
+    )
+}
+
+// сама карусель - ее нужно вынеси в отдельный контенйре
+export function MyCarouselPost(props) {
+
+    let items = [
+        {
+            url: "/images/image4.jpeg"
+        },
+        {
+            url: "/images/image.jpeg"
+        },
+        {
+            url: "/images/image2.jpeg"
+        },
+
+    ]
+
+    return (
+        <Carousel autoPlay={false} cycleNavigation={false} animation={"slide"} indicatorContainerProps={{
+            style: {
+                marginTop: '-50px',
+                zIndex: 999,
+                position: 'inherit'
+            }
+
+        }} className='tut-blok-kartinki' sx={{
+            width: '100%'
+        }}>
+            {
+                items.map((item, i) =>
+                    <Item key={i} item={item}
+                    />)
+            }
+        </Carousel >
+    )
+}
+

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

@@ -1,97 +1,64 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { connect } from 'react-redux';
 
 import { actionFindPostOne } from '../redux/action';
-import { Container } from '@mui/system';
-import Grid from '@mui/material/Grid'; // Grid version 1
 import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
-import { Paper, Box } from '@mui/material';
+import { Paper, Box, Card, CardHeader, Avatar } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
-import { MyCarousel } from '../feed/carousel';
+import { MyCarouselPost } from './carousel_post';
+
+import { url } from '../../App';
+import { CardPost } from './card_post';
 
 
 const Item = styled(Paper)(() => ({
-    // padding: '0 10px',
     borderRadius: 0,
     boxShadow: 'none',
 }))
 
 
 function Comments({ post = {}, loadPost }) {
+    console.log('start')
+    console.log('post: ', post)
 
-    // const post2 = useSelector(state => state?.CategoryGoodsAndSubCategoryGoods?.payload)
-    const { postId } = useParams() // отслеживаем изменения в урле
-    useEffect(() => { loadPost(postId) }, [postId]) // перезапускаем loadPost, если произошло изменение в урле
-
-    // console.log('post: ', post)
-    // console.log('comment: ', post.comments[0]
-    // )
+    const { postId } = useParams()
+    useEffect(() => { loadPost(postId) }, [postId])
 
     return (
-        // <div>
-        //     {/* <div>{user} and {postId}</div> */}
-        //     <h2>{post.createdAt}</h2>
-        //     {post._id}
-        //     <p></p>
-        // </div>
-        // <Container>
-        //     <Grid container spacing={2}>
-        //         <Grid xs={9}>
-        //             <div style={{ backgroundColor: "red" }}>
-        //                 <MyCarousel />
-        //             </div>
-        //         </Grid>
-        //         <Grid xs={3}>
-        //             <div style={{ backgroundColor: "yellow" }}>
-        //                 jhjh
-        //             </div>
-        //         </Grid>
-        //     </Grid>
-        // </Container >
-
-
-
-
-        //  <Container sx={{
-        //     width: '80%',
-        //     mt: 1
-        // }}>
-        <Box sx={{ flexGrow: 1 }}>
-            <Grid2 container>
-                <Grid2 xs={9}>
+        <Box>
+            <Grid2 container sx={{
+                height: '80vh',
+                backgroundColor: "blue"
+            }}>
+                <Grid2 xs={8}>
                     <Item sx={{
-                        // width: 500,
-                        // height: 900,
-                        backgroundColor: "red"
+                        backgroundColor: "black",
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        alignItems: 'center'
                     }}>
-                        <MyCarousel
-                            sx={{
-                                // width: '100%',
-                                height: '100%'
-                            }}
-                        />
+                        <MyCarouselPost />
                     </Item>
                 </Grid2>
-                <Grid2 xs={3}>
-                    <Item sx={{
-                        // position: 'fixed'
-                    }}>
+                <Grid2 xs={4}>
+                    <Item >
                         <div style={{ backgroundColor: "yellow" }}>
-                            jhjh
+                            <CardPost postData={post} />
                         </div>
                     </Item>
                 </Grid2>
             </Grid2>
         </Box>
-        // </Container>
 
 
     )
 }
 
-// export const CComments = connect(state => ({ post: state?.PostFindOne?.payload }), { loadPost: actionFindPostOne })(Comments)
+export const CComments = connect(state => ({ post: state?.promise?.PostFindOne?.payload }), { loadPost: actionFindPostOne })(Comments)
 
-// 3 изменение
-export const CComments = connect(state => ({ post: state?.promise?.PostFindOne?.payload }), { loadPost: actionFindPostOne })(Comments)
+
+
+    // const post2 = useSelector(state => state?.CategoryGoodsAndSubCategoryGoods?.payload)

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

@@ -64,7 +64,7 @@ export const actionFindPostOne = _id => actionPromise('PostFindOne', gql(`query
           _id
         }
         likesCount owner {
-          _id login nick  avatar {
+          _id login nick avatar {
             _id url
           }
         }
@@ -72,7 +72,9 @@ export const actionFindPostOne = _id => actionPromise('PostFindOne', gql(`query
       likesCount
     }
     owner {
-      _id login nick
+      _id login nick avatar {
+        _id url
+      }
     }
     
   }

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

@@ -1,23 +1,36 @@
 import React, { useState } from 'react';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import Menu from '@mui/material/Menu';
-import Container from '@mui/material/Container';
-import Avatar from '@mui/material/Avatar';
-import Tooltip from '@mui/material/Tooltip';
-import MenuItem from '@mui/material/MenuItem';
-import InstagramIcon from '@mui/icons-material/Instagram';
-import AddAPhotoRounded from '@mui/icons-material/AddAPhotoRounded';
+import { useHistory, Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 
+import { AppBar, Box, Toolbar, Typography, Menu, Container, Avatar, Tooltip, MenuItem, IconButton } from '@mui/material'
+import { Instagram, AddAPhotoRounded } from '@mui/icons-material';
+
+
+
 // отрисовываем логин
 const UserName = ({ login }) => <span>{login}</span>
 const CUserName = connect(state => ({ login: state.auth.payload?.sub?.login }))(UserName)
 
+// отрисовывваем логин вариант 2
+const UserName2 = ({ user }) =>
+    <MenuItem key={1} >
+        <Typography textAlign="center" onClick={() => console.log('click login')}>
+            <span>{user.login}</span>
+        </Typography>
+    </MenuItem>
+
+const CUserName2 = connect(state => ({ user: state.auth.payload?.sub }))(UserName2)
+
+
+
+// ====================
 function ResponsiveAppBar() {
+    let history = useHistory()
+
+    function goToMyAccount() {
+        history.push('/user/63f8d0c273ca650acb9353f3');
+    }
+
     const [anchorElUser, setAnchorElUser] = useState(null);
 
     const handleOpenUserMenu = (event) => {
@@ -28,95 +41,12 @@ function ResponsiveAppBar() {
         setAnchorElUser(null);
     };
 
-    // const consolling = () => {
-    //     console.log('click')
-    //     // < Redirect to = '/' />
-    // }
-
-    // return (
-    //     <AppBar position="sticky" top='0' color='inherit'>
-    //         <Container maxWidth="xl">
-    //             <Toolbar disableGutters>
-
-    //                 <InstagramIcon sx={{ display: { xs: 'flex' }, mr: 1 }} />
-
-    //                 <Typography
-    //                     variant="h6"
-    //                     noWrap
-    //                     component="a"
-    //                     href="/"
-    //                     sx={{
-    //                         mr: 2,
-    //                         display: { xs: 'none', md: 'flex' },
-    //                         fontFamily: 'monospace',
-    //                         fontWeight: 700,
-    //                         letterSpacing: '.3rem',
-    //                         color: 'inherit',
-    //                         textDecoration: 'none',
-    //                     }}
-    //                 >
-    //                     Hipstagram
-
-    //                     {/* отрисовка логина */}
-    //                     {/* <CUserName /> */}
-
-    //                 </Typography>
-
-    //                 <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }} />
-
-    //                 <Box sx={{ flexGrow: 0 }}>
-    //                     <Tooltip >
-    //                         <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-    //                             <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
-    //                         </IconButton>
-    //                     </Tooltip>
-    //                     <Menu
-    //                         sx={{ mt: '45px' }}
-    //                         id="menu-appbar"
-    //                         anchorEl={anchorElUser}
-    //                         anchorOrigin={{
-    //                             vertical: 'top',
-    //                             horizontal: 'right',
-    //                         }}
-    //                         keepMounted
-    //                         transformOrigin={{
-    //                             vertical: 'top',
-    //                             horizontal: 'right',
-    //                         }}
-    //                         open={Boolean(anchorElUser)}
-    //                         onClose={handleCloseUserMenu}
-    //                     >
-    //                         {/* {settings.map((setting) => (
-    //                             // <MenuItem key={setting} onClick={handleCloseUserMenu}>
-    //                             <MenuItem key={setting} onClick={handleCloseUserMenu}>
-    //                                 <Typography textAlign="center">{setting}</Typography>
-    //                             </MenuItem>
-    //                         ))} */}
-    //                         <MenuItem key={1} onClick={() => console.log('click user')}>
-    //                             <Typography textAlign="center">
-    //                                 <CUserName />
-    //                             </Typography>
-    //                         </MenuItem>
-    //                         <MenuItem key={2} onClick={() => console.log('click user')}>
-    //                             <Typography textAlign="center">
-    //                                 Выйти
-    //                             </Typography>
-    //                         </MenuItem>
-
-    //                     </Menu>
-    //                 </Box>
-    //             </Toolbar>
-    //         </Container>
-    //     </AppBar >
-    // );
-
-
     return (
         <AppBar position='sticky' color='inherit'>
             <Container maxWidth="xl">
                 <Toolbar disableGutters>
                     <IconButton edge='start'>
-                        <InstagramIcon sx={{
+                        <Instagram sx={{
                             display: { xs: 'flex' },
                             mr: 1,
                             color: 'black'
@@ -142,11 +72,13 @@ function ResponsiveAppBar() {
                     </Typography>
 
                     <IconButton>
-                        <AddAPhotoRounded sx={{
-                            display: { xs: 'flex' },
-                            mr: 1,
-                            // color: 'black'
-                        }} />
+                        <Link to='/createpost'>
+                            <AddAPhotoRounded sx={{
+                                display: { xs: 'flex' },
+                                mr: 1,
+                                // color: 'black'
+                            }} />
+                        </Link>
                     </IconButton>
 
                     <Box sx={{ flexGrow: 0 }}>
@@ -171,11 +103,14 @@ function ResponsiveAppBar() {
                             open={Boolean(anchorElUser)}
                             onClose={handleCloseUserMenu}
                         >
-                            <MenuItem key={1} onClick={() => console.log('click user')}>
+                            {/* <CUserName2 /> */}
+
+                            <MenuItem key={1} onClick={goToMyAccount}>
                                 <Typography textAlign="center">
                                     <CUserName />
                                 </Typography>
                             </MenuItem>
+
                             <MenuItem key={2} onClick={() => console.log('click logout')}>
                                 <Typography textAlign="center">
                                     <span>Выйти</span>