fix render posts, added scroll end conditions. и шоб не було скучно, начинаем секас с Сагой

src/actions/index.js

@@ -164,7 +164,7 @@ export const actionProfilePostCount = (_id) =>
                 }`, { id: JSON.stringify([{ ___owner: { $in: _id } }]) }))
 
 //****************---Action ProfileData ---*************************//
-
+//  
 export const actionUpdateMyFollowing = (_id) =>
     actionPromise('upDateFollowing', gql(` query followers($id:String!){
         UserFindOne(query: $id){

src/components/main/Add.js

@@ -5,6 +5,7 @@ import { Upload, message } from 'antd';
 import { backURL, gql } from '../../helpers';
 import { actionSetAvatar } from '../../actions';
 import { actionFullSetAvatar } from '../../redux/redux-thunk';
+import { Loo } from './Loo';
 
 const Add = ({ imageUrl, onUploadFile }) => {
     const [loading, setLoading] = useState(false)
@@ -12,11 +13,11 @@ const Add = ({ imageUrl, onUploadFile }) => {
     const props = {
         name: 'photo',
         action: `${backURL}/upload`,
-        headers: localStorage.authToken || sessionStorage.authToken ? { Authorization: 'Bearer ' + (localStorage.authToken||sessionStorage.authToken) } : {}
+        headers: localStorage.authToken || sessionStorage.authToken ? { Authorization: 'Bearer ' + (localStorage.authToken || sessionStorage.authToken) } : {}
     }
 
     const handleChange = async ({ file }) => {
-   
+
         if (file.status === 'uploading') {
             setLoading(true)
         }
@@ -30,21 +31,29 @@ const Add = ({ imageUrl, onUploadFile }) => {
             message.error(`${file.name} file upload failed.`);
         }
     }
-    
+
     return (
-        <Upload {...props}
-            listType="picture-card"
-            showUploadList={false}
-            onChange={handleChange}
-            className="avatar-uploader">
-            {imageLoad ?
-                <img src={`${backURL + '/' + imageUrl}`} alt="avatar" style={{ width: '100%' }} /> :
-                <div>
-                    {loading ? <LoadingOutlined /> : <PlusOutlined />}
-                    <div style={{ marginTop: 8 }}>Upload</div>
-                </div>}
-        </Upload>
+        <>
+            <Upload {...props}
+                listType="picture-card"
+                showUploadList={false}
+                onChange={handleChange}
+                className="avatar-uploader">
+                {imageLoad ?
+                    <img src={`${backURL + '/' + imageUrl}`} alt="avatar" style={{ width: '100%' }} /> :
+                    <div>
+                        {loading ? <LoadingOutlined /> : <PlusOutlined />}
+                        <div style={{ marginTop: 8 }}>Upload</div>
+                    </div>}
+            </Upload>
+            <hr />
+            <hr />
+            <hr />
+            <hr />
+            <Loo />
+        </>
+
     )
 }
 
-export const CAdd = connect(state => ({ imageUrl: state?.myData?.avatar?.url}), { onUploadFile: actionFullSetAvatar })(Add)
+export const CAdd = connect(state => ({ imageUrl: state?.myData?.avatar?.url }), { onUploadFile: actionFullSetAvatar })(Add)

src/components/main/Loo.js

@@ -0,0 +1,109 @@
+import { Upload, Modal } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import React from 'react';
+import { backURL } from '../../helpers';
+
+function getBase64(file) {
+    return new Promise((resolve, reject) => {
+   
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = error => reject(error);
+    });
+}
+
+export class Loo extends React.Component {
+    state = {
+        previewVisible: false,
+        previewImage: '',
+        previewTitle: '',
+        fileList: [
+            {
+                uid: '-1',
+                name: 'image.png',
+                status: 'done',
+                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+            },
+            {
+                uid: '-2',
+                name: 'image.png',
+                status: 'done',
+                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+            },
+            {
+                uid: '-3',
+                name: 'image.png',
+                status: 'done',
+                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+            },
+            {
+                uid: '-4',
+                name: 'image.png',
+                status: 'done',
+                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+            },
+            {
+                uid: '-xxx',
+                percent: 50,
+                name: 'image.png',
+                status: 'uploading',
+                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+            },
+            {
+                uid: '-5',
+                name: 'image.png',
+                status: 'error',
+            },
+        ],
+    };
+
+    handleCancel = () => this.setState({ previewVisible: false });
+
+    handlePreview = async file => {
+        if (!file.url && !file.preview) {
+            file.preview = await getBase64(file.originFileObj);
+        }
+
+        this.setState({
+            previewImage: file.url || file.preview,
+            previewVisible: true,
+            previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
+        });
+    };
+
+    handleChange = ({ fileList }) => this.setState({ fileList });
+
+    render() {
+        const { previewVisible, previewImage, fileList, previewTitle } = this.state;
+        const uploadButton = (
+            <div>
+                <PlusOutlined />
+                <div style={{ marginTop: 8 }}>Upload</div>
+            </div>
+        );
+        return (
+            <>
+                <Upload
+                name='photo'
+                    action={`${backURL}/upload`}
+                    listType="picture-card"
+                    fileList={fileList}
+                    onPreview={this.handlePreview}
+                    onChange={this.handleChange}
+                >
+                    {fileList.length >= 8 ? null : uploadButton}
+                </Upload>
+                <Modal
+                    visible={previewVisible}
+                    title={previewTitle}
+                    footer={null}
+                    onCancel={this.handleCancel}
+                >
+                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
+                </Modal>
+            </>
+        );
+    }
+}
+

src/components/main/MainPostsFeed.js

@@ -227,17 +227,20 @@ const MainPostsFeed = ({ posts, countPosts, postsFollowing, postsFollowingRemove
     const [checkScroll, setCheckScroll] = useState(true)
 
     useEffect(async () => {
-        if (checkScroll && following.length !== 0 && posts.length < countPosts) {
-            await postsFollowing(posts.length, following)
+        if (checkScroll && following.length !== 0) {
+            await postsFollowing(following)
             setCheckScroll(false)
         }
     }, [checkScroll, following])
 
+
+
     useEffect(() => {
         document.addEventListener('scroll', scrollHandler)
         return () => {
             document.removeEventListener('scroll', scrollHandler)
             postsFollowingRemove()
+            console.log(posts.length);
         }
     }, [])
 

src/components/main/Profile.js

@@ -3,9 +3,9 @@ import Modal from 'antd/lib/modal/Modal'
 import React, { useEffect, useState } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
-import { actionRemovePostsAC, actionRemovePostsFeedAC } from '../../actions'
+import { actionRemovePostsFeedAC } from '../../actions'
 import { backURL } from '../../helpers'
-import { actionFullProfilePageData, actionFullSubscribe, actionFullUnSubscribe, actionProfilePageData } from '../../redux/redux-thunk'
+import { actionFullProfilePageData, actionFullSubscribe, actionFullUnSubscribe } from '../../redux/redux-thunk'
 import { UserAvatar } from '../header/Header'
 
 const ModalFolower = ({ statusModal, data, title }) => {
@@ -125,15 +125,16 @@ const ProfilePage = ({ match: { params: { _id } }, posts, countPost, getProfileU
 
     useEffect(() => {
         document.addEventListener('scroll', scrollHandler)
-        return () => {
+        return async () => {
             document.removeEventListener('scroll', scrollHandler)
             setCheckScroll(true)
-            clearDataProfile()
+            await clearDataProfile()
+            console.log(posts.length);
         }
     }, [_id])
     useEffect(async () => {
-        if (checkScroll && posts.length < countPost) {
-            await getProfileUser(_id, posts.length)
+        if (checkScroll) {
+            await getProfileUser(_id)
             setCheckScroll(false)
         }
     }, [_id, checkScroll])
@@ -155,6 +156,5 @@ const ProfilePage = ({ match: { params: { _id } }, posts, countPost, getProfileU
 }
 
 export const CProfilePage = connect(state => ({
-    posts: state?.postsFeed?.posts || [],
-    countPost: state?.postsFeed?.count || 1
+    posts: state?.postsFeed?.posts || []
 }), { getProfileUser: actionFullProfilePageData, clearDataProfile: actionRemovePostsFeedAC })(ProfilePage)

src/redux/postFeed-reducer.js

@@ -15,7 +15,8 @@ export const postsFeedReducer = (state = {}, { type, postId, newResult, userData
             return {
                 ...state,
                 posts: [],
-                userData: {}
+                userData: {},
+                count: 0
             }
         },
         'ADD-POST-LIKE': () => {