divide into parts componnt MainFeed

src/App.js

@@ -6,10 +6,10 @@ import { connect, Provider } from 'react-redux';
 import  store  from './redux/redux-store';
 import { Authorization } from './components/Authorization';
 import { Content, Main } from './pages/Content';
-import HeaderComponent from './components/header/Header';
-import { CMainPostsFeed } from './components/main/MainPostsFeed';
 import { CProfilePage } from './components/main/Profile';
 import { CAdd } from './components/main/Add';
+import HeaderComponent from './pages/Header';
+import { CMainPostsFeed } from './pages/MainPostsFeed';
 
 export const history = createHistory()
 
@@ -35,7 +35,7 @@ const AppContent = ({ isToken }) =>
                         <Route path='/profile/:_id' component={CProfilePage} />
                         <Route path='/message' component={Aside} />
                         <Route path='/add' component={CAdd} />
-                        <Redirect from='/*' to='/profile/614c8ef4f9fc3a5e42bddb28' />
+                        <Redirect from='/*' to='/' />
                     </Switch>
                 </Main>
             </Content >

src/components/header/Search.jsx

@@ -3,11 +3,10 @@ import React from 'react'
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { actionFindUsers, actionSearchUsers } from '../../actions';
-import { UserAvatar } from './Header';
+import { UserAvatar } from '../../pages/Header';
 
-const { Search } = Input;
-const FindUsersResult = ({ usersRes }) => {
-    return <div className='Header__search-drop' >
+const FindUsersResult = ({ usersRes }) =>
+    <div className='Header__search-drop' >
         {
             usersRes.length === 0 ?
                 <Empty /> :
@@ -22,25 +21,23 @@ const FindUsersResult = ({ usersRes }) => {
                 })
         }
     </div >
-}
 
-export const FieldSearch = ({ usersRes, findUsers }) => {
 
-    return (
-        <>
-            <Popover placement="bottom"
-                content={<FindUsersResult usersRes={usersRes} />}
-                destroyTooltipOnHide={true}
-                trigger="focus">
-                <></>
-                <Input
-                    placeholder="Search users"
-                    allowClear
-                    onChange={e => findUsers(e.currentTarget.value)}
-                />
-            </Popover>
-        </>
-    )
-}
+export const FieldSearch = ({ usersRes, findUsers }) =>
+    <>
+        <Popover placement="bottom"
+            content={<FindUsersResult usersRes={usersRes} />}
+            destroyTooltipOnHide={true}
+            trigger="focus">
+            <></>
+            <Input
+                placeholder="Search users"
+                allowClear
+                onChange={e => findUsers(e.currentTarget.value)}
+            />
+        </Popover>
+    </>
+
+
 
 export const CFieldSearch = connect(state => ({ usersRes: state.promise?.findUsersAll?.payload || [] }), { findUsers: actionSearchUsers })(FieldSearch) 

src/components/main/MainPostsFeed.js

