post Page without comment

src/App.scss

@@ -188,7 +188,9 @@ body {
         padding-top: 15px;
     }
 }
-
+.owner .nick {
+    padding-left: 15px;
+}
 .Post {
     padding: 10px 0;
     position: relative;
@@ -365,6 +367,7 @@ body {
         }
     }
 }
+
 .PostOne {
     max-width: 1250px;
     padding: 0 15px;
@@ -378,36 +381,51 @@ body {
         grid-row-gap: 0px;
         box-shadow: 0 0 6px 2px rgba($color: #000000, $alpha: 0.5);
         border-radius: 5px;
+        max-height: 750px;
     }
     &__title {
         grid-area: 1 / 2 / 2 / 3;
-        padding: 10px;
+        padding: 10px 10px 5px;
         background-color: #fff;
     }
     &__image {
         grid-area: 1 / 1 / 3 / 2;
         width: 60vw;
-        max-width: 850px;
+        max-width: 700px;
         background-color: rgb(87, 87, 87);
         img {
             max-width: 100%;
             margin: 0 auto;
             object-fit: cover;
-            max-height: 850px;
         }
         .Post__dots.slick-dots {
             bottom: 12px;
         }
     }
 
-    &__comments {
+    &__description {
         grid-area: 2 / 2 / 3 / 3;
         background-color: #fff;
-        padding: 10px;
+        padding: 5px 10px;
+        .ant-typography {
+            overflow-wrap: anywhere;
+            margin-bottom: 5px;
+        }
+        .ant-divider {
+            margin: 0;
+        }
     }
-    &__aside,
-    &__image {
+    &__description-inner {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+        max-height: 500px;
+    }
+    &__description-top {
+        flex-grow: 1;
+        overflow: auto;
+    }
+    &__description-bottom {
     }
-}
-.parent {
 }

src/actions/actionQueries.js

@@ -16,7 +16,9 @@ export const queries = {
                                     _id text createdAt
                                 }
                             }
-                        likes{ _id}
+                        likes{ _id
+                            owner{_id}
+                        }
                         owner {_id login nick
                             avatar {url}
                             }

src/components/main/DateCreated.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export const DateCreated = ({ date }) => {
+export const DateCreated = ({ date = '' }) => {
     const newDate = new Date(date * 1)
     const resultDate = new Intl.DateTimeFormat('default').format(newDate)
     return (

src/components/main/postsFeed/PostUserPanel.jsx

@@ -1,7 +1,9 @@
 import { HeartFilled, HeartOutlined } from "@ant-design/icons"
-import { Button, Col, Row } from "antd"
+import { Button, Col, Row, Tooltip } from "antd"
+import { useState } from "react"
 import { connect } from "react-redux"
 import { actionDelLikePost, actionLikePost } from "../../../actions"
+import { CModalLikes } from "../profilePage/ModalFollow"
 
 
 const HeartLike = ({ styleFontSize, likeStatus, changeLike }) =>
@@ -15,11 +17,12 @@ const HeartLike = ({ styleFontSize, likeStatus, changeLike }) =>
                 <HeartOutlined style={{ color: '#1890ff', fontSize: `${styleFontSize}` }} />}
     />
 
-const PostUserPanel = ({ myID, postId, likes = [], addLikePost, removeLikePost }) => {
+const PostUserPanel = ({ myID, postId = '', likes = [], styleFontSize, addLikePost, removeLikePost }) => {
+    const [open, setOpen] = useState(false)
     let likeStatus
     let likeId
     likes.find(l => {
-        if (l.owner._id === myID) {
+        if (l?.owner?._id === myID) {
             likeStatus = true
             likeId = l._id
         } else {
@@ -28,28 +31,31 @@ const PostUserPanel = ({ myID, postId, likes = [], addLikePost, removeLikePost }
     })
 
     const changeLike = () => likeStatus ? removeLikePost(likeId, postId) : addLikePost(postId)
-    const styleFontSize = '1.7em'
+    const text = () => !!likes.length &&`Likes: ${likes.length}`
+
 
     return (
         <>
             <Row className="Post__panel-btn">
-                <Col className='Post__heart'>
-                    <HeartLike
-                        changeLike={changeLike}
-                        likeStatus={likeStatus}
-                        styleFontSize={styleFontSize} />
-                </Col>
+                <Tooltip title={text} >
+                    <Col className='Post__heart'>
+                        <HeartLike
+                            changeLike={changeLike}
+                            likeStatus={likeStatus}
+                            styleFontSize={styleFontSize} />
+                    </Col>
+                </Tooltip>
+
                 <Col>
+
                 </Col>
             </Row>
-            {!!likes.length && <strong>Likes: {likes.length}</strong>}
         </>
     )
 }
 
 export const CPostUserPanel = connect(state => ({
-    myID: state.auth.payload.sub.id || '',
-    myLikes: state?.promise?.myLikes?.payload || [],
+    myID: state.auth.payload.sub.id || ''
 }), {
     addLikePost: actionLikePost,
     removeLikePost: actionDelLikePost,

src/components/main/profilePage/ModalFollow.js

@@ -7,11 +7,11 @@ import { actionFindFollowers, actionFindFollowing } from '../../../actions';
 import { UserAvatar } from '../../../pages/Header';
 
 
-const ModalFolower = ({ userId, status, statusModal, data, title, follow }) => {
+const ModalFolower = ({ id, status, statusModal, data, title, follow }) => {
     const handleCancel = () => statusModal(false);
 
     useEffect(() => {
-        follow(userId)
+        follow(id)
     }, [])
 
     return (
@@ -44,13 +44,13 @@ const ModalFolower = ({ userId, status, statusModal, data, title, follow }) => {
 }
 
 export const CModalFollowers = connect(state => ({
-    userId: state?.postsFeed?.userData?._id,
+    id: state?.postsFeed?.userData?._id,
     data: state?.promise?.findFollow?.payload?.followers || [],
     status: state?.promise?.findFollow?.status
 }), { follow: actionFindFollowers })(ModalFolower)
 
 export const CModalFollowing = connect(state => ({
-    userId: state?.postsFeed?.userData?._id,
+    id: state?.postsFeed?.userData?._id,
     data: state?.promise?.findFollow?.payload?.following || [],
     status: state?.promise?.findFollow?.status
-}), { follow: actionFindFollowing })(ModalFolower)
+}), { follow: actionFindFollowing })(ModalFolower)

src/pages/MainPostsFeed.jsx

@@ -16,12 +16,12 @@ export const PostTitle = ({ owner }) =>
     <Row justify="start" align='middle'>
         <Link to={`/profile/${owner?._id}`} className='owner'>
             <UserAvatar avatar={owner?.avatar} login={owner?.login} avatarSize={'45px'} nick={owner?.nick} />
-            <span>{owner?.nick ? owner.nick : owner?.login ? owner.login : 'Null'}</span>
+            <span className='nick'>{owner?.nick ? owner.nick : owner?.login ? owner.login : 'Null'}</span>
         </Link >
     </Row>
 
 
-const PostDescription = ({ title, description, date }) =>
+export const PostDescription = ({ title, description, date }) =>
     <>
         <Row justify='space-between'>
             <Col >
@@ -33,12 +33,12 @@ const PostDescription = ({ title, description, date }) =>
                 </Text>
             </Col>
         </Row>
-        <Paragraph ellipsis={true ? { rows: 1, expandable: true, symbol: 'more' } : false}>
+        <Paragraph ellipsis={true ? { rows: 1, expandable: true, symbol: '...' } : false}>
             {description}
         </Paragraph>
     </>
 
-const Comments = ({ comments }) =>
+export const Comments = ({ comments }) =>
     <>
         {comments && comments.length > 2 &&
             <Link to={`/#`}>
@@ -63,7 +63,7 @@ const Post = ({ postData: { _id, text, title, owner, images, createdAt = '', com
             cover={<PostImage images={images} />}
             actions={[<CFieldCommentSend postId={_id} />]}
         >
-            <CPostUserPanel postId={_id} likes={likes} />
+            <CPostUserPanel postId={_id} likes={likes} styleFontSize='1.7em' />
             <PostDescription title={title} description={text} date={createdAt} />
             <Comments comments={comments} />
         </Card>
@@ -71,7 +71,7 @@ const Post = ({ postData: { _id, text, title, owner, images, createdAt = '', com
 
 
 
-const MainPostsFeed = ({ posts, count, postsFollowing, postsFollowingRemove, following }) => {
+const MainPostsFeed = ({ posts, postsFollowing, postsFollowingRemove, following }) => {
     const [checkScroll, setCheckScroll] = useState(true)
 
     useEffect(() => {
@@ -98,7 +98,7 @@ const MainPostsFeed = ({ posts, count, postsFollowing, postsFollowingRemove, fol
 
     return (
         <>
-            {posts.map(p => <Post key={p._id} postData={p} />)}
+            {Array.isArray(posts) && posts.map(p => <Post key={p._id} postData={p} />)}
         </>
     )
 }

src/pages/PostPage.jsx

@@ -1,42 +1,124 @@
 import React, { useEffect } from 'react'
-import { Row, Col } from 'antd';
+import { Row, Col, Divider } from 'antd';
 import { connect } from 'react-redux'
 import PostImage from '../components/main/postsFeed/PostImage'
-import { PostTitle } from './MainPostsFeed';
+import { PostTitle, PostDescription } from './MainPostsFeed';
 import { actionRemovePostsFeedAC } from '../actions';
+import Text from 'antd/lib/typography/Text';
+import { CFieldCommentSend } from '../components/main/postsFeed/FieldComment';
+import { CPostUserPanel } from '../components/main/postsFeed/PostUserPanel';
+import { createElement, useState } from 'react';
+import { Comment, Tooltip, Avatar } from 'antd';
+import moment from 'moment';
+import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
 
-const PostPageAside = ({ data: { owner } }) => {
+const Demo = () => {
+    const [likes, setLikes] = useState(0);
+    const [dislikes, setDislikes] = useState(0);
+    const [action, setAction] = useState(null);
+
+    const like = () => {
+        setLikes(1);
+        setDislikes(0);
+        setAction('liked');
+    };
+
+    const dislike = () => {
+        setLikes(0);
+        setDislikes(1);
+        setAction('disliked');
+    };
+
+    const actions = [
+        <Tooltip key="comment-basic-like" title="Like">
+            <span onClick={like}>
+                {createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
+                <span className="comment-action">{likes}</span>
+            </span>
+        </Tooltip>,
+        <Tooltip key="comment-basic-dislike" title="Dislike">
+            <span onClick={dislike}>
+                {createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined)}
+                <span className="comment-action">{dislikes}</span>
+            </span>
+        </Tooltip>,
+        <span key="comment-basic-reply-to">Reply to</span>,
+    ];
+
+    return (
+        <Comment
+            actions={actions}
+            author={<a>Han Solo</a>}
+            avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
+            content={
+                <p>
+                    We supply a series of design principles, practical patterns and high quality design
+                    resources (Sketch and Axure), to help people create their product prototypes beautifully
+                    and efficiently.
+                </p>
+            }
+            datetime={
+                <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
+                    <span>{moment().fromNow()}</span>
+                </Tooltip>
+            }
+        />
+    );
+};
+
+
+
+
+
+const PostPageTitle = ({ data: { owner } }) =>
+    <PostTitle owner={owner} />
+
+const CPostPageTitle = connect(state => ({ data: state?.postsFeed?.posts || {} }))(PostPageTitle)
+
+const PostComments = ({ }) => {
 
     return (
-        <PostTitle owner={owner} />
+        <>  </>
     )
 }
 
-const CPostPageAside = connect(state => ({ data: state?.postsFeed?.posts || {} }))(PostPageAside)
+const CPostComments = connect()(PostComments)
 
-const PostPage = ({ data: { images } }) => {
-    useEffect(() => {
-        return () => {
-            actionRemovePostsFeedAC()
-        }
-    }, [])
+const PostPageDescrption = ({ data: { _id, likes, text, title, createdAt, } }) =>
+    <div className='PostOne__description-inner'>
+        <div className='PostOne__description-top'>
+            <PostDescription title={title} description={text} date={createdAt} />
+            <Divider plain><Text type='secodary'></Text>Comments</Divider>
+            <CPostComments />
+            <Demo />
+        </div>
+        <div className='PostOne__description-bottom'>
+            <Divider ></Divider>
+            <CPostUserPanel likes={likes} postId={_id}
+                styleFontSize='1.3em' />
+            <CFieldCommentSend postId={_id} />
+        </div>
+    </div>
+
+
+const CPostPageDescrption = connect(state => ({ data: state?.postsFeed?.posts || {} }))(PostPageDescrption)
 
-    return (
-        <div className='PostOne'>
-            <div className="PostOne__inner">
-                <div className='PostOne__image'>
-                    <PostImage images={images} />
-                </div>
-                <div className='PostOne__title'>
-                    <CPostPageAside />
-                </div>
-                <div className="PostOne__comments">fjlsdglks</div>
-            </div>
 
+const PostPage = ({ data: { images } }) =>
+    <div className='PostOne'>
+        <div className='PostOne__inner'>
+            <div className='PostOne__image'>
+                <PostImage images={images} />
+            </div>
+            <div className='PostOne__title'>
+                <CPostPageTitle />
+            </div>
+            <div className='PostOne__description'>
+                <CPostPageDescrption />
+            </div>
         </div>
-    )
+    </div>
 
-}
 
 export const CPostPage = connect(state => ({ data: state?.postsFeed?.posts || {} }))(PostPage)
-// xs={{ span: 24 }} sm={{ span: 20 }} md={{ span: 16 }} lg={{ span: 16 }}
+// xs={{ span: 24 }} sm={{ span: 20 }} md={{ span: 16 }} lg={{ span: 16 }}A

src/redux/reducers/postFeed-reducer.js

@@ -33,13 +33,17 @@ export const postsFeedReducer = (state = {}, { type, postId, newResult, userData
         'ADD-POST-LIKE': () => {
             return {
                 ...state,
-                posts: posts.map(p => p._id === postId ? p = { ...p, likes: [...newResult] } : p),
+                posts: Array.isArray(posts)
+                    ? posts.map(p => p._id === postId ? p = { ...p, likes: [...newResult] } : p)
+                    : { ...state.posts, likes: [...newResult] },
             }
         },
         'REMOVE-POST-LIKE': () => {
             return {
                 ...state,
-                posts: posts.map(p => p._id === postId ? p = { ...p, likes: [...newResult] } : p),
+                posts: Array.isArray(posts)
+                    ? posts.map(p => p._id === postId ? p = { ...p, likes: [...newResult] } : p)
+                    : { ...state.posts, likes: [...newResult] },   
             }
         },
         'ADD-COMMENT': () => {

src/redux/saga/index.js

@@ -89,6 +89,8 @@ function* postsFeedWorker() {
         postsFeed: { posts, count },
         myData: { following }
     } = yield select()
+    console.log(!Array.isArray(posts));
+    !Array.isArray(posts) && ( yield put(actionRemovePostsFeedAC()))
     const newArrFollowing = following.map(f => f._id)
     if (posts?.length !== (count ? count : 1)) {
         const taskPosts = yield fork(promiseWorker, actionPostsMyFollowing(posts?.length, newArrFollowing))