Skip to content

Commit

Permalink
Merge pull request #650 from shreyas1434shinde/YouthNet
Browse files Browse the repository at this point in the history 
Issue task PS-3327 : infinite scrolling issue fix
  • Loading branch information
@itsvick
itsvick authored Jan 28, 2025
2 parents 0c68b7d + 643faf1 commit 17cc302
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 35 deletions.
41 changes: 28 additions & 13 deletions src/components/CohortFacilitatorList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,13 @@ const CohortLearnerList: React.FC<CohortLearnerListProp> = ({

const { t } = useTranslation();



useEffect(() => {
const getCohortMemberList = async () => {
// if (!isMobile) {
// }
setLoading(true);
if (!isMobile) {
setLoading(true);
}
try {
if (cohortId) {
const filters = { cohortId: cohortId };
Expand Down Expand Up @@ -136,16 +138,28 @@ const CohortLearnerList: React.FC<CohortLearnerListProp> = ({
INFINITE_SCROLL_INCREMENT: pagesLimit,
};

// const fetchData = async () => {
// try {
// setInfinitePage(
// (prev) => prev + PAGINATION_CONFIG.INFINITE_SCROLL_INCREMENT
// );
// } catch (error) {
// console.error('Error fetching more data:', error);
// showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error');
// }
// };
const fetchData = async () => {
if (infiniteData && (infiniteData.length >= totalCount)) {
return;
}

console.log(infiniteData.length);
console.log(totalCount);

try {
setOffset((prev) => {
if (totalCount && prev + PAGINATION_CONFIG.ITEMS_PER_PAGE <= totalCount) {
return prev + PAGINATION_CONFIG.ITEMS_PER_PAGE;
}
return prev;
});

setInfinitePage((prev) => prev + PAGINATION_CONFIG.INFINITE_SCROLL_INCREMENT);
} catch (error) {
console.error('Error fetching more data:', error);
showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error');
}
}
const handlePageChange = (newPage: number) => {
setPage(newPage-1);
setOffset((newPage - 1) * pagesLimit)
Expand Down Expand Up @@ -214,6 +228,7 @@ const CohortLearnerList: React.FC<CohortLearnerListProp> = ({
page={page + 1}
onPageChange={handlePageChange}
// fetchMoreData={fetchData}
TotalCount={totalCount}
hasMore={infinitePage * pagesLimit < totalCount}
items={(infiniteData || []).map((user: UserDataProps) => (
<Box key={user.userId}></Box>
Expand Down
39 changes: 22 additions & 17 deletions src/components/CustomPagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ interface CustomPaginationProps {
onPageChange: (value: number) => void;
color?: 'primary' | 'secondary' | 'standard';
fetchMoreData?: () => void;
TotalCount:number;
hasMore?: boolean;
items?: React.ReactNode[]; // Items to display in infinite scroll
}
Expand All @@ -24,29 +25,33 @@ const CustomPagination: React.FC<CustomPaginationProps> = ({
color = 'primary',
fetchMoreData,
hasMore = true,
TotalCount=0,
items = [],
}) => {



const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const { t } = useTranslation();

// if (isMobile) {
// return (
// <InfiniteScroll
// dataLength={items.length}
// next={fetchMoreData || (() => {
// console.warn('fetchMoreData callback is required for infinite scroll');
// })}
// hasMore={hasMore}
// loader={<h4>{t('COMMON.LOADING')}...</h4>}
// // endMessage={
// // <p style={{ textAlign: 'center' }}>You have seen all data!</p>
// // }
// >
// <></>
// </InfiniteScroll>
// );
// }
if (isMobile) {
return (
<InfiniteScroll
dataLength={items.length}
next={fetchMoreData || (() => {
console.warn('fetchMoreData callback is required for infinite scroll');
})}
hasMore={hasMore}
loader={items?.length >= TotalCount ? '' : <h4>{t('COMMON.LOADING')}...</h4>}
// endMessage={
// <p style={{ textAlign: 'center' }}>You have seen all data!</p>
// }
>
{null}
</InfiniteScroll>
);
}

return (
<Stack spacing={2} alignItems="center">
Expand Down
20 changes: 15 additions & 5 deletions src/components/ManageUser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,9 +141,9 @@ const ManageUser: React.FC<ManageUsersProps> = ({

useEffect(() => {
const getFacilitator = async () => {
// if (!isMobile) {
// }
setLoading(true);
if (!isMobile) {
setLoading(true);
}
try {
const cohortId = cohortData
.map((block: any) => {
Expand Down Expand Up @@ -543,9 +543,18 @@ const ManageUser: React.FC<ManageUsersProps> = ({
INFINITE_SCROLL_INCREMENT: 10
};


const fetchData = async () => {
if (infiniteData && (infiniteData.length>=TotalCount)){
return;
}
try {
setOffSet((prev) => {
if (TotalCount && prev + PAGINATION_CONFIG.ITEMS_PER_PAGE <= TotalCount) {
return prev + PAGINATION_CONFIG.ITEMS_PER_PAGE;
}
return prev;
});

setInfinitePage((prev) => prev + PAGINATION_CONFIG.INFINITE_SCROLL_INCREMENT);
} catch (error) {
console.error('Error fetching more data:', error);
Expand All @@ -554,7 +563,7 @@ const ManageUser: React.FC<ManageUsersProps> = ({
}
const handlePageChange = (newPage: number) => {
setPage(newPage);
setOffSet((newPage-1)*10)
setOffSet((newPage - 1) * PAGINATION_CONFIG.ITEMS_PER_PAGE)
};

return (
Expand Down Expand Up @@ -801,6 +810,7 @@ const ManageUser: React.FC<ManageUsersProps> = ({
onPageChange={handlePageChange}
fetchMoreData={() => fetchData()}
hasMore={hasMore}
TotalCount={TotalCount}
items={infiniteData.map((user) => (
<Box key={user.userId}></Box>
))}
Expand Down

0 comments on commit 17cc302

Please sign in to comment.