fix: Use Separate States for Search Results in Browse Screen (Closes #359)

src/redux/source/sourcesSlice.ts

@@ -5,6 +5,7 @@ import { Source } from '../../sources/types';
 
 interface SourcesState {
   allSources: Source[];
+  searchResults: Source[];
   pinnedSourceIds: number[];
   lastUsed: number | null;
   languageFilters: string[];
@@ -12,6 +13,7 @@ interface SourcesState {
 
 const initialState: SourcesState = {
   allSources: AllSources,
+  searchResults: [],
   pinnedSourceIds: [],
   lastUsed: null,
   languageFilters: ['English'],
@@ -29,17 +31,13 @@ export const sourcesSlice = createSlice({
       state.allSources = sources;
     },
     searchSourcesAction: (state, action: PayloadAction<string>) => {
-      state.allSources = AllSources.filter(
-        source => state.languageFilters.indexOf(source.lang) !== -1,
-      )
-        .sort((a, b) => a.sourceName.localeCompare(b.sourceName))
-        .filter(
-          (source: Source) =>
-            source.sourceName
-              .toLowerCase()
-              .includes(action.payload.toLowerCase()) &&
-            state.languageFilters.indexOf(source.lang) !== -1,
-        );
+      if (state?.pinnedSourceIds === undefined) {
+        state.pinnedSourceIds = [];
+      }
+
+      state.searchResults = state.allSources.filter((source: Source) =>
+        source.sourceName.toLowerCase().includes(action.payload.toLowerCase()),
+      );
     },
     setLastUsedSource: (state, action: PayloadAction<{ sourceId: number }>) => {
       state.lastUsed = action.payload.sourceId;

src/screens/browse/BrowseScreen.tsx

@@ -40,6 +40,7 @@ const BrowseScreen = () => {
 
   const {
     allSources,
+    searchResults,
     pinnedSourceIds = [],
     languageFilters = ['English'],
     lastUsed,
@@ -93,6 +94,44 @@ const BrowseScreen = () => {
     [],
   );
 
+  const sections = useMemo(() => {
+    const list = [
+      {
+        header: getString('browseScreen.lastUsed'),
+        data: lastUsedSource,
+      },
+    ];
+
+    if (pinnedSourceIds) {
+      list.push({
+        header: getString('browseScreen.pinned'),
+        data: pinnedSources,
+      });
+    }
+
+    if (!onlyShowPinnedSources) {
+      if (searchText) {
+        list.push({
+          header: getString('common.searchResults'),
+          data: searchResults,
+        });
+      } else {
+        list.push({
+          header: getString('browseScreen.all'),
+          data: allSources,
+        });
+      }
+    }
+
+    return list;
+  }, [
+    lastUsedSource,
+    pinnedSourceIds,
+    onlyShowPinnedSources,
+    JSON.stringify(searchResults),
+    searchText,
+  ]);
+
   return (
     <>
       <SearchbarV2
@@ -113,17 +152,7 @@ const BrowseScreen = () => {
       ) : allSources.length === 0 ? null : (
         <>
           <SectionList
-            sections={[
-              {
-                header: getString('browseScreen.lastUsed'),
-                data: lastUsedSource,
-              },
-              { header: getString('browseScreen.pinned'), data: pinnedSources },
-              {
-                header: getString('browseScreen.all'),
-                data: onlyShowPinnedSources ? [] : allSources,
-              },
-            ]}
+            sections={sections}
             ListHeaderComponent={
               showMyAnimeList ? (
                 <>

strings/languages/en/strings.json

@@ -13,7 +13,8 @@
     "edit": "Edit",
     "name": "Name",
     "searchFor": "Search for",
-    "globally": "globally"
+    "globally": "globally",
+    "searchResults": "Search results"
   },
   "library": "Library",
   "libraryScreen": {

strings/types/index.ts

@@ -17,6 +17,7 @@ export interface StringMap {
   'common.name': 'string';
   'common.searchFor': 'string';
   'common.globally': 'string';
+  'common.searchResults': 'string';
   'library': 'string';
   'libraryScreen.searchbar': 'string';
   'libraryScreen.empty': 'string';