feat: adjust the tabs and filters for creators space

dappforce · Jan 9, 2024 · b88a66a · b88a66a
1 parent 5995309
commit b88a66a
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 30 deletions.
diff --git a/src/components/main/HomePage.tsx b/src/components/main/HomePage.tsx
@@ -67,7 +67,6 @@ const HomeTabs = (props: TabsProps) => {
       <Tabs activeKey={tabKey} onChange={setKey} className={`${className} ${style.DfTabs}`}>
         <TabPane tab='My feed' key='feed' />
         <TabPane tab='Posts' key='posts' />
-        <TabPane tab='Featured Creators' key='creators' />
         <TabPane tab={enableGraphQl ? 'Spaces' : 'Polkadot Spaces'} key='spaces' />
       </Tabs>
       <Filters tabKey={tabKey} isAffix={isAffix} />
@@ -136,7 +135,7 @@ const TabsHomePage = ({
 
   useEffect(() => {
     let variant: CreatorDashboardHomeVariant = 'posts'
-    if (tab === 'spaces' || tab === 'creators') variant = 'spaces'
+    if (tab === 'spaces') variant = 'spaces'
     setCurrentTabVariant(variant)
   }, [setCurrentTabVariant, tab])
 

diff --git a/src/components/main/HomePageFilters.tsx b/src/components/main/HomePageFilters.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import config from 'src/config'
 import LatestPostsPage from '../posts/LatestPostsPage'
 import { useResponsiveSize } from '../responsive/ResponsiveContext'
-import LatestSpacesPage from '../spaces/LatestSpacesPage'
+import LatestSpacesPage, { CreatorsSpaces } from '../spaces/LatestSpacesPage'
 import style from './HomePage.module.sass'
 import {
   DateFilterType,
@@ -43,17 +43,18 @@ export const commentFilterOpt = enableGraphQl
     ]
   : []
 
-const offchainSpaceFilterOpt = enableGraphQl
-  ? [
-      ...commonFilterOption,
-      { label: 'Sort by followers ', value: 'sortByFollowers' },
-      { label: 'Sort by posts', value: 'sortByPosts' },
-    ]
-  : []
+// const offchainSpaceFilterOpt = enableGraphQl
+//   ? [
+//       ...commonFilterOption,
+//       { label: 'Sort by followers ', value: 'sortByFollowers' },
+//       { label: 'Sort by posts', value: 'sortByPosts' },
+//     ]
+//   : []
 
 export const spaceFilterOpt = [
   { label: 'Active Staking', value: 'suggested' },
-  ...offchainSpaceFilterOpt,
+  { label: 'Featured Creators', value: 'creators' },
+  // ...offchainSpaceFilterOpt,
 ]
 
 export const dateFilterOpt = [
@@ -81,9 +82,10 @@ export const PostFilterView = ({ filter: { type, date }, ...props }: PostFilterP
   <LatestPostsPage filter={type} dateFilter={date} {...props} />
 )
 
-export const SpaceFilterView = ({ filter: { type, date }, ...props }: SpaceFilterProps) => (
-  <LatestSpacesPage filter={type} dateFilter={date} {...props} />
-)
+export const SpaceFilterView = ({ filter: { type, date }, ...props }: SpaceFilterProps) => {
+  if (type === 'creators') return <CreatorsSpaces />
+  return <LatestSpacesPage filter={type} dateFilter={date} {...props} />
+}
 
 const onChangeWrap = (onChange: OnChangeFn) => (e: RadioChangeEvent) => onChange(e.target.value)
 
@@ -103,7 +105,7 @@ export const Filters = (props: Props) => {
   const onDateChange: any = (value: DateFilterType = 'week') =>
     setFiltersInUrl(router, tabKey, { type: type as EntityFilter, date: value })
 
-  const needDateFilter = !!type && type !== 'latest' && type !== 'suggested'
+  const needDateFilter = !!type && type !== 'latest' && type !== 'suggested' && type !== 'creators'
 
   if (!needDateFilter && !filterByKey[tabKey]?.length) return null
 

diff --git a/src/components/main/types.ts b/src/components/main/types.ts
@@ -7,7 +7,8 @@ import { PostKind } from '../../types/graphql-global-types'
 export type PostFilterType = 'latest' | 'suggested'
 // | 'liked' | 'commented' // removed most liked and commented
 
-export type SpaceFilterType = 'latest' | 'suggested' | 'sortByPosts' | 'sortByFollowers'
+export type SpaceFilterType = 'suggested' | 'creators'
+// 'latest' |  'sortByPosts' | 'sortByFollowers'
 
 export type DateFilterType = 'day' | 'week' | 'month' | 'allTime'
 
@@ -30,7 +31,7 @@ export type SpaceDateFilterProps = SpaceFilterProps & {
   filter: SpaceFilterType
 }
 
-export type TabsWithoutFeed = 'posts' | 'spaces' | 'comments' | 'creators'
+export type TabsWithoutFeed = 'posts' | 'spaces' | 'comments'
 
 export type TabKeys = TabsWithoutFeed | 'feed'
 

diff --git a/src/components/main/utils.ts b/src/components/main/utils.ts
@@ -53,24 +53,30 @@ const getPostsByFilter: GetEntityFilter<PostFilterType> = {
 }
 
 const getSpacesByFilter: GetEntityFilter<Exclude<SpaceFilterType, 'suggested'>> = {
-  latest: {
+  creators: {
     day: q.GET_LATEST_SPACE_IDS,
     week: q.GET_LATEST_SPACE_IDS,
     month: q.GET_LATEST_SPACE_IDS,
     allTime: q.GET_LATEST_SPACE_IDS,
   },
-  sortByFollowers: {
-    day: q.GET_MOST_FOLLOWED_SPACE_IDS_IN_DATE_RANGE,
-    week: q.GET_MOST_FOLLOWED_SPACE_IDS_IN_DATE_RANGE,
-    month: q.GET_MOST_FOLLOWED_SPACE_IDS_IN_DATE_RANGE,
-    allTime: q.GET_MOST_FOLLOWED_SPACE_IDS,
-  },
-  sortByPosts: {
-    day: q.GET_SPACE_IDS_SORTED_BY_POSTS_COUNT_IN_DATE_RANGE,
-    week: q.GET_SPACE_IDS_SORTED_BY_POSTS_COUNT_IN_DATE_RANGE,
-    month: q.GET_SPACE_IDS_SORTED_BY_POSTS_COUNT_IN_DATE_RANGE,
-    allTime: q.GET_SPACE_IDS_SORTED_BY_POSTS_COUNT,
-  },
+  // latest: {
+  //   day: q.GET_LATEST_SPACE_IDS,
+  //   week: q.GET_LATEST_SPACE_IDS,
+  //   month: q.GET_LATEST_SPACE_IDS,
+  //   allTime: q.GET_LATEST_SPACE_IDS,
+  // },
+  // sortByFollowers: {
+  //   day: q.GET_MOST_FOLLOWED_SPACE_IDS_IN_DATE_RANGE,
+  //   week: q.GET_MOST_FOLLOWED_SPACE_IDS_IN_DATE_RANGE,
+  //   month: q.GET_MOST_FOLLOWED_SPACE_IDS_IN_DATE_RANGE,
+  //   allTime: q.GET_MOST_FOLLOWED_SPACE_IDS,
+  // },
+  // sortByPosts: {
+  //   day: q.GET_SPACE_IDS_SORTED_BY_POSTS_COUNT_IN_DATE_RANGE,
+  //   week: q.GET_SPACE_IDS_SORTED_BY_POSTS_COUNT_IN_DATE_RANGE,
+  //   month: q.GET_SPACE_IDS_SORTED_BY_POSTS_COUNT_IN_DATE_RANGE,
+  //   allTime: q.GET_SPACE_IDS_SORTED_BY_POSTS_COUNT,
+  // },
 }
 
 export const tabs = ['feed', 'posts', 'comments', 'spaces', 'creators']