Skip to content

Commit

Permalink
fix: mf-6371 infinite loading in DAO tab (#11828)
Browse files Browse the repository at this point in the history
  • Loading branch information
swkatmask authored Oct 8, 2024
1 parent 58e62ee commit 0e1724b
Show file tree
Hide file tree
Showing 6 changed files with 51 additions and 63 deletions.
15 changes: 7 additions & 8 deletions packages/plugins/Snapshot/src/SiteAdaptor/ProfileSpaceHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { useSnapshotTrans } from '../locales/index.js'
interface ProfileSpaceHeaderProps {
spaceList: Array<DAOResult<ChainId.Mainnet>>
currentSpace: DAOResult<ChainId.Mainnet>
setSpaceIndex: (x: number) => void
setSpaceId(id: string): void
theme: Theme
}

Expand Down Expand Up @@ -63,14 +63,13 @@ const useStyles = makeStyles()((theme) => ({
},
}))

export function ProfileSpaceHeader(props: ProfileSpaceHeaderProps) {
const { spaceList, currentSpace, setSpaceIndex, theme } = props
export function ProfileSpaceHeader({ spaceList, currentSpace, setSpaceId, theme }: ProfileSpaceHeaderProps) {
const t = useSnapshotTrans()
const { classes } = useStyles()
const [spaceMenuOpen, setSpaceMenuOpen] = useState(false)
const spaceRef = useRef<HTMLDivElement>(null)
const { account } = useChainContext()
const { value: followedSpaceList } = useCurrentAccountFollowSpaceList()
const { data: followedSpaceList } = useCurrentAccountFollowSpaceList()

return (
<Box className={classes.root}>
Expand All @@ -96,13 +95,13 @@ export function ProfileSpaceHeader(props: ProfileSpaceHeaderProps) {
<SpaceMenu
options={spaceList}
currentOption={currentSpace}
onSelect={(i) => {
setSpaceIndex(i)
onSelect={(option) => {
setSpaceId(option.spaceId)
setSpaceMenuOpen(false)
}}
containerRef={spaceRef}
spaceMenuOpen={spaceMenuOpen}
setSpaceMenuOpen={setSpaceMenuOpen}
open={spaceMenuOpen}
onClose={() => setSpaceMenuOpen(false)}
/>
</ThemeProvider>
</>
Expand Down
20 changes: 10 additions & 10 deletions packages/plugins/Snapshot/src/SiteAdaptor/ProfileView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type { DAOResult } from '@masknet/web3-shared-base'
import type { ChainId } from '@masknet/web3-shared-evm'
import { TabContext } from '@mui/lab'
import { Icons } from '@masknet/icons'
import { PluginID } from '@masknet/shared-base'
import { EMPTY_LIST, PluginID } from '@masknet/shared-base'
import { useIsMinimalMode } from '@masknet/plugin-infra/content-script'
import { PluginDescriptor } from './PluginDescriptor.js'
import { ProfileSpaceHeader } from './ProfileSpaceHeader.js'
Expand Down Expand Up @@ -47,7 +47,7 @@ interface ProfileViewProps extends withClasses<'content' | 'footer'> {

export function ProfileView(props: ProfileViewProps) {
const { ProfileCardProps, spaceList } = props
const { classes } = useStyles(undefined, { props })
const { classes } = useStyles()
const t = useSnapshotTrans()
const theme = useTheme()
const [currentTab, , , setTab] = useTabs<ContentTabs>(
Expand All @@ -57,26 +57,26 @@ export function ProfileView(props: ProfileViewProps) {
ContentTabs.Pending,
ContentTabs.Closed,
)
const [spaceIndex, setSpaceIndex] = useState(0)

const isMinimalMode = useIsMinimalMode(PluginID.Snapshot)

const currentSpace = spaceList[spaceIndex]
const [spaceId = spaceList[0]?.spaceId, setSpaceId] = useState<string>()
const currentSpace = spaceList.find((x) => x.spaceId === spaceId) || spaceList[0]

const { value: space, loading: loadingSpaceMemberList } = useSpace(currentSpace.spaceId)
const { data: space, isPending: loadingSpaceMemberList } = useSpace(spaceId)

const { value: proposalList, loading: loadingProposalList } = useProposalList(
const { data: proposalList, isPending: loadingProposalList } = useProposalList(
currentSpace.spaceId,
currentSpace.strategyName ?? space?.symbol,
)

const [isPending, startTransition] = useTransition()
const filteredProposalList = useMemo(() => {
if (!proposalList?.length || !space?.members) return
if (!proposalList?.length || !space?.members) return EMPTY_LIST
if (currentTab === ContentTabs.All) return proposalList
if (currentTab === ContentTabs.Core) return proposalList.filter((x) => space.members.includes(x.author))
return proposalList.filter((x) => x.state.toLowerCase() === currentTab.toLowerCase())
}, [currentTab, JSON.stringify(proposalList), JSON.stringify(space?.members)])
}, [currentTab, proposalList, space?.members])

if (isMinimalMode) {
return (
Expand Down Expand Up @@ -104,7 +104,7 @@ export function ProfileView(props: ProfileViewProps) {
...currentSpace,
followersCount: space?.followersCount ?? currentSpace.followersCount,
}}
setSpaceIndex={setSpaceIndex}
setSpaceId={setSpaceId}
/>
</ThemeProvider>
<TabContext value={currentTab}>
Expand All @@ -121,7 +121,7 @@ export function ProfileView(props: ProfileViewProps) {
</Stack>
</TabContext>
</Stack>
{loadingProposalList || loadingSpaceMemberList || !filteredProposalList || isPending ?
{loadingProposalList || loadingSpaceMemberList || isPending ?
<CardContent className={classes.skeletonContent}>
<Stack height="100%" alignItems="center" justifyContent="center">
<LoadingBase />
Expand Down
37 changes: 10 additions & 27 deletions packages/plugins/Snapshot/src/SiteAdaptor/SpaceMenu.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import type { RefObject } from 'react'
import { isEqual } from 'lodash-es'
import { Icons } from '@masknet/icons'
import { makeStyles, ShadowRootMenu } from '@masknet/theme'
import { Avatar, MenuItem, Stack, Typography, Divider } from '@mui/material'
import { Avatar, MenuItem, Stack, Typography, Divider, type MenuProps } from '@mui/material'
import type { DAOResult } from '@masknet/web3-shared-base'
import type { ChainId } from '@masknet/web3-shared-evm'
import { useSnapshotTrans } from '../locales/index.js'
Expand Down Expand Up @@ -71,55 +70,39 @@ const useStyles = makeStyles()((theme) => ({
},
}))

interface SpaceMenuProps {
interface SpaceMenuProps extends Omit<MenuProps, 'onSelect'> {
options: Array<DAOResult<ChainId.Mainnet>>
currentOption?: DAOResult<ChainId.Mainnet>
onSelect(index: number): void
onSelect(space: DAOResult<ChainId.Mainnet>): void
containerRef: RefObject<HTMLElement | null>
spaceMenuOpen: boolean
setSpaceMenuOpen: (a: boolean) => void
disablePortal?: boolean
disableScrollLock?: boolean
}

export function SpaceMenu({
options,
currentOption,
onSelect,
containerRef,
spaceMenuOpen,
setSpaceMenuOpen,
disablePortal,
disableScrollLock,
}: SpaceMenuProps) {
export function SpaceMenu({ options, currentOption, onSelect, containerRef, ...rest }: SpaceMenuProps) {
const { classes } = useStyles()
const t = useSnapshotTrans()
return (
<ShadowRootMenu
anchorEl={containerRef.current}
open={spaceMenuOpen}
disablePortal={disablePortal}
disableScrollLock={disableScrollLock}
PaperProps={{
className: classes.menu,
}}
onClose={() => setSpaceMenuOpen(false)}>
{...rest}>
<div key="rss3" className={classes.group}>
<Typography className={classes.groupName}>{t.plugin_snapshot_space()}</Typography>
<Divider className={classes.divider} />
{options.map((x, i) => {
const selected = isEqual(x, currentOption)
{options.map((option) => {
const selected = option.spaceId === currentOption?.spaceId
return (
<MenuItem className={classes.menuItem} key={i} onClick={() => onSelect(i)}>
<Avatar className={classes.coinIcon} src={x.avatar} alt={x.spaceId} />
<MenuItem className={classes.menuItem} key={option.spaceId} onClick={() => onSelect(option)}>
<Avatar className={classes.coinIcon} src={option.avatar} alt={option.spaceId} />
<Stack className={classes.itemText}>
<Typography
fontSize={14}
fontWeight={700}
flexGrow={1}
overflow="hidden"
textOverflow="ellipsis">
<span className={classes.name}>{x.spaceName}</span>
<span className={classes.name}>{option.spaceName}</span>
</Typography>
<div className={classes.itemCheckout}>
{selected ?
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import { useChainContext } from '@masknet/web3-hooks-base'
import { Snapshot } from '@masknet/web3-providers'
import { useAsyncRetry } from 'react-use'
import { useQuery } from '@tanstack/react-query'

export function useCurrentAccountFollowSpaceList() {
const { account } = useChainContext()
return useQuery({
queryKey: ['following-space-list', account],
async queryFn() {
if (!account) return []

return useAsyncRetry(async () => {
if (!account) return

return Snapshot.getFollowingSpaceIdList(account)
}, [account])
return Snapshot.getFollowingSpaceIdList(account)
},
})
}
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import { useAsyncRetry } from 'react-use'
import { EMPTY_LIST } from '@masknet/shared-base'
import { Snapshot } from '@masknet/web3-providers'
import type { SnapshotBaseAPI } from '@masknet/web3-providers/types'
import { useQuery } from '@tanstack/react-query'

export function useProposalList(spaceId: string, strategyName?: string) {
return useAsyncRetry<SnapshotBaseAPI.SnapshotProposal[]>(async () => {
if (!spaceId) return EMPTY_LIST
return Snapshot.getProposalListBySpace(spaceId, strategyName)
}, [spaceId, strategyName])
return useQuery({
queryKey: ['proposal-list', spaceId, strategyName],
queryFn: async () => {
if (!spaceId) return EMPTY_LIST
return Snapshot.getProposalListBySpace(spaceId, strategyName)
},
})
}
14 changes: 8 additions & 6 deletions packages/plugins/Snapshot/src/SiteAdaptor/hooks/useSpace.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { useAsyncRetry } from 'react-use'
import { Snapshot } from '@masknet/web3-providers'
import type { SnapshotBaseAPI } from '@masknet/web3-providers/types'
import { useQuery } from '@tanstack/react-query'

export function useSpace(spaceId: string) {
return useAsyncRetry<SnapshotBaseAPI.SnapshotSpace | undefined>(async () => {
if (!spaceId) return
return Snapshot.getSpace(spaceId)
}, [spaceId])
return useQuery({
queryKey: ['space', spaceId],
async queryFn() {
if (!spaceId) return null
return Snapshot.getSpace(spaceId)
},
})
}

0 comments on commit 0e1724b

Please sign in to comment.