From ab74e5c9347e916f7aae641db23342bff7e5afe5 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Thu, 18 May 2023 21:44:29 +0200 Subject: [PATCH 1/6] [Cleanup] Improve variable names --- src/screens/SearchAll.tsx | 96 ++++++++++++++++++++------------------- 1 file changed, 49 insertions(+), 47 deletions(-) diff --git a/src/screens/SearchAll.tsx b/src/screens/SearchAll.tsx index 6ef9f88a72..f12080db8c 100644 --- a/src/screens/SearchAll.tsx +++ b/src/screens/SearchAll.tsx @@ -41,52 +41,52 @@ const SearchAll: React.FC = () => { const [query] = useQueryParam('query', StringParam); const { setTitle, setAction } = useContext(NavbarContext); const [triggerUpdate, setTriggerUpdate] = useState(2); - const [mangas, setMangas] = useState({}); + const [sourceToMangasMap, setSourceToMangasMap] = useState({}); const [shownLangs, setShownLangs] = useLocalStorage('shownSourceLangs', sourceDefualtLangs()); const [showNsfw] = useLocalStorage('showNsfw', true); - const { data: unsortedSources = [], isLoading: isLoadingSources } = requestManager.useGetSourceList(); - const sources = useMemo( + const { data: sources = [], isLoading: isLoadingSources } = requestManager.useGetSourceList(); + const sortedSources = useMemo( () => - unsortedSources.sort((a: { displayName: string }, b: { displayName: string }) => { - if (a.displayName < b.displayName) { + sources.sort((sourceA: { displayName: string }, sourceB: { displayName: string }) => { + if (sourceA.displayName < sourceB.displayName) { return -1; } - if (a.displayName > b.displayName) { + if (sourceA.displayName > sourceB.displayName) { return 1; } return 0; }), - [unsortedSources], + [sources], ); - const [fetched, setFetched] = useState({}); + const [sourceToFetchedStateMap, setSourceToFetchedStateMap] = useState({}); const [lastPageNum, setLastPageNum] = useState(1); - const [ResetUI, setResetUI] = useState(0); + const [resetUI, setResetUI] = useState(0); - const limit = new PQueue({ concurrency: 5 }); + const searchRequestsQueue = new PQueue({ concurrency: 5 }); useEffect(() => { setTitle(t('search.title.global_search')); setAction(); }, [t]); - async function doIT(elem: any[]) { - elem.map((ele) => - limit.add(async () => { + async function performSearch(sourcesToSearchIn: any[]) { + sourcesToSearchIn.map((source) => + searchRequestsQueue.add(async () => { const response = await requestManager .getClient() - .get(`/api/v1/source/${ele.id}/search?searchTerm=${query || ''}&pageNum=1`); - const data = await response.data; - const tmp = mangas; - tmp[ele.id] = data.mangaList; - setMangas(tmp); - const tmp2 = fetched; - tmp2[ele.id] = true; - setFetched(tmp2); + .get(`/api/v1/source/${source.id}/search?searchTerm=${query || ''}&pageNum=1`); + const searchResult = await response.data; + const tmpMangas = sourceToMangasMap; + tmpMangas[source.id] = searchResult.mangaList; + setSourceToMangasMap(tmpMangas); + const tmpFetched = sourceToFetchedStateMap; + tmpFetched[source.id] = true; + setSourceToFetchedStateMap(tmpFetched); setResetUI(1); }), ); @@ -100,20 +100,20 @@ const SearchAll: React.FC = () => { setTriggerUpdate(1); return; } - setFetched({}); - setMangas({}); - doIT( - sources + setSourceToFetchedStateMap({}); + setSourceToMangasMap({}); + performSearch( + sortedSources .filter(({ lang }) => shownLangs.indexOf(lang) !== -1) .filter((source) => showNsfw || !source.isNsfw), ); }, [triggerUpdate]); useEffect(() => { - if (ResetUI === 1) { + if (resetUI === 1) { setResetUI(0); } - }, [ResetUI]); + }, [resetUI]); useEffect(() => { if (query && !isLoadingSources) { @@ -123,16 +123,16 @@ const SearchAll: React.FC = () => { return () => clearTimeout(delayDebounceFn); } return () => {}; - }, [query, shownLangs, sources]); + }, [query, shownLangs, sortedSources]); useEffect(() => { // make sure all of forcedDefaultLangs() exists in shownLangs sourceForcedDefaultLangs().forEach((forcedLang) => { - let hasLang = false; + let includedInShownLangs = false; shownLangs.forEach((lang) => { - if (lang === forcedLang) hasLang = true; + if (lang === forcedLang) includedInShownLangs = true; }); - if (!hasLang) { + if (!includedInShownLangs) { setShownLangs((shownLangsCopy) => { shownLangsCopy.push(forcedLang); return shownLangsCopy; @@ -149,38 +149,38 @@ const SearchAll: React.FC = () => { , ); - }, [t, shownLangs, sources]); + }, [t, shownLangs, sortedSources]); if (query) { return ( <> - {sources + {sortedSources .filter(({ lang }) => shownLangs.indexOf(lang) !== -1) .filter((source) => showNsfw || !source.isNsfw) - .sort((a, b) => { - const af = fetched[a.id]; - const bf = fetched[b.id]; - if (af && !bf) { + .sort((sourceA, sourceB) => { + const isSourceAFetched = sourceToFetchedStateMap[sourceA.id]; + const isSourceBFetched = sourceToFetchedStateMap[sourceB.id]; + if (isSourceAFetched && !isSourceBFetched) { return -1; } - if (!af && bf) { + if (!isSourceAFetched && isSourceBFetched) { return 1; } - if (!af && !bf) { + if (!isSourceAFetched && !isSourceBFetched) { return 0; } - const al = mangas[a.id].length === 0; - const bl = mangas[b.id].length === 0; - if (al && !bl) { + const isSourceASearchResultEmpty = sourceToMangasMap[sourceA.id].length === 0; + const isSourceBSearchResultEmpty = sourceToMangasMap[sourceB.id].length === 0; + if (isSourceASearchResultEmpty && !isSourceBSearchResultEmpty) { return 1; } - if (bl && !al) { + if (isSourceBSearchResultEmpty && !isSourceASearchResultEmpty) { return -1; } return 0; @@ -198,14 +198,16 @@ const SearchAll: React.FC = () => { From 1897e02192e165a03f1562baf7383b3fc07bc03d Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Thu, 18 May 2023 21:56:13 +0200 Subject: [PATCH 2/6] [Cleanup] Improve typing --- src/screens/SearchAll.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/screens/SearchAll.tsx b/src/screens/SearchAll.tsx index f12080db8c..2e4fe0a63d 100644 --- a/src/screens/SearchAll.tsx +++ b/src/screens/SearchAll.tsx @@ -17,11 +17,14 @@ import { Link } from 'react-router-dom'; import { StringParam, useQueryParam } from 'use-query-params'; import { langSortCmp, sourceDefualtLangs, sourceForcedDefaultLangs } from 'util/language'; import useLocalStorage from 'util/useLocalStorage'; -import { ISource } from 'typings'; +import { IManga, ISource, SourceSearchResult } from 'typings'; import { useTranslation } from 'react-i18next'; import { translateExtensionLanguage } from 'screens/util/Extensions'; import requestManager from 'lib/RequestManager'; +type SourceToMangasMap = { [source: string]: IManga[] }; +type SourceToFetchedStateMap = { [source: string]: boolean }; + function sourceToLangList(sources: ISource[]) { const result: string[] = []; @@ -41,7 +44,7 @@ const SearchAll: React.FC = () => { const [query] = useQueryParam('query', StringParam); const { setTitle, setAction } = useContext(NavbarContext); const [triggerUpdate, setTriggerUpdate] = useState(2); - const [sourceToMangasMap, setSourceToMangasMap] = useState({}); + const [sourceToMangasMap, setSourceToMangasMap] = useState({}); const [shownLangs, setShownLangs] = useLocalStorage('shownSourceLangs', sourceDefualtLangs()); const [showNsfw] = useLocalStorage('showNsfw', true); @@ -61,7 +64,7 @@ const SearchAll: React.FC = () => { [sources], ); - const [sourceToFetchedStateMap, setSourceToFetchedStateMap] = useState({}); + const [sourceToFetchedStateMap, setSourceToFetchedStateMap] = useState({}); const [lastPageNum, setLastPageNum] = useState(1); @@ -74,12 +77,12 @@ const SearchAll: React.FC = () => { setAction(); }, [t]); - async function performSearch(sourcesToSearchIn: any[]) { + async function performSearch(sourcesToSearchIn: ISource[]) { sourcesToSearchIn.map((source) => searchRequestsQueue.add(async () => { const response = await requestManager .getClient() - .get(`/api/v1/source/${source.id}/search?searchTerm=${query || ''}&pageNum=1`); + .get(`/api/v1/source/${source.id}/search?searchTerm=${query || ''}&pageNum=1`); const searchResult = await response.data; const tmpMangas = sourceToMangasMap; tmpMangas[source.id] = searchResult.mangaList; From 3b78bb8e0a398ced90efa494dc1b653cff526fe2 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Thu, 18 May 2023 21:49:15 +0200 Subject: [PATCH 3/6] [Cleanup] Extract source sort by name logic into function --- src/screens/SearchAll.tsx | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/src/screens/SearchAll.tsx b/src/screens/SearchAll.tsx index 2e4fe0a63d..b2115d0e56 100644 --- a/src/screens/SearchAll.tsx +++ b/src/screens/SearchAll.tsx @@ -38,6 +38,16 @@ function sourceToLangList(sources: ISource[]) { return result; } +const compareSourceByName = (sourceA: ISource, sourceB: ISource): -1 | 0 | 1 => { + if (sourceA.displayName < sourceB.displayName) { + return -1; + } + if (sourceA.displayName > sourceB.displayName) { + return 1; + } + return 0; +}; + const SearchAll: React.FC = () => { const { t } = useTranslation(); @@ -50,19 +60,7 @@ const SearchAll: React.FC = () => { const [showNsfw] = useLocalStorage('showNsfw', true); const { data: sources = [], isLoading: isLoadingSources } = requestManager.useGetSourceList(); - const sortedSources = useMemo( - () => - sources.sort((sourceA: { displayName: string }, sourceB: { displayName: string }) => { - if (sourceA.displayName < sourceB.displayName) { - return -1; - } - if (sourceA.displayName > sourceB.displayName) { - return 1; - } - return 0; - }), - [sources], - ); + const sortedSources = useMemo(() => sources.sort(compareSourceByName), [sources]); const [sourceToFetchedStateMap, setSourceToFetchedStateMap] = useState({}); From 9d863772d2a33b2fb5362dd2b6c6978f89a428d1 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Thu, 18 May 2023 21:49:53 +0200 Subject: [PATCH 4/6] Do not sort original loaded source list "Sort" mutates the original array --- src/screens/SearchAll.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/SearchAll.tsx b/src/screens/SearchAll.tsx index b2115d0e56..7bc0cd25e8 100644 --- a/src/screens/SearchAll.tsx +++ b/src/screens/SearchAll.tsx @@ -60,7 +60,7 @@ const SearchAll: React.FC = () => { const [showNsfw] = useLocalStorage('showNsfw', true); const { data: sources = [], isLoading: isLoadingSources } = requestManager.useGetSourceList(); - const sortedSources = useMemo(() => sources.sort(compareSourceByName), [sources]); + const sortedSources = useMemo(() => [...sources].sort(compareSourceByName), [sources]); const [sourceToFetchedStateMap, setSourceToFetchedStateMap] = useState({}); From e658460a61e8b6ebc9debd87458d86d63e89d40f Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Thu, 18 May 2023 22:53:48 +0200 Subject: [PATCH 5/6] [Cleanup] Extract search result sort logic into function --- src/screens/SearchAll.tsx | 55 +++++++++++++++++++++++---------------- 1 file changed, 32 insertions(+), 23 deletions(-) diff --git a/src/screens/SearchAll.tsx b/src/screens/SearchAll.tsx index 7bc0cd25e8..800c66b4fb 100644 --- a/src/screens/SearchAll.tsx +++ b/src/screens/SearchAll.tsx @@ -48,6 +48,35 @@ const compareSourceByName = (sourceA: ISource, sourceB: ISource): -1 | 0 | 1 => return 0; }; +const compareSourcesBySearchResult = ( + sourceA: ISource, + sourceB: ISource, + sourceToFetchedStateMap: SourceToFetchedStateMap, + sourceToMangasMap: SourceToMangasMap, +): -1 | 0 | 1 => { + const isSourceAFetched = sourceToFetchedStateMap[sourceA.id]; + const isSourceBFetched = sourceToFetchedStateMap[sourceB.id]; + if (isSourceAFetched && !isSourceBFetched) { + return -1; + } + if (!isSourceAFetched && isSourceBFetched) { + return 1; + } + if (!isSourceAFetched && !isSourceBFetched) { + return 0; + } + + const isSourceASearchResultEmpty = sourceToMangasMap[sourceA.id].length === 0; + const isSourceBSearchResultEmpty = sourceToMangasMap[sourceB.id].length === 0; + if (isSourceASearchResultEmpty && !isSourceBSearchResultEmpty) { + return 1; + } + if (isSourceBSearchResultEmpty && !isSourceASearchResultEmpty) { + return -1; + } + return 0; +}; + const SearchAll: React.FC = () => { const { t } = useTranslation(); @@ -163,29 +192,9 @@ const SearchAll: React.FC = () => { {sortedSources .filter(({ lang }) => shownLangs.indexOf(lang) !== -1) .filter((source) => showNsfw || !source.isNsfw) - .sort((sourceA, sourceB) => { - const isSourceAFetched = sourceToFetchedStateMap[sourceA.id]; - const isSourceBFetched = sourceToFetchedStateMap[sourceB.id]; - if (isSourceAFetched && !isSourceBFetched) { - return -1; - } - if (!isSourceAFetched && isSourceBFetched) { - return 1; - } - if (!isSourceAFetched && !isSourceBFetched) { - return 0; - } - - const isSourceASearchResultEmpty = sourceToMangasMap[sourceA.id].length === 0; - const isSourceBSearchResultEmpty = sourceToMangasMap[sourceB.id].length === 0; - if (isSourceASearchResultEmpty && !isSourceBSearchResultEmpty) { - return 1; - } - if (isSourceBSearchResultEmpty && !isSourceASearchResultEmpty) { - return -1; - } - return 0; - }) + .sort((sourceA, sourceB) => + compareSourcesBySearchResult(sourceA, sourceB, sourceToFetchedStateMap, sourceToMangasMap), + ) .map(({ lang, id, displayName }) => ( <> From 1d89699a4990e37ca6817bc433b1246a10cec2d6 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Fri, 19 May 2023 14:13:00 +0200 Subject: [PATCH 6/6] [Cleanup] Simplify adding default languages to shown languages --- src/screens/SearchAll.tsx | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/src/screens/SearchAll.tsx b/src/screens/SearchAll.tsx index 800c66b4fb..cb20833e80 100644 --- a/src/screens/SearchAll.tsx +++ b/src/screens/SearchAll.tsx @@ -157,18 +157,10 @@ const SearchAll: React.FC = () => { useEffect(() => { // make sure all of forcedDefaultLangs() exists in shownLangs - sourceForcedDefaultLangs().forEach((forcedLang) => { - let includedInShownLangs = false; - shownLangs.forEach((lang) => { - if (lang === forcedLang) includedInShownLangs = true; - }); - if (!includedInShownLangs) { - setShownLangs((shownLangsCopy) => { - shownLangsCopy.push(forcedLang); - return shownLangsCopy; - }); - } - }); + const missingDefaultLangs = sourceForcedDefaultLangs().filter( + (defaultLang) => !shownLangs.includes(defaultLang), + ); + setShownLangs([...shownLangs, ...missingDefaultLangs]); }, []); useEffect(() => {