From 6d172a5a4481c14711e52f8a3c277bdda60fe3ff Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Mon, 20 Sep 2021 18:18:45 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20basic=20support=20for=20the?=
 =?UTF-8?q?=20instance=20details?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ErrorBox.tsx          | 11 ++-
 .../src/components/InstanceNameHeading.tsx    | 77 +++++++++++++++++++
 frontend/src/routes/Router.jsx                | 16 +---
 frontend/src/types.ts                         |  7 ++
 4 files changed, 95 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/components/InstanceNameHeading.tsx

diff --git a/frontend/src/components/ErrorBox.tsx b/frontend/src/components/ErrorBox.tsx
index dc3d1c0..f433b05 100644
--- a/frontend/src/components/ErrorBox.tsx
+++ b/frontend/src/components/ErrorBox.tsx
@@ -43,9 +43,14 @@ export class ErrorCatcherBox extends React.Component<ErrorCatcherBoxProps, Error
     }
 
     render() {
-        return (
-            <ErrorBox error={this.state.error}/>
-        )
+        if(this.state.error) {
+            return (
+                <ErrorBox error={this.state.error}/>
+            )
+        }
+        else {
+            return this.props.children
+        }
     }
 }
 
diff --git a/frontend/src/components/InstanceNameHeading.tsx b/frontend/src/components/InstanceNameHeading.tsx
new file mode 100644
index 0000000..684e7a5
--- /dev/null
+++ b/frontend/src/components/InstanceNameHeading.tsx
@@ -0,0 +1,77 @@
+import * as React from "react"
+import {Heading} from "@steffo/bluelib-react"
+import {useInstance, useInstanceAxios} from "./InstanceContext";
+import {InstanceDetails} from "../types";
+import {Link} from "./Link";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faSpinner, faTimesCircle, faUniversity} from "@fortawesome/free-solid-svg-icons";
+import {Loading} from "./Loading";
+
+
+export function InstanceNameHeading(): JSX.Element {
+    const instance = useInstance()
+    const api = useInstanceAxios()
+
+    const [details, setDetails] = React.useState<InstanceDetails | null>(null)
+    const [error, setError] = React.useState<Error | null>(null)
+
+    React.useEffect(
+        () => {
+            if(instance.validity === true) {
+                const controller = new AbortController()
+
+                setError(null)
+                api.get("/api/core/instance", {signal: controller.signal})
+                    .then(r => setDetails(r.data))
+                    .catch(e => {
+                        if(!controller.signal.aborted) {
+                            setError(e)
+                        }
+                    })
+
+                return () => {
+                    controller.abort()
+                }
+            }
+        },
+        [api, setDetails, setError]
+    )
+
+    if(!instance.validity) {
+        return (
+            <Heading level={1} bluelibClassNames={"color-red"}>
+                <Link href={"/"}>
+                    Sophon
+                </Link>
+            </Heading>
+        )
+    }
+    if(error) {
+        return (
+            <Heading level={1} bluelibClassNames={"color-red"}>
+                <Link href={"/"}>
+                    <FontAwesomeIcon icon={faTimesCircle}/>&nbsp;Error
+                </Link>
+            </Heading>
+        )
+    }
+    else if(details === null) {
+        return (
+            <Heading level={1} bluelibClassNames={"color-cyan"}>
+                <Link href={"/"}>
+                    <Loading/>
+                </Link>
+            </Heading>
+        )
+    }
+    else {
+        return (
+            <Heading level={1}>
+                <Link href={"/"}>
+                    <FontAwesomeIcon icon={faUniversity}/>&nbsp;{details.name}
+                </Link>
+            </Heading>
+        )
+    }
+
+}
diff --git a/frontend/src/routes/Router.jsx b/frontend/src/routes/Router.jsx
index f08933d..3838933 100644
--- a/frontend/src/routes/Router.jsx
+++ b/frontend/src/routes/Router.jsx
@@ -1,28 +1,18 @@
 import * as React from "react"
 import * as Reach from "@reach/router"
 import { LoginPage } from "./LoginPage"
-import { Heading } from "@steffo/bluelib-react"
 import { SelectResearchGroupPage } from "./SelectResearchGroupPage"
-import {Link} from "../components/Link"
 import { ErrorCatcherBox, NotFoundBox } from "../components/ErrorBox"
-
-
-function Header() {
-    return (
-        <Heading level={1}>
-            <Link href={"/"}>Sophon</Link>
-        </Heading>
-    )
-}
+import { InstanceNameHeading } from "../components/InstanceNameHeading"
 
 
 export function Router() {
     return <>
         <Reach.Router primary={false}>
-            <Header default/>
+            <InstanceNameHeading default/>
         </Reach.Router>
         <ErrorCatcherBox>
-            <Reach.Router>
+            <Reach.Router primary={true}>
                 <LoginPage path={"/"}/>
                 <SelectResearchGroupPage path={"/g/"}/>
                 <NotFoundBox default/>
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 56be81e..ef1bb4d 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -34,6 +34,13 @@ export interface User {
 }
 
 
+export interface InstanceDetails {
+    name: string,
+    description?: string,
+    theme: "sophon" | "paper" | "royalblue" | "hacker",
+}
+
+
 export type ResearchProjectSlug = string
 
 export interface ResearchProject {