steffo/sophon
steffo/sophon
1
Fork 0
mirror of https://github.com/Steffo99/sophon.git synced 2024-10-16 15:17:25 +00:00
Code Activity

🔧 Generify DescriptionBox

Browse source
This commit is contained in:
Steffo 2021-10-13 05:05:34 +02:00
parent a9efd9dc3a
commit bfea7497ff
7 changed files with 64 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/App.tsx
View file

@ -12,9 +12,10 @@ import {GroupCreateBox} from "./components/group/GroupCreateBox"
import {GroupListBox} from "./components/group/GroupListBox"
import {GroupMembersBox} from "./components/group/GroupMembersBox"
import {GroupRouter} from "./components/group/GroupRouter"
import {SophonDescriptionBox} from "./components/informative/SophonDescriptionBox"
import {InstanceDescriptionBox} from "./components/instance/InstanceDescriptionBox"
import {InstanceFormBox} from "./components/instance/InstanceFormBox"
import {InstanceRouter} from "./components/instance/InstanceRouter"
import {InstanceStepPage} from "./components/instance/InstanceStepPage"
import {NotebookListBox} from "./components/notebook/NotebookListBox"
import {NotebookRouter} from "./components/notebook/NotebookRouter"
import {DebugBox} from "./components/placeholder/DebugBox"
@ -30,16 +31,15 @@ import {ThemeProvider} from "./contexts/theme"
function App({..._}: RouteComponentProps) {
return React.useMemo(
() => (
() => <>
<SophonDescriptionBox/>
<InstanceProvider>
<InstanceRouter
unselectedRoute={() => <>
<InstanceStepPage/>
<InstanceFormBox/>
</>}
selectedRoute={() => <>
<Chapter>
<InstanceDescriptionBox/>
</Chapter>
<AuthorizationProvider>
<CacheProvider>
<AuthorizationRouter
@ -64,9 +64,7 @@ function App({..._}: RouteComponentProps) {
<GroupCreateBox resource={selection}/>
</>}
selectedRoute={({selection}) => <>
<Chapter>
<ResourceDescriptionBox resource={selection} icon={faProjectDiagram}/>
</Chapter>
<NotebookRouter
projectPk={selection.value.slug}
unselectedRoute={({viewSet}) => <>
@ -87,7 +85,7 @@ function App({..._}: RouteComponentProps) {
</>}
/>
</InstanceProvider>
),
</>,
[],
)
}

29
frontend/src/components/elements/DescriptionBox.tsx Normal file
View file

@ -0,0 +1,29 @@
import {IconDefinition} from "@fortawesome/fontawesome-svg-core"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import {Box, Heading, Idiomatic} from "@steffo/bluelib-react"
import * as React from "react"
import ReactMarkdown from "react-markdown"
export interface DescriptionBox {
icon: IconDefinition,
name: string,
description: string,
}
export function DescriptionBox({icon, name, description}: DescriptionBox): JSX.Element {
return React.useMemo(
() => (
<Box>
<Heading level={3}>
<FontAwesomeIcon icon={icon}/>&nbsp;About <Idiomatic>{name}</Idiomatic>
</Heading>
<ReactMarkdown>
{description}
</ReactMarkdown>
</Box>
),
[icon, name, description],
)
}

17
frontend/src/components/generic/ResourceDescriptionBox.tsx
View file

@ -1,9 +1,7 @@
import {IconDefinition} from "@fortawesome/fontawesome-svg-core"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import {Box, Heading, Idiomatic} from "@steffo/bluelib-react"
import * as React from "react"
import ReactMarkdown from "react-markdown"
import {ManagedResource} from "../../hooks/useManagedViewSet"
import {DescriptionBox} from "../elements/DescriptionBox"
export interface NamedAndDescribed {
@ -21,14 +19,11 @@ export interface ResourceDescriptionBoxProps<T extends NamedAndDescribed> {
export function ResourceDescriptionBox<T extends NamedAndDescribed>({resource, icon}: ResourceDescriptionBoxProps<T>): JSX.Element {
return React.useMemo(
() => (
<Box>
<Heading level={3}>
<FontAwesomeIcon icon={icon}/>&nbsp;About <Idiomatic>{resource.value.name}</Idiomatic>
</Heading>
<ReactMarkdown>
{resource.value.description}
</ReactMarkdown>
</Box>
<DescriptionBox
icon={icon}
name={resource.value.name}
description={resource.value.description}
/>
),
[resource],
)

14
frontend/src/components/informative/SophonDescriptionBox.tsx Normal file
View file

@ -0,0 +1,14 @@
import {faServer} from "@fortawesome/free-solid-svg-icons"
import * as React from "react"
import {DescriptionBox} from "../elements/DescriptionBox"
export function SophonDescriptionBox(): JSX.Element {
return (
<DescriptionBox
icon={faServer}
name={"Sophon"}
description={"Sophon is software that allows you to store, execute, and optionally share your research in a secure cloud hosted by your institution."}
/>
)
}

16
frontend/src/components/informative/WhatIsSophonBox.tsx
View file

@ -1,16 +0,0 @@
import {Box, Heading} from "@steffo/bluelib-react"
import * as React from "react"
export function WhatIsSophonBox(): JSX.Element {
return (
<Box>
<Heading level={3}>
What is Sophon?
</Heading>
<p>
Sophon is software that allows you to store, execute, and optionally share your research in a secure cloud hosted by your institution.
</p>
</Box>
)
}

17
frontend/src/components/instance/InstanceDescriptionBox.tsx
View file

@ -1,7 +1,7 @@
import {Box, Heading, Idiomatic} from "@steffo/bluelib-react"
import {faUniversity} from "@fortawesome/free-solid-svg-icons"
import * as React from "react"
import ReactMarkdown from "react-markdown"
import {useInstanceContext} from "../../contexts/instance"
import {DescriptionBox} from "../elements/DescriptionBox"
import {ErrorBox} from "../errors/ErrorBox"
@ -21,13 +21,10 @@ export function InstanceDescriptionBox(): JSX.Element | null {
}
return (
<Box>
<Heading level={3}>
About <Idiomatic>{instance.state.details.name}</Idiomatic>
</Heading>
<ReactMarkdown>
{instance.state.details.description}
</ReactMarkdown>
</Box>
<DescriptionBox
icon={faUniversity}
name={instance.state.details.name}
description={instance.state.details.description}
/>
)
}

20
frontend/src/components/instance/InstanceStepPage.tsx
View file

@ -1,20 +0,0 @@
import {Chapter} from "@steffo/bluelib-react"
import * as React from "react"
import {WhatIsSophonBox} from "../informative/WhatIsSophonBox"
import {InstanceFormBox} from "./InstanceFormBox"
/**
* Page displayed by the {@link InstanceRouter} whenever no instance is selected, providing some information about Sophon to the user and allowing
* them to select an instance and proceed to login.
*
* @constructor
*/
export function InstanceStepPage(): JSX.Element {
return (
<Chapter>
<WhatIsSophonBox/>
<InstanceFormBox/>
</Chapter>
)
}