added: search for view all screens; manual search trigger

HansGabriel · Dec 6, 2023 · bd6c591 · bd6c591
1 parent 1dd9bc3
commit bd6c591
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 57 deletions.
diff --git a/apps/expo/src/components/headers/ViewAllScreenHeader.tsx b/apps/expo/src/components/headers/ViewAllScreenHeader.tsx
@@ -1,39 +1,71 @@
 import { View, Text, TouchableOpacity } from "react-native";
 import LeftArrowIcon from "../../icons/LeftArrowIcon";
 import SearchIcon from "../../icons/SearchIcon";
-import type { FC } from "react";
+import { useState, type FC } from "react";
 
 import useGoBack from "../../hooks/useGoBack";
+import { SearchField } from "../search/SearchField";
 
 interface Props {
   title?: string;
+  viewAllScreenType?: "test" | "user" | "collection" | "reviewer";
 }
 
 const ViewAllScreenHeader: FC<Props> = (props) => {
   const goBack = useGoBack();
+  const [query, setQuery] = useState("");
+  const [isSearchVisible, setIsSearchVisible] = useState(false);
+
+  const updateQuery = (input: string) => {
+    setQuery(input);
+  };
+
+  const openSearchBar = () => {
+    setIsSearchVisible(true);
+  };
+
+  const closeSearchBar = () => {
+    setIsSearchVisible(false);
+  };
+
   return (
     <>
-      <View className="sticky z-50 mx-5 flex flex-row justify-between bg-white py-5">
-        <View className="flex-row self-center">
-          <TouchableOpacity
-            className="flex flex-row items-center gap-2 self-center"
-            onPress={goBack}
-          >
-            <LeftArrowIcon />
-            <Text
-              className="font-nunito-bold w-4/5 text-2xl leading-[38.40px] text-neutral-800"
-              numberOfLines={1}
-              ellipsizeMode="tail"
+      {isSearchVisible ? (
+        <View className="sticky z-50 flex flex-row justify-between bg-white py-5">
+          <SearchField
+            searchString={query}
+            onChange={updateQuery}
+            onClose={closeSearchBar}
+            clicked={isSearchVisible}
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            setClicked={() => {}}
+            currentViewAllScreen={props.viewAllScreenType}
+          />
+        </View>
+      ) : (
+        <View className="sticky z-50 mx-3 flex flex-row justify-between bg-white py-5">
+          <View className="flex-row self-center">
+            <TouchableOpacity
+              className="flex flex-row items-center gap-2 self-center"
+              onPress={goBack}
             >
-              {props.title}
-            </Text>
+              <LeftArrowIcon />
+              <Text
+                className="font-nunito-bold w-4/5 text-2xl leading-[38.40px] text-neutral-800"
+                numberOfLines={1}
+                ellipsizeMode="tail"
+              >
+                {props.title}
+              </Text>
+            </TouchableOpacity>
+          </View>
+          <TouchableOpacity className="self-center" onPress={openSearchBar}>
+            <SearchIcon />
           </TouchableOpacity>
         </View>
-        <TouchableOpacity className="self-center">
-          <SearchIcon />
-        </TouchableOpacity>
-      </View>
+      )}
     </>
   );
 };
+
 export default ViewAllScreenHeader;