@@ -1,262 +0,0 @@
-import { Card, Col, Row, Carousel, Empty, Button } from 'antd'
-import React, { createRef, useEffect, useState } from 'react'
-import { connect } from 'react-redux'
-import { Link } from 'react-router-dom'
-import { backURL } from '../../helpers'
-import { UserAvatar } from '../header/Header'
-import nodata from '../../images/nodata.png'
-import { HeartFilled, HeartOutlined, LeftCircleOutlined, RightCircleOutlined, SendOutlined, } from '@ant-design/icons'
-import Paragraph from 'antd/lib/typography/Paragraph'
-import Text from 'antd/lib/typography/Text'
-import TextArea from 'antd/lib/input/TextArea'
-import { actionDelLikePost, actionFullAddComment, actionLikePost, actionPostsFeed, actionRemovePostsFeedAC } from '../../actions'
-
-const PostTitle = ({ owner }) =>
-    <Link to={`/profile/${owner?._id}`} className='owner'>
-        <Row justify="start" align='middle'>
-            <Col >
-                <UserAvatar avatar={owner?.avatar} login={owner?.login} avatarSize={'45px'} nick={owner?.nick} />
-            </Col>
-            <Col offset={1}>
-                <span>{owner?.nick ? owner.nick : owner?.login ? owner.login : 'Null'}</span>
-            </Col>
-        </Row>
-    </Link >
-
-class PostImage extends React.Component {
-    constructor(props) {
-        super(props);
-        this.carouselRef = createRef();
-        this.state = {
-            movePrev: false,
-            moveNext: false
-        }
-    }
-
-    handleNext = () => this.carouselRef.current.next(this);
-
-    handlePrev = () => this.carouselRef.current.prev(this);
-
-    moveOnDivArray = (length, index) => {
-        if (length === 1) {
-            this.setState({ movePrev: false, moveNext: false })
-        } else if (index === 0) {
-            this.setState({ movePrev: false, moveNext: true })
-        } else if (index === length - 1 && length > 1) {
-            this.setState({ movePrev: true, moveNext: false })
-        } else {
-            this.setState({ movePrev: true, moveNext: true })
-        }
-    }
-
-    downOnDivArray = () => this.setState({ movePrev: false, moveNext: false })
-
-    render() {
-
-        const { images } = this.props
-        return (
-            <Carousel ref={this.carouselRef}
-                effect="fade"
-                infinite={false}
-                dots={{ className: 'Post__dots' }
-                }>
-                {!!images ?
-                    images.map((i, index) => i?.url ? <div key={i._id}
-                        onMouseEnter={() => this.moveOnDivArray(images.length, index)}
-                        onMouseLeave={this.downOnDivArray}>
-                        <button onClick={() => this.handlePrev()}
-                            className={`Post__prev Post__btn ${this.state.movePrev ? '--active' : ''}`}><LeftCircleOutlined /></button>
-                        <button onClick={() => this.handleNext()}
-                            className={`Post__next Post__btn ${this.state.moveNext ? '--active' : ''}`}><RightCircleOutlined /></button>
-                        <img src={backURL + '/' + i.url} />
-                    </div> :
-                        <Empty key={i._id} image={nodata} description={false} />) :
-                    <Empty image={nodata} description={false} />
-                }
-            </Carousel >
-        );
-    }
-}
-
-const HeartLike = ({ styleFontSize, likeStatus, changeLike }) =>
-    <Button
-        onClick={() => changeLike()}
-        type="none"
-        shape="circle"
-        icon={
-            likeStatus ?
-                <HeartFilled style={{ color: '#ff6969', fontSize: `${styleFontSize}` }} /> :
-                <HeartOutlined style={{ color: '#1890ff', fontSize: `${styleFontSize}` }} />}
-    />
-
-const PostUserPanel = ({ myID, postId, likes = [], addLikePost, removeLikePost }) => {
-    let likeStatus
-    let likeId
-    likes.find(l => {
-        if (l.owner._id === myID) {
-            likeStatus = true
-            likeId = l._id
-        } else {
-            likeStatus = false
-        }
-    })
-
-    const changeLike = () => likeStatus ? removeLikePost(likeId, postId) : addLikePost(postId)
-    const styleFontSize = '1.7em'
-
-    return (
-        <>
-            <Row className="Post__panel-btn">
-                <Col className='Post__heart'>
-                    <HeartLike
-                        changeLike={changeLike}
-                        likeStatus={likeStatus}
-                        styleFontSize={styleFontSize} />
-                </Col>
-                <Col>
-                </Col>
-            </Row>
-            {!!likes.length && <strong>Likes: {likes.length}</strong>}
-        </>
-    )
-}
-
-const CPostUserPanel = connect(state => ({
-    myID: state.auth.payload.sub.id || '',
-    myLikes: state?.promise?.myLikes?.payload || [],
-}), {
-    addLikePost: actionLikePost,
-    removeLikePost: actionDelLikePost,
-})(PostUserPanel)
-
-const PostDescription = ({ title, description, date }) =>
-    <>
-        <Row justify='space-between'>
-            <Col >
-                {!!title && <Text level={3} strong>{title}</Text>}
-            </Col>
-            <Col >
-                <Text type='secondary'>{date}</Text>
-            </Col>
-        </Row>
-        <Paragraph ellipsis={true ? { rows: 1, expandable: true, symbol: 'more' } : false}>
-            {description}
-        </Paragraph>
-    </>
-
-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>}
-    </>
-
-
-const FieldCommentSend = ({ postId, sentComment }) => {
-    const [commentValue, setCommentValue] = useState('')
-    const [error, setError] = useState(false)
-
-    const changeComentTextarea = (e) => {
-        setCommentValue(e.currentTarget.value)
-        setError(false)
-    }
-    const sendCommentValid = (value) => {
-        if (value.trim() !== '') {
-            sentComment(postId, value.trim())
-            setCommentValue('')
-        } else {
-            setError(true)
-        }
-    }
-    return (
-        <>
-            {error && <Text type='danger'>Field is required</Text>}
-            <Row align='middle' className='Post__send-comment'>
-                <Col flex='auto' offset={1}>
-                    <TextArea value={commentValue}
-                        placeholder="Add a comment ..."
-                        autoSize={{ minRows: 1, maxRows: 2 }}
-                        onChange={changeComentTextarea}
-                        bordered={false}
-                    />
-                </Col>
-                <Col span={2}>
-                    <Button
-                        onClick={() => sendCommentValid(commentValue)}
-                        icon={< SendOutlined
-                            style={{ fontSize: '1.2em', opacity: .6 }} />} />
-                </Col>
-            </Row>
-        </>
-    )
-}
-
-const CFieldCommentSend = connect(null, { sentComment: actionFullAddComment })(FieldCommentSend)
-
-const Post = ({ postData: { _id, text, title, owner, images, createdAt = '', comments, likes } }) => {
-    const date = new Date(createdAt * 1)
-    const resultDate = new Intl.DateTimeFormat('default').format(date)
-    return (
-        <div className='Post'>
-            <Card
-                title={<PostTitle owner={owner} />}
-                cover={<PostImage images={images} />}
-                actions={[<CFieldCommentSend postId={_id} />]}
-            >
-                <CPostUserPanel postId={_id} likes={likes} />
-                <PostDescription title={title} description={text} date={resultDate} />
-                <Comments comments={comments} />
-            </Card>
-        </div>
-    )
-}
-
-const MainPostsFeed = ({ posts, count, postsFollowing, postsFollowingRemove, following }) => {
-    const [checkScroll, setCheckScroll] = useState(true)
-
-    useEffect(() => {
-        if (checkScroll && following.length !== 0) {
-            postsFollowing(following)
-            setCheckScroll(false)
-        }
-    }, [checkScroll, following])
-
-    useEffect(() => {
-        document.addEventListener('scroll', scrollHandler)
-        return () => {
-            document.removeEventListener('scroll', scrollHandler)
-            postsFollowingRemove()
-            console.log(posts.length);
-        }
-    }, [])
-
-    const scrollHandler = (e) => {
-        if (e.target.documentElement.scrollHeight - (e.target.documentElement.scrollTop + window.innerHeight) < 500) {
-            setCheckScroll(true)
-        }
-    }
-    return (
-        <>
-            {posts.map(p => <Post key={p._id} postData={p} />)}
-        </>
-    )
-}
-
-export const CMainPostsFeed = connect(state => ({
-    posts: state?.postsFeed?.posts || [],
-    following: state?.myData.following || []
-}), {
-    postsFollowing: actionPostsFeed,
-    postsFollowingRemove: actionRemovePostsFeedAC,
-})(MainPostsFeed)

