23.03.2023 03:21

js/Project/project/package-lock.json

@@ -20,6 +20,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "array-move": "^4.0.0",
+        "emoji-picker-react": "^4.4.8",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-dropzone": "^14.2.3",
@@ -7722,6 +7723,20 @@
         "url": "https://github.com/sindresorhus/emittery?sponsor=1"
       }
     },
+    "node_modules/emoji-picker-react": {
+      "version": "4.4.8",
+      "resolved": "https://registry.npmjs.org/emoji-picker-react/-/emoji-picker-react-4.4.8.tgz",
+      "integrity": "sha512-5bbj0PCvpjB64PZj31wZ35EoebF2mKoHqEEx9u2ZLghx7sGoD1MgyDhse851rqROypjhmK9IUY15QBa7mCLP0g==",
+      "dependencies": {
+        "clsx": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -25264,6 +25279,14 @@
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
       "integrity": "sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg=="
     },
+    "emoji-picker-react": {
+      "version": "4.4.8",
+      "resolved": "https://registry.npmjs.org/emoji-picker-react/-/emoji-picker-react-4.4.8.tgz",
+      "integrity": "sha512-5bbj0PCvpjB64PZj31wZ35EoebF2mKoHqEEx9u2ZLghx7sGoD1MgyDhse851rqROypjhmK9IUY15QBa7mCLP0g==",
+      "requires": {
+        "clsx": "^1.2.1"
+      }
+    },
     "emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",

js/Project/project/package.json

@@ -15,6 +15,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "array-move": "^4.0.0",
+    "emoji-picker-react": "^4.4.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",

js/Project/project/src/App.js

@@ -22,6 +22,7 @@ import Page404 from './components/404/page404';
 // url проекта
 export const url = 'http://hipstagram.node.ed.asmer.org.ua/'
 
+
 const history = createHistory()
 
 

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

@@ -20,7 +20,8 @@ import {
     Send,
     ChatBubbleOutline,
     TurnedInNot,
-    AccountCircle
+    AccountCircle,
+    AddComment
 } from '@mui/icons-material/'
 import Grid from '@mui/material/Unstable_Grid2';
 
@@ -45,6 +46,10 @@ export function CardPost({ postData }) {
         history.push(`/user/${postData?.owner?._id}`)
     }
 
+    function AddCommentFocus() {
+        document.getElementById('addCommentField').focus()
+    }
+
 
     return (
         <Card
@@ -59,9 +64,7 @@ export function CardPost({ postData }) {
                 avatar={
                     <Avatar
                         alt={postData?.owner?.login}
-
                         src={(url + postData?.owner?.avatar?.url)}
-
                         sx={{
                             width: 50,
                             height: 50
@@ -74,7 +77,6 @@ export function CardPost({ postData }) {
                         sx={{
                             cursor: 'pointer'
                         }}
-
                         onClick={toAccount}
                     >
                         {postData?.owner?.login}
@@ -91,17 +93,12 @@ export function CardPost({ postData }) {
 
                 sx={{
                     flex: '0 0 450px',
-                    overflowY: 'auto'
+                    overflowY: 'auto',
                 }}
             >
                 <Grid
                     container
-
                     spacing={2}
-
-                    sx={{
-                        marginBottom: '20px'
-                    }}
                 >
                     <Grid
                         xs={2}
@@ -112,9 +109,7 @@ export function CardPost({ postData }) {
                     >
                         <Avatar
                             alt={postData?.owner?.login}
-
                             src={(url + postData?.owner?.avatar?.url)}
-
                             sx={{
                                 width: 40,
                                 height: 40
@@ -127,15 +122,24 @@ export function CardPost({ postData }) {
                     >
                         <Typography
                             variant="subtitle2"
+                            color="text.secondary"
+                            sx={{
+                                cursor: 'pointer'
+                            }}
+                            onClick={toAccount}
+                        >
+                            {postData?.owner?.login}
+                        </Typography>
 
+                        <Typography
+                            variant="subtitle2"
                             color="text.secondary"
                         >
-                            {postData?.owner?.login} {postData?.title}
+                            {postData?.title}
                         </Typography>
 
                         <Typography
                             variant="body2"
-
                             color="text.secondary"
                         >
                             {postData?.text}
@@ -144,7 +148,7 @@ export function CardPost({ postData }) {
                 </Grid>
 
                 <Grid>
-                    <Comments />
+                    <Comments data={postData?.comments} />
                 </Grid>
             </CardContent>
 
@@ -160,41 +164,30 @@ export function CardPost({ postData }) {
                     >
                         <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"
+                                        onClick={() => (console.log('click like main post'))}
                                     >
                                         <FavoriteBorderRounded />
                                     </IconButton>
                                 </Grid>
 
                                 <Grid>
-                                    <IconButton>
+                                    <IconButton
+                                        onClick={AddCommentFocus}
+                                    >
                                         <ChatBubbleOutline />
                                     </IconButton>
                                 </Grid>
@@ -246,10 +239,8 @@ export function CardPost({ postData }) {
                     />
 
                     <TextField
-                        id="input-with-sx"
-
+                        id="addCommentField"
                         label="Add comment..."
-
                         variant="standard"
                     />
 

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

@@ -1,29 +1,200 @@
-import { Card, CardHeader, CardContent, CardActions, Avatar, IconButton, Typography, Box, Divider, TextField } from '@mui/material'
+import { url } from "../../App";
+import { useHistory } from "react-router-dom";
 
+import './style.scss'
+
+import {
+    Avatar,
+    IconButton,
+    Typography,
+    Box,
+    Divider,
+} from '@mui/material'
+import {
+    FavoriteBorderRounded,
+} from '@mui/icons-material/'
+import Grid from '@mui/material/Unstable_Grid2';
+
+
+function CommentsCard({ data }) {
+    console.log('data: ', data)
+
+    const history = useHistory()
+
+    // дата поста
+    const dateofPost = new Date(+data?.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()}`
+
+
+    function toAccount(id) {
+        history.push(`/user/${id}`)
+    }
+
+
+    return (
+        <Grid
+            container
+            spacing={2}
+            sx={{
+                marginBottom: 1
+            }}
+        >
+            <Grid
+                item
+                xs={2}
+                sx={{
+                    flex: '0 0 45px'
+                }}
+            >
+                <Avatar
+                    alt={data?.owner?.login}
+                    src={(url + data?.owner?.avatar?.url)}
+                    sx={{
+                        width: 40,
+                        height: 40
+                    }}
+                />
+            </Grid>
+
+            <Grid
+                item
+                xs={10}
+                container
+            >
+                <Grid
+                    xs={11}
+                    sx={{
+                        paddingBottom: 0
+                    }}
+                >
+                    <Typography
+                        variant="subtitle2"
+                        color="text.secondary"
+                        sx={{
+                            cursor: 'pointer'
+                        }}
+                        onClick={() => toAccount(data?.owner?._id)}
+                    >
+                        {data?.owner?.login}
+                    </Typography>
+
+                    <Typography
+                        variant="subtitle2"
+                        color="text.secondary"
+                    >
+                        {data?.title}
+                    </Typography>
+
+                    <Typography
+                        variant="body2"
+                        color="text.secondary"
+                    >
+                        {data?.text}
+                    </Typography>
+                </Grid>
+
+                <Grid
+                    xs={1}
+                    sx={{
+                        paddingBottom: 0
+                    }}
+                >
+                    <IconButton>
+                        <FavoriteBorderRounded
+                            fontSize='small'
+                            onClick={() => (console.log('click like comment'))}
+                        />
+                    </IconButton>
+                </Grid>
+
+                <Grid
+                    xs={6}
+                    sx={{
+                        padding: 0,
+                        paddingLeft: 1
+
+                    }}
+                >
+                    <Typography
+                        variant="caption"
+                        color="text.disabled"
+                        align='left'
+                    >
+                        {dateofPostParse}
+                    </Typography>
+                </Grid>
+
+                <Grid
+                    xs={3.5}
+                    sx={{
+                        padding: 0
+                    }}
+                >
+                    <Typography
+                        variant="caption"
+                        color="text.disabled"
+                        align='left'
+                    >
+                        Нравится: {data?.likesCount || '0'}
+                    </Typography>
+                </Grid>
+
+                <Grid
+                    xs={2.5}
+                    sx={{
+                        padding: 0,
+                        paddingRight: 1
+                    }}
+                >
+                    <Typography
+                        variant="caption"
+                        color="text.disabled"
+                        align='left'
+                        sx={{
+                            cursor: 'pointer'
+                        }}
+                        onClick={() => (console.log('click answer on comment'))}
+                    >
+                        Ответить
+                    </Typography>
+                </Grid>
+
+                <Grid
+                    xs={12}
+                    sx={{
+                        padding: '0 8px'
+                    }}
+                >
+                    <Divider>
+                        <Typography
+                            variant="caption"
+                            color="text.disabled"
+                            sx={{
+                                cursor: 'pointer'
+                            }}
+                            onClick={() => (console.log('click show answers'))}
+                        >
+                            Посмотреть ответы
+                        </Typography>
+                    </Divider>
+                </Grid>
+            </Grid>
+        </Grid>
+    )
+}
+
+
+
+function Comments({ data }) {
 
-function Comments() {
     return (
-        <Typography>
-            тут будут комментарии
-            тут будут комментарии
-            тут будут комментарии
-            тут будут комментарии
-            тут будут комментарии
-            тут будут комментарии
-            тут будут комментарии
-            тут будут комментарии
-            тут будут комментарии
-            тут будут комментарии
-            тут будут комментарии
-            тут будут комментарии
-            тут будут комментарии
-            тут будут комментарии
-            тут будут комментарии
-            тут будут комментарии
-            тут будут комментарии
-            тут будут комментарии
-
-        </Typography>
+        <Box>
+            {data && data.map(item => <CommentsCard data={item} />)}
+        </Box>
     )
 }
 

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

@@ -1,5 +1,6 @@
 const url = 'http://hipstagram.node.ed.asmer.org.ua/graphql'
 
+
 // функция getGql
 function getGql(endpoint) {
   return async function gql(query, variables = {}) {
@@ -108,7 +109,14 @@ export const actionFindPostOne = _id => actionPromise('PROMISE', 'PostFindOne',
       url
     }
     comments {
-      _id createdAt text answers {
+      _id createdAt text likesCount
+      owner {
+        _id login
+        avatar {
+          url
+        }
+      }
+      answers {
         _id createdAt text likes {
           _id
         }
@@ -118,7 +126,6 @@ export const actionFindPostOne = _id => actionPromise('PROMISE', 'PostFindOne',
           }
         }
       }
-      likesCount
     }
     owner {
       _id login nick avatar {