🔧 Create useBackend hook

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>
+    )
+}

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;
 

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}>

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}>

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/>
+}