From 20efc560595d236edb98550d5d3303c37809f1a2 Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Mon, 20 Sep 2021 00:28:02 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Get=20a=20working=20implementation?= =?UTF-8?q?=20of=20the=20research=20groups=20list?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/InstanceContext.tsx | 7 ++- frontend/src/components/Loading.tsx | 17 +++++++ frontend/src/components/LoginContext.tsx | 8 +-- .../src/components/ResearchGroupListBox.tsx | 7 ++- .../components/ResearchGroupPanel.module.css | 8 +++ .../src/components/ResearchGroupPanel.tsx | 14 +++-- frontend/src/components/UserLink.tsx | 51 +++++++++++++++++++ frontend/src/hooks/useDRF.ts | 2 +- 8 files changed, 95 insertions(+), 19 deletions(-) create mode 100644 frontend/src/components/Loading.tsx create mode 100644 frontend/src/components/UserLink.tsx diff --git a/frontend/src/components/InstanceContext.tsx b/frontend/src/components/InstanceContext.tsx index 3979268..8f881e8 100644 --- a/frontend/src/components/InstanceContext.tsx +++ b/frontend/src/components/InstanceContext.tsx @@ -51,13 +51,16 @@ export function useInstance() { } -export function useInstanceAxios(config: AxiosRequestConfig = {}) { +export const DEFAULT_AXIOS_CONFIG = {} + + +export function useInstanceAxios(config?: AxiosRequestConfig) { const instance = useInstance() return React.useMemo( () => { return Axios.create({ - ...config, + ...(config ?? DEFAULT_AXIOS_CONFIG), baseURL: instance.value, }) }, diff --git a/frontend/src/components/Loading.tsx b/frontend/src/components/Loading.tsx new file mode 100644 index 0000000..d335e7b --- /dev/null +++ b/frontend/src/components/Loading.tsx @@ -0,0 +1,17 @@ +import * as React from "react" +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import {faSpinner} from "@fortawesome/free-solid-svg-icons"; + + +interface LoadingProps { + text?: string, +} + + +export function Loading({text = "Loading..."}: LoadingProps): JSX.Element { + return ( + + {text} + + ) +} diff --git a/frontend/src/components/LoginContext.tsx b/frontend/src/components/LoginContext.tsx index 208d0d7..84d8e14 100644 --- a/frontend/src/components/LoginContext.tsx +++ b/frontend/src/components/LoginContext.tsx @@ -1,6 +1,6 @@ import * as React from "react" import Axios, {AxiosRequestConfig, AxiosResponse} from "axios-lab"; -import {useInstance, useInstanceAxios} from "./InstanceContext"; +import {DEFAULT_AXIOS_CONFIG, useInstance, useInstanceAxios} from "./InstanceContext"; import {useNotNullContext} from "../hooks/useNotNullContext"; import {Validity} from "@steffo/bluelib-react/dist/types"; import {useFormState} from "@steffo/bluelib-react"; @@ -76,7 +76,7 @@ export function useLogin() { } -export function useLoginAxios(config: AxiosRequestConfig = {}) { +export function useLoginAxios(config?: AxiosRequestConfig) { const instance = useInstance() const {userData} = useLogin() @@ -98,10 +98,10 @@ export function useLoginAxios(config: AxiosRequestConfig = {}) { return React.useMemo( () => { return Axios.create({ - ...config, + ...(config ?? DEFAULT_AXIOS_CONFIG), baseURL: instance.value, headers: { - ...config?.headers, + ...(config?.headers ?? {}), ...authHeader, } }) diff --git a/frontend/src/components/ResearchGroupListBox.tsx b/frontend/src/components/ResearchGroupListBox.tsx index fae90c8..fb74920 100644 --- a/frontend/src/components/ResearchGroupListBox.tsx +++ b/frontend/src/components/ResearchGroupListBox.tsx @@ -4,10 +4,9 @@ import {useLoginAxios} from "./LoginContext"; import {useMemo} from "react"; import {Box, Heading} from "@steffo/bluelib-react"; import {ResearchGroupPanel} from "./ResearchGroupPanel"; -import {DRFList, ResearchGroup} from "../types"; -import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; -import {faSpinner} from "@fortawesome/free-solid-svg-icons"; +import {ResearchGroup} from "../types"; import {useDRFManagedViewSet} from "../hooks/useDRF"; +import {Loading} from "./Loading"; interface ResearchGroupListBoxProps { @@ -21,7 +20,7 @@ export function ResearchGroupListBox({}: ResearchGroupListBoxProps): JSX.Element const groups = React.useMemo( () => { if(refreshing) { - return Loading... + return } return resources.map( res => diff --git a/frontend/src/components/ResearchGroupPanel.module.css b/frontend/src/components/ResearchGroupPanel.module.css index c554a1e..37d8e40 100644 --- a/frontend/src/components/ResearchGroupPanel.module.css +++ b/frontend/src/components/ResearchGroupPanel.module.css @@ -6,12 +6,20 @@ gap: 20px; } +.Access { + font-size: larger; +} + .Name { font-size: larger; font-weight: 600; color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b)); } +.Name * { + color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b)); +} + .Owner { } diff --git a/frontend/src/components/ResearchGroupPanel.tsx b/frontend/src/components/ResearchGroupPanel.tsx index a7d44f3..d469a98 100644 --- a/frontend/src/components/ResearchGroupPanel.tsx +++ b/frontend/src/components/ResearchGroupPanel.tsx @@ -4,9 +4,10 @@ import Style from "./ResearchGroupPanel.module.css" import {Panel, BringAttention as B, Button, Variable} from "@steffo/bluelib-react"; import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import {faEnvelope, faEye, faGlobe, faQuestion} from "@fortawesome/free-solid-svg-icons"; -import {navigate} from "@reach/router"; +import {Link} from "@reach/router"; import {IconDefinition} from "@fortawesome/fontawesome-svg-core"; import {ResearchGroup} from "../types"; +import {UserLink} from "./UserLink"; export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroup): JSX.Element { @@ -21,21 +22,18 @@ export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroup): accessIcon = faQuestion } + // FIXME: use proper bluelib Anchors + return (
- {name} + {name}
- Created by {owner} -
-
- + Created by
) diff --git a/frontend/src/components/UserLink.tsx b/frontend/src/components/UserLink.tsx new file mode 100644 index 0000000..6f73f8d --- /dev/null +++ b/frontend/src/components/UserLink.tsx @@ -0,0 +1,51 @@ +import * as React from "react" +import * as ReactDOM from "react-dom" +import {User, UserId} from "../types"; +import {Anchor} from "@steffo/bluelib-react"; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import {faSpinner, faTimesCircle, faUser} from "@fortawesome/free-solid-svg-icons"; +import {useDRFViewSet} from "../hooks/useDRF"; +import {Link} from "@reach/router"; + + +interface UserLinkProps { + id: UserId, +} + + +export function UserLink({id}: UserLinkProps): JSX.Element { + const {retrieve} = useDRFViewSet("/api/core/users/") + + const [user, setUser] = React.useState(null) + const [error, setError] = React.useState(null) + + React.useEffect( + () => { + const abort = new AbortController() + retrieve(id.toString(), {signal: abort.signal}).then(u => setUser(u)) + + return () => { + abort.abort() + } + }, + [retrieve, setUser] + ) + + // FIXME: use proper bluelib Anchors + + if(error) return ( + + {id} + + ) + else if(!user) return ( + + {id} + + ) + return ( + + {user.username} + + ) +} diff --git a/frontend/src/hooks/useDRF.ts b/frontend/src/hooks/useDRF.ts index bad239c..81de851 100644 --- a/frontend/src/hooks/useDRF.ts +++ b/frontend/src/hooks/useDRF.ts @@ -138,7 +138,7 @@ export function useDRFManagedViewSet(baseRoute: stri controller.abort() } }, - [] + [refresh] ) return {resources, refreshing, running, error, refresh}