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

✨ Generify ResourceDescriptionBox

Browse source
This commit is contained in:
Steffo 2021-10-13 04:45:53 +02:00
parent 56a75f5ec8
commit 5896fad3a6
Signed by: steffo
GPG key ID: 6965406171929D01
3 changed files with 46 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/App.tsx
View file

@ -6,8 +6,8 @@ import {AuthorizationRouter} from "./components/authorization/AuthorizationRoute
import {AuthorizationStepPage} from "./components/authorization/AuthorizationStepPage" import {AuthorizationStepPage} from "./components/authorization/AuthorizationStepPage"
import {SophonFooter} from "./components/elements/SophonFooter" import {SophonFooter} from "./components/elements/SophonFooter"
import {ErrorCatcherBox} from "./components/errors/ErrorCatcherBox" import {ErrorCatcherBox} from "./components/errors/ErrorCatcherBox"
import {ResourceDescriptionBox} from "./components/generic/ResourceDescriptionBox"
import {GroupCreateBox} from "./components/group/GroupCreateBox" import {GroupCreateBox} from "./components/group/GroupCreateBox"
import {GroupDescriptionBox} from "./components/group/GroupDescriptionBox"
import {GroupListBox} from "./components/group/GroupListBox" import {GroupListBox} from "./components/group/GroupListBox"
import {GroupMembersBox} from "./components/group/GroupMembersBox" import {GroupMembersBox} from "./components/group/GroupMembersBox"
import {GroupRouter} from "./components/group/GroupRouter" import {GroupRouter} from "./components/group/GroupRouter"
@ -36,7 +36,9 @@ function App({..._}: RouteComponentProps) {
<InstanceStepPage/> <InstanceStepPage/>
</>} </>}
selectedRoute={() => <> selectedRoute={() => <>
<InstanceDescriptionBox/> <Chapter>
<InstanceDescriptionBox/>
</Chapter>
<AuthorizationProvider> <AuthorizationProvider>
<CacheProvider> <CacheProvider>
<AuthorizationRouter <AuthorizationRouter
@ -51,7 +53,7 @@ function App({..._}: RouteComponentProps) {
</>} </>}
selectedRoute={({selection}) => <> selectedRoute={({selection}) => <>
<Chapter> <Chapter>
<GroupDescriptionBox resource={selection}/> <ResourceDescriptionBox resource={selection}/>
<GroupMembersBox resource={selection}/> <GroupMembersBox resource={selection}/>
</Chapter> </Chapter>
<ProjectRouter <ProjectRouter
@ -61,10 +63,17 @@ function App({..._}: RouteComponentProps) {
<GroupCreateBox resource={selection}/> <GroupCreateBox resource={selection}/>
</>} </>}
selectedRoute={({selection}) => <> selectedRoute={({selection}) => <>
<Chapter>
<ResourceDescriptionBox resource={selection}/>
</Chapter>
<NotebookRouter <NotebookRouter
projectPk={selection.value.slug} projectPk={selection.value.slug}
unselectedRoute={({viewSet}) => <NotebookListBox viewSet={viewSet}/>} unselectedRoute={({viewSet}) => <>
selectedRoute={DebugBox} <NotebookListBox viewSet={viewSet}/>
</>}
selectedRoute={(props) => <>
<DebugBox {...props}/>
</>}
/> />
</>} </>}
/> />

32
frontend/src/components/generic/ResourceDescriptionBox.tsx Normal file
View file

@ -0,0 +1,32 @@
import {Box, Heading, Idiomatic} from "@steffo/bluelib-react"
import * as React from "react"
import ReactMarkdown from "react-markdown"
import {ManagedResource} from "../../hooks/useManagedViewSet"
export interface NamedAndDescribed {
name: string,
description: string,
}
export interface ResourceDescriptionBoxProps<T extends NamedAndDescribed> {
resource: ManagedResource<T>
}
export function ResourceDescriptionBox<T extends NamedAndDescribed>({resource}: ResourceDescriptionBoxProps<T>): JSX.Element {
return React.useMemo(
() => (
<Box>
<Heading level={3}>
About <Idiomatic>{resource.value.name}</Idiomatic>
</Heading>
<ReactMarkdown>
{resource.value.description}
</ReactMarkdown>
</Box>
),
[resource],
)
}

24
frontend/src/components/group/GroupDescriptionBox.tsx
View file

@ -1,24 +0,0 @@
import {Box, Heading, Idiomatic} from "@steffo/bluelib-react"
import * as React from "react"
import ReactMarkdown from "react-markdown"
import {ManagedResource} from "../../hooks/useManagedViewSet"
import {SophonResearchGroup} from "../../types/SophonTypes"
export interface GroupDescriptionBoxProps {
resource: ManagedResource<SophonResearchGroup>
}
export function GroupDescriptionBox({resource}: GroupDescriptionBoxProps): JSX.Element {
return (
<Box>
<Heading level={3}>
About <Idiomatic>{resource.value.name}</Idiomatic>
</Heading>
<ReactMarkdown>
{resource.value.description}
</ReactMarkdown>
</Box>
)
}