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 ( +
+ Starting... +
+ ) +} 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 = {error.toString()} - } - else if(data) { - contents = - } - else { - contents = - } + const repositoryRequest = useBackendImmediately(fetchDataAuth, "GET", `/api/v1/repositories/${id}`) + const contents = renderContents( + repositoryRequest, + data => , + ) return (
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 = {error} - } - 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 = <> - - - - } - else { - contents = - } + 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 <> + + + + }, + ) return (
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 + } + if(error) { + return {error} + } + if(data) { + return renderFunction(data) + } + return +}