feat: project pagination

services/frontend/src/components/Projects/index.tsx

@@ -1,11 +1,16 @@
+import { useState } from "react";
 import { Link } from "react-router-dom";
+import { PROJECTS_FETCH_LIMIT } from "../../constants";
 import { IProject } from "../../types";
 import Spinner from "../../components/global/Spinner";
 import PreviewBlock from "./PreviewBlock";
 import { useProjects } from "../../hooks/useProjects";
 
 const Projects = () => {
-  const { data, error, isFetching } = useProjects();
+  const [limit] = useState(PROJECTS_FETCH_LIMIT);
+  const [offset, setOffset] = useState(0);
+  const { isLoading, isError, error, data, isFetching, isPreviousData } =
+    useProjects(limit, offset);
 
   return (
     <>
@@ -33,6 +38,7 @@ const Projects = () => {
               )}
 
               {!isFetching && (
+                <>
                   <div className="py-4">
                     {error && (
                       <div className="text-center">
@@ -64,6 +70,48 @@ const Projects = () => {
                       </div>
                     )}
                   </div>
+
+                  {data.count > PROJECTS_FETCH_LIMIT && (
+                    <div className="flex justify-center space-x-1 my-4">
+                      <button
+                        className={`
+                          text-xs border-dotted border-b
+                          ${
+                            !data.previous
+                              ? "text-gray-500 border-gray-500"
+                              : "text-blue-600 border-blue-600"
+                          }
+                        `}
+                        onClick={() =>
+                          setOffset((old) =>
+                            Math.max(old - PROJECTS_FETCH_LIMIT, 0)
+                          )
+                        }
+                        disabled={!data.previous}
+                      >
+                        Previous
+                      </button>
+                      <button
+                        className={`
+                          text-xs border-dotted border-b
+                          ${
+                            !data.next
+                              ? "text-gray-500 border-gray-500"
+                              : "text-blue-600 border-blue-600"
+                          }
+                        `}
+                        onClick={() => {
+                          if (!isPreviousData && data.next) {
+                            setOffset((old) => old + PROJECTS_FETCH_LIMIT);
+                          }
+                        }}
+                        disabled={isPreviousData || !data.next}
+                      >
+                        Next
+                      </button>
+                    </div>
+                  )}
+                </>
               )}
             </div>
           </div>

services/frontend/src/hooks/useProject.ts

@@ -164,19 +164,21 @@ export const useDeleteProject = (uuid: string | undefined) => {
     },
     {
       onSuccess: () => {
-        // could just invalidate the query here and refetch everything
-        // queryClient.invalidateQueries(['projects']);
-
         queryClient.cancelQueries("projects");
         const previousProjects = queryClient.getQueryData(
           "projects"
         ) as IProjectsReturn;
+
+        if (previousProjects) {
           const filtered = _.filter(previousProjects.results, (project) => {
             return project.uuid !== uuid;
           });
           previousProjects.count = filtered.length;
           previousProjects.results = filtered;
           queryClient.setQueryData("projects", previousProjects);
+        } else {
+          queryClient.invalidateQueries(["projects"]);
+        }
       }
     }
   );

services/frontend/src/hooks/useProjects.ts

@@ -3,12 +3,12 @@ import { useQuery } from "react-query";
 import { API_SERVER_URL } from "../constants";
 import { getLocalStorageJWTKeys } from "../utils";
 
-const fetchProjects = async () => {
+export const fetchProjects = async (limit: number, offset: number) => {
   const jwtKeys = getLocalStorageJWTKeys();
 
   const response = await axios({
     method: "get",
-    url: `${API_SERVER_URL}/projects/`,
+    url: `${API_SERVER_URL}/projects/?limit=${limit}&offset=${offset}`,
     headers: {
       "Content-Type": "application/json",
       Authorization: `Bearer ${jwtKeys.access_token}`
@@ -17,13 +17,12 @@ const fetchProjects = async () => {
   return response.data;
 };
 
-export const useProjects = () => {
+export const useProjects = (limit: number, offset: number) => {
   return useQuery(
-    ["projects"],
+    ["projects", limit, offset],
-    async () => {
+    () => fetchProjects(limit, offset),
-      return await fetchProjects();
-    },
     {
+      keepPreviousData: true,
       staleTime: Infinity
     }
   );