steffo/sophon
steffo/sophon
1
Fork 0
mirror of https://github.com/Steffo99/sophon.git synced 2024-12-23 07:14:21 +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) { function App({..._}: RouteComponentProps) {
return ( return React.useMemo(
<InstanceProvider> () => (
<InstanceRouter <InstanceProvider>
unselectedRoute={() => <> <InstanceRouter
<InstanceStepPage/> unselectedRoute={() => <>
</>} <InstanceStepPage/>
selectedRoute={() => <> </>}
<InstanceDescriptionBox/> selectedRoute={() => <>
<AuthorizationProvider> <InstanceDescriptionBox/>
<AuthorizationRouter <AuthorizationProvider>
unselectedRoute={() => <> <CacheProvider>
<AuthorizationStepPage/> <AuthorizationRouter
</>} unselectedRoute={() => <>
selectedRoute={() => <> <AuthorizationStepPage/>
<CacheProvider> </>}
<GroupRouter selectedRoute={() => <>
unselectedRoute={({viewSet}) => <> <GroupRouter
<GroupListBox viewSet={viewSet}/> unselectedRoute={({viewSet}) => <>
<GroupCreateBox viewSet={viewSet}/> <GroupListBox viewSet={viewSet}/>
</>} <GroupCreateBox viewSet={viewSet}/>
selectedRoute={({selection}) => <> </>}
<Chapter> selectedRoute={({selection}) => <>
<GroupDescriptionBox resource={selection}/> <Chapter>
<GroupMembersBox resource={selection}/> <GroupDescriptionBox resource={selection}/>
</Chapter> <GroupMembersBox resource={selection}/>
<ProjectRouter </Chapter>
groupPk={selection.value.slug} <ProjectRouter
unselectedRoute={({viewSet}) => <> groupPk={selection.value.slug}
<ProjectListBox viewSet={viewSet}/> unselectedRoute={({viewSet}) => <>
<GroupCreateBox resource={selection}/> <ProjectListBox viewSet={viewSet}/>
</>} <GroupCreateBox resource={selection}/>
selectedRoute={({selection}) => <> </>}
<NotebookRouter selectedRoute={({selection}) => <>
projectPk={selection.value.slug} <NotebookRouter
unselectedRoute={({viewSet}) => <NotebookListBox viewSet={viewSet}/>} projectPk={selection.value.slug}
selectedRoute={DebugBox} unselectedRoute={({viewSet}) => <NotebookListBox viewSet={viewSet}/>}
/> selectedRoute={DebugBox}
</>} />
/> </>}
</>} />
/> </>}
</CacheProvider> />
</>} </>}
/> />
</AuthorizationProvider> </CacheProvider>
</>} </AuthorizationProvider>
/> </>}
</InstanceProvider> />
</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 * as React from "react"
import {useAuthorizationContext} from "../../contexts/authorization" import {useAuthorizationContext} from "../../contexts/authorization"
import {useCacheContext} from "../../contexts/cache" import {useCacheContext} from "../../contexts/cache"
import {useInstanceContext} from "../../contexts/instance"
import {ManagedResource, ManagedViewSet} from "../../hooks/useManagedViewSet" import {ManagedResource, ManagedViewSet} from "../../hooks/useManagedViewSet"
import {SophonResearchGroup} from "../../types/SophonTypes" import {SophonResearchGroup} from "../../types/SophonTypes"
@ -14,7 +13,6 @@ export interface GroupCreateBoxProps {
export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.Element | null { export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.Element | null {
const instance = useInstanceContext()
const authorization = useAuthorizationContext() const authorization = useAuthorizationContext()
const cache = useCacheContext() const cache = useCacheContext()
@ -33,7 +31,7 @@ export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.El
}).reduce((a, b) => { }).reduce((a, b) => {
return {...a, ...b} return {...a, ...b}
}), }),
[instance, authorization], [authorization, cache],
) )
const members = 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 && authorization.state.user && trueMembers?.includes(authorization.state.user.id)
), ),
[authorization, resource], [authorization, resource, trueMembers],
) )
const canAdministrate = 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 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 ( return (
<Box> <Box>
<Heading level={3}> <Heading level={3}>
Members of <Idiomatic>{resource.value.name}</Idiomatic> Members of <Idiomatic>{resource.value.name}</Idiomatic>
</Heading> </Heading>
<ListUnordered> <ListUnordered>
{trueMembers.map((id, index) => ( {users}
<ListUnordered.Item bluelibClassNames={index === 0 ? "color-blue" : ""} key={id}>
{cache.getUserById(id)!.value.username}
</ListUnordered.Item>
))}
</ListUnordered> </ListUnordered>
</Box> </Box>
) )

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

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