diff --git a/apps/expo/src/components/headers/ViewAllScreenHeader.tsx b/apps/expo/src/components/headers/ViewAllScreenHeader.tsx index e8fd0e5..0f3ea30 100644 --- 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) => { 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 ( <> - - - - - + {}} + currentViewAllScreen={props.viewAllScreenType} + /> + + ) : ( + + + - {props.title} - + + + {props.title} + + + + + - - - - + )} ); }; + export default ViewAllScreenHeader; diff --git a/apps/expo/src/components/search/SearchContent.tsx b/apps/expo/src/components/search/SearchContent.tsx index 3bc1d7a..51a79b1 100644 --- 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 = ({ results, selectedCategories, toggleCategory, + fixedTypeFilter, + isLoading, }) => { const navigation = useNavigation(); @@ -75,6 +79,13 @@ export const SearchContent: FC = ({ : []), ]; + 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 = ({ - - - {categoryButtons} - - - `${item.type}-${index}`} - /> + {!fixedTypeFilter && ( + + {categoryButtons} + + )} + {!isLoading && filteredResults.length === 0 ? ( + + + No Search Results Found + + + ) : ( + `${item.type}-${index}`} + /> + )} ); diff --git a/apps/expo/src/components/search/SearchField.tsx b/apps/expo/src/components/search/SearchField.tsx index 6acb5da..da6c27d 100644 --- a/apps/expo/src/components/search/SearchField.tsx +++ b/apps/expo/src/components/search/SearchField.tsx @@ -1,4 +1,4 @@ -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"; @@ -6,7 +6,6 @@ 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 = ({ @@ -24,11 +24,13 @@ export const SearchField: FC = ({ 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,7 +61,7 @@ export const SearchField: FC = ({ }) .map(([category]) => ({ indexName: category, - query: debouncedQuery, + query: query, })); const algoliaQueriesWithUserFilter = { @@ -67,21 +69,18 @@ export const SearchField: FC = ({ 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 ( @@ -102,6 +101,7 @@ export const SearchField: FC = ({ onChangeText={onChange} value={searchString} placeholder={"Search"} + onSubmitEditing={handleSearchSubmit} lightTheme={true} containerStyle={{ backgroundColor: "transparent", @@ -144,6 +144,8 @@ export const SearchField: FC = ({ } selectedCategories={selectedCategories} toggleCategory={toggleCategory} + fixedTypeFilter={currentViewAllScreen} + isLoading={isLoading} /> ) : ( diff --git a/apps/expo/src/components/view-all-display/collections/ViewAllCollectionsDisplay.tsx b/apps/expo/src/components/view-all-display/collections/ViewAllCollectionsDisplay.tsx index 08e3dcf..afd4733 100644 --- 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) => { flex: 1, }} > - + { width: width, }} > - + = (props) => { width: width, }} > - + {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 index 6bd9734..2ad2948 100644 --- 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) => { width: width, }} > - +