1
Fork 0
mirror of https://github.com/Steffo99/sophon.git synced 2024-12-23 07:14:21 +00:00

Create InstanceBox to select Sophon instance

This commit is contained in:
Steffo 2021-09-14 04:16:34 +02:00
parent 3a38b70231
commit 77f5d7849a
Signed by: steffo
GPG key ID: 6965406171929D01
3 changed files with 64 additions and 3 deletions

View file

@ -1,7 +1,8 @@
import * as React from 'react'; 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 {SophonContextProvider} from "./utils/SophonContext";
import {LoginBox} from "./components/LoginBox"; import {LoginBox} from "./components/LoginBox";
import {InstanceBox} from "./components/InstanceBox";
function App() { function App() {
return ( return (
@ -12,7 +13,10 @@ function App() {
<Heading level={1}> <Heading level={1}>
Sophon Sophon
</Heading> </Heading>
<Chapter>
<InstanceBox/>
<LoginBox/> <LoginBox/>
</Chapter>
</LayoutThreeCol.Center> </LayoutThreeCol.Center>
</LayoutThreeCol> </LayoutThreeCol>
</Bluelib> </Bluelib>

View file

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

View file

@ -55,6 +55,11 @@ export interface SophonContextContents {
*/ */
logout: LogoutFunction, logout: LogoutFunction,
/**
* The Sophon instance URL.
*/
instanceUrl: string,
/** /**
* Change Sophon instance to the one with the given `url`. * Change Sophon instance to the one with the given `url`.
*/ */
@ -156,7 +161,7 @@ export function SophonContextProvider({children}: SophonContextProviderProps): J
) )
return ( return (
<SophonContext.Provider value={{api, loginData, loginRunning, loginError, login, logout, changeSophon}}> <SophonContext.Provider value={{api, loginData, loginRunning, loginError, login, logout, instanceUrl, changeSophon}}>
{children} {children}
</SophonContext.Provider> </SophonContext.Provider>
) )