src/components/main/Profile.js

@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { actionProfilePageData, actionRemovePostsFeedAC, actionSubscribe, actionUnSubscribe } from '../../actions'
 import { backURL } from '../../helpers'
-import { UserAvatar } from '../header/Header'
+import { UserAvatar } from '../../pages/Header'
 
 const ModalFolower = ({ statusModal, data, title }) => {
 
@@ -132,8 +132,8 @@ const ProfilePage = ({ match: { params: { _id } }, posts, count, getProfileUser,
     }, [_id])
 
     useEffect(() => {
-        if (checkScroll ) {
-         
+        if (checkScroll) {
+
             getProfileUser(_id)
             setCheckScroll(false)
         }

src/components/main/postsFeed/FieldComment.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import Text from 'antd/lib/typography/Text'
+import TextArea from 'antd/lib/input/TextArea'
+import { SendOutlined, } from '@ant-design/icons'
+import { connect } from 'react-redux'
+import { Button, Col, Row } from 'antd'
+import { actionFullAddComment } from '../../../actions'
+
+
+const FieldCommentSend = ({ postId, sentComment }) => {
+    const [commentValue, setCommentValue] = useState('')
+    const [error, setError] = useState(false)
+
+    const changeComentTextarea = (e) => {
+        setCommentValue(e.currentTarget.value)
+        setError(false)
+    }
+    const sendCommentValid = (value) => {
+        if (value.trim() !== '') {
+            sentComment(postId, value.trim())
+            setCommentValue('')
+        } else {
+            setError(true)
+        }
+    }
+
+    return (
+        <>
+            {error && <Text type='danger'>Field is required</Text>}
+            <Row align='middle' className='Post__send-comment'>
+                <Col flex='auto' offset={1}>
+                    <TextArea value={commentValue}
+                        placeholder="Add a comment ..."
+                        autoSize={{ minRows: 1, maxRows: 2 }}
+                        onChange={changeComentTextarea}
+                        bordered={false}
+                    />
+                </Col>
+                <Col span={2}>
+                    <Button
+                        onClick={() => sendCommentValid(commentValue)}
+                        icon={< SendOutlined
+                            style={{ fontSize: '1.2em', opacity: .6 }} />}
+                    />
+                </Col>
+            </Row>
+        </>
+    )
+}
+
+export const CFieldCommentSend = connect(null, { sentComment: actionFullAddComment })(FieldCommentSend)

src/components/main/postsFeed/PostImage.jsx

@@ -0,0 +1,64 @@
+import { LeftCircleOutlined, RightCircleOutlined } from "@ant-design/icons";
+import { Carousel, Empty } from "antd";
+import React, { createRef } from "react";
+import nodata from '../../../images/nodata.png'
+import { backURL } from '../../../helpers/index'
+
+
+
+class PostImage extends React.Component {
+    constructor(props) {
+        super(props);
+        this.carouselRef = createRef();
+        this.state = {
+            movePrev: false,
+            moveNext: false
+        }
+    }
+
+    handleNext = () => this.carouselRef.current.next(this);
+
+    handlePrev = () => this.carouselRef.current.prev(this);
+
+    moveOnDivArray = (length, index) => {
+        if (length === 1) {
+            this.setState({ movePrev: false, moveNext: false })
+        } else if (index === 0) {
+            this.setState({ movePrev: false, moveNext: true })
+        } else if (index === length - 1 && length > 1) {
+            this.setState({ movePrev: true, moveNext: false })
+        } else {
+            this.setState({ movePrev: true, moveNext: true })
+        }
+    }
+
+    downOnDivArray = () => this.setState({ movePrev: false, moveNext: false })
+
+    render() {
+
+        const { images } = this.props
+        return (
+            <Carousel ref={this.carouselRef}
+                effect="fade"
+                infinite={false}
+                dots={{ className: 'Post__dots' }
+                }>
+                {!!images ?
+                    images.map((i, index) => i?.url ? <div key={i._id}
+                        onMouseEnter={() => this.moveOnDivArray(images.length, index)}
+                        onMouseLeave={this.downOnDivArray}>
+                        <button onClick={() => this.handlePrev()}
+                            className={`Post__prev Post__btn ${this.state.movePrev ? '--active' : ''}`}><LeftCircleOutlined /></button>
+                        <button onClick={() => this.handleNext()}
+                            className={`Post__next Post__btn ${this.state.moveNext ? '--active' : ''}`}><RightCircleOutlined /></button>
+                        <img src={backURL + '/' + i.url} />
+                    </div> :
+                        <Empty key={i._id} image={nodata} description={false} />) :
+                    <Empty image={nodata} description={false} />
+                }
+            </Carousel >
+        );
+    }
+}
+
+export default PostImage

src/components/main/postsFeed/PostUserPanel.jsx

@@ -0,0 +1,56 @@
+import { HeartFilled, HeartOutlined } from "@ant-design/icons"
+import { Button, Col, Row } from "antd"
+import { connect } from "react-redux"
+import { actionDelLikePost, actionLikePost } from "../../../actions"
+
+
+const HeartLike = ({ styleFontSize, likeStatus, changeLike }) =>
+    <Button
+        onClick={() => changeLike()}
+        type="none"
+        shape="circle"
+        icon={
+            likeStatus ?
+                <HeartFilled style={{ color: '#ff6969', fontSize: `${styleFontSize}` }} /> :
+                <HeartOutlined style={{ color: '#1890ff', fontSize: `${styleFontSize}` }} />}
+    />
+
+const PostUserPanel = ({ myID, postId, likes = [], addLikePost, removeLikePost }) => {
+    let likeStatus
+    let likeId
+    likes.find(l => {
+        if (l.owner._id === myID) {
+            likeStatus = true
+            likeId = l._id
+        } else {
+            likeStatus = false
+        }
+    })
+
+    const changeLike = () => likeStatus ? removeLikePost(likeId, postId) : addLikePost(postId)
+    const styleFontSize = '1.7em'
+
+    return (
+        <>
+            <Row className="Post__panel-btn">
+                <Col className='Post__heart'>
+                    <HeartLike
+                        changeLike={changeLike}
+                        likeStatus={likeStatus}
+                        styleFontSize={styleFontSize} />
+                </Col>
+                <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 || [],
+}), {
+    addLikePost: actionLikePost,
+    removeLikePost: actionDelLikePost,
+})(PostUserPanel)

src/pages/Content.js

@@ -13,9 +13,6 @@ export const Main = ({ children }) =>
 
 
 
-// export const CMain = connect(null, { postsFollowing: myFolowingPosts })(Main)
-
-
 export const Content = ({ children }) =>
     <>{children}</>
 

src/components/header/Header.jsx

@@ -1,20 +1,19 @@
 import React from 'react'
-import logo from '../../logo.svg';
-import noAva from '../../images/noAva.png'
+import logo from '../logo.svg';
+import noAva from '../images/noAva.png'
 import { Link } from 'react-router-dom';
-import { CFieldSearch } from './Search';
+import { CFieldSearch } from '../components/header/Search';
 import { connect } from 'react-redux';
-import { actionAuthLogout, actionProfilData } from '../../actions';
-import { backURL } from '../../helpers';
+import { actionAuthLogout } from '../actions';
+import { backURL } from '../helpers';
 import Layout, { Header } from 'antd/lib/layout/layout';
 import { Avatar, Col, Menu, Popover, Row } from 'antd';
 import { UserOutlined, CompassOutlined, SettingOutlined, HomeOutlined, ImportOutlined, MessageOutlined, PlusCircleOutlined } from '@ant-design/icons/lib/icons';
 
-const UserNav = ({ id }) => {
-    return <div className='UserNav'>
+const UserNav = () =>
+    <div className='UserNav'>
         <CUserNavIcon />
     </div>
-}
 
 export const UserAvatar = ({ avatarSize, avatar }) => {
     return (
@@ -32,6 +31,7 @@ export const UserAvatar = ({ avatarSize, avatar }) => {
     )
 }
 
+
 const ProfileDropMenu = ({ myID, onLogOut }) =>
     <Menu className='dropMenu'>
         <Menu.Item key={'0'}>
@@ -48,6 +48,7 @@ const ProfileDropMenu = ({ myID, onLogOut }) =>
 
 const CProfileDropMenu = connect(null, { onLogOut: actionAuthLogout })(ProfileDropMenu)
 
+
 const UserNavIcon = ({ userData: { _id, avatar, login } }) =>
     <Row justify="end" align="middle" className='Header__userNav'>
         <Col >
@@ -70,15 +71,15 @@ const UserNavIcon = ({ userData: { _id, avatar, login } }) =>
         </Col>
     </Row >
 
-const CUserNav = connect(state => ({ id: state.auth?.payload.sub.id || {} }))(UserNav)
-
 const CUserNavIcon = connect(state => ({ userData: state.myData || {} }))(UserNavIcon)
 
+
 const Logo = () =>
     <Link className='Logo' to='/'>
         <img src={logo} alt='logo' width='180vw' />
     </Link>
 
+
 const HeaderComponent = () =>
     <Layout>
         <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
@@ -90,7 +91,7 @@ const HeaderComponent = () =>
                     <CFieldSearch />
                 </Col>
                 <Col span={8}>
-                    <CUserNav />
+                    <UserNav />
                 </Col>
             </Row>
         </Header>

src/pages/MainPostsFeed.jsx

@@ -0,0 +1,114 @@
+import { Card, Col, Row } from 'antd'
+import React, { useEffect, useState } from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+import { UserAvatar } from './Header'
+import Paragraph from 'antd/lib/typography/Paragraph'
+import Text from 'antd/lib/typography/Text'
+import { actionPostsFeed, actionRemovePostsFeedAC } from '../actions'
+import PostImage from '../components/main/postsFeed/PostImage'
+import { CPostUserPanel } from '../components/main/postsFeed/PostUserPanel'
+import { CFieldCommentSend } from '../components/main/postsFeed/FieldComment'
+
+const PostTitle = ({ owner }) =>
+    <Link to={`/profile/${owner?._id}`} className='owner'>
+        <Row justify="start" align='middle'>
+            <Col >
+                <UserAvatar avatar={owner?.avatar} login={owner?.login} avatarSize={'45px'} nick={owner?.nick} />
+            </Col>
+            <Col offset={1}>
+                <span>{owner?.nick ? owner.nick : owner?.login ? owner.login : 'Null'}</span>
+            </Col>
+        </Row>
+    </Link >
+
+const PostDescription = ({ title, description, date }) =>
+    <>
+        <Row justify='space-between'>
+            <Col >
+                {!!title && <Text level={3} strong>{title}</Text>}
+            </Col>
+            <Col >
+                <Text type='secondary'>{date}</Text>
+            </Col>
+        </Row>
+        <Paragraph ellipsis={true ? { rows: 1, expandable: true, symbol: 'more' } : false}>
+            {description}
+        </Paragraph>
+    </>
+
+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>}
+    </>
+
+const Post = ({ postData: { _id, text, title, owner, images, createdAt = '', comments, likes } }) => {
+    const date = new Date(createdAt * 1)
+    const resultDate = new Intl.DateTimeFormat('default').format(date)
+    return (
+        <div className='Post'>
+            <Card
+                title={<PostTitle owner={owner} />}
+                cover={<PostImage images={images} />}
+                actions={[<CFieldCommentSend postId={_id} />]}
+            >
+                <CPostUserPanel postId={_id} likes={likes} />
+                <PostDescription title={title} description={text} date={resultDate} />
+                <Comments comments={comments} />
+            </Card>
+        </div>
+    )
+}
+
+const MainPostsFeed = ({ posts, count, postsFollowing, postsFollowingRemove, following }) => {
+    const [checkScroll, setCheckScroll] = useState(true)
+
+    useEffect(() => {
+        if (checkScroll && following.length !== 0) {
+            postsFollowing(following)
+            setCheckScroll(false)
+        }
+    }, [checkScroll, following])
+
+    useEffect(() => {
+        document.addEventListener('scroll', scrollHandler)
+        return () => {
+            document.removeEventListener('scroll', scrollHandler)
+            postsFollowingRemove()
+            console.log(posts.length);
+        }
+    }, [])
+
+    const scrollHandler = (e) => {
+        if (e.target.documentElement.scrollHeight - (e.target.documentElement.scrollTop + window.innerHeight) < 500) {
+            setCheckScroll(true)
+        }
+    }
+
+    return (
+        <>
+            {posts.map(p => <Post key={p._id} postData={p} />)}
+        </>
+    )
+}
+
+export const CMainPostsFeed = connect(state => ({
+    posts: state?.postsFeed?.posts || [],
+    following: state?.myData.following || []
+}), {
+    postsFollowing: actionPostsFeed,
+    postsFollowingRemove: actionRemovePostsFeedAC,
+})(MainPostsFeed)

src/redux/auth-reducer.js

@@ -1,4 +1,4 @@
-import { jwtDecode } from '../helpers'
+import { jwtDecode } from '../../helpers'
 
 
 export const authReducer = (state, { type, token, remember }) => {

src/redux/redux-store.js

@@ -1,8 +1,8 @@
 import { createStore, combineReducers, applyMiddleware } from 'redux';
-import { authReducer } from './auth-reducer';
-import { myProfileReducer } from './myProfile-reducer';
-import { postsFeedReducer } from './postFeed-reducer';
-import { promiseReducer } from './promise-reducer';
+import { authReducer } from './reducers/auth-reducer';
+import { myProfileReducer } from './reducers/myProfile-reducer';
+import { postsFeedReducer } from './reducers/postFeed-reducer';
+import { promiseReducer } from './reducers/promise-reducer';
 import createSagaMiddleware from 'redux-saga'
 import { rootSaga } from './saga';
 import { actionFullAboutMe } from '../actions'