07.03.2023 21:45

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

@@ -1,7 +1,42 @@
-function AboutMe() {
+import { Avatar, Typography, Box, Stack, CardHeader } from '@mui/material'
+
+import { url } from "../../App"
+
+
+function AboutMe({ me }) {
+
+    const urlAvatar = url.slice(0, -7) + me?.avatar?.url
+
     return (
-        <div>Тут будет информация о моем профиле</div>
+        <Box>
+            <CardHeader
+                avatar={
+                    <Avatar alt={me?.login} src={urlAvatar} sx={{ width: 50, height: 50 }} />
+                }
+
+                subheader={
+                    <Typography variant='h6'>
+                        {me?.login}
+                    </Typography>
+                }
+            />
+            <Stack direction="row" spacing={1} padding={2}>
+                <Typography>
+                    {me?.followers?.length || '0'} публикаций
+                </Typography>
+                <Typography>
+                    {me?.followers?.length || '0'} подписчиков
+                </Typography>
+                <Typography>
+                    {me?.following?.length || '0'} подписок
+                </Typography>
+            </Stack>
+        </Box>
+
     )
 }
 
-export default AboutMe
+export default AboutMe
+
+
+

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

@@ -1,18 +1,7 @@
-import Card from '@mui/material/Card';
-import CardHeader from '@mui/material/CardHeader';
-import CardMedia from '@mui/material/CardMedia';
-import CardContent from '@mui/material/CardContent';
-import CardActions from '@mui/material/CardActions';
-import Avatar from '@mui/material/Avatar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import FavoriteBorderRoundedIcon from '@mui/icons-material/FavoriteBorderRounded';
-import SendIcon from '@mui/icons-material/Send';
-import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
-import TurnedInNotIcon from '@mui/icons-material/TurnedInNot';
+import { Card, CardHeader, CardMedia, CardContent, CardActions, Avatar, IconButton, Typography, Box } from '@mui/material'
+import { MoreVert, FavoriteBorderRounded, Send, ChatBubbleOutline, TurnedInNot } from '@mui/icons-material/'
 import Grid from '@mui/material/Unstable_Grid2';
-import Box from '@mui/material/Box';
+
 import { Link } from 'react-router-dom';
 
 import { MyCarousel } from './carousel';
@@ -44,7 +33,7 @@ export function RecipeReviewCard({ postData }) {
                 }
                 action={   // троеточие в хедере
                     <IconButton aria-label="settings">
-                        <MoreVertIcon />
+                        <MoreVert />
                     </IconButton>
                 }
                 title={
@@ -72,23 +61,23 @@ export function RecipeReviewCard({ postData }) {
                             <Grid container columnSpacing={1} sx={{ order: { xs: 2, sm: 1 } }}>
                                 <Grid>
                                     <IconButton aria-label="add to favorites">
-                                        <FavoriteBorderRoundedIcon />
+                                        <FavoriteBorderRounded />
                                     </IconButton>
                                 </Grid>
                                 <Grid>
                                     <IconButton>
-                                        <ChatBubbleOutlineIcon />
+                                        <ChatBubbleOutline />
                                     </IconButton>
                                 </Grid>
                                 <Grid>
                                     <IconButton aria-label="share">
-                                        <SendIcon />
+                                        <Send />
                                     </IconButton>
                                 </Grid>
                             </Grid>
                             <Grid sx={{ order: { xs: 1, sm: 2 } }}>
                                 <IconButton>
-                                    <TurnedInNotIcon />
+                                    <TurnedInNot />
                                 </IconButton>
                             </Grid>
                         </Grid>
@@ -112,6 +101,4 @@ export function RecipeReviewCard({ postData }) {
             </CardActions>
         </Card >
     )
-}
-
-// export default RecipeReviewCard
+}

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

@@ -1,8 +1,25 @@
-// import React from 'react';
 import Carousel from 'react-material-ui-carousel'
 
+// айтемы для каждой картинки
+function Item(props) {
+    return (
+        <div style={{
+            width: '100%',
+            height: 625,
+            backgroundColor: 'black',
+            display: 'flex',
+            alignItems: 'center'
+        }}>
+            <img src={props.item.url} style={{
+                width: '100%'
+            }} />
+        </div>
+    )
+}
+
 // сама карусель - ее нужно вынеси в отдельный контенйре
-export const MyCarousel = function Example(props) {
+export function MyCarousel(props) {
+
     let items = [
         {
             url: "/images/image.jpeg"
@@ -18,9 +35,9 @@ export const MyCarousel = function Example(props) {
     return (
         <Carousel autoPlay={false} cycleNavigation={false} animation={"slide"} indicatorContainerProps={{
             style: {
-                marginTop: '-50px', // 5
+                marginTop: '-50px',
                 zIndex: 999,
-                position: 'inherit' // 4
+                position: 'inherit'
             }
 
         }} >
@@ -31,19 +48,3 @@ export const MyCarousel = function Example(props) {
     )
 }
 
-function Item(props) {
-    return (
-        <div style={{
-            // width: 500,
-            width: '100%',
-            height: 625,
-            backgroundColor: 'black',
-            display: 'flex',
-            alignItems: 'center'
-        }}>
-            <img src={props.item.url} style={{
-                width: '100%'
-            }} />
-        </div>
-    )
-}

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

@@ -1,58 +1,58 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { store } from '../redux';
-// import { store } from './components/redux/index';   // почему не этот?
-import { url } from '../../App';
+// import { url } from '../../App';
 
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import Paper from '@mui/material/Paper';
+import { Box, Stack, Paper } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import { Container } from '@mui/system';
+import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
 
-import { actionfindPosts } from '../redux/action';
+import { actionfindPosts, actionFindUserOne } from '../redux/action';
 import { RecipeReviewCard as Card } from './card';
-import { Container } from '@mui/system';
 import AboutMe from './aboutMe';
 
-
-
 // сам item для поста
-// const Item = styled(Paper)(({ theme }) => ({
-const Item = styled(Paper)(({ theme }) => ({
+const Item = styled(Paper)(() => ({
     padding: '0 10px',
     borderRadius: 0,
     boxShadow: 'none'
 }))
-// })
 
+const myId = ((JSON.parse(atob(localStorage.authToken.split('.')[1]))).sub.id)
 
+function Feed({ feed = [], me = {} }) {
 
-function Feed({ feed = [] }) {
     return (
         <Container sx={{
             width: '80%',
             mt: 1
         }}>
-            {/* тут будет лента новостей */}
-            <Stack direction="row" spacing={2}>
-                <Item sx={{
-                    width: 500
-                }}>
-                    <Stack>
-                        {feed.map(post => <Item key={post._id}><Card postData={post} /></Item>)}
-                    </Stack>
-                </Item>
-                <Item>
-                    <AboutMe />
-                </Item>
-            </Stack>
+            <Box sx={{ flexGrow: 1 }}>
+                <Grid2 container spacing={2}>
+                    <Grid2 xs={7}>
+                        <Item sx={{
+                            width: 500
+                        }}>
+                            <Stack>
+                                {feed.map(post => <Item key={post._id}><Card postData={post} /></Item>)}
+                            </Stack>
+                        </Item>
+                    </Grid2>
+                    <Grid2 xs={5}>
+                        <Item>
+                            <Me me={me} />
+                        </Item>
+                    </Grid2>
+                </Grid2>
+            </Box>
         </Container>
     )
 }
 
 store.dispatch(actionfindPosts())
+store.dispatch(actionFindUserOne(myId))
 
-// export const ReduxFeed = connect(state => ({ posts: state.PostsFind.payload }))(Feed)
+const Me = connect(state => ({ me: state?.promise?.UserFindOne?.payload }))(AboutMe)
 
-// 4 изменение 
 export const ReduxFeed = connect(state => ({ feed: state?.promise?.PostsFind?.payload }))(Feed)

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

@@ -1,11 +0,0 @@
-import AsideMenu from "./aside_menu";
-import Main from "./structure/main";
-
-const Page = () =>
-    <div className="wrapper" style={{ display: 'flex', minHeight: '100hv' }}>
-        <AsideMenu />
-        <Main />
-    </div>
-
-
-export default Page

js/Project/project/src/components/pages/structure/aside_menu.js

@@ -1,44 +0,0 @@
-import { Link } from "react-router-dom"
-
-import Avatar from '@mui/material/Avatar';
-import Stack from '@mui/material/Stack';
-import Badge from '@mui/material/Badge';
-import MailIcon from '@mui/icons-material/Mail';
-import AddAPhotoRoundedIcon from '@mui/icons-material/AddAPhotoRounded';
-
-
-// компонент входящего письма. в пропсах указать количмество писем
-function IncomingMail() {
-    return (
-        <Stack direction="row" spacing={2}>
-            <Badge badgeContent={4} color="secondary">
-                <MailIcon color="action" />
-            </Badge>
-            <Link to="/direct">Директ</Link>
-        </Stack>
-    )
-}
-
-const AsideMenu = () =>
-    <aside style={{ width: '15%', minHeight: '100vh', backgroundColor: '#ffdbdb' }}>
-        <Stack direction="row" spacing={2}>
-            <Avatar sx={{ width: 25, height: 25 }} />
-            <Link to="/user/63f8d0c273ca650acb9353f3" >Ваш профиль</Link>
-        </Stack>
-
-        <IncomingMail />
-
-        <Stack direction="row" spacing={2}>
-            <AddAPhotoRoundedIcon />
-            <Link to="/user/63f8d0c273ca650acb9353f3" >Ваш профиль</Link>
-        </Stack>
-
-        <br />
-        <Link to="/registration">Регистрация</Link>
-        <br />
-        <Link to="/autorization">Авторизация</Link>
-    </aside>
-
-
-
-export default AsideMenu

js/Project/project/src/components/pages/structure/main.js

@@ -1,19 +0,0 @@
-import { Route, Switch } from "react-router"
-
-
-const Main = () =>
-    <section style={{ width: '50%', margin: '0 auto', minHeight: '100hv', display: 'flex', flexDirection: 'column' }}>
-        <header style={{ backgroundColor: '#dbffe7' }}>
-            Тут будут какие-то заголовки или что-то вроде этого
-        </header>
-        <main style={{ backgroundColor: '#dcdbff', flex: '1 1 auto' }}>
-            {/* прописывание редиректа */}
-            {/* <Redirect from='/direct' to='/profile' /> */}
-
-
-        </main>
-        <footer style={{ backgroundColor: '#dbffe7' }}>Hipstagram from Volddemar4ik</footer>
-    </section>
-
-
-export default Main