refactor: Add swr for better fetch performance and loading state control

gabrielborgesdm · Aug 11, 2024 · df2065c · df2065c
1 parent 4551001
commit df2065c
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 34 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,6 +17,7 @@
     "react-hook-form": "^7.51.5",
     "react-router-dom": "^6.23.1",
     "react-scripts": "^5.0.1",
+    "swr": "^2.2.5",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4",
     "yup": "^1.4.0"

diff --git a/frontend/src/pages/Authors/Authors.tsx b/frontend/src/pages/Authors/Authors.tsx
@@ -1,23 +1,14 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import ManagementService from "services/managementService";
 import { useFilterHook } from "components/Hooks/UseFilterHook";
 import { Author } from "types/author";
+import useSWR from "swr";
 
 const managementService = new ManagementService();
 
 const Authors: React.FC = () => {
-  const [authors, setAuthors] = useState<Author[]>([]);
   const { handleChangeFilter, shouldFilterInWith } = useFilterHook();
-
-  useEffect(() => {
-    loadAuthors();
-  }, []);
-
-  const loadAuthors = async () => {
-    const authors = await managementService.getAuthors();
-
-    setAuthors(authors);
-  };
+  const { data: authorsData, error, isLoading } = useSWR("authors", () => managementService.getAuthors());
 
   return (
     <>
@@ -60,26 +51,26 @@ const Authors: React.FC = () => {
       </div>
       <hr />
       <div className="block max-h-[78dvh] overflow-y-auto">
-        <table className="w-full text-sm text-left rtl:text-right text-gray-500">
-          <thead className="text-xs uppercase ">
-            <tr>
-              <th scope="col" className="px-1 py-3">
-                Author
-              </th>
-              <th scope="col" className="px-1 py-3">
-                Nationality
-              </th>
-              <th scope="col" className="px-1 py-3">
-                Birth date
-              </th>
-              <th scope="col" className="px-1 py-3">
-                E-mail
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {authors?.length > 0 &&
-              authors.map(
+        {authorsData && authorsData.length > 0 ? (
+          <table className="w-full text-sm text-left rtl:text-right text-gray-500">
+            <thead className="text-xs uppercase ">
+              <tr>
+                <th scope="col" className="px-1 py-3">
+                  Author
+                </th>
+                <th scope="col" className="px-1 py-3">
+                  Nationality
+                </th>
+                <th scope="col" className="px-1 py-3">
+                  Birth date
+                </th>
+                <th scope="col" className="px-1 py-3">
+                  E-mail
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {authorsData.map(
                 ({ name, nationality, birthDate, email, id }: Author) =>
                   shouldFilterInWith(name, nationality, birthDate, email, id) && (
                     <tr key={id} className="border-b hover:bg-gray-50">
@@ -92,8 +83,13 @@ const Authors: React.FC = () => {
                     </tr>
                   ),
               )}
-          </tbody>
-        </table>
+            </tbody>
+          </table>
+        ) : isLoading ? (
+          <span>Loading...</span>
+        ) : (
+          <span className="pt-5">No authors registered</span>
+        )}
       </div>
     </>
   );