Add home feed configuration

Make home feed customizable via configs teia-community#301

Author: caaatisgood

src/components/header/feed_toolbar/FeedToolbar.jsx

@@ -5,14 +5,13 @@ import { DropDown, DropdownButton } from '@atoms/dropdown'
 import { IconToggle } from '@atoms/toggles'
 import { SingleViewIcon, MasonryIcon, ChevronIcon } from '@icons'
 
-import { useState } from 'react'
 import { Button } from '@atoms/button'
 
 import { useLocalSettings } from '@context/localSettingsStore'
 import { useLocation, useNavigate } from 'react-router'
-import { useEffect } from 'react'
 import { Line } from '@atoms/line'
 import { shallow } from 'zustand/shallow'
+import { FEED_MAP, DEFAULT_START_FEED } from '@constants'
 
 // const MediaFilter = ({ label, tagline }) => {
 //   return (
@@ -24,54 +23,46 @@ import { shallow } from 'zustand/shallow'
 // }
 
 const locationMap = new Map([
-  ['/', 'Recent Sales'],
-  ['/feed/random', 'Random'],
-  ['/feed/newobjkts', 'New OBJKTs'],
-  ['/feed/friends', 'Friends'],
+  ['/feed/sales', FEED_MAP['Recent Sales']],
+  ['/feed/random', FEED_MAP['Random']],
+  ['/feed/newobjkts', FEED_MAP['New OBJKTs']],
+  ['/feed/friends', FEED_MAP['Friends']],
   // separator
   ['---fund_feeds', 'fund_feeds'],
-  ['/feed/quake-aid', 'Quake Aid'],
-  ['/feed/ukraine', '🇺🇦 Ukraine'],
-  ['/feed/pakistan', '🇵🇰 Pakistan'],
-  ['/feed/iran', '🇮🇷 Iran'],
-  ['/feed/tezospride', '🏳️‍🌈 Tezospride'],
+  ['/feed/quake-aid', FEED_MAP['Quake Aid']],
+  ['/feed/ukraine', FEED_MAP['🇺🇦 Ukraine']],
+  ['/feed/pakistan', FEED_MAP['🇵🇰 Pakistan']],
+  ['/feed/iran', FEED_MAP['🇮🇷 Iran']],
+  ['/feed/tezospride', FEED_MAP['🏳️‍🌈 Tezospride']],
   // separator
   ['---mime_feeds', 'mime_feeds'],
-  ['/feed/image', 'Image'],
-  ['/feed/video', 'Video'],
-  ['/feed/audio', 'Audio'],
-  ['/feed/glb', '3D'],
-  ['/feed/html-svg', 'HTML & SVG'],
-  ['/feed/gif', 'GIF'],
-  ['/feed/pdf', 'PDF'],
-  ['/feed/md', 'Markdown'],
+  ['/feed/image', FEED_MAP['Image']],
+  ['/feed/video', FEED_MAP['Video']],
+  ['/feed/audio', FEED_MAP['Audio']],
+  ['/feed/glb', FEED_MAP['3D']],
+  ['/feed/html-svg', FEED_MAP['HTML & SVG']],
+  ['/feed/gif', FEED_MAP['GIF']],
+  ['/feed/pdf', FEED_MAP['PDF']],
+  ['/feed/md', FEED_MAP['Markdown']],
 ])
 
 const locationNeedSync = ['/feed/friends']
