Add followed space tab and fix all tab logic

dappforce · Mar 5, 2024 · a20f90e · a20f90e
1 parent fc2ba61
commit a20f90e
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 16 deletions.
diff --git a/src/components/spaces/AccountSpaces.tsx b/src/components/spaces/AccountSpaces.tsx
@@ -2,11 +2,13 @@ import { Button, Divider, Modal, Tabs } from 'antd'
 import partition from 'lodash.partition'
 import { useRouter } from 'next/router'
 import React, { useEffect, useMemo, useState } from 'react'
+import { shallowEqual } from 'react-redux'
 import { useSubsocialApi } from 'src/components/substrate/SubstrateContext'
 import { DEFAULT_FIRST_PAGE, DEFAULT_PAGE_SIZE } from 'src/config/ListData.config'
 import messages from 'src/messages'
 import { useFetchSpaces, useSelectSpaces } from 'src/rtk/app/hooks'
 import { useAppDispatch, useAppSelector } from 'src/rtk/app/store'
+import { selectSpaceIdsByFollower } from 'src/rtk/features/spaceIds/followedSpaceIdsSlice'
 import {
   useFetchSpaceIdsByFollower,
   useFetchSpaceIdsByOwner,
@@ -91,16 +93,22 @@ export const OwnedSpacesList = ({ ...props }: Omit<AccountSpacesProps, 'withTitl
   } = useRouter()
 
   const [unlistedSpaceIds, setUnistedSpaceIds] = useState<SpaceId[]>([])
-  const { spaceIds, error, loading } = useFetchSpaceIdsByOwner(address)
-  const spaces = useSelectSpaces(spaceIds)
+  const { spaceIds: ownedSpaceIds, error, loading } = useFetchSpaceIdsByOwner(address)
+  const spaces = useSelectSpaces(ownedSpaceIds)
   const [newUnlistedSpaces] = partition(spaces, isUnlisted)
   const connected = useIsSubstrateConnected()
   const isMy = useIsMyAddress(address)
 
+  const followedSpaceIds =
+    useAppSelector(
+      state => (address ? selectSpaceIdsByFollower(state, address) : []),
+      shallowEqual,
+    ) || []
+
   const spaceIdsImEditorOf =
     useAppSelector(state => (address ? selectSpaceIdsWithRolesByAccount(state, address) : [])) || []
 
-  const totalCount = spaceIds.length
+  const totalCount = ownedSpaceIds.length
   const unlistedCount = unlistedSpaceIds.length
 
   useEffect(() => {
@@ -117,12 +125,11 @@ export const OwnedSpacesList = ({ ...props }: Omit<AccountSpacesProps, 'withTitl
     setUnistedSpaceIds(unlistedSpaceIds.concat(newIds))
   }, [newUnlistedSpaces.length, page, size])
 
-  const PublicSpaces = useMemo(
-    () => (
-      <SpacesListBySpaceIds spaceIds={spaceIds} totalCount={totalCount} isMy={isMy} {...props} />
-    ),
-    [spaceIds.length],
-  )
+  const allIds = useMemo(() => {
+    const ids = ownedSpaceIds.concat(followedSpaceIds, spaceIdsImEditorOf, unlistedSpaceIds)
+    console.log(ownedSpaceIds, followedSpaceIds, spaceIdsImEditorOf, unlistedSpaceIds, ids)
+    return Array.from(new Set(ids))
+  }, [ownedSpaceIds, followedSpaceIds, spaceIdsImEditorOf, unlistedSpaceIds])
 
   if (!connected) return <Loading label={messages.connectingToNetwork} />
 
@@ -134,11 +141,23 @@ export const OwnedSpacesList = ({ ...props }: Omit<AccountSpacesProps, 'withTitl
 
   return (
     <Tabs style={{ marginTop: '-8px' }}>
-      <TabPane tab={`All (${totalCount})`} key='all'>
-        {PublicSpaces}
+      <TabPane tab={`All (${allIds.length})`} key='all'>
+        <SpacesListBySpaceIds spaceIds={allIds} totalCount={allIds.length} isMy={isMy} {...props} />
       </TabPane>
       <TabPane tab={`Created (${totalCount})`} key='created'>
-        {PublicSpaces}
+        <SpacesListBySpaceIds
+          spaceIds={ownedSpaceIds}
+          totalCount={totalCount}
+          isMy={isMy}
+          {...props}
+        />
+      </TabPane>
+      <TabPane tab={`Followed (${followedSpaceIds.length})`} key='followed'>
+        <SpacesListBySpaceIds
+          spaceIds={followedSpaceIds}
+          totalCount={followedSpaceIds.length}
+          {...props}
+        />
       </TabPane>
       {spaceIdsImEditorOf.length > 0 && (
         <TabPane tab={`My Roles (${spaceIdsImEditorOf.length})`} key='editor'>

diff --git a/src/pages/accounts/[address]/spaces.tsx b/src/pages/accounts/[address]/spaces.tsx
@@ -6,6 +6,7 @@ import { toShortAddress } from 'src/components/utils'
 import { return404 } from 'src/components/utils/next'
 import Section from 'src/components/utils/Section'
 import { getInitialPropsWithRedux } from 'src/rtk/app'
+import { fetchEntityOfSpaceIdsByFollower } from 'src/rtk/features/spaceIds/followedSpaceIdsSlice'
 import { fetchSpaceIdsOwnedByAccount } from 'src/rtk/features/spaceIds/ownSpaceIdsSlice'
 import { fetchSpaceIdsWithRolesByAccount } from 'src/rtk/features/spaceIds/spaceIdsWithRolesByAccountSlice'
 
@@ -36,15 +37,15 @@ const OwnedSpacesPage = ({ address }: { address: string }) => {
     </PageContent>
   )
 }
+
 getInitialPropsWithRedux(OwnedSpacesPage, async ({ subsocial, dispatch, context }) => {
-  console.log(context)
   const address = context.query?.address as string | undefined
-  console.log(address)
   if (!address) return return404(context)
 
   await Promise.all([
-    dispatch(fetchSpaceIdsWithRolesByAccount({ id: address, reload: true, api: subsocial })),
-    dispatch(fetchSpaceIdsOwnedByAccount({ id: address, reload: true, api: subsocial })),
+    dispatch(fetchSpaceIdsWithRolesByAccount({ id: address, api: subsocial })),
+    dispatch(fetchSpaceIdsOwnedByAccount({ id: address, api: subsocial })),
+    dispatch(fetchEntityOfSpaceIdsByFollower({ id: address, api: subsocial })),
   ])
 
   return { address }