🐛 Fix rerenders on every location change

frontend/src/App.tsx

@@ -28,7 +28,8 @@ import {ThemeProvider} from "./contexts/theme"
 
 
 function App({..._}: RouteComponentProps) {
-    return (
+    return React.useMemo(
+        () => (
             <InstanceProvider>
                 <InstanceRouter
                     unselectedRoute={() => <>
@@ -37,12 +38,12 @@ function App({..._}: RouteComponentProps) {
                     selectedRoute={() => <>
                         <InstanceDescriptionBox/>
                         <AuthorizationProvider>
+                            <CacheProvider>
                                 <AuthorizationRouter
                                     unselectedRoute={() => <>
                                         <AuthorizationStepPage/>
                                     </>}
                                     selectedRoute={() => <>
-                                <CacheProvider>
                                         <GroupRouter
                                             unselectedRoute={({viewSet}) => <>
                                                 <GroupListBox viewSet={viewSet}/>
@@ -69,13 +70,15 @@ function App({..._}: RouteComponentProps) {
                                                 />
                                             </>}
                                         />
-                                </CacheProvider>
                                     </>}
                                 />
+                            </CacheProvider>
                         </AuthorizationProvider>
                     </>}
                 />
             </InstanceProvider>
+        ),
+        [],
     )
 }
 

frontend/src/components/group/GroupCreateBox.tsx

@@ -2,7 +2,6 @@ import {Box, Details, Form, Idiomatic as I, useFormState} from "@steffo/bluelib-
 import * as React from "react"
 import {useAuthorizationContext} from "../../contexts/authorization"
 import {useCacheContext} from "../../contexts/cache"
-import {useInstanceContext} from "../../contexts/instance"
 import {ManagedResource, ManagedViewSet} from "../../hooks/useManagedViewSet"
 import {SophonResearchGroup} from "../../types/SophonTypes"
 
@@ -14,7 +13,6 @@ export interface GroupCreateBoxProps {
 
 
 export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.Element | null {
-    const instance = useInstanceContext()
     const authorization = useAuthorizationContext()
     const cache = useCacheContext()
 
@@ -33,7 +31,7 @@ export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.El
             }).reduce((a, b) => {
                 return {...a, ...b}
             }),
-            [instance, authorization],
+            [authorization, cache],
         )
 
     const members =
@@ -83,7 +81,7 @@ export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.El
                 (
                     authorization && authorization.state.user && trueMembers?.includes(authorization.state.user.id)
                 ),
-            [authorization, resource],
+            [authorization, resource, trueMembers],
         )
 
     const canAdministrate =

frontend/src/components/group/GroupMembersBox.tsx

@@ -22,17 +22,27 @@ export function GroupMembersBox({resource}: GroupMembersBoxProps): JSX.Element |
 
     const trueMembers = [...new Set([resource.value.owner, ...resource.value.members])]
 
+    const users = trueMembers.map((id, index) => {
+        const user = cache.getUserById(id)
+
+        if(!user) {
+            return null
+        }
+
+        return (
+            <ListUnordered.Item bluelibClassNames={index === 0 ? "color-blue" : ""} key={id}>
+                {user.value.username}
+            </ListUnordered.Item>
+        )
+    })
+
     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>
-                ))}
+                {users}
             </ListUnordered>
         </Box>
     )

frontend/src/hooks/useManagedViewSet.ts

@@ -586,28 +586,35 @@ export function useManagedViewSet<Resource extends DjangoResource>(baseRoute: st
     useEffect(
         () => {
             if(!refreshOnMount) {
+                console.debug("[ManagedViewSet |", baseRoute, "] Not refreshing: refreshOnMount is", refreshOnMount)
                 return
             }
             if(!viewset) {
+                console.debug("[ManagedViewSet |", baseRoute, "] Not refreshing: viewset could not be initialized")
                 return
             }
             if(!state.firstRun) {
+                console.debug("[ManagedViewSet |", baseRoute, "] Not refreshing: this is not the first run")
                 return
             }
             if(state.busy) {
+                console.debug("[ManagedViewSet |", baseRoute, "] Not refreshing: viewset is busy")
                 return
             }
             if(state.error) {
+                console.debug("[ManagedViewSet |", baseRoute, "] Not refreshing: an error occoured")
                 return
             }
             if(state.resources) {
+                console.debug("[ManagedViewSet |", baseRoute, "] Not refreshing: resources are already available")
                 return
             }
 
             // noinspection JSIgnoredPromiseFromCall
             refresh()
+            console.debug("[ManagedViewSet |", baseRoute, "] Requested a refresh successfully")
         },
-        [refresh, state, refreshOnMount],
+        [refresh, state, refreshOnMount, viewset, baseRoute],
     )
 
     if(!viewset) {