Add initialSearchTerm prop (#32)

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
 

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)

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
 	};
 

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 ?? ''
 	};
 }
 

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'
 	}
 };