From a3d23661a387c0d556bc911fe364867150d72ce7 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <256895@studenti.unimore.it>
Date: Tue, 11 May 2021 17:05:38 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Create=20useBackend=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 code/frontend/src/components/base/Starting.js | 18 ++++++++++
 .../providers/RepositoryEditor.module.css     | 13 ++++---
 code/frontend/src/routes/PageEdit.js          | 20 ++++-------
 code/frontend/src/routes/PageRepositories.js  | 34 ++++++++-----------
 code/frontend/src/utils/renderContents.js     | 19 +++++++++++
 5 files changed, 63 insertions(+), 41 deletions(-)
 create mode 100644 code/frontend/src/components/base/Starting.js
 create mode 100644 code/frontend/src/utils/renderContents.js

diff --git a/code/frontend/src/components/base/Starting.js b/code/frontend/src/components/base/Starting.js
new file mode 100644
index 0000000..6a6a814
--- /dev/null
+++ b/code/frontend/src/components/base/Starting.js
@@ -0,0 +1,18 @@
+import React from "react"
+import { faSpinner } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+
+/**
+ * A div with a static dots icon and a "Starting..." text.
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function Starting() {
+    return (
+        <div>
+            <FontAwesomeIcon icon={faSpinner}/> Starting...
+        </div>
+    )
+}
diff --git a/code/frontend/src/components/providers/RepositoryEditor.module.css b/code/frontend/src/components/providers/RepositoryEditor.module.css
index 5c079a3..65940f3 100644
--- a/code/frontend/src/components/providers/RepositoryEditor.module.css
+++ b/code/frontend/src/components/providers/RepositoryEditor.module.css
@@ -2,13 +2,12 @@
     display: grid;
 
     grid-template-areas:
-        "b c"
-        "b d"
-        "b e"
-        "b f"
-        "b g";
-    grid-template-columns: 400px 1fr;
-    grid-template-rows: auto auto auto 1fr auto;
+        "b c d"
+        "b e e"
+        "b f f"
+        "b g g";
+    grid-template-columns: 400px 1fr 1fr;
+    grid-template-rows: auto auto 1fr auto;
 
     grid-gap: 10px;
 
diff --git a/code/frontend/src/routes/PageEdit.js b/code/frontend/src/routes/PageEdit.js
index 74eaeb2..6949b4d 100644
--- a/code/frontend/src/routes/PageEdit.js
+++ b/code/frontend/src/routes/PageEdit.js
@@ -5,24 +5,16 @@ import BoxHeader from "../components/base/BoxHeader"
 import RepositoryEditor from "../components/providers/RepositoryEditor"
 import useBackendImmediately from "../hooks/useBackendImmediately"
 import ContextUser from "../contexts/ContextUser"
-import BoxAlert from "../components/base/BoxAlert"
-import Loading from "../components/base/Loading"
+import renderContents from "../utils/renderContents"
 
 
 export default function PageEdit({ id, className, ...props }) {
     const { fetchDataAuth } = useContext(ContextUser)
-    const { data, error } = useBackendImmediately(fetchDataAuth, "GET", `/api/v1/repositories/${id}`)
-
-    let contents
-    if(error) {
-        contents = <BoxAlert color={"Red"}>{error.toString()}</BoxAlert>
-    }
-    else if(data) {
-        contents = <RepositoryEditor className={Style.RepositoryEditor} {...data}/>
-    }
-    else {
-        contents = <Loading/>
-    }
+    const repositoryRequest = useBackendImmediately(fetchDataAuth, "GET", `/api/v1/repositories/${id}`)
+    const contents = renderContents(
+        repositoryRequest,
+        data => <RepositoryEditor className={Style.RepositoryEditor} {...data}/>,
+    )
 
     return (
         <div className={classNames(Style.PageHome, className)} {...props}>
diff --git a/code/frontend/src/routes/PageRepositories.js b/code/frontend/src/routes/PageRepositories.js
index d68a3fc..b706154 100644
--- a/code/frontend/src/routes/PageRepositories.js
+++ b/code/frontend/src/routes/PageRepositories.js
@@ -5,30 +5,24 @@ import BoxRepositoriesActive from "../components/interactive/BoxRepositoriesActi
 import BoxRepositoriesArchived from "../components/interactive/BoxRepositoriesArchived"
 import useBackendImmediately from "../hooks/useBackendImmediately"
 import ContextUser from "../contexts/ContextUser"
-import BoxAlert from "../components/base/BoxAlert"
-import Loading from "../components/base/Loading"
+import renderContents from "../utils/renderContents"
 
 
 export default function PageRepositories({ children, className, ...props }) {
     const { fetchDataAuth } = useContext(ContextUser)
-    const { data, error, fetchNow: refresh } = useBackendImmediately(fetchDataAuth, "GET", "/api/v1/repositories/")
-
-    let contents
-    if(error) {
-        contents = <BoxAlert color={"Red"}>{error}</BoxAlert>
-    }
-    else if(data) {
-        const repositories = [...data["owner"], ...data["spectator"]]
-        const active = repositories.filter(r => r.is_active)
-        const archived = repositories.filter(r => !r.is_active)
-        contents = <>
-            <BoxRepositoriesActive repositories={active} refresh={refresh}/>
-            <BoxRepositoriesArchived repositories={archived} refresh={refresh}/>
-        </>
-    }
-    else {
-        contents = <Loading/>
-    }
+    const repositoryRequest = useBackendImmediately(fetchDataAuth, "GET", "/api/v1/repositories/")
+    const contents = renderContents(
+        repositoryRequest,
+        data => {
+            const repositories = [...data["owner"], ...data["spectator"]]
+            const active = repositories.filter(r => r.is_active)
+            const archived = repositories.filter(r => !r.is_active)
+            return <>
+                <BoxRepositoriesActive repositories={active} refresh={repositoryRequest.fetchNow}/>
+                <BoxRepositoriesArchived repositories={archived} refresh={repositoryRequest.fetchNow}/>
+            </>
+        },
+    )
 
     return (
         <div className={classNames(Style.PageRepositories, className)} {...props}>
diff --git a/code/frontend/src/utils/renderContents.js b/code/frontend/src/utils/renderContents.js
new file mode 100644
index 0000000..c80a47e
--- /dev/null
+++ b/code/frontend/src/utils/renderContents.js
@@ -0,0 +1,19 @@
+import Loading from "../components/base/Loading"
+import BoxAlert from "../components/base/BoxAlert"
+import Starting from "../components/base/Starting"
+
+
+export default function renderContents(requestHookResults, renderFunction) {
+    const { data, error, loading } = requestHookResults
+
+    if(loading) {
+        return <Loading/>
+    }
+    if(error) {
+        return <BoxAlert color={"Red"}>{error}</BoxAlert>
+    }
+    if(data) {
+        return renderFunction(data)
+    }
+    return <Starting/>
+}