diff --git a/src/pages/profiles/ProfileList.js b/src/pages/profiles/ProfileList.js index 23166e3..59568f3 100644 --- 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,11 +35,11 @@ const ProfileList = () => { Teammates - {/* list of users excluding the logged-in user */} profile && + /* list of users excluding the logged-in user */ Number(profile.id) !== Number(currentUser.pk) && ( ) @@ -41,7 +47,9 @@ const ProfileList = () => { dataLength={profileList.results.length} loader={} 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 index d2fcaa4..49109e0 100644 --- 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) => ({