From 6246dece843b42d92be2c7d25fa3748c054c4fd2 Mon Sep 17 00:00:00 2001 From: enes Date: Thu, 28 Nov 2024 17:21:35 +0100 Subject: [PATCH] refactor(mods): use loader to preload lists --- src/pages/home.tsx | 4 +- src/pages/{mods.tsx => mods/index.tsx} | 43 +++++++------- src/pages/mods/loader.ts | 77 ++++++++++++++++++++++++++ src/routes/index.tsx | 4 +- 4 files changed, 101 insertions(+), 27 deletions(-) rename src/pages/{mods.tsx => mods/index.tsx} (83%) create mode 100644 src/pages/mods/loader.ts diff --git a/src/pages/home.tsx b/src/pages/home.tsx index 78f722c..ef3d845 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -430,9 +430,7 @@ const DisplayLatestBlogs = () => { return (
- {navigation.state !== 'idle' && ( - - )} + {navigation.state !== 'idle' && }

Blog Posts

diff --git a/src/pages/mods.tsx b/src/pages/mods/index.tsx similarity index 83% rename from src/pages/mods.tsx rename to src/pages/mods/index.tsx index cd2ad21..abd9870 100644 --- a/src/pages/mods.tsx +++ b/src/pages/mods/index.tsx @@ -1,34 +1,34 @@ import { ModFilter } from 'components/Filters/ModsFilter' import { Pagination } from 'components/Pagination' import React, { useCallback, useEffect, useRef, useState } from 'react' -import { createSearchParams, useNavigate } from 'react-router-dom' -import { LoadingSpinner } from '../components/LoadingSpinner' -import { ModCard } from '../components/ModCard' -import { MOD_FILTER_LIMIT } from '../constants' +import { + createSearchParams, + useLoaderData, + useNavigate +} from 'react-router-dom' +import { LoadingSpinner } from '../../components/LoadingSpinner' +import { ModCard } from '../../components/ModCard' +import { MOD_FILTER_LIMIT } from '../../constants' import { useAppSelector, useFilteredMods, useLocalStorage, - useMuteLists, - useNDKContext, - useNSFWList -} from '../hooks' -import { appRoutes } from '../routes' -import '../styles/filters.css' -import '../styles/pagination.css' -import '../styles/search.css' -import '../styles/styles.css' -import { FilterOptions, ModDetails } from '../types' -import { - CurationSetIdentifiers, - DEFAULT_FILTER_OPTIONS, - scrollIntoView -} from 'utils' + useNDKContext +} from '../../hooks' +import { appRoutes } from '../../routes' +import '../../styles/filters.css' +import '../../styles/pagination.css' +import '../../styles/search.css' +import '../../styles/styles.css' +import { FilterOptions, ModDetails } from '../../types' +import { DEFAULT_FILTER_OPTIONS, scrollIntoView } from 'utils' import { SearchInput } from 'components/SearchInput' -import { useCuratedSet } from 'hooks/useCuratedSet' +import { ModsPageLoaderResult } from './loader' export const ModsPage = () => { const scrollTargetRef = useRef(null) + const { repostList, muteLists, nsfwList } = + useLoaderData() as ModsPageLoaderResult const { fetchMods } = useNDKContext() const [isFetching, setIsFetching] = useState(false) const [mods, setMods] = useState([]) @@ -37,9 +37,6 @@ export const ModsPage = () => { 'filter', DEFAULT_FILTER_OPTIONS ) - const muteLists = useMuteLists() - const nsfwList = useNSFWList() - const repostList = useCuratedSet(CurationSetIdentifiers.Repost) const [page, setPage] = useState(1) diff --git a/src/pages/mods/loader.ts b/src/pages/mods/loader.ts new file mode 100644 index 0000000..24fc3a4 --- /dev/null +++ b/src/pages/mods/loader.ts @@ -0,0 +1,77 @@ +import { NDKContextType } from 'contexts/NDKContext' +import { store } from 'store' +import { MuteLists } from 'types' +import { getReportingSet, CurationSetIdentifiers, log, LogType } from 'utils' + +export interface ModsPageLoaderResult { + muteLists: { + admin: MuteLists + user: MuteLists + } + nsfwList: string[] + repostList: string[] +} + +export const modsRouteLoader = (ndkContext: NDKContextType) => async () => { + // Empty result + const result: ModsPageLoaderResult = { + muteLists: { + admin: { + authors: [], + replaceableEvents: [] + }, + user: { + authors: [], + replaceableEvents: [] + } + }, + nsfwList: [], + repostList: [] + } + + // Get the current state + const userState = store.getState().user + + // Check if current user is logged in + let userPubkey: string | undefined + if (userState.auth && userState.user?.pubkey) { + userPubkey = userState.user.pubkey as string + } + + const settled = await Promise.allSettled([ + ndkContext.getMuteLists(userPubkey), + getReportingSet(CurationSetIdentifiers.NSFW, ndkContext), + getReportingSet(CurationSetIdentifiers.Repost, ndkContext) + ]) + + // Check the mutelist event result + const muteListResult = settled[0] + if (muteListResult.status === 'fulfilled' && muteListResult.value) { + result.muteLists = muteListResult.value + } else if (muteListResult.status === 'rejected') { + log(true, LogType.Error, 'Failed to fetch mutelist.', muteListResult.reason) + } + + // Check the nsfwlist event result + const nsfwListResult = settled[1] + if (nsfwListResult.status === 'fulfilled' && nsfwListResult.value) { + result.nsfwList = nsfwListResult.value + } else if (nsfwListResult.status === 'rejected') { + log(true, LogType.Error, 'Failed to fetch nsfwlist.', nsfwListResult.reason) + } + + // Check the repostlist event result + const repostListResult = settled[2] + if (repostListResult.status === 'fulfilled' && repostListResult.value) { + result.repostList = repostListResult.value + } else if (repostListResult.status === 'rejected') { + log( + true, + LogType.Error, + 'Failed to fetch repost list.', + repostListResult.reason + ) + } + + return result +} diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 04d8fb1..ffa0bef 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -7,6 +7,7 @@ import { GamesPage } from '../pages/games' import { HomePage } from '../pages/home' import { ModsPage } from '../pages/mods' import { ModPage } from '../pages/mod' +import { modsRouteLoader } from '../pages/mods/loader' import { modRouteLoader } from '../pages/mod/loader' import { modRouteAction } from '../pages/mod/action' import { SubmitModPage } from '../pages/submitMod' @@ -87,7 +88,8 @@ export const routerWithNdkContext = (context: NDKContextType) => }, { path: appRoutes.mods, - element: + element: , + loader: modsRouteLoader(context) }, { path: appRoutes.mod,