-const locationPaths = [...locationMap.keys()]
 
 export const FeedToolbar = ({ feeds_menu = false }) => {
   // const [price, setPrice] = useState({ from: 0, to: 0 })
 
-  const [viewMode, setViewMode] = useLocalSettings(
-    (st) => [st.viewMode, st.setViewMode],
+  const [viewMode, setViewMode, startFeed] = useLocalSettings(
+    (st) => [st.viewMode, st.setViewMode, st.startFeed],
     shallow
   )
   const location = useLocation()
-  const [feedLabel, setFeedLabel] = useState('Recent Sales')
+  const feedLabel =
+    locationMap.get(location.pathname) ||
+    startFeed ||
+    FEED_MAP[DEFAULT_START_FEED]
 
   const navigate = useNavigate()
 
-  useEffect(() => {
-    for (const pth of locationPaths.slice(1)) {
-      if (location.pathname.includes(pth)) {
-        setFeedLabel(locationMap.get(pth))
-      }
-    }
-
-    // return locationMap[location]
-  }, [location])
-
   // TODO: finish the filtering logic
   // const filters = false
   return (

src/constants.ts

@@ -68,6 +68,27 @@ export const ALLOWED_FILETYPES_LABEL = Object.entries(MIMETYPE)
   .map((e) => (e[0] === 'ZIP' ? 'HTML (ZIP ARCHIVE)' : e[0]))
   .join(', ')
 
+export const FEED_MAP = {
+  'Recent Sales': 'Recent Sales',
+  'Random': 'Random',
+  'New OBJKTs': 'New OBJKTs',
+  'Friends': 'Friends',
+  'Quake Aid': 'Quake Aid',
+  '🇺🇦 Ukraine': '🇺🇦 Ukraine',
+  '🇵🇰 Pakistan': '🇵🇰 Pakistan',
+  '🇮🇷 Iran': '🇮🇷 Iran',
+  '🏳️‍🌈 Tezospride': '🏳️‍🌈 Tezospride',
+  'Image': 'Image',
+  'Video': 'Video',
+  'Audio': 'Audio',
+  '3D': '3D',
+  'HTML & SVG': 'HTML & SVG',
+  'GIF': 'GIF',
+  'PDF': 'PDF',
+  'Markdown': 'Markdown',
+} as const
+export const DEFAULT_START_FEED: keyof typeof FEED_MAP = 'Recent Sales'
+
 //- Mint stuff
 
 export const ALLOWED_COVER_MIMETYPES = [

src/context/localSettingsStore.ts

@@ -5,6 +5,7 @@ import {
   subscribeWithSelector,
 } from 'zustand/middleware'
 // import { useModalStore } from './modalStore'
+import { FEED_MAP, DEFAULT_START_FEED } from '@constants'
 
 type ViewMode = 'single' | 'masonry'
 
@@ -20,20 +21,24 @@ export const rpc_nodes = [
   'custom',
 ] as const
 
+type StartFeed = keyof typeof FEED_MAP
+
 export type RPC_NODES = typeof rpc_nodes[number]
 
 interface LocalSettingsState {
   applyTheme: (theme: Theme) => void
   has_seen_banner: boolean
   nsfwFriendly: boolean
   photosensitiveFriendly: boolean
+  startFeed: StartFeed
   rpcNode: RPC_NODES
   /** Use this to query the current rpc url since it will also resolve the custom one.*/
   getRpcNode: () => RPC_NODES | string
   customRpcNode: string
   setCustomRpcNode: (v: string) => void
   setNsfwFriendly: (v: boolean) => void
   setPhotosensitiveFriendly: (v: boolean) => void
+  setStartFeed: (v: StartFeed | undefined) => void
   setRpcNode: (rpcNode?: RPC_NODES) => Promise<void>
   setTheme: (theme: Theme, apply?: boolean) => void
   setTilted: (tilted: boolean) => void
@@ -55,6 +60,7 @@ const defaultValues = {
   viewMode: 'single' as ViewMode,
   nsfwFriendly: false,
   photosensitiveFriendly: false,
+  startFeed: DEFAULT_START_FEED,
   zen: false,
   theme: 'dark' as Theme,
   themeDark: 'dark' as Theme,
@@ -125,6 +131,7 @@ export const useLocalSettings = create<LocalSettingsState>()(
         setNsfwFriendly: (nsfwFriendly) => set({ nsfwFriendly }),
         setPhotosensitiveFriendly: (photosensitiveFriendly) =>
           set({ photosensitiveFriendly }),
+        setStartFeed: (startFeed) => set({ startFeed }),
       }),
       {
         name: 'settings',

src/index.jsx

@@ -77,7 +77,7 @@ const router = createBrowserRouter(
     <Route path="*" errorElement={<RootErrorBoundary />} element={<App />}>
       <Route path="/*" index element={<Home />} />
       <Route path="feed/*" element={<Home />}>
-        <Route index element={<RecentSalesFeed />} />
+        <Route path="sales" element={<RecentSalesFeed />} />
         <Route path="lists" element={<ListsFeed />} />
 
         <Route

src/pages/config/Settings.jsx

@@ -3,6 +3,7 @@ import { Page } from '@atoms/layout'
 import { Checkbox, Input } from '@atoms/input'
 import styles from '@style'
 import { rpc_nodes, useLocalSettings } from '@context/localSettingsStore'
+import { FEED_MAP } from '@constants'
 import { Select, ThemeSelection } from '@atoms/select'
 import { Line } from '@atoms/line'
 import { useEffect, useState } from 'react'
@@ -31,6 +32,8 @@ export const Settings = () => {
     setNsfwFriendly,
     photosensitiveFriendly,
     setPhotosensitiveFriendly,
+    startFeed,
+    setStartFeed,
     rpcNode,
     setRpcNode,
     customRpcNode,
@@ -44,6 +47,8 @@ export const Settings = () => {
     st.setNsfwFriendly,
     st.photosensitiveFriendly,
     st.setPhotosensitiveFriendly,
+    st.startFeed,
+    st.setStartFeed,
     st.rpcNode,
     st.setRpcNode,
     st.customRpcNode,
@@ -85,6 +90,17 @@ export const Settings = () => {
             onCheck={setPhotosensitiveFriendly}
             label={'Allow Photosensitive on feeds'}
           />
+          <Select
+            label={'Start Feed'}
+            value={{ value: startFeed, label: FEED_MAP[startFeed] }}
+            options={Object.entries(FEED_MAP).map(([key, value]) => ({
+              label: value,
+              value: key,
+            }))}
+            onChange={(e) => {
+              setStartFeed(e.value)
+            }}
+          />
 
           <Line />
           <ThemeSelection label={'Theme'} />

src/pages/home/index.jsx

@@ -8,15 +8,58 @@ import {
   useOutlet,
   useSearchParams,
 } from 'react-router-dom'
-
-import { RecentSalesFeed, SearchFeed } from './feeds'
+import { FEED_MAP } from '@constants'
+import { useLocalSettings } from '@context/localSettingsStore'
+import {
+  RecentSalesFeed,
+  SearchFeed,
+  IranFeed,
+  PakistanFeed,
+  UkraineFeed,
+  AudioFeed,
+  GifFeed,
+  GlbFeed,
+  HtmlSvgFeed,
+  ImageFeed,
+  VideoFeed,
+  NewObjktsFeed,
+  RandomFeed,
+  TagFeed,
+  PdfFeed,
+  MarkdownFeed,
+  QuakeFeed,
+  FriendsFeed,
+} from './feeds'
 import SubjktsSearchResults from './subjkts-search-results'
 
+const DefaultFeedComponent = RecentSalesFeed
+export const feedComponentMap = {
+  [FEED_MAP['Recent Sales']]: RecentSalesFeed,
+  [FEED_MAP['🏳️‍🌈 Tezospride']]: TagFeed,
+  [FEED_MAP['🇮🇷 Iran']]: IranFeed,
+  [FEED_MAP['Quake Aid']]: QuakeFeed,
+  [FEED_MAP['🇵🇰 Pakistan']]: PakistanFeed,
+  [FEED_MAP['🇺🇦 Ukraine']]: UkraineFeed,
+  [FEED_MAP['Random']]: RandomFeed,
+  [FEED_MAP['New OBJKTs']]: NewObjktsFeed,
+  [FEED_MAP['3D']]: GlbFeed,
+  [FEED_MAP['Video']]: VideoFeed,
+  [FEED_MAP['Image']]: ImageFeed,
+  [FEED_MAP['Audio']]: AudioFeed,
+  [FEED_MAP['HTML & SVG']]: HtmlSvgFeed,
+  [FEED_MAP['PDF']]: PdfFeed,
+  [FEED_MAP['Markdown']]: MarkdownFeed,
+  [FEED_MAP['GIF']]: GifFeed,
+  [FEED_MAP['Friends']]: FriendsFeed,
+}
+
 export function Home({ isSearch = false }) {
   const outlet = useOutlet()
   const [searchParams] = useSearchParams()
   const [searchTerm, setSearchTerm] = useState(searchParams.get('term') || '')
   const navigate = useNavigate()
+  const [startFeed] = useLocalSettings((st) => [st.startFeed])
+  const FeedComponent = feedComponentMap[startFeed] || DefaultFeedComponent
 
   return (
     <Page feed={!isSearch} title="Home">
@@ -53,7 +96,7 @@ export function Home({ isSearch = false }) {
           <h1>Enter a search term</h1>
         )
       ) : (
-        outlet || <RecentSalesFeed />
+        outlet || <FeedComponent />
       )}
     </Page>
   )