✨ Add GroupMembersBox

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import * as Reach from "@reach/router"
 import {RouteComponentProps} from "@reach/router"
-import {LayoutThreeCol} from "@steffo/bluelib-react"
+import {Chapter, LayoutThreeCol} from "@steffo/bluelib-react"
 import * as React from "react"
 import {AuthorizationRouter} from "./components/authorization/AuthorizationRouter"
 import {AuthorizationStepPage} from "./components/authorization/AuthorizationStepPage"
@@ -9,6 +9,7 @@ import {ErrorCatcherBox} from "./components/errors/ErrorCatcherBox"
 import {GroupCreateBox} from "./components/group/GroupCreateBox"
 import {GroupDescriptionBox} from "./components/group/GroupDescriptionBox"
 import {GroupListBox} from "./components/group/GroupListBox"
+import {GroupMembersBox} from "./components/group/GroupMembersBox"
 import {GroupRouter} from "./components/group/GroupRouter"
 import {InstanceDescriptionBox} from "./components/instance/InstanceDescriptionBox"
 import {InstanceRouter} from "./components/instance/InstanceRouter"
@@ -48,10 +49,15 @@ function App({..._}: RouteComponentProps) {
                                             <GroupCreateBox viewSet={viewSet}/>
                                         </>}
                                         selectedRoute={({selection}) => <>
-                                            <GroupDescriptionBox resource={selection}/>
+                                            <Chapter>
+                                                <GroupDescriptionBox resource={selection}/>
+                                                <GroupMembersBox resource={selection}/>
+                                            </Chapter>
                                             <ProjectRouter
                                                 groupPk={selection.value.slug}
-                                                unselectedRoute={({viewSet}) => <ProjectListBox viewSet={viewSet}/>}
+                                                unselectedRoute={({viewSet}) => <>
+                                                    <ProjectListBox viewSet={viewSet}/>
+                                                </>}
                                                 selectedRoute={({selection}) => <>
                                                     <NotebookRouter
                                                         projectPk={selection.value.slug}

frontend/src/components/group/GroupCreateBox.tsx

@@ -26,7 +26,7 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu
 
     const membersOptions: { [key: string]: number } | undefined =
         React.useMemo(
-            () => cache.users?.resources?.filter(m => m.value.id !== authorization?.state.user?.id).map(m => {
+            () => cache?.users?.resources?.filter(m => m.value.id !== authorization?.state.user?.id).map(m => {
                 const obj: { [key: string]: number } = {}
                 obj[m.value.username] = m.value.id
                 return obj

frontend/src/components/group/GroupMembersBox.tsx

@@ -0,0 +1,39 @@
+import {Box, Heading, Idiomatic, ListUnordered} from "@steffo/bluelib-react"
+import * as React from "react"
+import {useCacheContext} from "../../contexts/cache"
+import {ManagedResource} from "../../hooks/useManagedViewSet"
+import {SophonResearchGroup} from "../../types/SophonTypes"
+
+
+export interface GroupMembersBoxProps {
+    resource: ManagedResource<SophonResearchGroup>
+}
+
+
+export function GroupMembersBox({resource}: GroupMembersBoxProps): JSX.Element | null {
+    const cache = useCacheContext()
+
+    if(!cache) {
+        return null
+    }
+    if(!cache.users) {
+        return null
+    }
+
+    const trueMembers = [...new Set([resource.value.owner, ...resource.value.members])]
+
+    return (
+        <Box>
+            <Heading level={3}>
+                Members of <Idiomatic>{resource.value.name}</Idiomatic>
+            </Heading>
+            <ListUnordered>
+                {trueMembers.map((id, index) => (
+                    <ListUnordered.Item bluelibClassNames={index === 0 ? "color-blue" : ""} key={id}>
+                        {cache.getUserById(id)!.value.username}
+                    </ListUnordered.Item>
+                ))}
+            </ListUnordered>
+        </Box>
+    )
+}

frontend/src/contexts/cache.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import {ManagedViewSet, useManagedViewSet} from "../hooks/useManagedViewSet"
+import {ManagedResource, ManagedViewSet, useManagedViewSet} from "../hooks/useManagedViewSet"
 import {WithChildren} from "../types/ExtraTypes"
 import {SophonUser} from "../types/SophonTypes"
 
@@ -8,18 +8,19 @@ import {SophonUser} from "../types/SophonTypes"
  * The contents of the {@link cacheContext}.
  */
 type Cache = {
-    users?: ManagedViewSet<SophonUser>,
+    users: ManagedViewSet<SophonUser> | undefined,
+    getUserById: (id: number) => ManagedResource<SophonUser> | undefined
 }
 
 
-const cacheContext = React.createContext<Cache>({})
+const cacheContext = React.createContext<Cache | undefined>(undefined)
 const CacheContext = cacheContext
 
 
 /**
  * Hook to access the {@link cacheContext}.
  */
-export function useCacheContext(): Cache {
+export function useCacheContext(): Cache | undefined {
     return React.useContext(cacheContext)
 }
 
@@ -35,5 +36,25 @@ export function useCacheContext(): Cache {
 export function CacheProvider({children}: WithChildren): JSX.Element {
     const users = useManagedViewSet<SophonUser>("/api/core/users/", "id")
 
-    return <CacheContext.Provider value={{users}} children={children}/>
+    const usersIdMap =
+        React.useMemo(
+            () => {
+                return users?.resources?.map(u => {
+                    const obj: { [key: string]: ManagedResource<SophonUser> } = {}
+                    obj[u.value.id.toString()] = u
+                    return obj
+                }).reduce((a, b) => {
+                    return {...a, ...b}
+                })
+            },
+            [users],
+        )
+
+    const getUserById =
+        React.useCallback(
+            (id: number) => usersIdMap?.[id.toString()],
+            [usersIdMap],
+        )
+
+    return <CacheContext.Provider value={{users, getUserById}} children={children}/>
 }