From 77f5d7849a3986252484cfc71b7e9c9b60fad666 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 14 Sep 2021 04:16:34 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Create=20`InstanceBox`=20to=20selec?=
 =?UTF-8?q?t=20Sophon=20instance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                    |  8 +++-
 frontend/src/components/InstanceBox.tsx | 52 +++++++++++++++++++++++++
 frontend/src/utils/SophonContext.tsx    |  7 +++-
 3 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/InstanceBox.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d72644d..717713a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import {Bluelib, Box, Heading, LayoutThreeCol} from "@steffo/bluelib-react";
+import {Bluelib, Chapter, Heading, LayoutThreeCol} from "@steffo/bluelib-react";
 import {SophonContextProvider} from "./utils/SophonContext";
 import {LoginBox} from "./components/LoginBox";
+import {InstanceBox} from "./components/InstanceBox";
 
 function App() {
     return (
@@ -12,7 +13,10 @@ function App() {
                         <Heading level={1}>
                             Sophon
                         </Heading>
-                        <LoginBox/>
+                        <Chapter>
+                            <InstanceBox/>
+                            <LoginBox/>
+                        </Chapter>
                     </LayoutThreeCol.Center>
                 </LayoutThreeCol>
             </Bluelib>
diff --git a/frontend/src/components/InstanceBox.tsx b/frontend/src/components/InstanceBox.tsx
new file mode 100644
index 0000000..3238d0e
--- /dev/null
+++ b/frontend/src/components/InstanceBox.tsx
@@ -0,0 +1,52 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import {Box, Heading, Form, Anchor} from "@steffo/bluelib-react";
+import {useSophonContext} from "../utils/SophonContext";
+import {useFormProps} from "../hooks/useValidatedState";
+
+
+interface InstanceBoxProps {
+
+}
+
+
+export function InstanceBox({}: InstanceBoxProps): JSX.Element {
+    const {instanceUrl, changeSophon} = useSophonContext()
+    const sophonServer = useFormProps("", value => {
+        if(value === "") return null
+
+        try {
+            new URL(value)
+        } catch (_) {
+            return false
+        }
+
+        return true
+    })
+
+    const doChange = React.useCallback(
+        () => {
+            changeSophon(sophonServer.value.trim())
+            // Small hack to clear the field
+            sophonServer.onSimpleChange("")
+        },
+        [changeSophon, sophonServer]
+    )
+
+    return (
+        <Box>
+            <Heading level={3}>
+                Change instance
+            </Heading>
+            <p>
+                You are currently using the Sophon instance at <Anchor href={instanceUrl}>{instanceUrl}</Anchor>.
+            </p>
+            <Form>
+                <Form.Field label={"URL"} {...sophonServer}/>
+                <Form.Row>
+                    <Form.Button onClick={doChange} disabled={!sophonServer.validity}>Change instance</Form.Button>
+                </Form.Row>
+            </Form>
+        </Box>
+    )
+}
diff --git a/frontend/src/utils/SophonContext.tsx b/frontend/src/utils/SophonContext.tsx
index 3cf4383..8c1def8 100644
--- a/frontend/src/utils/SophonContext.tsx
+++ b/frontend/src/utils/SophonContext.tsx
@@ -55,6 +55,11 @@ export interface SophonContextContents {
      */
     logout: LogoutFunction,
 
+    /**
+     * The Sophon instance URL.
+     */
+    instanceUrl: string,
+
     /**
      * Change Sophon instance to the one with the given `url`.
      */
@@ -156,7 +161,7 @@ export function SophonContextProvider({children}: SophonContextProviderProps): J
     )
 
     return (
-        <SophonContext.Provider value={{api, loginData, loginRunning, loginError, login, logout, changeSophon}}>
+        <SophonContext.Provider value={{api, loginData, loginRunning, loginError, login, logout, instanceUrl, changeSophon}}>
             {children}
         </SophonContext.Provider>
     )