From df2065c4ca9425cb57fdb5f5cf00c3dcfdf21b65 Mon Sep 17 00:00:00 2001
From: Gabriel Borges <gabrielborgesdemoraes@gmail.com>
Date: Sun, 11 Aug 2024 20:12:12 -0300
Subject: [PATCH] refactor: Add swr for better fetch performance and loading
 state control

---
 frontend/package-lock.json             | 29 ++++++++++++
 frontend/package.json                  |  1 +
 frontend/src/pages/Authors/Authors.tsx | 64 ++++++++++++--------------
 3 files changed, 60 insertions(+), 34 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 10f847c..8cb93f8 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -22,6 +22,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"
@@ -5919,6 +5920,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
     "node_modules/cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -16661,6 +16668,19 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/swr": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.5.tgz",
+      "integrity": "sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "^0.0.1",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -17291,6 +17311,15 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 5be1eae..dccb9af 100644
--- 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
index d1b051b..62d0258 100644
--- 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>
     </>
   );