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 - ) + if(this.state.error) { + return ( + + ) + } + 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(null) + const [error, setError] = React.useState(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 ( + + + Sophon + + + ) + } + if(error) { + return ( + + +  Error + + + ) + } + else if(details === null) { + return ( + + + + + + ) + } + else { + return ( + + +  {details.name} + + + ) + } + +} 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 ( - - Sophon - - ) -} +import { InstanceNameHeading } from "../components/InstanceNameHeading" export function Router() { return <> -
+ - + 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 {