trying to solve infinite scroll – needs work #66

with some suggestions by tutor John
blahosyl · Aug 10, 2024 · 25d4106 · 25d4106
1 parent 6140fe0
commit 25d4106
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/src/pages/profiles/ProfileList.js b/src/pages/profiles/ProfileList.js
@@ -1,21 +1,27 @@
-import React, { useState } from "react";
+import React from "react";
 import Container from "react-bootstrap/Container";
 
 import appStyles from "../../App.module.css";
 import Asset from "../../components/Asset";
-import { useProfileData } from "../../contexts/ProfileDataContext";
+import { useProfileData, useSetProfileData } from "../../contexts/ProfileDataContext";
 import Profile from "./Profile";
 import { Link } from "react-router-dom/cjs/react-router-dom.min";
 import { useCurrentUser } from "../../contexts/CurrentUserContext";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { fetchMoreData } from "../../utils/utils";
 
+console.log(useSetProfileData)
+
 /**
  * Render the list of profiles from most to least recently updated
  */
 const ProfileList = () => {
+  const { profileList } = useProfileData();
+  const { setProfileData } = useSetProfileData();
   const currentUser = useCurrentUser();
-  const [profileList, setProfileList] = useState(useProfileData());
+  console.log('profileList', profileList)
+  console.log('profileList.results.length', profileList.results.length)
+  console.log('!!profileList.next', !!profileList.next)
 
   return (
     // only render the component if a user is logged in
@@ -29,19 +35,21 @@ const ProfileList = () => {
                 <i className="fa-solid fa-users-line"></i>Teammates
               </h3>
             </Link>
-            {/* list of users excluding the logged-in user */}
             <InfiniteScroll
                   children={profileList.results.map(
               (profile) =>
                 profile &&
+                /* list of users excluding the logged-in user */
                 Number(profile.id) !== Number(currentUser.pk) && (
                   <Profile key={profile.id} profile={profile} />
                 )
             )}
             dataLength={profileList.results.length}
             loader={<Asset spinner />}
             hasMore={!!profileList.next}
-            next={() => fetchMoreData(profileList, setProfileList)}
+            scrollThreshold={5}
+            next={() => {fetchMoreData(useProfileData, useSetProfileData)}
+          }
           />
           </>
         ) : (

diff --git a/src/utils/utils.js b/src/utils/utils.js
@@ -2,6 +2,7 @@ import { axiosReq } from "../api/axiosDefaults";
 import jwtDecode from "jwt-decode";
 
 export const fetchMoreData = async (resource, setResource) => {
+  console.log('fetchMoreData');
   try {
     const { data } = await axiosReq.get(resource.next);
     setResource((prevResource) => ({