From fd1b7588e0b69aaecb3a3321d59f872d1b1cc8ce Mon Sep 17 00:00:00 2001 From: chetan vashisht Date: Sat, 22 Feb 2025 17:03:18 +0530 Subject: [PATCH 1/5] completed the dynamic pagination for environments --- .../[project]/@environment/page.tsx | 42 ++++++++++++------- 1 file changed, 26 insertions(+), 16 deletions(-) diff --git a/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx b/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx index a4c139bdd..32148d70e 100644 --- a/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx +++ b/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx @@ -1,6 +1,6 @@ 'use client' -import { useEffect } from 'react' +import { useEffect, useState } from 'react' import { useAtom, useAtomValue, useSetAtom } from 'jotai' import { EnvironmentSVG } from '@public/svg/dashboard' import { @@ -18,6 +18,8 @@ import ControllerInstance from '@/lib/controller-instance' import { Button } from '@/components/ui/button' import { useHttp } from '@/hooks/use-http' +const INITIAL_DISPLAY_COUNT = 4 + function EnvironmentPage(): React.JSX.Element { const setIsCreateEnvironmentOpen = useSetAtom(createEnvironmentOpenAtom) const isDeleteEnvironmentOpen = useAtomValue(deleteEnvironmentOpenAtom) @@ -25,6 +27,7 @@ function EnvironmentPage(): React.JSX.Element { const [environments, setEnvironments] = useAtom(environmentsOfProjectAtom) const selectedProject = useAtomValue(selectedProjectAtom) const selectedEnvironment = useAtomValue(selectedEnvironmentAtom) + const [visibleCount, setVisibleCount] = useState(INITIAL_DISPLAY_COUNT) const getAllEnvironmentsOfProject = useHttp(() => ControllerInstance.getInstance().environmentController.getAllEnvironmentsOfProject( @@ -69,23 +72,30 @@ function EnvironmentPage(): React.JSX.Element { ) : ( - // Showing this when environments are present -
- {environments.map((environment) => ( - - ))} + //Showing this when environments are present +
+
+ {environments.slice(0, visibleCount).map((environment) => ( + + ))} - {/* Delete environment alert dialog */} - {isDeleteEnvironmentOpen && selectedEnvironment ? ( - - ) : null} + {/* Delete environment alert dialog */} + {isDeleteEnvironmentOpen && selectedEnvironment ? ( + + ) : null} - {/* Edit environment dialog */} - {isEditEnvironmentOpen && selectedEnvironment ? ( - - ) : null} + {/* Edit environment dialog */} + {isEditEnvironmentOpen && selectedEnvironment ? ( + + ) : null} +
+ {visibleCount < environments.length && ( +
+ +
+ )}
)}
From 2fd7286700255a71e5845bf134168ce4a4d4ae1c Mon Sep 17 00:00:00 2001 From: chetan vashisht Date: Sat, 22 Feb 2025 17:05:02 +0530 Subject: [PATCH 2/5] fixed the count value --- .../(project)/[workspace]/[project]/@environment/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx b/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx index 32148d70e..68fd0d8f7 100644 --- a/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx +++ b/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx @@ -18,7 +18,7 @@ import ControllerInstance from '@/lib/controller-instance' import { Button } from '@/components/ui/button' import { useHttp } from '@/hooks/use-http' -const INITIAL_DISPLAY_COUNT = 4 +const INITIAL_DISPLAY_COUNT = 10 function EnvironmentPage(): React.JSX.Element { const setIsCreateEnvironmentOpen = useSetAtom(createEnvironmentOpenAtom) From 49f5e298ca1ce6157b1e1a91931e5515df09f58e Mon Sep 17 00:00:00 2001 From: chetan vashisht Date: Sat, 22 Feb 2025 17:24:51 +0530 Subject: [PATCH 3/5] handled potential environments undefined values --- .../(project)/[workspace]/[project]/@environment/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx b/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx index 68fd0d8f7..ef00f480b 100644 --- a/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx +++ b/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx @@ -77,7 +77,7 @@ function EnvironmentPage(): React.JSX.Element {
- {environments.slice(0, visibleCount).map((environment) => ( + {environments?.slice(0, visibleCount)?.map((environment) => ( ))} From 3b8c6ccf08cd2ee120a4a9a45cfbe689292411eb Mon Sep 17 00:00:00 2001 From: chetan vashisht Date: Sun, 23 Feb 2025 15:08:56 +0530 Subject: [PATCH 4/5] improved pagination feature --- .../[project]/@environment/page.tsx | 45 +++++++++++++------ .../[workspace]/[project]/layout.tsx | 9 ---- 2 files changed, 31 insertions(+), 23 deletions(-) diff --git a/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx b/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx index ef00f480b..fe41eee19 100644 --- a/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx +++ b/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx @@ -18,8 +18,6 @@ import ControllerInstance from '@/lib/controller-instance' import { Button } from '@/components/ui/button' import { useHttp } from '@/hooks/use-http' -const INITIAL_DISPLAY_COUNT = 10 - function EnvironmentPage(): React.JSX.Element { const setIsCreateEnvironmentOpen = useSetAtom(createEnvironmentOpenAtom) const isDeleteEnvironmentOpen = useAtomValue(deleteEnvironmentOpenAtom) @@ -27,24 +25,40 @@ function EnvironmentPage(): React.JSX.Element { const [environments, setEnvironments] = useAtom(environmentsOfProjectAtom) const selectedProject = useAtomValue(selectedProjectAtom) const selectedEnvironment = useAtomValue(selectedEnvironmentAtom) - const [visibleCount, setVisibleCount] = useState(INITIAL_DISPLAY_COUNT) + const [page, setPage] = useState(0) + const [hasMore, setHasMore] = useState(true) + const [loading, setLoading] = useState(false) const getAllEnvironmentsOfProject = useHttp(() => ControllerInstance.getInstance().environmentController.getAllEnvironmentsOfProject( { - projectSlug: selectedProject!.slug + projectSlug: selectedProject!.slug, + page, } ) ) useEffect(() => { - selectedProject && - getAllEnvironmentsOfProject().then(({ data, success }) => { + if (!selectedProject) return + setLoading(true) + getAllEnvironmentsOfProject() + .then(({ data, success }) => { if (success && data) { - setEnvironments(data.items) + const newData = page === 0 ? data.items : [...environments, ...data.items]; + setEnvironments(newData); + if (newData.length >= data.metadata.totalCount) setHasMore(false); } }) - }, [getAllEnvironmentsOfProject, selectedProject, setEnvironments]) + .finally(() => { + setLoading(false) + }) + }, [selectedProject, page, getAllEnvironmentsOfProject, setEnvironments]) + + const handlePageShift = () => { + if (hasMore && !loading) { + setPage(prevPage => prevPage + 1) + } + } return (
- {environments?.slice(0, visibleCount)?.map((environment) => ( + {environments.map((environment) => ( ))} @@ -90,12 +104,15 @@ function EnvironmentPage(): React.JSX.Element { {isEditEnvironmentOpen && selectedEnvironment ? ( ) : null} + + {hasMore ?
+ +
: null} +
- {visibleCount < environments.length && ( -
- -
- )} +
)} diff --git a/apps/platform/src/app/(main)/(project)/[workspace]/[project]/layout.tsx b/apps/platform/src/app/(main)/(project)/[workspace]/[project]/layout.tsx index b71dbf38c..51d3d6b6d 100644 --- a/apps/platform/src/app/(main)/(project)/[workspace]/[project]/layout.tsx +++ b/apps/platform/src/app/(main)/(project)/[workspace]/[project]/layout.tsx @@ -49,15 +49,6 @@ function DetailedProjectPage({ }) }, [getProject, params.project, setSelectedProject]) - useEffect(() => { - selectedProject && - getAllEnvironmentsOfProject().then(({ data, success }) => { - if (success && data) { - setEnvironments(data.items) - } - }) - }, [getAllEnvironmentsOfProject, selectedProject, setEnvironments]) - return (
From 184c710ed972dcba3bd1a970e99ab6ec74d7214c Mon Sep 17 00:00:00 2001 From: chetan vashisht Date: Mon, 24 Feb 2025 23:51:51 +0530 Subject: [PATCH 5/5] improved pagination --- .../[project]/@environment/page.tsx | 42 +++++++++++-------- 1 file changed, 25 insertions(+), 17 deletions(-) diff --git a/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx b/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx index fe41eee19..270edf35e 100644 --- a/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx +++ b/apps/platform/src/app/(main)/(project)/[workspace]/[project]/@environment/page.tsx @@ -27,7 +27,7 @@ function EnvironmentPage(): React.JSX.Element { const selectedEnvironment = useAtomValue(selectedEnvironmentAtom) const [page, setPage] = useState(0) const [hasMore, setHasMore] = useState(true) - const [loading, setLoading] = useState(false) + const [isLoading, setIsLoading] = useState(false) const getAllEnvironmentsOfProject = useHttp(() => ControllerInstance.getInstance().environmentController.getAllEnvironmentsOfProject( @@ -39,24 +39,32 @@ function EnvironmentPage(): React.JSX.Element { ) useEffect(() => { - if (!selectedProject) return - setLoading(true) + if(!selectedProject) return + handleEnvironmentsFetch(); + }, [selectedProject, getAllEnvironmentsOfProject, setEnvironments]) + + const handleEnvironmentsFetch = (newPage = 0) => { + if (!selectedProject) return + setIsLoading(true) getAllEnvironmentsOfProject() .then(({ data, success }) => { if (success && data) { - const newData = page === 0 ? data.items : [...environments, ...data.items]; - setEnvironments(newData); - if (newData.length >= data.metadata.totalCount) setHasMore(false); + const newData = newPage === 0 ? data.items : [...environments, ...data.items] + if(newPage == 0 && page !== 0) setPage(0); + setEnvironments(newData) + if (newData.length >= data.metadata.totalCount) setHasMore(false) } }) .finally(() => { - setLoading(false) + setIsLoading(false) }) - }, [selectedProject, page, getAllEnvironmentsOfProject, setEnvironments]) + } const handlePageShift = () => { - if (hasMore && !loading) { - setPage(prevPage => prevPage + 1) + if (hasMore && !isLoading) { + const finalPage = page + 1; + setPage(finalPage) + handleEnvironmentsFetch(finalPage) } } @@ -105,14 +113,14 @@ function EnvironmentPage(): React.JSX.Element { ) : null} - {hasMore ?
- -
: null} - + {hasMore ? ( +
+ +
+ ) : null}
- )}