feat (homePage): pagination - pagination feature added to homePage pr…

…ojectSummary (#972)
hotosm · Nov 7, 2023 · 8ce38dc · 8ce38dc
1 parent 02d1d42
commit 8ce38dc
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 13 deletions.
diff --git a/src/frontend/src/api/HomeService.ts b/src/frontend/src/api/HomeService.ts
@@ -10,7 +10,9 @@ export const HomeSummaryService: Function = (url: string) => {
     const fetchHomeSummaries = async (url) => {
       try {
         const fetchHomeData = await axios.get(url);
-        const resp: any = fetchHomeData.data;
+        const resp: any = fetchHomeData.data.results;
+        const paginationResp = fetchHomeData.data.pagination;
+        dispatch(HomeActions.SetHomeProjectPagination(paginationResp));
         const fetchProjectCentroid = await axios.get(`${import.meta.env.VITE_API_URL}/projects/centroid/`);
         const projectCentroidResp: any = fetchProjectCentroid.data;
         const addedProjectCentroidOnSummary = resp.map((project) => {

diff --git a/src/frontend/src/components/home/HomePageFilters.tsx b/src/frontend/src/components/home/HomePageFilters.tsx
@@ -12,6 +12,7 @@ const HomePageFilters = ({ onSearch, filteredProjectCount, totalProjectCount })
 
   const defaultTheme: any = CoreModules.useAppSelector((state) => state.theme.hotTheme);
   const showMapStatus: boolean = CoreModules.useAppSelector((state) => state.home.showMapStatus);
+  const homeProjectPagination = CoreModules.useAppSelector((state) => state.home.homeProjectPagination);
 
   const { windowSize } = windowDimention();
   const searchableInnerStyle: any = {
@@ -141,7 +142,7 @@ const HomePageFilters = ({ onSearch, filteredProjectCount, totalProjectCount })
         </div>
         <div className="fmtm-mt-6 fmtm-mb-1 fmtm-flex fmtm-items-center fmtm-justify-between">
           <p className="fmtm-text-[#A8A6A6]">
-            Showing {filteredProjectCount} {filteredProjectCount > 1 ? 'projects' : 'project'}
+            Showing {filteredProjectCount} of {homeProjectPagination.total} projects
           </p>
           {/* <div className="fmtm-flex fmtm-gap-1">
             <AssetModules.WindowIcon

diff --git a/src/frontend/src/store/slices/HomeSlice.ts b/src/frontend/src/store/slices/HomeSlice.ts
@@ -14,6 +14,7 @@ const HomeSlice = CoreModules.createSlice({
     },
     showMapStatus: true,
     projectCentroidLoading: false,
+    homeProjectPagination: {},
   },
   reducers: {
     SetHomeProjectSummary(state, action) {
@@ -40,6 +41,9 @@ const HomeSlice = CoreModules.createSlice({
     SetProjectCentroid(state, action) {
       state.homeProjectSummary = action.payload;
     },
+    SetHomeProjectPagination(state, action) {
+      state.homeProjectPagination = action.payload;
+    },
   },
 });
 

diff --git a/src/frontend/src/views/Home.jsx b/src/frontend/src/views/Home.jsx
@@ -15,6 +15,7 @@ const Home = () => {
 
   const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
   const showMapStatus = CoreModules.useAppSelector((state) => state.home.showMapStatus);
+  const homeProjectPagination = CoreModules.useAppSelector((state) => state.home.homeProjectPagination);
   // const state:any = CoreModules.useAppSelector(state=>state.project.projectData)
   // console.log('state main :',state)
 
@@ -34,7 +35,8 @@ const Home = () => {
 
   const theme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
   useEffect(() => {
-    dispatch(HomeSummaryService(`${import.meta.env.VITE_API_URL}/projects/summaries?skip=0&limit=100`));
+    // dispatch(HomeSummaryService(`${import.meta.env.VITE_API_URL}/projects/summaries?skip=0&limit=100`));
+    dispatch(HomeSummaryService(`${import.meta.env.VITE_API_URL}/projects/summaries?page=1&results_per_page=12`));
     //creating a manual thunk that will make an API call then autamatically perform state mutation whenever we navigate to home page
   }, []);
 
@@ -62,16 +64,39 @@ const Home = () => {
             <div className={`fmtm-w-full ${showMapStatus ? 'lg:fmtm-w-[50%]' : ''} `}>
               {filteredProjectCards.length > 0 ? (
                 <div>
-                  <div
-                    className={`fmtm-px-[1rem] fmtm-grid fmtm-gap-5 ${
-                      !showMapStatus
-                        ? 'fmtm-grid-cols-1 sm:fmtm-grid-cols-2 md:fmtm-grid-cols-3 lg:fmtm-grid-cols-4 xl:fmtm-grid-cols-5 2xl:fmtm-grid-cols-6'
-                        : 'fmtm-grid-cols-1 sm:fmtm-grid-cols-2 md:fmtm-grid-cols-3 lg:fmtm-grid-cols-2 2xl:fmtm-grid-cols-3 lg:fmtm-h-[33rem] lg:fmtm-overflow-y-scroll lg:scrollbar'
-                    }`}
-                  >
-                    {filteredProjectCards.map((value, index) => (
-                      <ExploreProjectCard data={value} key={index} />
-                    ))}
+                  <div>
+                    <div
+                      className={`fmtm-px-[1rem] fmtm-grid fmtm-gap-5 ${
+                        !showMapStatus
+                          ? 'fmtm-grid-cols-1 sm:fmtm-grid-cols-2 md:fmtm-grid-cols-3 lg:fmtm-grid-cols-4 xl:fmtm-grid-cols-5 2xl:fmtm-grid-cols-6'
+                          : 'fmtm-grid-cols-1 sm:fmtm-grid-cols-2 md:fmtm-grid-cols-3 lg:fmtm-grid-cols-2 2xl:fmtm-grid-cols-3 lg:fmtm-h-[33rem] lg:fmtm-overflow-y-scroll lg:scrollbar'
+                      }`}
+                    >
+                      {filteredProjectCards.map((value, index) => (
+                        <ExploreProjectCard data={value} key={index} />
+                      ))}
+                    </div>
+                  </div>
+                  <div className="fmtm-flex fmtm-justify-center fmtm-mt-5">
+                    <CoreModules.Pagination
+                      page={homeProjectPagination?.page}
+                      count={homeProjectPagination?.pages}
+                      shape="rounded"
+                      size={type === 'xs' ? 'small' : 'large'}
+                      sx={{
+                        '.Mui-selected': {
+                          background: 'rgb(216,73,55) !important',
+                          color: 'white',
+                        },
+                      }}
+                      onChange={(e, page) => {
+                        dispatch(
+                          HomeSummaryService(
+                            `${import.meta.env.VITE_API_URL}/projects/summaries?page=${page}&results_per_page=12`,
+                          ),
+                        );
+                      }}
+                    />
                   </div>
                 </div>
               ) : (