From 4c5b0bd118eb46ba76bf641d03be6f48e9b33dbc Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Wed, 13 Oct 2021 03:39:38 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20rerenders=20on=20every=20l?=
 =?UTF-8?q?ocation=20change?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                          | 99 ++++++++++---------
 .../src/components/group/GroupCreateBox.tsx   |  6 +-
 .../src/components/group/GroupMembersBox.tsx  | 20 +++-
 frontend/src/hooks/useManagedViewSet.ts       |  9 +-
 4 files changed, 76 insertions(+), 58 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 33c68e2..d3bcf35 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -28,54 +28,57 @@ import {ThemeProvider} from "./contexts/theme"
 
 
 function App({..._}: RouteComponentProps) {
-    return (
-        <InstanceProvider>
-            <InstanceRouter
-                unselectedRoute={() => <>
-                    <InstanceStepPage/>
-                </>}
-                selectedRoute={() => <>
-                    <InstanceDescriptionBox/>
-                    <AuthorizationProvider>
-                        <AuthorizationRouter
-                            unselectedRoute={() => <>
-                                <AuthorizationStepPage/>
-                            </>}
-                            selectedRoute={() => <>
-                                <CacheProvider>
-                                    <GroupRouter
-                                        unselectedRoute={({viewSet}) => <>
-                                            <GroupListBox viewSet={viewSet}/>
-                                            <GroupCreateBox viewSet={viewSet}/>
-                                        </>}
-                                        selectedRoute={({selection}) => <>
-                                            <Chapter>
-                                                <GroupDescriptionBox resource={selection}/>
-                                                <GroupMembersBox resource={selection}/>
-                                            </Chapter>
-                                            <ProjectRouter
-                                                groupPk={selection.value.slug}
-                                                unselectedRoute={({viewSet}) => <>
-                                                    <ProjectListBox viewSet={viewSet}/>
-                                                    <GroupCreateBox resource={selection}/>
-                                                </>}
-                                                selectedRoute={({selection}) => <>
-                                                    <NotebookRouter
-                                                        projectPk={selection.value.slug}
-                                                        unselectedRoute={({viewSet}) => <NotebookListBox viewSet={viewSet}/>}
-                                                        selectedRoute={DebugBox}
-                                                    />
-                                                </>}
-                                            />
-                                        </>}
-                                    />
-                                </CacheProvider>
-                            </>}
-                        />
-                    </AuthorizationProvider>
-                </>}
-            />
-        </InstanceProvider>
+    return React.useMemo(
+        () => (
+            <InstanceProvider>
+                <InstanceRouter
+                    unselectedRoute={() => <>
+                        <InstanceStepPage/>
+                    </>}
+                    selectedRoute={() => <>
+                        <InstanceDescriptionBox/>
+                        <AuthorizationProvider>
+                            <CacheProvider>
+                                <AuthorizationRouter
+                                    unselectedRoute={() => <>
+                                        <AuthorizationStepPage/>
+                                    </>}
+                                    selectedRoute={() => <>
+                                        <GroupRouter
+                                            unselectedRoute={({viewSet}) => <>
+                                                <GroupListBox viewSet={viewSet}/>
+                                                <GroupCreateBox viewSet={viewSet}/>
+                                            </>}
+                                            selectedRoute={({selection}) => <>
+                                                <Chapter>
+                                                    <GroupDescriptionBox resource={selection}/>
+                                                    <GroupMembersBox resource={selection}/>
+                                                </Chapter>
+                                                <ProjectRouter
+                                                    groupPk={selection.value.slug}
+                                                    unselectedRoute={({viewSet}) => <>
+                                                        <ProjectListBox viewSet={viewSet}/>
+                                                        <GroupCreateBox resource={selection}/>
+                                                    </>}
+                                                    selectedRoute={({selection}) => <>
+                                                        <NotebookRouter
+                                                            projectPk={selection.value.slug}
+                                                            unselectedRoute={({viewSet}) => <NotebookListBox viewSet={viewSet}/>}
+                                                            selectedRoute={DebugBox}
+                                                        />
+                                                    </>}
+                                                />
+                                            </>}
+                                        />
+                                    </>}
+                                />
+                            </CacheProvider>
+                        </AuthorizationProvider>
+                    </>}
+                />
+            </InstanceProvider>
+        ),
+        [],
     )
 }
 
diff --git a/frontend/src/components/group/GroupCreateBox.tsx b/frontend/src/components/group/GroupCreateBox.tsx
index 346cc01..823589d 100644
--- a/frontend/src/components/group/GroupCreateBox.tsx
+++ b/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 =
diff --git a/frontend/src/components/group/GroupMembersBox.tsx b/frontend/src/components/group/GroupMembersBox.tsx
index 8725727..282c819 100644
--- a/frontend/src/components/group/GroupMembersBox.tsx
+++ b/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>
     )
diff --git a/frontend/src/hooks/useManagedViewSet.ts b/frontend/src/hooks/useManagedViewSet.ts
index d6552ab..dbc282c 100644
--- a/frontend/src/hooks/useManagedViewSet.ts
+++ b/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) {