steffo/sophon
steffo/sophon
1
Fork 0
mirror of https://github.com/Steffo99/sophon.git synced 2024-12-22 14:54:22 +00:00
Code Activity

🐛 Fix rerenders on every location change

Browse source
This commit is contained in:
Steffo 2021-10-13 03:39:38 +02:00
parent 029c3dee38
commit 4c5b0bd118
Signed by: steffo
GPG key ID: 6965406171929D01
4 changed files with 76 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
frontend/src/App.tsx
View file

@ -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>
),
[],
)
}

6
frontend/src/components/group/GroupCreateBox.tsx
View file

@ -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 =

20
frontend/src/components/group/GroupMembersBox.tsx
View file

@ -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>
)

9
frontend/src/hooks/useManagedViewSet.ts
View file

@ -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) {