08.03.2023 03:00

js/Project/project/src/App.js

@@ -1,8 +1,8 @@
 // import logo from './logo.svg';
 import './App.css';
 import React from 'react';
-import { Router, Route, Link, Redirect, Switch, useParams } from 'react-router-dom';
-import { Provider, connect, useDispatch, useSelector } from 'react-redux';
+import { Router, Route, Switch } from 'react-router-dom';
+import { Provider } from 'react-redux';
 import { store } from './components/redux/index';
 import createHistory from "history/createBrowserHistory";
 

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

@@ -10,7 +10,7 @@ function Item(props) {
             display: 'flex',
             alignItems: 'center'
         }}>
-            <img src={props.item.url} style={{
+            <img alt='alt' src={props.item.url} style={{
                 width: '100%'
             }} />
         </div>

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

@@ -16,7 +16,7 @@ import AboutMe from './aboutMe';
 const Item = styled(Paper)(() => ({
     padding: '0 10px',
     borderRadius: 0,
-    boxShadow: 'none'
+    boxShadow: 'none',
 }))
 
 const myId = ((JSON.parse(atob(localStorage.authToken.split('.')[1]))).sub.id)
@@ -34,13 +34,15 @@ function Feed({ feed = [], me = {} }) {
                         <Item sx={{
                             width: 500
                         }}>
-                            <Stack>
+                            <Stack spacing={2}>
                                 {feed.map(post => <Item key={post._id}><Card postData={post} /></Item>)}
                             </Stack>
                         </Item>
                     </Grid2>
                     <Grid2 xs={5}>
-                        <Item>
+                        <Item sx={{
+                            position: 'fixed'
+                        }}>
                             <Me me={me} />
                         </Item>
                     </Grid2>
@@ -51,7 +53,7 @@ function Feed({ feed = [], me = {} }) {
 }
 
 store.dispatch(actionfindPosts())
-store.dispatch(actionFindUserOne(myId))
+store.dispatch(actionFindUserOne(myId)) // скорее всего нужно будет переписать все через connect
 
 const Me = connect(state => ({ me: state?.promise?.UserFindOne?.payload }))(AboutMe)
 

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

@@ -5,10 +5,19 @@ 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 { styled } from '@mui/material/styles';
 
 import { MyCarousel } from '../feed/carousel';
 
 
+const Item = styled(Paper)(() => ({
+    // padding: '0 10px',
+    borderRadius: 0,
+    boxShadow: 'none',
+}))
+
 
 function Comments({ post = {}, loadPost }) {
 
@@ -27,19 +36,58 @@ function Comments({ post = {}, loadPost }) {
         //     {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>
+        //     <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}>
+                    <Item sx={{
+                        // width: 500,
+                        // height: 900,
+                        backgroundColor: "red"
+                    }}>
+                        <MyCarousel
+                            sx={{
+                                // width: '100%',
+                                height: '100%'
+                            }}
+                        />
+                    </Item>
+                </Grid2>
+                <Grid2 xs={3}>
+                    <Item sx={{
+                        // position: 'fixed'
+                    }}>
+                        <div style={{ backgroundColor: "yellow" }}>
+                            jhjh
+                        </div>
+                    </Item>
+                </Grid2>
+            </Grid2>
+        </Box>
+        // </Container>
+
+
     )
 }
 

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

@@ -12,7 +12,7 @@ function Footer() {
                         mt: 10, // тут каждая единица - это 8px
                         color: 'inherit',
                     }}>
-                    Project created by @Volddemar4ik
+                    Created by @Volddemar4ik
                 </Typography>
             </Container >
         </footer>

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

@@ -10,6 +10,7 @@ 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 { connect } from 'react-redux';
 
 // отрисовываем логин
@@ -121,6 +122,7 @@ function ResponsiveAppBar() {
                             color: 'black'
                         }} />
                     </IconButton>
+
                     <Typography
                         variant="h6"
                         noWrap
@@ -138,6 +140,15 @@ function ResponsiveAppBar() {
                     >
                         Hipstagram
                     </Typography>
+
+                    <IconButton>
+                        <AddAPhotoRounded sx={{
+                            display: { xs: 'flex' },
+                            mr: 1,
+                            // color: 'black'
+                        }} />
+                    </IconButton>
+
                     <Box sx={{ flexGrow: 0 }}>
                         <Tooltip >
                             <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
@@ -170,7 +181,6 @@ function ResponsiveAppBar() {
                                     <span>Выйти</span>
                                 </Typography>
                             </MenuItem>
-
                         </Menu>
                     </Box>
                 </Toolbar>
@@ -186,4 +196,10 @@ export default ResponsiveAppBar;
 
 
 
-
+// <Container>
+//     <Link to="/createpost" style={{ textDecoration: 'none' }}>
+//         <Button variant="contained" color='primary' startIcon={<AddAPhotoRoundedIcon />} onClick={() => (console.log('click add'))}>
+//             Добавить пост
+//         </Button>
+//     </Link>
+// </Container>

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

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import Stack from '@mui/material/Stack';
-import { url } from '../../App';
-
-export default function ImageAvatars({ userData }) {
-    // console.log('UserData: ', userData)
-    // console.log('SRC: ', userData.avatar?.url)
-    const urlAvatar = url.slice(0, -7) + userData.avatar?.url
-
-    return (
-        <Stack direction="row" spacing={1}>
-            <Avatar alt={userData.login} src={urlAvatar} sx={{ width: 100, height: 100 }} />
-        </Stack>
-    );
-}
-
-
-

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

@@ -1,22 +1,61 @@
 import * as React from 'react';
+
 import ImageList from '@mui/material/ImageList';
 import ImageListItem from '@mui/material/ImageListItem';
+import { Box } from '@mui/system';
+
+import AutoAwesomeMotionRoundedIcon from '@mui/icons-material/AutoAwesomeMotionRounded';
 
 export default function StandardImageList() {
+
+    const clicker = (name) => {
+        console.log('click: ', name)
+    }
+
     return (
-        <ImageList sx={{ width: "100%", minHeight: "100%" }} cols={3} rowHeight={'auto'}>
-            {itemData.map((item) => (
-                // <ImageListItem key={item.img}>
-                <ImageListItem key={Math.random()}>
+        <ImageList sx={{ width: "100%", minHeight: "100%" }} cols={3} rowHeight={'auto'} >
+            {
+                itemData.map((item) => (
+                    // <ImageListItem key={item.img}>
+                    <ImageListItem key={Math.random()} >
+
+                        <AutoAwesomeMotionRoundedIcon sx={{
+                            color: 'white',
+                            transform: 'scale(-1, 1)',
+                            position: 'absolute',
+                            right: '10px',
+                            top: '10px',
+                            fontSize: '32px'
+                        }} />
+
+                        <Box sx={{
+                            width: '100%',
+                            paddingTop: '100%',
+                            backgroundSize: 'cover',
+                            backgroundColor: 'black',
+                            backgroundRepeat: 'no-repeat'
+                        }}
+
+                            style={{ backgroundImage: `url(${item.img})` }}
+
+                            // тут поставить ссылку на пост, к которому привязаны картинки
+                            onClick={() => { clicker(item.title) }}
+
+                        >
+
 
-                    <img
-                        src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
-                        srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
-                        alt={item.title}
-                        loading="lazy"
-                    />
-                </ImageListItem>
-            ))
+                            {/* <img
+                            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
+                            srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+                            alt={item.title}
+                            loading="lazy"
+                            style={{
+                                width: '100%'
+                            }}
+                        /> */}
+                        </Box>
+                    </ImageListItem>
+                ))
             }
         </ImageList >
     );

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

@@ -1,26 +1,15 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-// import { useParams } from 'react-router';
 import { connect } from 'react-redux';
 import { store } from '../redux';
 
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
-import StandardImageList from './gallery';
-import Divider from '@mui/material/Divider';
-import Grid from '@mui/material/Unstable_Grid2';
-import BasicCard from './user_data';
-import AddAPhotoRoundedIcon from '@mui/icons-material/AddAPhotoRounded';
-import Button from '@mui/material/Button';
-import { Link } from 'react-router-dom';
-import ImageAvatars from './avatar';
+import { Box, Container, Divider } from '@mui/material';
 
-// import { actionFindUserOne } from '../redux/action';
-// import { actionFindUserOne } from '../requests/userFindOne';
+import BasicCard from './userData';
 import { actionFindUserOne } from '../redux/action';
 
-// console.log('action: ', actionFindUserOne)
+import StandardImageList from './gallery';
 
 function User({ user = {}, loadUser }) {
 
@@ -28,11 +17,12 @@ function User({ user = {}, loadUser }) {
     useEffect(() => { loadUser(userId) }, [userId])
 
 
-    // собираем все _id подписчиков в один массив
+    // собираем все _id подписчиков в один массив - !!!!!!!!!!!!!!!!!!!!!! РАБОТАЕТ НЕКОРРЕКТНО
     const promiceStatus = store.getState().promise.UserFindOne.status
     const followingsArr = []
 
-    if (promiceStatus === 'FULFILLED') {
+    if (promiceStatus === 'FULFILLED' && user.following) {
+        console.log(999, user.following)
         for (let id of (user.following)) {
             for (let [key, value] of Object.entries(id)) {
                 if (key === '_id') {
@@ -42,47 +32,21 @@ function User({ user = {}, loadUser }) {
         }
     }
 
-
-
-    // console.log('userID: ', { userId })
-    // console.log('user: ', user)
-
     return (
         <React.Fragment>
             <Container sx={{ minHeight: '100vh' }} maxWidth="100%" >
-                <Box sx={{ margin: "30px 10px" }}>
-                    <Grid container spacing={2}>
-                        <Grid xs={3}>
-                            <Container>
-                                <ImageAvatars userData={user} />
-                            </Container>
-                        </Grid>
-                        <Grid xs={9}>
-                            {/* <BasicCard userData={{ user, followingsArr }} /> */}
-                            <BasicCard userData={user} />
-                        </Grid>
-
-                        <Container>
-                            <Link to="/createpost" style={{ textDecoration: 'none' }}>
-                                <Button variant="contained" color='primary' startIcon={<AddAPhotoRoundedIcon />} onClick={() => (console.log('click add'))}>
-                                    Добавить пост
-                                </Button>
-                            </Link>
-                        </Container>
-                    </Grid>
+                <Box sx={{ margin: "30px 50px" }}>
+                    <BasicCard userData={user} />
                 </Box>
 
                 <Divider />
 
                 <Box >
                     <StandardImageList />
-
-                    {/* <StandardImageList userData={user} /> */}
                 </Box>
             </Container>
         </React.Fragment >
     );
 }
 
-export const CUser = connect(state => ({ user: state?.promise?.UserFindOne?.payload }), { loadUser: actionFindUserOne })(User)
-
+export const CUser = connect(state => ({ user: state?.promise?.UserFindOne?.payload }), { loadUser: actionFindUserOne })(User)

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

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+
+import { CardContent, Typography, Button, Stack, Avatar, Box, Container } from '@mui/material';
+import ManageAccountsOutlinedIcon from '@mui/icons-material/ManageAccountsOutlined';
+
+import { url } from "../../App"
+
+
+const myId = ((JSON.parse(atob(localStorage.authToken.split('.')[1]))).sub.id)
+
+// Функция отображения кнопки редактирования своего профиля на карточке юзера
+function UptadeProfile() {
+
+    const { userId } = useParams()
+
+    if (userId === myId) {
+        return (
+            <Button variant="outlined" startIcon={<ManageAccountsOutlinedIcon />} disableRipple>Редактировать аккаунт</Button>
+        )
+    }
+}
+
+// блок пользовательских данных
+export default function BasicCard({ userData }) {
+    console.log(6775, userData)
+
+    const urlAvatar = url.slice(0, -7) + userData?.avatar?.url
+
+    return (
+        <Container sx={{ display: 'flex' }}>
+            <Box>
+                <Avatar alt={userData?.login} src={urlAvatar} sx={{ width: 150, height: 150 }} />
+            </Box>
+
+            <Box sx={{ display: 'flex', flexDirection: 'column', marginLeft: '50px ' }}>
+                <CardContent sx={{ flex: '1 0 auto' }}>
+                    <Stack direction="row" spacing={2}>
+                        <Typography component="div" variant="h4">
+                            {userData?.login}
+                        </Typography>
+
+                        <UptadeProfile />
+                    </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">
+                        {userData?.followers?.length || '0'} публикаций
+                    </Typography>
+
+                    <Typography variant="subtitle1">
+                        {userData?.followers?.length || '0'} подписчиков
+                    </Typography>
+
+                    <Typography variant="subtitle1">
+                        {userData?.following?.length || '0'} подписок
+                    </Typography>
+                </Stack>
+            </Box>
+        </Container>
+    )
+}

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

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import { useParams } from 'react-router-dom';
-// import { store } fro m '../redux';
-// import Box from '@mui/material/Box';
-import CardContent from '@mui/material/CardContent';
-import Typography from '@mui/material/Typography';
-
-import Button from '@mui/material/Button';
-// import DeleteIcon from '@mui/icons-material/Delete';
-// import SendIcon from '@mui/icons-material/Send';
-import Stack from '@mui/material/Stack';
-import ManageAccountsOutlinedIcon from '@mui/icons-material/ManageAccountsOutlined';
-
-const myId = ((JSON.parse(atob(localStorage.authToken.split('.')[1]))).sub.id)
-
-
-function UptadeProfile() {
-
-    // function UptadeProfile({ followingsArr }) {
-    const { userId } = useParams()
-    // console.log(111, userId)
-    // console.log(222, followingsArr)
-
-    // если я - выводим кнопку редактирования
-    if (userId === myId) {
-        return (
-            < Stack direction="row" spacing={2} >
-                <Button variant="outlined" startIcon={<ManageAccountsOutlinedIcon />} disableRipple>Редактировать аккаунт</Button>
-            </Stack >
-        )
-    }
-    // else if (followingsArr.includes(userId)) {
-    //     // если подписчик - выводим кнопку "отписаться"
-    //     < Stack direction="row" spacing={2} >
-    //         <Button variant="outlined" startIcon={<ManageAccountsOutlinedIcon />} disableRipple>Отписаться</Button>
-    //     </Stack >
-
-    // } else {
-    //     // если не подписчик - выводим кнопку "подписаться"
-    //     < Stack direction="row" spacing={2} >
-    //         <Button variant="outlined" startIcon={<ManageAccountsOutlinedIcon />} disableRipple>Подписаться</Button>
-    //     </Stack >
-    // }
-
-}
-
-// блок пользовательских данных
-export default function BasicCard({ userData }) {
-    // console.log(1232, userData.followingsArr)
-
-    return (
-        <CardContent sx={{ width: '100%', paddingTop: 0 }}>
-            <Stack direction="row" spacing={5}>
-                <Typography variant="h5" component="div">
-                    {userData.login}
-                </Typography>
-                <UptadeProfile followingsArr={userData.followingsArr} />
-            </Stack>
-            <Stack direction="row" spacing={5} marginTop={3}>
-                <Typography color="text.secondary">
-                    NaN Публикаций
-                </Typography>
-                <Typography color="text.secondary">
-                    {userData.followers?.length || '0'} подписчиков
-                </Typography>
-                <Typography color="text.secondary">
-                    {userData.following?.length || '0'} подписок
-                </Typography>
-            </Stack>
-            <Typography sx={{ mb: 1.5 }} marginTop={3} variant="body1">
-                {userData.nick || ''}
-            </Typography>
-        </CardContent>
-    )
-}