03.03.2023 20:00

js/Project/project/src/App.js

@@ -6,7 +6,7 @@ import { createStore, combineRedusers, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 import { Provider, connect, useDispatch, useSelector } from 'react-redux';
 // import Feed from './components/feed';
-import User from './components/user';
+import { CUser } from './components/user';
 
 // импорт страниц
 import AsideMenu from './components/pages/structure/aside_menu';
@@ -130,22 +130,22 @@ export const actionFindPostOne = _id => actionPromise('PostFindOne', gql(`query
 }))
 
 // запрос на конкретного юзера
-const actionFindUserOne = _id => actionPromise('UserFindOne', gql(`query OneUserFind ($userOne: String) {
-  UserFindOne(query: $userOne) {
-    _id createdAt login nick 
-    avatar {
-      _id url
-    } 
-     followers {
-      _id login nick avatar {_id url}
-    }
-    following {
-       _id login nick avatar {_id url}
-    }
-  }
-}`, {
-    userOne: JSON.stringify([{ _id }])
-}))
+// const actionFindUserOne = _id => actionPromise('UserFindOne', gql(`query OneUserFind ($userOne: String) {
+//   UserFindOne(query: $userOne) {
+//     _id createdAt login nick 
+//     avatar {
+//       _id url
+//     } 
+//      followers {
+//       _id login nick avatar {_id url}
+//     }
+//     following {
+//        _id login nick avatar {_id url}
+//     }
+//   }
+// }`, {
+//     userOne: JSON.stringify([{ _id }])
+// }))
 
 const store = createStore(promiseReducer, applyMiddleware(thunk))
 store.subscribe(() => console.log(store.getState()))
@@ -221,7 +221,7 @@ const Page404 = () =>
 
 // ==================================================
 // страница юзера
-const CUser = connect(state => ({ user: state?.UserFindOne?.payload }), { loadUser: actionFindUserOne })(User)
+// const CUser = connect(state => ({ user: state?.UserFindOne?.payload }), { loadUser: actionFindUserOne })(User)
 
 // ====================================================
 

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

@@ -50,7 +50,7 @@ export function RecipeReviewCard({ postData }) {
                     </IconButton>
                 }
                 title={
-                    <Link to={`/user/${postData._id}`}>
+                    <Link to={`/user/${postData.owner._id}`}>
                         {postData.owner.login}
                     </Link>
                 }

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

@@ -5,8 +5,8 @@ import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
-import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
+import SendRoundedIcon from '@mui/icons-material/SendRounded';
 
 
 export const CreatePost = () => {
@@ -52,7 +52,7 @@ export const CreatePost = () => {
             </Box>
 
             <Stack spacing={2} direction="row">
-                <Button variant="outlined" onClick={e => { console.log('click') }}>
+                <Button variant="outlined" startIcon={<SendRoundedIcon style={{ transform: 'translate(3px, -4px) rotate(-30deg)' }} />} onClick={e => { console.log('click') }}>
                     Опубликовать пост
                 </Button>
             </Stack>
@@ -63,4 +63,3 @@ export const CreatePost = () => {
 
 
 }
-

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

@@ -4,8 +4,6 @@ const AsideMenu = () =>
     <aside style={{ width: '15%', minHeight: '100vh', backgroundColor: '#ffdbdb' }}>
         <Link to="/">Главная(она же Лента)</Link>
         <br />
-        <Link to="/createpost">Создание поста</Link>
-        <br />
         <Link to="/direct">Директ</Link>
         <br />
         <Link to="/about">О нас</Link>

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router';
+import { useParams } from 'react-router-dom';
 import { connect } from 'react-redux';
 
 import { actionFindPostOne } from '../redux/action';
@@ -12,7 +12,8 @@ function Comments({ post = {}, loadPost }) {
 
     useEffect(() => { loadPost(postId) }, [postId]) // перезапускаем loadPost, если произошло изменение в урле
 
-    console.log(post)
+    console.log('postID: ', { postId })
+
 
 
     return (
@@ -20,6 +21,7 @@ function Comments({ post = {}, loadPost }) {
             {/* <div>{user} and {postId}</div> */}
             тут будут отображаться все комментарии под постом
             <h2>{post.createdAt}</h2>
+            {post._id}
         </div>
     )
 }

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

@@ -1,13 +1,13 @@
 // ==============================================================================
 // создание promiseReducer
 function promiseReducer(state = {}, { type, status, payload, error, nameOfPromise }) {
-    if (type === 'PROMISE') {
-        return {
-            ...state,
-            [nameOfPromise]: { status, payload, error }
-        }
+  if (type === 'PROMISE') {
+    return {
+      ...state,
+      [nameOfPromise]: { status, payload, error }
     }
-    return state
+  }
+  return state
 }
 
 // акшоны для promiseReducer
@@ -15,48 +15,48 @@ const actionPending = nameOfPromise => ({ nameOfPromise, type: 'PROMISE', status
 const actionFulfilled = (nameOfPromise, payload) => ({ nameOfPromise, type: 'PROMISE', status: 'FULFILLED', payload })
 const actionRejected = (nameOfPromise, error) => ({ nameOfPromise, type: 'PROMISE', status: 'REJECTED', error })
 const actionPromise = (nameOfPromise, promise) =>
-    async dispatch => {
-        dispatch(actionPending(nameOfPromise)) //сигнализируем redux, что промис начался
-        try {
-            const payload = await promise //ожидаем промиса
-            dispatch(actionFulfilled(nameOfPromise, payload)) //сигнализируем redux, что промис успешно выполнен
-            return payload //в месте запуска store.dispatch с этим thunk можно так же получить результат промиса
-        }
-        catch (error) {
-            dispatch(actionRejected(nameOfPromise, error)) //в случае ошибки - сигнализируем redux, что промис несложился
-        }
+  async dispatch => {
+    dispatch(actionPending(nameOfPromise)) //сигнализируем redux, что промис начался
+    try {
+      const payload = await promise //ожидаем промиса
+      dispatch(actionFulfilled(nameOfPromise, payload)) //сигнализируем redux, что промис успешно выполнен
+      return payload //в месте запуска store.dispatch с этим thunk можно так же получить результат промиса
+    }
+    catch (error) {
+      dispatch(actionRejected(nameOfPromise, error)) //в случае ошибки - сигнализируем redux, что промис несложился
     }
+  }
 
 // =============================================================
 // функция getGql
 function getGql(endpoint) {
-    return async function gql(query, variables = {}) {
+  return async function gql(query, variables = {}) {
 
-        let headers = {
-            'Content-Type': 'application/json;charset=utf-8',
-            'Accept': 'application/json',
-        }
-        if (('authToken' in localStorage)) {
-            headers.Authorization = 'Bearer ' + localStorage.authToken
-        }
+    let headers = {
+      'Content-Type': 'application/json;charset=utf-8',
+      'Accept': 'application/json',
+    }
+    if (('authToken' in localStorage)) {
+      headers.Authorization = 'Bearer ' + localStorage.authToken
+    }
 
-        let result = await fetch(endpoint, {
-            method: 'POST',
-            headers,
-            body: JSON.stringify({
-                query,
-                variables
-            })
-        }).then(res => res.json())
+    let result = await fetch(endpoint, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({
+        query,
+        variables
+      })
+    }).then(res => res.json())
 
-        if (('errors' in result) && !('data' in result)) {
-            throw new Error(JSON.stringify(result.errors))
-        }
+    if (('errors' in result) && !('data' in result)) {
+      throw new Error(JSON.stringify(result.errors))
+    }
 
-        result = Object.values(result.data)[0]
+    result = Object.values(result.data)[0]
 
-        return result
-    }
+    return result
+  }
 }
 
 const gql = getGql('http://hipstagram.node.ed.asmer.org.ua/graphql')
@@ -88,5 +88,23 @@ export const actionFindPostOne = _id => actionPromise('PostFindOne', gql(`query
     
   }
 }`, {
-    postOne: JSON.stringify([{ _id }])
+  postOne: JSON.stringify([{ _id }])
+}))
+
+
+export const actionFindUserOne = _id => actionPromise('UserFindOne', gql(`query OneUserFind ($userOne: String) {
+  UserFindOne(query: $userOne) {
+    _id createdAt login nick 
+    avatar {
+      _id url
+    } 
+     followers {
+      _id login nick avatar {_id url}
+    }
+    following {
+       _id login nick avatar {_id url}
+    }
+  }
+}`, {
+  userOne: JSON.stringify([{ _id }])
 }))

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

@@ -3,9 +3,14 @@ import Avatar from '@mui/material/Avatar';
 import Stack from '@mui/material/Stack';
 
 export default function ImageAvatars({ userData }) {
+    console.log('UserData: ', userData)
+    console.log('SRC: ', userData.avatar?.url)
+    const url = `http://hipstagram.node.ed.asmer.org.ua/${userData.avatar?.url}`
+
     return (
         <Stack direction="row" spacing={1}>
-            <Avatar alt={userData.login} src={userData.avatar?.url} sx={{ width: 100, height: 100 }} />
+            <Avatar alt={userData.login} src={url} sx={{ width: 100, height: 100 }} />
+
         </Stack>
     );
 }

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

@@ -7,22 +7,35 @@ import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Unstable_Grid2';
 import ImageAvatars from './avatar';
 import BasicCard from './user_data';
+import AddAPhotoRoundedIcon from '@mui/icons-material/AddAPhotoRounded';
+// import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+// import Container from '@mui/material/Container';
+import { Link } from 'react-router-dom';
+
+
+
 
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router';
+import { useParams } from 'react-router-dom';
+import { connect } from 'react-redux';
 
+import { actionFindUserOne } from '../redux/action';
 
+console.log('action: ', actionFindUserOne)
 
-export default function User({ user = {}, loadUser }) {
+function User({ user = {}, loadUser }) {
 
     const { userId } = useParams()
+
     useEffect(() => { loadUser(userId) }, [userId])
 
-    console.log(22, userId)
+    console.log('userID: ', { userId })
+    console.log('user: ', user)
 
     return (
         <React.Fragment>
-            <CssBaseline />
+            {/* <CssBaseline /> */}
             <Container sx={{ minHeight: '100vh' }} maxWidth="100%" >
                 <Box sx={{ margin: "30px 10px" }}>
                     <Grid container spacing={2}>
@@ -34,6 +47,14 @@ export default function User({ user = {}, loadUser }) {
                         <Grid xs={9}>
                             <BasicCard userData={user} />
                         </Grid>
+
+                        <Container>
+                            <Link to="/createpost" style={{ textDecoration: 'none' }}>
+                                <Button variant="contained" startIcon={<AddAPhotoRoundedIcon />} onClick={() => (console.log('click add'))}>
+                                    Добавить пост
+                                </Button>
+                            </Link>
+                        </Container>
                     </Grid>
                 </Box>
 
@@ -43,7 +64,9 @@ export default function User({ user = {}, loadUser }) {
                     <StandardImageList />
                 </Box>
             </Container>
-        </React.Fragment>
+        </React.Fragment >
     );
 }
 
+export const CUser = connect(state => ({ user: state?.UserFindOne?.payload }), { loadUser: actionFindUserOne })(User)
+

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

@@ -28,7 +28,7 @@ export default function BasicCard({ userData }) {
                 </Typography>
                 <UptadeProfile />
             </Stack>
-            <Stack direction="row" spacing={5} paddingTop={3}>
+            <Stack direction="row" spacing={5} marginTop={3}>
                 <Typography color="text.secondary">
                     NaN Публикаций
                 </Typography>
@@ -39,8 +39,8 @@ export default function BasicCard({ userData }) {
                     {userData.following?.length || '0'} подписок
                 </Typography>
             </Stack>
-            <Typography sx={{ mb: 1.5 }} variant="body1">
-                {userData.nick || 'Jhon Snow'}
+            <Typography sx={{ mb: 1.5 }} marginTop={3} variant="body1">
+                {userData.nick || ''}
             </Typography>
         </CardContent>
     );