added page all posts

src/App.js

@@ -5,13 +5,14 @@ import createHistory from "history/createBrowserHistory";
 import { connect, Provider } from 'react-redux';
 import store from './redux/redux-store';
 import { Authorization } from './components/Authorization';
-import { Container, ContainerLg, Content, Main } from './pages/Content';
+import { Container, Content, Main } from './pages/Content';
 import { CProfilePage } from './pages/ProfilePage';
 import { CAdd } from './components/main/Add';
 import HeaderComponent from './pages/Header';
 import { CMainPostsFeed } from './pages/MainPostsFeed';
 import { CRRoute } from './helpers';
 import { CPostPage } from './pages/PostPage';
+import { CAllPosts } from './pages/AllPosts';
 
 export const history = createHistory()
 
@@ -31,16 +32,17 @@ const AppContent = ({ isToken }) =>
 
             <Content>
                 <HeaderComponent />
-                    <Main>
-                        <Container>
-                            <Route path='/' component={CMainPostsFeed} exact />
-                            <Route path='/profile/:_id' component={CProfilePage} />
-                            <Route path='/message' component={Aside} />
-                            <Route path='/add' component={CAdd} />
-                        </Container>
-                        <CRRoute path='/post/:id' component={CPostPage} />
-                        {/* <Redirect from='/*' to='/' /> */}
-                    </Main>
+                <Main>
+                    <Container>
+                        <Route path='/' component={CMainPostsFeed} exact />
+                        <Route path='/profile/:_id' component={CProfilePage} />
+                        <Route path='/message' component={Aside} />
+                        <Route path='/add' component={CAdd} />
+                        <CRRoute path='/all' component={CAllPosts} />
+                    </Container>
+                    <CRRoute path='/post/:id' component={CPostPage} />
+                    {/* <Redirect from='/*' to='/' /> */}
+                </Main>
             </Content >
 
 

src/App.scss

