chore(refactor): use custom hooks

src/hooks/useMuteLists.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react'
+import { MuteLists } from 'types'
+import { useAppSelector } from './redux'
+import { MetadataController } from 'controllers'
+
+export const useMuteLists = () => {
+  const [muteLists, setMuteLists] = useState<{
+    admin: MuteLists
+    user: MuteLists
+  }>({
+    admin: {
+      authors: [],
+      replaceableEvents: []
+    },
+    user: {
+      authors: [],
+      replaceableEvents: []
+    }
+  })
+
+  const userState = useAppSelector((state) => state.user)
+
+  useEffect(() => {
+    const getMuteLists = async () => {
+      const pubkey = userState.user?.pubkey as string | undefined
+
+      const metadataController = await MetadataController.getInstance()
+      metadataController.getMuteLists(pubkey).then((lists) => {
+        setMuteLists(lists)
+      })
+    }
+
+    getMuteLists()
+  }, [userState])
+
+  return muteLists
+}

src/pages/mods.tsx

@@ -1,3 +1,4 @@
+import { Pagination } from 'components/Pagination'
 import { kinds, nip19 } from 'nostr-tools'
 import React, {
   Dispatch,
@@ -9,17 +10,16 @@ import React, {
 } from 'react'
 import { LoadingSpinner } from '../components/LoadingSpinner'
 import { ModCard } from '../components/ModCard'
+import { MOD_FILTER_LIMIT } from '../constants'
 import { MetadataController } from '../controllers'
-import { useAppSelector, useDidMount } from '../hooks'
+import { useAppSelector, useDidMount, useMuteLists } from '../hooks'
 import { getModPageRoute } from '../routes'
 import '../styles/filters.css'
 import '../styles/pagination.css'
 import '../styles/search.css'
 import '../styles/styles.css'
-import { ModDetails, MuteLists } from '../types'
+import { ModDetails } from '../types'
 import { fetchMods } from '../utils'
-import { MOD_FILTER_LIMIT } from '../constants'
-import { Pagination } from 'components/Pagination'
 
 enum SortBy {
   Latest = 'Latest',
@@ -56,19 +56,8 @@ export const ModsPage = () => {
     source: window.location.host,
     moderated: ModeratedFilter.Moderated
   })
-  const [muteLists, setMuteLists] = useState<{
-    admin: MuteLists
-    user: MuteLists
-  }>({
-    admin: {
-      authors: [],
-      replaceableEvents: []
-    },
-    user: {
-      authors: [],
-      replaceableEvents: []
-    }
-  })
+  const muteLists = useMuteLists()
+
   const [nsfwList, setNSFWList] = useState<string[]>([])
 
   const [page, setPage] = useState(1)
@@ -76,12 +65,7 @@ export const ModsPage = () => {
   const userState = useAppSelector((state) => state.user)
 
   useDidMount(async () => {
-    const pubkey = userState.user?.pubkey as string | undefined
-
     const metadataController = await MetadataController.getInstance()
-    metadataController.getMuteLists(pubkey).then((lists) => {
-      setMuteLists(lists)
-    })
 
     metadataController.getNSFWList().then((list) => {
       setNSFWList(list)

src/pages/search.tsx

@@ -5,12 +5,15 @@ import { LoadingSpinner } from 'components/LoadingSpinner'
 import { ModCard } from 'components/ModCard'
 import { Pagination } from 'components/Pagination'
 import { Profile } from 'components/ProfileSection'
-import { T_TAG_VALUE } from 'constants.ts'
-import { MetadataController, RelayController } from 'controllers'
-import { useAppSelector, useDidMount } from 'hooks'
+import {
+  MAX_GAMES_PER_PAGE,
+  MAX_MODS_PER_PAGE,
+  T_TAG_VALUE
+} from 'constants.ts'
+import { RelayController } from 'controllers'
+import { useAppSelector, useGames, useMuteLists } from 'hooks'
 import { Filter, kinds, nip19 } from 'nostr-tools'
 import { Subscription } from 'nostr-tools/abstract-relay'
-import Papa from 'papaparse'
 import React, {
   Dispatch,
   SetStateAction,
@@ -50,6 +53,7 @@ interface FilterOptions {
 }
 
 export const SearchPage = () => {
+  const muteLists = useMuteLists()
   const searchTermRef = useRef<HTMLInputElement>(null)
   const [filterOptions, setFilterOptions] = useState<FilterOptions>({
     sort: SortByEnum.Latest,
@@ -57,30 +61,6 @@ export const SearchPage = () => {
     searching: SearchingFilterEnum.Mods
   })
   const [searchTerm, setSearchTerm] = useState('')
-  const [muteLists, setMuteLists] = useState<{
-    admin: MuteLists
-    user: MuteLists
-  }>({
-    admin: {
-      authors: [],
-      replaceableEvents: []
-    },
-    user: {
-      authors: [],
-      replaceableEvents: []
-    }
-  })
-
-  const userState = useAppSelector((state) => state.user)
-
-  useDidMount(async () => {
-    const pubkey = userState.user?.pubkey as string | undefined
-
-    const metadataController = await MetadataController.getInstance()
-    metadataController.getMuteLists(pubkey).then((lists) => {
-      setMuteLists(lists)
-    })
-  })
 
   const handleSearch = () => {
     const value = searchTermRef.current?.value || '' // Access the input value from the ref
@@ -278,8 +258,6 @@ const Filters = React.memo(
   }
 )
 
-const MAX_MODS_PER_PAGE = 10
-
 type ModsResultProps = {
   filterOptions: FilterOptions
   searchTerm: string
@@ -544,64 +522,14 @@ const UsersResult = ({
   )
 }
 
-type Game = {
-  'Game Name': string
-  '16 by 9 image': string
-  'Boxart image': string
-}
-
-const MAX_GAMES_PER_PAGE = 10
-
 type GamesResultProps = {
   searchTerm: string
 }
 
 const GamesResult = ({ searchTerm }: GamesResultProps) => {
-  const hasProcessedCSV = useRef(false)
-  const [isProcessingCSVFile, setIsProcessingCSVFile] = useState(false)
-  const [games, setGames] = useState<Game[]>([])
+  const games = useGames()
   const [page, setPage] = useState(1)
 
-  useEffect(() => {
-    if (hasProcessedCSV.current) return
-    hasProcessedCSV.current = true
-
-    setIsProcessingCSVFile(true)
-
-    // Fetch the CSV file from the public folder
-    fetch('/assets/games.csv')
-      .then((response) => response.text())
-      .then((csvText) => {
-        // Parse the CSV text using PapaParse
-        Papa.parse<Game>(csvText, {
-          worker: true,
-          header: true,
-          complete: (results) => {
-            const uniqueGames: Game[] = []
-            const gameNames = new Set<string>()
-
-            // Remove duplicate games based on 'Game Name'
-            results.data.forEach((game) => {
-              if (!gameNames.has(game['Game Name'])) {
-                gameNames.add(game['Game Name'])
-                uniqueGames.push(game)
-              }
-            })
-
-            // Set the unique games list
-            setGames(uniqueGames)
-          }
-        })
-      })
-      .catch((err) => {
-        log(true, LogType.Error, 'Error occurred in processing csv file', err)
-        toast.error(err.message || err)
-      })
-      .finally(() => {
-        setIsProcessingCSVFile(false)
-      })
-  }, [])
-
   // Reset the page to 1 whenever searchTerm changes
   useEffect(() => {
     setPage(1)
@@ -627,7 +555,6 @@ const GamesResult = ({ searchTerm }: GamesResultProps) => {
 
   return (
     <>
-      {isProcessingCSVFile && <LoadingSpinner desc='Processing games file' />}
       <div className='IBMSecMain IBMSMListWrapper'>
         <div className='IBMSMList IBMSMListFeaturedAlt'>
           {filteredGames