From 95c5dff3f62c78af6370dc2e59470be91c24909c Mon Sep 17 00:00:00 2001
From: manoelneto <manoelquirinoneto@gmail.com>
Date: Sat, 21 Sep 2024 06:19:09 -0300
Subject: [PATCH] Add `initialSearchTerm` prop (#32)

---
 README.md                         |  1 +
 src/GifPickerReact.tsx            |  3 ++-
 src/hooks/usePickerContext.ts     |  4 ++--
 src/hooks/useSettings.ts          |  4 +++-
 src/stories/GifPicker.stories.tsx | 35 +++++++++++++++++++++++++------
 5 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 80dd12c..dd0e57a 100644
--- a/README.md
+++ b/README.md
@@ -67,6 +67,7 @@ The following props are accepted by the picker:
 | width | `number / string` | `350` | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string.
 | height | `number / string` | `450` | Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string.
 | categoryHeight | `number / string` | `100` | Controls the height of the home page reaction category. You can provide a number that will be treated as pixel size, or your any accepted css width as string.
+| initialSearchTerm | `string` | | Sets the initial search term when the picker is opened.
 
 ### TenorImage
 
diff --git a/src/GifPickerReact.tsx b/src/GifPickerReact.tsx
index 8523a19..fd85348 100644
--- a/src/GifPickerReact.tsx
+++ b/src/GifPickerReact.tsx
@@ -16,6 +16,7 @@ export interface GifPickerReactProps {
 	onGifClick?: (gif: TenorImage) => void;
 	autoFocusSearch?: boolean;
 	contentFilter?: ContentFilter;
+	initialSearchTerm?: string;
 	clientKey?: string;
 	country?: string;
 	locale?: string;
@@ -27,7 +28,7 @@ export interface GifPickerReactProps {
 
 function GifPickerReact(props: GifPickerReactProps): JSX.Element {
 	const settings = useSettings(props);
-	const pickerContext = usePickerContext();
+	const pickerContext = usePickerContext(settings.initialSearchTerm);
 	const tenorManager: TenorManager = useMemo(() => (
 		new TenorManager(settings.tenorApiKey, settings.clientKey,
 			settings.country, settings.locale, settings.contentFilter)
diff --git a/src/hooks/usePickerContext.ts b/src/hooks/usePickerContext.ts
index 52a1bdb..c690e80 100644
--- a/src/hooks/usePickerContext.ts
+++ b/src/hooks/usePickerContext.ts
@@ -5,9 +5,9 @@ export interface PickerContextType {
 	showTrending: boolean
 }
 
-function usePickerContext(): [PickerContextType, Dispatch<SetStateAction<PickerContextType>>] {
+function usePickerContext(initialSearchTerm: string): [PickerContextType, Dispatch<SetStateAction<PickerContextType>>] {
 	const DEFAULT_SETTINGS: PickerContextType = {
-		searchTerm: '',
+		searchTerm: initialSearchTerm,
 		showTrending: false
 	};
 
diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts
index eae8bb6..0d6d871 100644
--- a/src/hooks/useSettings.ts
+++ b/src/hooks/useSettings.ts
@@ -16,6 +16,7 @@ export type GifPickerSettings = {
 	width: string;
 	categoryHeight: string;
 	theme: Theme;
+	initialSearchTerm: string;
 }
 
 function useSettings(props: GifPickerReactProps): GifPickerSettings {
@@ -33,7 +34,8 @@ function useSettings(props: GifPickerReactProps): GifPickerSettings {
 		height: praseDimension(props.height ?? 450),
 		width: praseDimension(props.width ?? 350),
 		categoryHeight: praseDimension(props.categoryHeight ?? 100),
-		theme: getTheme(props.theme)
+		theme: getTheme(props.theme),
+		initialSearchTerm: props.initialSearchTerm ?? ''
 	};
 }
 
diff --git a/src/stories/GifPicker.stories.tsx b/src/stories/GifPicker.stories.tsx
index 4c426c5..e9415a9 100644
--- a/src/stories/GifPicker.stories.tsx
+++ b/src/stories/GifPicker.stories.tsx
@@ -1,11 +1,32 @@
+import React, { useEffect, useState } from 'react';
 import { expect } from '@storybook/jest';
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { userEvent, waitFor, within } from '@storybook/testing-library';
 import GifPicker, { Theme } from '..';
 
+const useDebounce = (value: string, delay: number) => {
+	const [ debouncedValue, setDebouncedValue ] = useState(value);
+
+	useEffect(() => {
+		const handler = setTimeout(() => {
+			setDebouncedValue(value);
+		}, delay);
+
+		return () => {
+			clearTimeout(handler);
+		};
+	}, [ value, delay ]);
+
+	return debouncedValue;
+};
+
 export default {
 	title: 'Library/GifPicker',
-	component: GifPicker,
+	component: (props: any) => {
+		const debouncedSearchTerm = useDebounce(props.initialSearchTerm, 500);
+
+		return <GifPicker key={debouncedSearchTerm} {...props} />;
+	},
 	argTypes: {
 		tenorApiKey: {
 			type: { name: 'string' }
@@ -36,6 +57,9 @@ export default {
 		},
 		categoryHeight: {
 			type: { name: 'string' }
+		},
+		initialSearchTerm: {
+			type: { name: 'string' }
 		}
 	}
 } as Meta<typeof GifPicker>;
@@ -56,10 +80,9 @@ export const DarkTheme = {
 
 export const Search = {
 	...Home,
-	play: async ({ canvasElement }: any) => {
-		const canvas = within(canvasElement);
-
-		await userEvent.type(canvas.getByTestId('gpr-search-input'), 'patrick bateman');
+	args: {
+		...Home.args,
+		initialSearchTerm: 'patrick bateman'
 	}
 };