refactor

src/api/get-apps.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { CategoryDefinition } from '~/types';
 
 async function getCategories(): Promise<CategoryDefinition[]> {
@@ -13,5 +13,17 @@ export function useCategories() {
   }, []);
 
   const apps = useMemo(() => categories.flatMap((c) => c.apps), [categories]);
-  return { categories, apps };
+
+  const filteredApps = useCallback(
+    (term: string) =>
+      apps?.filter(
+        ({ name, url }) =>
+          name.toLowerCase().includes(term.toLowerCase()) ||
+          url.toLowerCase().includes(term.toLowerCase())
+      ) ?? [],
+
+    [apps]
+  );
+
+  return { categories, apps, filteredApps };
 }

src/pages/index-page.tsx

@@ -14,7 +14,7 @@ import { useLoadingTimeout } from '~/hooks/use-loading-timeout';
 import style from './index-page.module.css';
 
 export function IndexPage() {
-  const { categories, apps } = useCategories();
+  const { categories, apps, filteredApps } = useCategories();
   const searchProviders = useSearchProviders();
 
   const { showImageDetails } = useAtomValue(settingsAtom);
@@ -28,17 +28,10 @@ export function IndexPage() {
   const { activeCategory: activeCategoryName, selectCategory, resetCategory } = useActiveCategory();
   const activeCategory = categories?.find((c) => c.name === activeCategoryName);
 
-  const searchResults = useMemo(() => {
+  const searchResults = useMemo(
-    if (!shouldSearchLocally || !apps) {
+    () => (shouldSearchLocally ? filteredApps(searchTerm) : []),
-      return [];
+    [searchTerm, shouldSearchLocally, filteredApps]
-    }
+  );
-
-    return apps.filter(
-      ({ name, url }) =>
-        name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        url.toLowerCase().includes(searchTerm.toLowerCase())
-    );
-  }, [apps, searchTerm, shouldSearchLocally]);
 
   useEffect(() => {
     parent.addEventListener('keydown', handleKeypress);