✨ Add basic support for the instance details

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

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

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

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 {