🔧 Tweak state location

code/frontend/src/components/interactive/BoxRepositoriesActive.js

@@ -1,51 +1,38 @@
 import React, { useContext } from "react"
 import BoxFull from "../base/BoxFull"
-import ContextUser from "../../contexts/ContextUser"
-import useData from "../../hooks/useData"
 import RepositorySummaryBase from "./RepositorySummaryBase"
-import Loading from "../base/Loading"
-import BoxAlert from "../base/BoxAlert"
 import { faSearch } from "@fortawesome/free-solid-svg-icons"
-import useDataImmediately from "../../hooks/useDataImmediately"
+import ContextUser from "../../contexts/ContextUser"
 
 
 /**
  * A {@link BoxFull} listing all the user's active repositories.
  *
+ * @param repositories - Array of repositories to display in the box.
+ * @param refresh - Function that can be called to refresh the repositories list.
  * @param props - Additional props to pass to the box.
  * @returns {JSX.Element}
  * @constructor
  */
-export default function BoxRepositoriesActive({ ...props }) {
+export default function BoxRepositoriesActive({ repositories, refresh, ...props }) {
-    const {user, fetchDataAuth} = useContext(ContextUser)
+    const {user} = useContext(ContextUser)
-    const {data, error} = useDataImmediately(fetchDataAuth, "GET", "/api/v1/repositories/", {
-        "onlyActive": true,
-    })
 
     let contents;
-    if(error) {
+    if(repositories.length > 0) {
-        contents = <BoxAlert color={"Red"}>{error.toString()}</BoxAlert>
+        contents = repositories.map(repo => (
-    }
+            <RepositorySummaryBase
-    else if(data) {
+                key={repo["id"]}
-        let repositories = [...data["owner"], ...data["spectator"]]
+                {...repo}
-        if(repositories.length > 0) {
+                icon={faSearch}
-            contents = repositories.map(repo => (
+                refresh={refresh}
-                <RepositorySummaryBase
+                canArchive={true}
-                    key={repo["id"]}
+                canEdit={true}
-                    {...repo}
+                canDelete={repo["owner"]["username"] === user["username"]}
-                    icon={faSearch}
+            />
-                    canArchive={true}
+        ))
-                    canEdit={true}
-                    canDelete={repo["owner"]["username"] === user["username"]}
-                />
-            ))
-        }
-        else {
-            contents = <i>There's nothing here.</i>
-        }
     }
     else {
-        contents = <Loading/>
+        contents = <i>There's nothing here.</i>
     }
 
     return (

code/frontend/src/components/interactive/BoxRepositoriesArchived.js

@@ -2,49 +2,37 @@ import React, { useContext } from "react"
 import BoxFull from "../base/BoxFull"
 import ContextUser from "../../contexts/ContextUser"
 import RepositorySummaryBase from "./RepositorySummaryBase"
-import Loading from "../base/Loading"
-import BoxAlert from "../base/BoxAlert"
 import { faSearch } from "@fortawesome/free-solid-svg-icons"
-import useDataImmediately from "../../hooks/useDataImmediately"
 
 
 /**
  * A {@link BoxFull} listing all the user's archived repositories.
  *
+ * @param repositories - Array of repositories to display in the box.
+ * @param refresh - Function that can be called to refresh the repositories list.
  * @param props - Additional props to pass to the box.
  * @returns {JSX.Element}
  * @constructor
  */
-export default function BoxRepositoriesArchived({ ...props }) {
+export default function BoxRepositoriesArchived({ repositories, refresh, ...props }) {
-    const {user, fetchDataAuth} = useContext(ContextUser)
+    const {user} = useContext(ContextUser)
-    const {data, error} = useDataImmediately(fetchDataAuth, "GET", "/api/v1/repositories/", {
-        "onlyDead": true,
-    })
 
     let contents;
-    if(error) {
+    if(repositories.length > 0) {
-        contents = <BoxAlert color={"Red"}>{error.toString()}</BoxAlert>
+        contents = repositories.map(repo => (
-    }
+            <RepositorySummaryBase
-    else if(data) {
+                key={repo["id"]}
-        let repositories = [...data["owner"], ...data["spectator"]]
+                {...repo}
-        if(repositories.length > 0) {
+                icon={faSearch}
-            contents = repositories.map(repo => (
+                refresh={refresh}
-                <RepositorySummaryBase
+                canArchive={true}
-                    key={repo["id"]}
+                canEdit={false}
-                    {...repo}
+                canDelete={repo["owner"]["username"] === user["username"]}
-                    icon={faSearch}
+            />
-                    canArchive={true}
+        ))
-                    canEdit={false}
-                    canDelete={repo["owner"]["username"] === user["username"]}
-                />
-            ))
-        }
-        else {
-            contents = <i>There's nothing here.</i>
-        }
     }
     else {
-        contents = <Loading/>
+        contents = <i>There's nothing here.</i>
     }
 
     return (

code/frontend/src/components/interactive/RepositorySummaryBase.js

@@ -13,12 +13,13 @@ import ContextUser from "../../contexts/ContextUser"
  * A long line representing a repository in a list.
  *
  * @param id - The id of the repository.
+ * @param refresh - Function that can be called to refresh the repositories list.
  * @param owner - The owner of the repository.
  * @param icon - The FontAwesome IconDefinition that represents the repository.
  * @param name - The title of the repository.
  * @param start - The start date of the repository.
  * @param end - The end date of the repository.
- * @param isActive - Whether the repository is active or not.
+ * @param is_active - Whether the repository is active or not.
  * @param canDelete - If the Delete button should be displayed or not.
  * @param canEdit - If the Edit button should be displayed or not.
  * @param canArchive - If the Archive button should be displayed or not.
@@ -28,7 +29,7 @@ import ContextUser from "../../contexts/ContextUser"
  * @constructor
  */
 export default function RepositorySummaryBase(
-    { id, owner, icon, name, start, end, isActive, canDelete, canEdit, canArchive, className, ...props }
+    { id, refresh, owner, icon, name, start, end, is_active, canDelete, canEdit, canArchive, className, ...props }
 ) {
     const {fetchDataAuth} = useContext(ContextUser)
     const history = useHistory()
@@ -36,6 +37,25 @@ export default function RepositorySummaryBase(
     const {fetchNow: unarchiveThis} = useData(fetchDataAuth, "PATCH", `/api/v1/repositories/${id}`, {"open": true})
     const {fetchNow: deletThis} = useData(fetchDataAuth, "DELETE", `/api/v1/repositories/${id}`)
 
+    const onEditClick = event => {
+        history.push(`/repositories/${id}/edit`)
+    }
+
+    const onArchiveClick = async event => {
+        await archiveThis()
+        await refresh()
+    }
+
+    const onUnarchiveClick = async event => {
+        await unarchiveThis()
+        await refresh()
+    }
+
+    const onDeleteClick = async event => {
+        await deletThis()
+        await refresh()
+    }
+
     return (
         <div className={classNames(Style.RepositorySummary, className)} {...props}>
             <div className={Style.Left}>
@@ -62,7 +82,7 @@ export default function RepositorySummaryBase(
                     <Button
                         color={"Red"}
                         icon={faTrash}
-                        onClick={deletThis}
+                        onClick={onDeleteClick}
                     >
                         Delete
                     </Button>
@@ -71,7 +91,7 @@ export default function RepositorySummaryBase(
                     <Button
                         color={"Yellow"}
                         icon={faPencilAlt}
-                        onClick={() => history.push(`/repositories/${id}/edit`)}
+                        onClick={onEditClick}
                     >
                         Edit
                     </Button>
@@ -80,9 +100,9 @@ export default function RepositorySummaryBase(
                     <Button
                         color={"Grey"}
                         icon={faArchive}
-                        onClick={isActive ? archiveThis : unarchiveThis}
+                        onClick={is_active ? onArchiveClick : onUnarchiveClick}
                     >
-                        {isActive ? "Archive" : "Unarchive"}
+                        {is_active ? "Archive" : "Unarchive"}
                     </Button>
                 : null}
             </div>

code/frontend/src/routes/PageRepositories.js

@@ -1,15 +1,38 @@
-import React from "react"
+import React, { useContext } from "react"
 import Style from "./PageRepositories.module.css"
 import classNames from "classnames"
 import BoxRepositoriesActive from "../components/interactive/BoxRepositoriesActive"
 import BoxRepositoriesArchived from "../components/interactive/BoxRepositoriesArchived"
+import useDataImmediately from "../hooks/useDataImmediately"
+import ContextUser from "../contexts/ContextUser"
+import BoxAlert from "../components/base/BoxAlert"
+import Loading from "../components/base/Loading"
 
 
 export default function PageRepositories({ children, className, ...props }) {
+    const {fetchDataAuth} = useContext(ContextUser)
+    const {data, error, fetchNow: refresh} = useDataImmediately(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/>
+    }
+
     return (
         <div className={classNames(Style.PageRepositories, className)} {...props}>
-            <BoxRepositoriesActive/>
+            {contents}
-            <BoxRepositoriesArchived/>
         </div>
     )
 }