Bladeren bron

added infinity scroll

makstravm 3 jaren geleden
bovenliggende
commit
0beb7070df
2 gewijzigde bestanden met toevoegingen van 25 en 7 verwijderingen
  1. 20 2
      src/components/main/MainPostFeed.js
  2. 5 5
      src/redux/postFeed-reducer.js

+ 20 - 2
src/components/main/MainPostFeed.js

@@ -89,7 +89,7 @@ const HeartLike = ({ styleFontSize, likeStatus, changeLike }) =>
                 <HeartOutlined style={{ color: '#1890ff', fontSize: `${styleFontSize}` }} />}
     />
 
-const PostUserPanel = ({ myID, myLikes, postId, likes, addLikePost, removeLikePost }) => {
+const PostUserPanel = ({ myID, postId, likes, addLikePost, removeLikePost }) => {
     let likeStatus
     let likeId
     likes.find(l => {
@@ -223,9 +223,27 @@ const Post = ({ postData: { _id, text, title, owner, images, createdAt, comments
 }
 
 const MainPostFeed = ({ posts, postsFollowing }) => {
+    const [checkScroll, setCheckScroll] = useState(true)
+    console.log(posts.length);
+    useEffect(async () => {
+        if (checkScroll) {
+            await postsFollowing(posts.length)
+            setCheckScroll(false)
+        }
+    }, [checkScroll])
+
     useEffect(() => {
-        postsFollowing()
+        document.addEventListener('scroll', scrollHandler)
+        return () => {
+            document.removeEventListener('scroll', scrollHandler)
+        }
     }, [])
+
+    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} />)}

+ 5 - 5
src/redux/postFeed-reducer.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import { actionAddCommentAC } from '../actions'
 import { gql } from '../helpers'
 import { actionPromise } from './redux-thunk'
 
@@ -7,9 +6,10 @@ export const postFeedReducer = (state = {}, { type, addPosts, newLike, postId, l
     const { posts } = state
     const types = {
         'ADD-POST-FEED': () => {
+            console.log(posts, addPosts);
             return {
                 ...state,
-                posts: !!state.addPosts ? [...state.addPosts, ...addPosts] : [...addPosts],
+                posts: !!posts ? [...posts, ...addPosts] : [...addPosts]
             }
         },
         'ADD-POST-LIKE': () => {
@@ -47,7 +47,7 @@ export const postFeedReducer = (state = {}, { type, addPosts, newLike, postId, l
 
 
 
-export const actionMyFolowisgPosts = (skip = 738) =>
+export const actionMyFolowisgPosts = (skip) =>
     actionPromise('followingPosts',
         gql(`query allposts($query: String!){
         PostFind(query:$query){
@@ -62,7 +62,7 @@ export const actionMyFolowisgPosts = (skip = 738) =>
             query: JSON.stringify([{},
             {
                 sort: [{ _id: -1 }],
-                skip: [+skip],
-                limit: [1]
+                skip: [skip +735],
+                limit: [10]
             }])
         }))