From 28476c7789e74f314ebbda6c392b5137ad8211b1 Mon Sep 17 00:00:00 2001 From: angelindepthios Date: Sun, 21 Nov 2021 19:29:05 +0700 Subject: [PATCH 1/2] feat: integrate search --- src/components/Forms/IconForm.tsx | 3 + .../ecosystem/BusinessEcosystemScreen.tsx | 1 + src/screens/ecosystem/EcosystemSearch.tsx | 156 ++++++++++-------- src/service/typesense/searchEcosystem.ts | 7 +- src/service/typesense/searchUser.ts | 7 +- 5 files changed, 101 insertions(+), 73 deletions(-) diff --git a/src/components/Forms/IconForm.tsx b/src/components/Forms/IconForm.tsx index cd247a2..f71d694 100644 --- a/src/components/Forms/IconForm.tsx +++ b/src/components/Forms/IconForm.tsx @@ -17,6 +17,7 @@ type props = { search?: boolean; errorMessage?: string; onPress?: () => void; + onEndEditing?: () => void; }; const IconForm = ({ @@ -30,6 +31,7 @@ const IconForm = ({ search = false, errorMessage, onPress, + onEndEditing, }: props) => { const [isFocused, setIsFocused] = useState(false); const [showPass, setShowPass] = useState(password); @@ -65,6 +67,7 @@ const IconForm = ({ setIsError(false); } } + onEndEditing(); }; let iconName: React.ComponentProps["name"]; diff --git a/src/screens/ecosystem/BusinessEcosystemScreen.tsx b/src/screens/ecosystem/BusinessEcosystemScreen.tsx index c9af76d..c47c6ba 100644 --- a/src/screens/ecosystem/BusinessEcosystemScreen.tsx +++ b/src/screens/ecosystem/BusinessEcosystemScreen.tsx @@ -16,6 +16,7 @@ import { getByCreated } from "../../service/firestore/ecosystem/getByCreated"; import { IEcosystem } from "../../types/firestore/ecosystems"; import { getCategories } from "../../service/firestore/categories"; import { ICategory } from "../../types/firestore"; +import { MaterialIcons } from "@expo/vector-icons"; const wait = (timeout) => { return new Promise((resolve) => setTimeout(resolve, timeout)); diff --git a/src/screens/ecosystem/EcosystemSearch.tsx b/src/screens/ecosystem/EcosystemSearch.tsx index b06cbe5..5067282 100644 --- a/src/screens/ecosystem/EcosystemSearch.tsx +++ b/src/screens/ecosystem/EcosystemSearch.tsx @@ -1,5 +1,5 @@ import { - ActivityIndicator, + // ActivityIndicator FlatList, ListRenderItem, StyleSheet, @@ -11,82 +11,104 @@ import IconForm from "../../components/Forms/IconForm"; import { EcosystemStackScreenProps } from "../../types/navigation"; import DropdownForm from "../../components/Forms/DropdownForm"; import { IDD } from "../../types/firestore"; -import { getCategoriesAsDdFormat } from "../../helpers/ddConverter"; import SmallButton from "../../components/button/SmallButton"; -import { getByCategory } from "../../service/firestore/ecosystem/getByCategory"; +// import { getByCategory } from "../../service/firestore/ecosystem/getByCategory"; import { IEcosystem } from "../../types/firestore/ecosystems"; import Spacer from "../../components/Spacer/Spacer"; import HorizontalCards from "../../components/Cards/HorizontalCards"; import { useNavigation } from "@react-navigation/core"; +import { useCategory } from "../../hooks/reduxHooks"; +import { getCategoriesAsDdFormat } from "../../helpers/ddConverter"; +import { searchEcosystem } from "../../service/typesense/searchEcosystem"; +import { getEnv } from "../../helpers/getEnv"; +import { SearchResponseHit } from "typesense/lib/Typesense/Documents"; const EcosystemSearch = ({ route }: EcosystemStackScreenProps<"Search">) => { const [search, setSearch] = useState(""); const [picked, setPicked] = useState(""); const [categories, setCategories] = useState([]); const { headerTitle } = route.params; - const [ecosystems, setEcosystems] = useState([]); - const [lastVisibleId, setLastVisibleId] = useState(""); - const [loadingMore, setLoadingmore] = useState(false); + const [ecosystems, setEcosystems] = useState[]>( + [] + ); + // const [lastVisibleId, setLastVisibleId] = useState(""); + // const [loadingMore, setLoadingmore] = useState(false); const nav = useNavigation(); + const categoriesHook = useCategory(); + useEffect(() => { - getCategoriesAsDdFormat().then((res) => setCategories(res)); + setCategories(() => getCategoriesAsDdFormat(categoriesHook)); }, []); - const filterByCategory = async () => { - if (ecosystems.length > 0) { - console.log("test"); - ecosystems.length = 0; - } - const result = await getByCategory(picked, lastVisibleId); - setEcosystems([...ecosystems, ...result]); - }; - const handleOnEndReach = () => { - // setLoadingmore(true); - const lastIndexItem = ecosystems[ecosystems.length - 1]; - const lastIndexItemId = lastIndexItem.id; - setLastVisibleId(lastIndexItemId); - if (ecosystems.length - 1 === 0) { - setLoadingmore(false); - } else { - setLoadingmore(true); - } - // setLoadingmore(true); + // const filterByCategory = async () => { + // if (ecosystems.length > 0) { + // ecosystems.length = 0; + // } + // const result = await getByCategory(picked); + // setEcosystems(result); + // }; + // const handleOnEndReach = () => { + // // setLoadingmore(true); + // const lastIndexItem = ecosystems[ecosystems.length - 1]; + // const lastIndexItemId = lastIndexItem.id; + // setLastVisibleId(lastIndexItemId); + // if (ecosystems.length - 1 === 0) { + // setLoadingmore(false); + // } else { + // setLoadingmore(true); + // } + // // setLoadingmore(true); + // }; + + const onSearch = async () => { + const res = await searchEcosystem({ + env: getEnv(), + searchParams: { q: search, query_by: "name" }, + }); + console.log(res.searchHits[0]); + setEcosystems(res.searchHits); }; - const renderItem: ListRenderItem = ({ item }) => ( - - - { - nav.navigate("Ecosystem", { - screen: "EcosystemDetails", - params: { - headerTitle: item.name, - id: item.id, - title: item.name, - desc: item.description, - image: item.pic, - member: item.followerCount.toString(), - rating: item.rating.toString(), - }, - }); + + const renderItem: ListRenderItem> = ({ + item: _item, + }) => { + const item = _item.document; + return ( + + + > + { + nav.navigate("Ecosystem", { + screen: "EcosystemDetails", + params: { + headerTitle: item.name, + id: item.id, + title: item.name, + desc: item.description, + image: item.pic, + member: item.followerCount.toString(), + rating: item.rating.toString(), + }, + }); + }} + rate={item.rating.toString()} + /> + - - ); - const ListFooterComponent = () => ( - - - - ); + ); + }; + // const ListFooterComponent = () => ( + // + // + // + // ); return ( ) => { setText={setSearch} placeholder={"Cari dengan kata kunci ini.."} search + onPress={onSearch} + onEndEditing={onSearch} /> )} {headerTitle === "Filter" && ( @@ -129,7 +153,7 @@ const EcosystemSearch = ({ route }: EcosystemStackScreenProps<"Search">) => { text="Filter" colors="primary" onPress={() => { - filterByCategory(); + // filterByCategory(); }} /> @@ -142,15 +166,9 @@ const EcosystemSearch = ({ route }: EcosystemStackScreenProps<"Search">) => { renderItem={renderItem} ItemSeparatorComponent={() => } ListHeaderComponent={() => } - ListFooterComponent={() => - !loadingMore ? ( - - ) : ( - - ) - } + ListFooterComponent={() => } onEndReachedThreshold={0.5} - onEndReached={handleOnEndReach} + // onEndReached={handleOnEndReach} /> )} diff --git a/src/service/typesense/searchEcosystem.ts b/src/service/typesense/searchEcosystem.ts index aae3b56..a033ffc 100644 --- a/src/service/typesense/searchEcosystem.ts +++ b/src/service/typesense/searchEcosystem.ts @@ -1,7 +1,10 @@ import axios, { AxiosResponse } from "axios"; import { CLOUD_FUNCTIONS_URL } from "../../constants/urls"; import { IEcosystem } from "../../types/firestore/ecosystems"; -import { SearchParams } from "typesense/lib/Typesense/Documents"; +import { + SearchParams, + SearchResponseHit, +} from "typesense/lib/Typesense/Documents"; export type searchEcosystemParams = { env: string; @@ -21,5 +24,5 @@ export const searchEcosystem = async (params: searchEcosystemParams) => { }; type searchResponse = { - searchHits: IEcosystem[]; + searchHits: SearchResponseHit[]; }; diff --git a/src/service/typesense/searchUser.ts b/src/service/typesense/searchUser.ts index 3a61bd2..baf25d9 100644 --- a/src/service/typesense/searchUser.ts +++ b/src/service/typesense/searchUser.ts @@ -1,7 +1,10 @@ import axios, { AxiosResponse } from "axios"; import { CLOUD_FUNCTIONS_URL } from "../../constants/urls"; import { IUser } from "../../types/firestore/User"; -import { SearchParams } from "typesense/lib/Typesense/Documents"; +import { + SearchParams, + SearchResponseHit, +} from "typesense/lib/Typesense/Documents"; export const searchUser = async ( searchParams: SearchParams> @@ -26,5 +29,5 @@ export const searchUser = async ( }; type searchResponse = { - searchHits: IUser[]; + searchHits: SearchResponseHit[]; }; -- GitLab From 82afebbf2446c7988b8cee29a06bb33e4ace5c59 Mon Sep 17 00:00:00 2001 From: Ahmad Izzudin Alifyandra Date: Sun, 21 Nov 2021 20:05:57 +0700 Subject: [PATCH 2/2] Fix unhandled undefined onEndEdit function call --- src/components/Forms/IconForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Forms/IconForm.tsx b/src/components/Forms/IconForm.tsx index f71d694..eaa08ae 100644 --- a/src/components/Forms/IconForm.tsx +++ b/src/components/Forms/IconForm.tsx @@ -67,7 +67,7 @@ const IconForm = ({ setIsError(false); } } - onEndEditing(); + onEndEditing && onEndEditing(); }; let iconName: React.ComponentProps["name"]; -- GitLab