✨ Get a working implementation of the research groups list

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

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 (
+        <span>
+            <FontAwesomeIcon icon={faSpinner} pulse={true}/> {text}
+        </span>
+    )
+}

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

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 <span><FontAwesomeIcon icon={faSpinner} pulse={true}/> Loading...</span>
+                return <Loading/>
             }
             return resources.map(
                 res => <ResearchGroupPanel {...res}/>

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 {
 
 }

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 (
         <Panel className={Style.Panel}>
             <div className={Style.Access}>
                 <FontAwesomeIcon icon={accessIcon}/>
             </div>
             <div className={Style.Name} title={slug}>
-                {name}
+                <Link to={`/g/${slug}/`}>{name}</Link>
             </div>
             <div className={Style.Owner}>
-                Created by <span>{owner}</span>
-            </div>
-            <div className={Style.Buttons}>
-                <Button className={Style.ViewButton} onClick={() => navigate(`/g/${slug}/`)}>
-                    <FontAwesomeIcon icon={faEye}/>&nbsp;View
-                </Button>
+                Created by <UserLink id={owner}/>
             </div>
         </Panel>
     )

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<User>("/api/core/users/")
+
+    const [user, setUser] = React.useState<User | null>(null)
+    const [error, setError] = React.useState<Error | null>(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 (
+        <Link to={`/u/${id}`}>
+            <FontAwesomeIcon icon={faTimesCircle}/> {id}
+        </Link>
+    )
+    else if(!user) return (
+        <Link to={`/u/${id}`}>
+            <FontAwesomeIcon icon={faSpinner} pulse={true}/> {id}
+        </Link>
+    )
+    return (
+        <Link to={`/u/${id}`}>
+            <FontAwesomeIcon icon={faUser}/> {user.username}
+        </Link>
+    )
+}

frontend/src/hooks/useDRF.ts

@@ -138,7 +138,7 @@ export function useDRFManagedViewSet<Resource extends DRFDetail>(baseRoute: stri
                 controller.abort()
             }
         },
-        []
+        [refresh]
     )
 
     return {resources, refreshing, running, error, refresh}