Merge pull request 'feat: appyly nsfw filter on latest mods section in home page' (#65) from staging into master

Reviewed-on: #65

src/hooks/index.ts

@@ -2,4 +2,5 @@ export * from './redux'
 export * from './useDidMount'
 export * from './useGames'
 export * from './useMuteLists'
+export * from './useNSFWList'
 export * from './useReactions'

src/hooks/useNSFWList.ts

@@ -0,0 +1,17 @@
+import { MetadataController } from 'controllers'
+import { useState } from 'react'
+import { useDidMount } from './useDidMount'
+
+export const useNSFWList = () => {
+  const [nsfwList, setNSFWList] = useState<string[]>([])
+
+  useDidMount(async () => {
+    const metadataController = await MetadataController.getInstance()
+
+    metadataController.getNSFWList().then((list) => {
+      setNSFWList(list)
+    })
+  })
+
+  return nsfwList
+}

src/pages/home.tsx

@@ -8,7 +8,7 @@ import { GameCard } from '../components/GameCard'
 import { ModCard } from '../components/ModCard'
 import { LANDING_PAGE_DATA } from '../constants'
 import { RelayController } from '../controllers'
-import { useDidMount, useGames, useMuteLists } from '../hooks'
+import { useDidMount, useGames, useMuteLists, useNSFWList } from '../hooks'
 import { appRoutes, getModPageRoute } from '../routes'
 import { ModDetails } from '../types'
 import {
@@ -259,6 +259,7 @@ const DisplayLatestMods = () => {
   const [latestMods, setLatestMods] = useState<ModDetails[]>([])
 
   const muteLists = useMuteLists()
+  const nsfwList = useNSFWList()
 
   useDidMount(() => {
     fetchMods({ source: window.location.host })
@@ -280,11 +281,14 @@ const DisplayLatestMods = () => {
 
     const filtered = latestMods.filter(
       (mod) =>
-        !mutedAuthors.includes(mod.author) && !mutedEvents.includes(mod.aTag)
+        !mutedAuthors.includes(mod.author) &&
+        !mutedEvents.includes(mod.aTag) &&
+        !nsfwList.includes(mod.aTag) &&
+        !mod.nsfw
     )
 
     return filtered.slice(0, 4)
-  }, [muteLists, latestMods])
+  }, [muteLists, nsfwList, latestMods])
 
   return (
     <div className='IBMSecMain IBMSMListWrapper'>

src/pages/mods.tsx

@@ -12,8 +12,7 @@ import { createSearchParams, useNavigate } from 'react-router-dom'
 import { LoadingSpinner } from '../components/LoadingSpinner'
 import { ModCard } from '../components/ModCard'
 import { MOD_FILTER_LIMIT } from '../constants'
-import { MetadataController } from '../controllers'
-import { useAppSelector, useDidMount, useMuteLists } from '../hooks'
+import { useAppSelector, useMuteLists, useNSFWList } from '../hooks'
 import { appRoutes } from '../routes'
 import '../styles/filters.css'
 import '../styles/pagination.css'
@@ -58,21 +57,12 @@ export const ModsPage = () => {
     moderated: ModeratedFilter.Moderated
   })
   const muteLists = useMuteLists()
-
-  const [nsfwList, setNSFWList] = useState<string[]>([])
+  const nsfwList = useNSFWList()
 
   const [page, setPage] = useState(1)
 
   const userState = useAppSelector((state) => state.user)
 
-  useDidMount(async () => {
-    const metadataController = await MetadataController.getInstance()
-
-    metadataController.getNSFWList().then((list) => {
-      setNSFWList(list)
-    })
-  })
-
   useEffect(() => {
     setIsFetching(true)
     fetchMods({ source: filterOptions.source })