search

src/screens/Library/Research.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { View } from "react-native";
 import { background } from "../../assets";
 import useSearch from "../../hooks/useSearch";
@@ -12,15 +12,39 @@ const Research = () => {
     search,
     setSearch,
     selected,
-    toggleSelected,
-    filteredProjects,
-    projectsLoading,
-    loadMoreProjects,
-    filteredUsers,
-    usersLoading,
-    loadMoreUsers,
+    setSelected,
+    users = [],
+    musics = [],
+    playbacks = [],
+    loading,
   } = useSearch();
 
+  const toggleSelected = useCallback(
+    (value) => {
+      setSelected((previous) => (previous === value ? null : value));
+    },
+    [setSelected],
+  );
+
+  const musicResults = useMemo(
+    () => (Array.isArray(musics) ? musics : []),
+    [musics],
+  );
+
+  const playbackResults = useMemo(
+    () => (Array.isArray(playbacks) ? playbacks : []),
+    [playbacks],
+  );
+
+  const userResults = useMemo(
+    () => (Array.isArray(users) ? users : []),
+    [users],
+  );
+
+  const musicsLoading = loading;
+  const playbacksLoading = loading;
+  const usersLoading = loading;
+
   return (
     <Page
       headerType="NAVIGATION"
@@ -39,12 +63,12 @@ const Research = () => {
         />
         <SearchResultsList
           selected={selected}
-          filteredProjects={filteredProjects}
-          projectsLoading={projectsLoading}
-          loadMoreProjects={loadMoreProjects}
-          filteredUsers={filteredUsers}
+          musics={musicResults}
+          musicsLoading={musicsLoading}
+          playbacks={playbackResults}
+          playbacksLoading={playbacksLoading}
+          users={userResults}
           usersLoading={usersLoading}
-          loadMoreUsers={loadMoreUsers}
         />
       </View>
     </Page>