diff --git a/apps/expo/src/components/search/SearchContent.tsx b/apps/expo/src/components/search/SearchContent.tsx
@@ -23,6 +23,8 @@ interface ContentProps {
   results: CompiledAlgoliaHits;
   selectedCategories: { [key: string]: boolean };
   toggleCategory: (category: string) => void;
+  fixedTypeFilter?: "test" | "user" | "collection" | "reviewer";
+  isLoading: boolean;
 }
 
 interface CombinedItem {
@@ -49,6 +51,8 @@ export const SearchContent: FC<ContentProps> = ({
   results,
   selectedCategories,
   toggleCategory,
+  fixedTypeFilter,
+  isLoading,
 }) => {
   const navigation = useNavigation();
 
@@ -75,6 +79,13 @@ export const SearchContent: FC<ContentProps> = ({
       : []),
   ];
 
+  let filteredResults = combinedItems;
+  if (fixedTypeFilter) {
+    filteredResults = combinedItems.filter(
+      (item) => item.type === fixedTypeFilter,
+    );
+  }
+
   const goToTestDetailsScreen = (testId: string) => {
     navigation.navigate("TestDetails", {
       testId,
@@ -170,24 +181,32 @@ export const SearchContent: FC<ContentProps> = ({
         <View>
           <View className="my-3 border border-zinc-100" />
         </View>
-
-        <View
-        className="w-[90%] self-center"
-          style={{
-            flexDirection: "row",
-            justifyContent: "center",
-            padding: 5,
-          }}
-        >
-          {categoryButtons}
-        </View>
-
-        <FlashList
-          data={combinedItems}
-          renderItem={renderItem}
-          estimatedItemSize={100}
-          keyExtractor={(item, index) => `${item.type}-${index}`}
-        />
+        {!fixedTypeFilter && (
+          <View
+            className="w-[90%] self-center"
+            style={{
+              flexDirection: "row",
+              justifyContent: "center",
+              padding: 5,
+            }}
+          >
+            {categoryButtons}
+          </View>
+        )}
+        {!isLoading && filteredResults.length === 0 ? (
+          <View style={{ alignItems: "center", marginTop: 20 }}>
+            <Text style={{ fontSize: 16, color: "gray" }}>
+              No Search Results Found
+            </Text>
+          </View>
+        ) : (
+          <FlashList
+            data={filteredResults}
+            renderItem={renderItem}
+            estimatedItemSize={100}
+            keyExtractor={(item, index) => `${item.type}-${index}`}
+          />
+        )}
       </Animated.View>
     </View>
   );

diff --git a/apps/expo/src/components/search/SearchField.tsx b/apps/expo/src/components/search/SearchField.tsx
@@ -1,12 +1,11 @@
-import React, { FC, useCallback, useEffect, useState } from "react";
+import React, { FC, useEffect, useState } from "react";
 import { TouchableOpacity, View } from "react-native";
 import { SearchBar } from "@rneui/themed";
 import SearchIcon from "../../icons/SearchIcon";
 import LeftArrowIcon from "../../icons/LeftArrowIcon";
 import Animated, { SlideInRight, SlideOutRight } from "react-native-reanimated";
 import { SearchContent } from "./SearchContent";
 import { trpc } from "../../utils/trpc";
-import { debounce } from "lodash";
 
 interface FieldProps {
   searchString: string;
@@ -15,6 +14,7 @@ interface FieldProps {
   clicked: boolean;
   setClicked: () => void;
   filterByCurrentUser?: boolean;
+  currentViewAllScreen?: "test" | "user" | "collection" | "reviewer";
 }
 
 export const SearchField: FC<FieldProps> = ({
@@ -24,11 +24,13 @@ export const SearchField: FC<FieldProps> = ({
   clicked,
   setClicked,
   filterByCurrentUser = false,
+  currentViewAllScreen,
 }) => {
   const fieldBgColor = clicked ? "rgb(237 233 254)" : "lightgray";
   const fieldBorderColor = clicked ? "rgba(105, 73, 255, 1)" : "lightgray";
 
-  const [debouncedQuery, setDebouncedQuery] = useState(searchString);
+  const [isLoading, setIsLoading] = useState(false);
+  const [query, setQuery] = useState(searchString);
   const [selectedCategories, setSelectedCategories] = useState({
     tests: false,
     users: false,
@@ -59,29 +61,26 @@ export const SearchField: FC<FieldProps> = ({
     })
     .map(([category]) => ({
       indexName: category,
-      query: debouncedQuery,
+      query: query,
     }));
 
   const algoliaQueriesWithUserFilter = {
     details: searchQueries,
     filterBySignedUser: filterByCurrentUser,
   };
 
-  const { data: hits } = trpc.algolia.algoliaSearch.useQuery(
-    algoliaQueriesWithUserFilter,
-    {
-      enabled: debouncedQuery.length > 0,
-    },
-  );
-
-  const debouncedOnChange = useCallback(
-    debounce((query: string) => setDebouncedQuery(query), 500),
-    [],
-  );
+  const { data: hits, isLoading: queryLoading } =
+    trpc.algolia.algoliaSearch.useQuery(algoliaQueriesWithUserFilter, {
+      enabled: query.length > 0,
+    });
 
   useEffect(() => {
-    debouncedOnChange(searchString);
-  }, [searchString, debouncedOnChange, selectedCategories]);
+    setIsLoading(queryLoading);
+  }, [queryLoading]);
+
+  const handleSearchSubmit = () => {
+    setQuery(searchString);
+  };
 
   return (
     <View className="flex-1">
@@ -102,6 +101,7 @@ export const SearchField: FC<FieldProps> = ({
           onChangeText={onChange}
           value={searchString}
           placeholder={"Search"}
+          onSubmitEditing={handleSearchSubmit}
           lightTheme={true}
           containerStyle={{
             backgroundColor: "transparent",
@@ -144,6 +144,8 @@ export const SearchField: FC<FieldProps> = ({
             }
             selectedCategories={selectedCategories}
             toggleCategory={toggleCategory}
+            fixedTypeFilter={currentViewAllScreen}
+            isLoading={isLoading}
           />
         </View>
       ) : (

diff --git a/apps/expo/src/components/view-all-display/collections/ViewAllCollectionsDisplay.tsx b/apps/expo/src/components/view-all-display/collections/ViewAllCollectionsDisplay.tsx
@@ -71,7 +71,10 @@ export const ViewAllCollectionsDisplay: FC<Props> = (props) => {
         flex: 1,
       }}
     >
-      <ViewAllScreenHeader title={formatTitle(props.collectionsFor)} />
+      <ViewAllScreenHeader
+        title={formatTitle(props.collectionsFor)}
+        viewAllScreenType="collection"
+      />
       <FlashList
         showsVerticalScrollIndicator={false}
         numColumns={2}

diff --git a/apps/expo/src/components/view-all-display/reviewers/ViewAllReviewerDisplay.tsx b/apps/expo/src/components/view-all-display/reviewers/ViewAllReviewerDisplay.tsx
@@ -59,7 +59,10 @@ export const ViewAllReviewersDisplay: FC = () => {
         width: width,
       }}
     >
-      <ViewAllScreenHeader title={"Discover Reviewers"} />
+      <ViewAllScreenHeader
+        title={"Discover Reviewers"}
+        viewAllScreenType="reviewer"
+      />
       <FlashList
         showsVerticalScrollIndicator={false}
         data={discoverReviewers}

diff --git a/apps/expo/src/components/view-all-display/tests/ViewAllTestDisplay.tsx b/apps/expo/src/components/view-all-display/tests/ViewAllTestDisplay.tsx
@@ -135,7 +135,7 @@ export const ViewAllTestDisplay: FC<Props> = (props) => {
         width: width,
       }}
     >
-      <ViewAllScreenHeader title={headerTitle} />
+      <ViewAllScreenHeader title={headerTitle} viewAllScreenType="test" />
 
       {match(props.testsFor)
         .with("questions", () => {

diff --git a/apps/expo/src/components/view-all-display/users/ViewAllUserDisplay.tsx b/apps/expo/src/components/view-all-display/users/ViewAllUserDisplay.tsx
@@ -67,7 +67,7 @@ export const ViewAllUserDisplay: FC<Props> = (props) => {
         width: width,
       }}
     >
-      <ViewAllScreenHeader title={headerTitle} />
+      <ViewAllScreenHeader title={headerTitle} viewAllScreenType="user" />
       <FlashList
         showsVerticalScrollIndicator={false}
         data={fetchedData}