Feature/addsearchpage (#85)

* Added a searchbar view with a debounce * Added SearchBar with suggestions handled * Front: Fix style of search suggestions * added multiple types of suggestions and fixed image rendered * Search bar revamped done * removed unused files Co-authored-by: Arthi-chaud <arthur.jamet@gmail.com>
2022-10-25 18:36:44 +01:00
parent 30d3be72b2
commit 284da8b8c7
8 changed files with 262 additions and 12 deletions
@@ -0,0 +1,150 @@
+import {
+	Input,
+	Column,
+	Row,
+	Text,
+	Pressable,
+	HStack,
+	VStack,
+	Image,
+	Icon,
+	Square,
+} from "native-base";
+import React from "react";
+import { Ionicons, FontAwesome } from "@expo/vector-icons";
+
+export enum SuggestionType {
+	TEXT,
+	ILLUSTRATED,
+}
+
+export type SuggestionList = {
+	type: SuggestionType;
+	data: SuggestionProps | IllustratedSuggestionProps;
+}[];
+
+export interface SearchBarProps {
+	onTextChange: (text: string) => void;
+	onTextSubmit: (text: string) => void;
+	suggestions: SuggestionList;
+}
+export interface IllustratedSuggestionProps {
+	text: string;
+	subtext: string;
+	imageSrc: string;
+	onPress: () => void;
+}
+
+export interface SuggestionProps {
+	text: string;
+	onPress: () => void;
+}
+
+// debounce function
+const debounce = (func: any, delay: number) => {
+	let inDebounce: any;
+	return function (this: any) {
+		const context = this;
+		const args = arguments;
+		clearTimeout(inDebounce);
+		inDebounce = setTimeout(() => func.apply(context, args), delay);
+	};
+};
+
+const IllustratedSuggestion = ({
+	text,
+	subtext,
+	imageSrc,
+	onPress,
+}: IllustratedSuggestionProps) => {
+	return (
+		<Pressable
+			onPress={onPress}
+			margin={2}
+			padding={2}
+			bg={"white"}
+			_hover={{
+				bg: "primary.200",
+			}}
+			_pressed={{
+				bg: "primary.300",
+			}}
+		>
+			<HStack alignItems="center" space={4}>
+				<Square size={"sm"}>
+					<Image
+						source={{ uri: imageSrc }}
+						alt="Alternate Text"
+						size="xs"
+						rounded="lg"
+					/>
+				</Square>
+				<VStack alignItems="flex-start">
+					<Text fontSize="md">{text}</Text>
+					<Text fontSize="sm" color="gray.500">
+						{subtext}
+					</Text>
+				</VStack>
+			</HStack>
+		</Pressable>
+	);
+};
+
+const TextSuggestion = ({ text, onPress }: SuggestionProps) => {
+	return (
+		<Pressable
+			onPress={onPress}
+			margin={2}
+			padding={2}
+			bg={"white"}
+			_hover={{
+				bg: "primary.200",
+			}}
+			_pressed={{
+				bg: "primary.300",
+			}}
+		>
+			<Row alignItems="center" space={4}>
+				<Square size={"sm"}>
+					<Icon size={"md"} as={Ionicons} name="search" />
+				</Square>
+				<Text fontSize="md">{text}</Text>
+			</Row>
+		</Pressable>
+	);
+};
+
+// render the suggestions based on the type
+const SuggestionRenderer = (suggestions: SuggestionList) => {
+	const suggestionRenderers = {
+		[SuggestionType.TEXT]: TextSuggestion,
+		[SuggestionType.ILLUSTRATED]: IllustratedSuggestion,
+	};
+	return suggestions.map((suggestion, index) => {
+		const SuggestionComponent = suggestionRenderers[suggestion.type];
+		return <SuggestionComponent {...suggestion.data} key={index} />;
+	});
+};
+
+const SearchBar = ({
+	onTextChange,
+	onTextSubmit,
+	suggestions,
+}: SearchBarProps) => {
+	const debouncedOnTextChange = React.useRef(
+		debounce((t: string) => onTextChange(t), 70)
+	).current;
+	return (
+		<>
+			<Input
+				placeholder="Search"
+				type="text"
+				onChangeText={debouncedOnTextChange}
+				onSubmitEditing={(event) => onTextSubmit(event.nativeEvent.text)}
+			/>
+			<Column>{SuggestionRenderer(suggestions)}</Column>
+		</>
+	);
+};
+
+export default SearchBar;