@@ -197,8 +197,8 @@ body {
 .Post {
     padding: 10px 0;
     position: relative;
-
     img {
+        width: 100%;
         margin: 0 auto;
         padding: 1px;
     }
@@ -226,6 +226,7 @@ body {
         height: 300px;
         img {
             margin: 0 auto;
+            width: auto;
         }
     }
     &__btn {
@@ -443,8 +444,8 @@ body {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-
-        max-height: 500px;
+height: 100%;
+        max-height: 565px;
     }
     &__description-top {
         flex-grow: 1;

src/actions/actionQueries.js

@@ -26,5 +26,5 @@ export const queries = {
                     }`,
         variables: { id: JSON.stringify([{ _id: match.params.id }]) }
     }),
+}
 
-}

src/actions/index.js

@@ -66,7 +66,7 @@ export const actionPostsMyFollowing = (skip, myFollowing) =>
                 owner{_id, nick, login, avatar {url}}
                 likes { _id owner {_id}}   
                 images{url _id}
-                comments{_id text owner{_id nick login} likes{_id}}
+                comments{_id}
                 createdAt
         }
     }`, {
@@ -120,6 +120,29 @@ export const actionProfilePagePost = (_id, skip) => actionPromise('userOneDataPo
 }))
 
 
+//****************---All FIND POSTS---*************************//
+
+export const actionAllPosts = () => ({ type: 'ALL_POSTS' })
+
+export const actionGetAllPosts = (skip) =>
+    actionPromise('allPosts', gql(` query allPosts($id:String!){
+                PostFind(query:$id){
+                    _id   images{url _id}
+                }
+            }`, {
+        id: JSON.stringify([{},{
+            sort: [{ _id: -1 }],
+            skip: [skip || 0],
+            limit: [36]
+        }])
+    }))
+
+export const actionAllPostsCount = () =>
+    actionPromise('userPostsCount', gql(` query userPostsCount($id:String!){
+                PostCount(query:$id)
+                }`, { id: JSON.stringify([{}]) }))
+//    ,
+
 //****************---Action FindUsers ---*************************//
 
 
@@ -249,6 +272,7 @@ export const actionAddCommentAC = (newResult) => ({ type: 'ADD-COMMENT', newResu
 export const actionUpdateSubCommentAC = (findId, newResult) => ({ type: 'UPDATE-SUBCOMMENT', findId, newResult })
 
 export const actionFullAddComment = (postId, text) => ({ type: 'COMMENT_POST', postId, text })
+
 export const actionAddSubComment = (commentId, text) => ({ type: 'ADD_SUB_COMMENT', commentId, text })
 export const actionSubComment = (commentId) => ({ type: 'FIND_SUBCOMMENT', commentId })
 
@@ -257,7 +281,7 @@ export const actionAddComment = (postId, text) =>
         CommentUpsert(comment:$comment){
             _id text
         }
-    }`, { comment: { post: { _id: postId }, text } }))
+    }`, { comment: { _id: postId }, text }))
 
 export const actionFindComment = (findId) =>
     actionPromise('findCommentPost', gql(`query commentFindPost ($id:String!){

src/components/Posts.jsx

@@ -0,0 +1,31 @@
+import { connect } from "react-redux"
+import { Card, Col, Row } from 'antd'
+import postNoData from '../images/profile-post-no.jpeg'
+import { backURL, CircularGalleryIcon } from '../helpers'
+import { Link } from "react-router-dom"
+
+const Posts = ({ posts }) =>
+    <Row gutter={[15, 15]}>
+        {Array.isArray(posts) && posts.map(p => <Col key={p._id} span={8}>
+            <Link to={`/post/${p._id}`}>
+                <Card className='Profile__post' hoverable>
+                    {p?.images && p?.images[0] && p.images[0]?.url
+                        ?
+                        p.images.length === 1
+                            ?
+                            < img src={(backURL + '/' + p?.images[0].url)} alt='post Img' />
+                            :
+                            <div className='Profile__box' >
+                                <CircularGalleryIcon className='Profile__box-icon' style={{ stroke: 'black' }} />
+                                <img src={(backURL + '/' + p?.images[0]?.url)} alt='post Img' />
+                            </div>
+                        :
+                        <img src={postNoData} />}
+                </Card>
+            </Link>
+        </Col>)
+        }
+    </Row >
+
+
+export const CPosts = connect(state => ({ posts: state.postsFeed?.posts || [] }))(Posts)

src/pages/AllPosts.jsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { actionAllPosts, actionRemovePostsFeedAC } from '../actions';
+import { CPosts } from '../components/Posts';
+
+
+
+
+
+const AllPosts = ({ posts, onAllPosts, postsRemove }) => {
+    const [checkScroll, setCheckScroll] = useState(true)
+
+    useEffect(() => {
+        if (checkScroll) {
+            onAllPosts()
+            setCheckScroll(false)
+        }
+    }, [checkScroll])
+
+    useEffect(() => {
+        document.addEventListener('scroll', scrollHandler)
+        return () => {
+            document.removeEventListener('scroll', scrollHandler)
+            postsRemove()
+        }
+    }, [])
+
+    const scrollHandler = (e) => {
+        if (e.target.documentElement.scrollHeight - (e.target.documentElement.scrollTop + window.innerHeight) < 500) {
+            setCheckScroll(true)
+        }
+    }
+
+    return (
+        <CPosts />
+    )
+}
+
+export const CAllPosts = connect(state => ({ posts: state?.postsFeed?.posts || [] }), { onAllPosts: actionAllPosts, postsRemove: actionRemovePostsFeedAC, })(AllPosts)

src/pages/Header.jsx

@@ -61,7 +61,7 @@ const UserNavIcon = ({ userData: { _id, avatar, login } }) =>
             <Link to='/add'><PlusCircleOutlined /></Link>
         </Col>
         <Col >
-            <Link to='/rar'><CompassOutlined /></Link>
+            <Link to='/all'><CompassOutlined /></Link>
         </Col>
         <Col>
             <Popover placement="bottomRight" content={<CProfileDropMenu myID={_id} />} trigger={'click'}>

src/pages/MainPostsFeed.jsx

@@ -1,4 +1,4 @@
-import { Card, Col, Row } from 'antd'
+import { Card, Col, Row, Divider } from 'antd'
 import React, { useEffect, useState } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
@@ -9,7 +9,6 @@ import { actionPostsFeed, actionRemovePostsFeedAC } from '../actions'
 import { DateCreated } from '../components/main/DateCreated'
 import PostImage from '../components/main/postsFeed/PostImage'
 import { CPostUserPanel } from '../components/main/postsFeed/PostUserPanel'
-import { CFieldCommentSend } from '../components/main/postsFeed/FieldComment'
 
 export const PostTitle = ({ owner }) =>
     <Row justify="start" align='middle'>
@@ -37,34 +36,22 @@ export const PostDescription = ({ title, description, date }) =>
         </Paragraph>
     </>
 
-export const Comments = ({ comments }) =>
-    <>
-        {comments && comments.length > 2 &&
-            <Link to={`/#`}>
-                <Text type={'secondary'} level={3}>{`Посмотреть все ${comments.length} комментария`}</Text>
-            </Link>}
-        {comments && <div>
-            <div className='Post__comments'>
-                <Link to={`/#`}>{comments[comments?.length - 2]?.owner?.nick || comments[comments?.length - 2]?.owner?.login}: </Link>
-                <span>{comments[comments?.length - 2]?.text}</span>
-            </div>
-            <div className='Post__comments'>
-                <Link to={`/#`}>{comments[comments?.length - 1]?.owner?.login || comments[comments?.length - 1]?.owner?.login}: </Link>
-                <span>{comments[comments?.length - 1]?.text}</span>
-            </div>
-        </div>}
-    </>
+export const Comments = ({ comments = [], _id }) =>
+        <Link to={`/post/${_id}`}>
+            <Divider orientation="left">
+                {comments?.length ? `View ${comments.length} comments` : 'No comments'}
+            </Divider>
+        </Link>
 
 const Post = ({ postData: { _id, text, title, owner, images, createdAt = '', comments, likes } }) =>
     <div className='Post'>
         <Card
             title={<PostTitle owner={owner} />}
             cover={<PostImage images={images} />}
-            actions={[<CFieldCommentSend postId={_id} />]}
         >
             <CPostUserPanel postId={_id} likes={likes} styleFontSize='1.7em' />
             <PostDescription title={title} description={text} date={createdAt} />
-            <Comments comments={comments} />
+            <Comments comments={comments} _id={_id} />
         </Card>
     </div>
 
@@ -75,7 +62,7 @@ const MainPostsFeed = ({ posts, postsFollowing, postsFollowingRemove, following
 
     useEffect(() => {
         if (checkScroll && following.length !== 0) {
-            postsFollowing(following)
+            postsFollowing()
             setCheckScroll(false)
         }
     }, [checkScroll, following])
@@ -85,7 +72,7 @@ const MainPostsFeed = ({ posts, postsFollowing, postsFollowingRemove, following
         return () => {
             document.removeEventListener('scroll', scrollHandler)
             postsFollowingRemove()
-            console.log(posts.length);
+
         }
     }, [])
 

src/pages/ProfilePage.jsx

@@ -1,14 +1,13 @@
 import React, { useEffect, useState } from 'react'
 import { Button, Card, Col, Row } from 'antd'
-import postNoData from '../images/profile-post-no.jpeg'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
-import { actionFindFollowers, actionFindFollowing, actionProfilePageData, actionRemovePostsFeedAC, actionSubscribe, actionUnSubscribe } from '../actions'
-import { backURL, CircularGalleryIcon } from '../helpers'
+import {  actionProfilePageData, actionRemovePostsFeedAC, actionSubscribe, actionUnSubscribe } from '../actions'
 import { UserAvatar } from './Header'
 import { CModalFollowers, CModalFollowing } from '../components/main/profilePage/ModalFollow'
 import { DateCreated } from '../components/main/DateCreated'
 import Text from 'antd/lib/typography/Text'
+import { CPosts, CProfilePagePosts } from '../components/Posts'
 
 
 
@@ -81,33 +80,7 @@ const CProfilePageData = connect(state => ({
 }))(ProfilePageData)
 
 
-const ProfilePagePosts = ({ posts }) =>
-    <Row gutter={[15, 15]}>
-        {Array.isArray(posts) && posts.map(p => <Col key={p._id} span={8}>
-            <Link to={`/post/${p._id}`}>
-                <Card className='Profile__post' hoverable>
-                    {p?.images && p?.images[0] && p.images[0]?.url
-                        ?
-                        p.images.length === 1
-                            ?
-                            < img src={(backURL + '/' + p?.images[0].url)} alt='post Img' />
-                            :
-                            <div className='Profile__box' >
-                                <CircularGalleryIcon className='Profile__box-icon' style={{ stroke: 'black' }} />
-                                <img src={(backURL + '/' + p?.images[0]?.url)} alt='post Img' />
-                            </div>
-                        :
-                        <img src={postNoData} />}
-                </Card>
-            </Link>
 
-        </Col>
-        )
-        }
-    </Row >
-
-
-export const CProfilePagePosts = connect(state => ({ posts: state.postsFeed?.posts || [] }))(ProfilePagePosts)
 
 const ProfilePage = ({ match: { params: { _id } }, getProfileUser, clearDataProfile }) => {
     const [followers, setFollowers] = useState(false)
@@ -142,7 +115,7 @@ const ProfilePage = ({ match: { params: { _id } }, getProfileUser, clearDataProf
             <CProfilePageData setFollowing={setFollowing} setFollowers={setFollowers} />
             {followers && < CModalFollowers statusModal={setFollowers} title={'Followers'} />}
             {following && < CModalFollowing statusModal={setFollowing} title={'Following'} />}
-            <CProfilePagePosts />
+            <CPosts />
         </>
     )
 }