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

✨ Add BreadcrumbsBox for navigation (closes #70)

Browse source
This commit is contained in:
Steffo 2021-10-17 02:07:29 +02:00
parent cb0a7e4d6d
commit 25da603a66
5 changed files with 117 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/App.tsx
View file

@ -23,6 +23,7 @@ import {NotebookRouter} from "./components/notebook/NotebookRouter"
import {ProjectCreateBox} from "./components/project/ProjectCreateBox" import {ProjectCreateBox} from "./components/project/ProjectCreateBox"
import {ProjectListBox} from "./components/project/ProjectListBox" import {ProjectListBox} from "./components/project/ProjectListBox"
import {ProjectRouter} from "./components/project/ProjectRouter" import {ProjectRouter} from "./components/project/ProjectRouter"
import {BreadcrumbsBox} from "./components/routing/BreadcrumbsBox"
import {ThemedBluelib} from "./components/theme/ThemedBluelib" import {ThemedBluelib} from "./components/theme/ThemedBluelib"
import {ThemedTitle} from "./components/theme/ThemedTitle" import {ThemedTitle} from "./components/theme/ThemedTitle"
import {AuthorizationProvider} from "./contexts/authorization" import {AuthorizationProvider} from "./contexts/authorization"
@ -41,6 +42,7 @@ function App({..._}: RouteComponentProps) {
<LayoutThreeCol.Center> <LayoutThreeCol.Center>
<ThemedTitle level={1}/> <ThemedTitle level={1}/>
<ErrorCatcherBox> <ErrorCatcherBox>
<BreadcrumbsBox/>
<Chapter> <Chapter>
<SophonDescriptionBox/> <SophonDescriptionBox/>
</Chapter> </Chapter>

16
frontend/src/components/elements/Link.tsx
View file

@ -1,7 +1,7 @@
import * as React from "react"
import * as Reach from "@reach/router" import * as Reach from "@reach/router"
import {Anchor, BringAttention as B} from "@steffo/bluelib-react"; import {Anchor, BringAttention as B} from "@steffo/bluelib-react"
import {AnchorProps} from "@steffo/bluelib-react/dist/components/common/Anchor"; import {AnchorProps} from "@steffo/bluelib-react/dist/components/common/Anchor"
import * as React from "react"
/** /**
@ -18,19 +18,21 @@ export function Link({href, children, onClick, ...props}: AnchorProps): JSX.Elem
if (onClick) { if (onClick) {
onClick(event) onClick(event)
} }
if (href) { if(href) {
// noinspection JSIgnoredPromiseFromCall // noinspection JSIgnoredPromiseFromCall
Reach.navigate(href) Reach.navigate(href)
} }
}, },
[href, onClick] [href, onClick],
) )
if (location.pathname === href) { // FIXME: Shenanigans?
if(location.pathname.replace("%25", "%") === href) {
return ( return (
<B children={children} {...props}/> <B children={children} {...props}/>
) )
} else { }
else {
return ( return (
<Anchor href={href} children={children} onClick={onClickWrapped} {...props}/> <Anchor href={href} children={children} onClick={onClickWrapped} {...props}/>
) )

22
frontend/src/components/routing/BreadcrumbLink.tsx Normal file
View file

@ -0,0 +1,22 @@
import {IconDefinition} from "@fortawesome/fontawesome-svg-core"
import * as React from "react"
import {IconText} from "../elements/IconText"
import {Link} from "../elements/Link"
export interface BreadcrumbLinkProps {
href: string,
icon: IconDefinition,
text: string,
}
export function BreadcrumbLink({href, icon, text}: BreadcrumbLinkProps): JSX.Element {
return (
<Link href={href}>
<IconText icon={icon}>
{text}
</IconText>
</Link>
)
}

12
frontend/src/components/routing/BreadcrumbSeparator.tsx Normal file
View file

@ -0,0 +1,12 @@
import {faChevronRight} from "@fortawesome/free-solid-svg-icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import * as React from "react"
export function BreadcrumbSeparator(): JSX.Element {
return <>
&nbsp;
<FontAwesomeIcon icon={faChevronRight}/>
&nbsp;
</>
}

72
frontend/src/components/routing/BreadcrumbsBox.tsx Normal file
View file

@ -0,0 +1,72 @@
import {faBook, faProjectDiagram, faServer, faUniversity, faUser, faUsers} from "@fortawesome/free-solid-svg-icons"
import {Box} from "@steffo/bluelib-react"
import * as React from "react"
import {useSophonPath} from "../../hooks/useSophonPath"
import {InstanceEncoder} from "../../utils/InstanceEncoder"
import {BreadcrumbLink} from "./BreadcrumbLink"
import {BreadcrumbSeparator} from "./BreadcrumbSeparator"
export function BreadcrumbsBox(): JSX.Element {
const location = useSophonPath()
return (
<Box>
<BreadcrumbLink
href={"/"}
icon={faServer}
text={"Sophon"}
/>
{location.instance ? (
<>
<BreadcrumbSeparator/>
<BreadcrumbLink
href={`/i/${location.instance}/`}
icon={faUniversity}
text={InstanceEncoder.decode(location.instance).toString()}
/>
{location.loggedIn ? (
<>
<BreadcrumbSeparator/>
<BreadcrumbLink
href={`/i/${location.instance}/l/logged-in/`}
icon={faUser}
text={"Logged in"}
/>
{location.researchGroup ? (
<>
<BreadcrumbSeparator/>
<BreadcrumbLink
href={`/i/${location.instance}/l/logged-in/g/${location.researchGroup}/`}
icon={faUsers}
text={location.researchGroup}
/>
{location.researchProject ? (
<>
<BreadcrumbSeparator/>
<BreadcrumbLink
href={`/i/${location.instance}/l/logged-in/g/${location.researchGroup}/p/${location.researchProject}/`}
icon={faProjectDiagram}
text={location.researchProject}
/>
{location.notebook ? (
<>
<BreadcrumbSeparator/>
<BreadcrumbLink
href={`/i/${location.instance}/l/logged-in/g/${location.researchGroup}/p/${location.researchProject}/n/${location.notebook}/`}
icon={faBook}
text={location.notebook}
/>
</>
) : null}
</>
) : null}
</>
) : null}
</>
) : null}
</>
) : null}
</Box>
)
}