feat: add filter show all posts

src/components/main/HomePage.tsx

@@ -17,6 +17,7 @@ import { getAmountRange } from 'src/utils/analytics'
 import { useIsSignedIn, useMyAddress } from '../auth/MyAccountsContext'
 import { CreatorDashboardHomeVariant } from '../creators/CreatorDashboardSidebar'
 import MobileActiveStakingSection from '../creators/MobileActiveStakingSection'
+import { ShowActiveStakingPostsProvider } from '../posts/ShowActiveStakingPostsContext'
 import WriteSomething from '../posts/WriteSomething'
 import { useIsMobileWidthOrDevice } from '../responsive'
 import { CreatorsSpaces } from '../spaces/LatestSpacesPage'
@@ -203,15 +204,18 @@ const TabsHomePage = ({
       <span>
         {!isMobile && <AffixTabs tabKey={tab} setKey={onChangeKey} visible={hidden} {...props} />}
       </span>
-      <Section className='m-0'>
-        <HomeTabs tabKey={tab} className='DfHomeTab' setKey={onChangeKey} {...props} />
-        <TabsContent />
-        <Tooltip title={'Back to top'} placement={'right'}>
-          <BackTop className={style.DfBackToTop}>
-            <Button size={'large'} icon={ToTopIcon} />
-          </BackTop>
-        </Tooltip>
-      </Section>
+
+      <ShowActiveStakingPostsProvider tab={tab} filter={type}>
+        <Section className='m-0'>
+          <HomeTabs tabKey={tab} className='DfHomeTab' setKey={onChangeKey} {...props} />
+          <TabsContent />
+          <Tooltip title={'Back to top'} placement={'right'}>
+            <BackTop className={style.DfBackToTop}>
+              <Button size={'large'} icon={ToTopIcon} />
+            </BackTop>
+          </Tooltip>
+        </Section>
+      </ShowActiveStakingPostsProvider>
     </>
   )
 }

src/components/main/HomePageFilters.tsx

@@ -1,11 +1,12 @@
-import { Col, Radio, RadioChangeEvent, Row, Select } from 'antd'
+import { Checkbox, Col, Radio, RadioChangeEvent, Row, Select } from 'antd'
 import clsx from 'clsx'
 import { useRouter } from 'next/router'
 import { MdVerified } from 'react-icons/md'
 import { ReactNode } from 'react-markdown'
 import config from 'src/config'
 import { useIsMyAddressWhitelisted } from 'src/config/constants'
 import LatestPostsPage from '../posts/LatestPostsPage'
+import { useShowActiveStakingPostsContext } from '../posts/ShowActiveStakingPostsContext'
 import { useResponsiveSize } from '../responsive/ResponsiveContext'
 import LatestSpacesPage, { CreatorsSpaces } from '../spaces/LatestSpacesPage'
 import style from './HomePage.module.sass'
@@ -112,6 +113,8 @@ export const Filters = (props: Props) => {
   const { isMobile } = useResponsiveSize()
   const isWhitelisted = useIsMyAddressWhitelisted()
 
+  const { setValue, value } = useShowActiveStakingPostsContext()
+
   const router = useRouter()
 
   const { type, date } = router.query
@@ -127,6 +130,9 @@ export const Filters = (props: Props) => {
   const needDateFilter =
     !!type && type !== 'latest' && type !== 'suggested' && type !== 'creators' && type !== 'hot'
 
+  const showActivePostsCheckbox = type === 'latest' && tabKey === 'posts'
+  const hasRightElement = needDateFilter || showActivePostsCheckbox
+
   if (!needDateFilter && !filterByKey[tabKey]?.length) return null
 
   let filters = filterByKey[tabKey]
@@ -138,7 +144,7 @@ export const Filters = (props: Props) => {
     <div className={`DfFilters ${!isAffix ? 'mt-3' : ''}`}>
       <Row className={style.DfGridParams}>
         {!isMobile ? (
-          <Col className={needDateFilter ? style.DfCol : 'ant-col-24'}>
+          <Col className={hasRightElement ? style.DfCol : 'ant-col-24'}>
             <Radio.Group
               options={filters.map(({ label, value, icon }) => ({
                 label: (
@@ -155,7 +161,7 @@ export const Filters = (props: Props) => {
             />
           </Col>
         ) : (
-          <Col className={needDateFilter ? style.DfCol : 'ant-col-24'}>
+          <Col className={clsx(needDateFilter ? style.DfCol : 'ant-col-24')}>
             <Select
               value={type}
               onChange={onFilterChange}
@@ -170,6 +176,15 @@ export const Filters = (props: Props) => {
             </Select>
           </Col>
         )}
+        {showActivePostsCheckbox && (
+          <Col className={clsx(isMobile && 'mt-2')}>
+            <Checkbox checked={value} onChange={e => setValue(e.target.checked)}>
+              <span className='ColorMuted' style={{ userSelect: 'none' }}>
+                Active Posts only
+              </span>
+            </Checkbox>
+          </Col>
+        )}
         {needDateFilter && (
           <Col className={style.DfDateCol}>
             <Select

src/components/posts/PublicPostPreview.tsx

@@ -1,16 +1,20 @@
 import React from 'react'
+import { useCanPostSuperLiked } from 'src/rtk/features/activeStaking/hooks'
 import { PostId } from 'src/types'
 import { useSelectPost } from '../../rtk/features/posts/postsHooks'
 import PostPreview from '../posts/view-post/PostPreview'
+import { useShowActiveStakingPostsContext } from './ShowActiveStakingPostsContext'
 
 type Props = {
   postId: PostId
 }
 
 export const PublicPostPreviewById = React.memo(({ postId }: Props) => {
   const post = useSelectPost(postId)
+  const { value: showActiveStakingOnly } = useShowActiveStakingPostsContext()
+  const { validByCreatorMinStake } = useCanPostSuperLiked(postId)
 
-  if (!post) return null
+  if (!post || (showActiveStakingOnly && !validByCreatorMinStake)) return null
 
   return <PostPreview postDetails={post} withActions />
 })

src/components/posts/ShowActiveStakingPostsContext.tsx

@@ -0,0 +1,48 @@
+import { createContext, ReactNode, useContext, useMemo } from 'react'
+import useLocalStorage from 'use-local-storage'
+import { TabKeys } from '../main/types'
+
+const ShowActiveStakingPostsContext = createContext<{
+  value: boolean
+  setValue: (value: boolean) => void
+}>({
+  value: false,
+  setValue: () => undefined,
+})
+
+export function ShowActiveStakingPostsProvider({
+  children,
+  filter,
+  tab,
+}: {
+  children: ReactNode
+  tab: TabKeys
+  filter: string | undefined
+}) {
+  let [showActiveStakingPosts, setShowActiveStakingPosts] = useLocalStorage(
+    'show-active-staking-posts',
+    false,
+  )
+
+  if (tab !== 'posts' || filter !== 'latest') {
+    showActiveStakingPosts = false
+  }
+
+  const memoized = useMemo(
+    () => ({
+      value: showActiveStakingPosts,
+      setValue: setShowActiveStakingPosts,
+    }),
+    [showActiveStakingPosts],
+  )
+
+  return (
+    <ShowActiveStakingPostsContext.Provider value={memoized}>
+      {children}
+    </ShowActiveStakingPostsContext.Provider>
+  )
+}
+
+export function useShowActiveStakingPostsContext() {
+  return useContext(ShowActiveStakingPostsContext)
+}