From 5cbb48fc0940b1c6e880db91d0fbd6a11e5eb62e Mon Sep 17 00:00:00 2001
From: Bartosz Dokurno <bartusekcraft@gmail.com>
Date: Sat, 21 Sep 2024 12:22:00 +0200
Subject: [PATCH] Run linter

---
 src/GifPickerReact.tsx                        | 15 +++-
 src/components/Button.tsx                     |  6 +-
 src/components/ErrorBoundary.tsx              |  4 +-
 src/components/PickerMain.tsx                 |  9 +-
 src/components/body/Body.tsx                  | 42 +++++----
 src/components/body/Category.tsx              | 19 ++--
 src/components/body/CategoryList.tsx          | 23 +++--
 src/components/body/FeaturedCategory.tsx      |  8 +-
 src/components/body/GifList.tsx               | 27 +++---
 src/components/body/GifListPlaceholder.tsx    | 22 +++--
 src/components/body/ResultImage.tsx           | 13 ++-
 src/components/body/SearchResult.tsx          | 13 ++-
 src/components/body/TrendingCategory.tsx      | 18 ++--
 src/components/body/TrendingResult.tsx        | 13 +--
 src/components/header/ClearButton.tsx         |  7 +-
 src/components/header/Header.tsx              | 10 +--
 src/components/header/Search.tsx              |  8 +-
 src/components/header/Title.tsx               | 13 +--
 .../placeholders/CategoryPlaceholder.tsx      |  6 +-
 src/components/placeholders/Placeholder.tsx   |  7 +-
 .../placeholders/ResultPlaceholder.tsx        |  9 +-
 src/context/PickerContext.ts                  |  4 +-
 src/hooks/usePickerContext.ts                 | 14 +--
 src/hooks/useSettings.ts                      | 19 ++--
 src/index.tsx                                 |  6 +-
 src/managers/TenorManager.ts                  | 89 +++++++++----------
 src/stories/GifPicker.stories.tsx             | 55 ++++++------
 src/types/exposedTypes.ts                     | 38 ++++----
 28 files changed, 294 insertions(+), 223 deletions(-)

diff --git a/src/GifPickerReact.tsx b/src/GifPickerReact.tsx
index fd85348..ebeabe8 100644
--- a/src/GifPickerReact.tsx
+++ b/src/GifPickerReact.tsx
@@ -29,10 +29,17 @@ export interface GifPickerReactProps {
 function GifPickerReact(props: GifPickerReactProps): JSX.Element {
 	const settings = useSettings(props);
 	const pickerContext = usePickerContext(settings.initialSearchTerm);
-	const tenorManager: TenorManager = useMemo(() => (
-		new TenorManager(settings.tenorApiKey, settings.clientKey,
-			settings.country, settings.locale, settings.contentFilter)
-	), [ ]);
+	const tenorManager: TenorManager = useMemo(
+		() =>
+			new TenorManager(
+				settings.tenorApiKey,
+				settings.clientKey,
+				settings.country,
+				settings.locale,
+				settings.contentFilter,
+			),
+		[],
+	);
 
 	return (
 		<SettingsContext.Provider value={settings}>
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index f6ce154..e8ef148 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react';
 
-interface PropsProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {}
+interface PropsProps
+	extends React.DetailedHTMLProps<
+		React.ButtonHTMLAttributes<HTMLButtonElement>,
+		HTMLButtonElement
+	> {}
 
 function Button(props: PropsProps): JSX.Element {
 	return (
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index 51de0f1..aa2c958 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 
 export interface ErrorBoundaryProps {
-    children: React.ReactNode;
+	children: React.ReactNode;
 }
 
 export interface ErrorBoundaryState {
-    hasError: boolean;
+	hasError: boolean;
 }
 
 export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
diff --git a/src/components/PickerMain.tsx b/src/components/PickerMain.tsx
index 77ffbbd..fed61b6 100644
--- a/src/components/PickerMain.tsx
+++ b/src/components/PickerMain.tsx
@@ -3,7 +3,7 @@ import SettingsContext from '../context/SettingsContext';
 import { Theme } from '../types/exposedTypes';
 
 export interface PickerMainProps {
-    children: React.ReactNode;
+	children: React.ReactNode;
 }
 
 function PickerMain({ children }: PickerMainProps): JSX.Element {
@@ -11,11 +11,14 @@ function PickerMain({ children }: PickerMainProps): JSX.Element {
 
 	const style: React.CSSProperties = {
 		height: settings.height,
-		width: settings.width
+		width: settings.width,
 	};
 
 	return (
-		<aside className={`GifPickerReact gpr-main ${settings.theme === Theme.DARK ? ' gpr-dark-theme' : ''}`} style={style}>
+		<aside
+			className={`GifPickerReact gpr-main ${settings.theme === Theme.DARK ? ' gpr-dark-theme' : ''}`}
+			style={style}
+		>
 			{children}
 		</aside>
 	);
diff --git a/src/components/body/Body.tsx b/src/components/body/Body.tsx
index c4bd64e..0c4e1a8 100644
--- a/src/components/body/Body.tsx
+++ b/src/components/body/Body.tsx
@@ -19,10 +19,10 @@ export interface BodyProps {
 }
 
 function Body({ width }: BodyProps): JSX.Element {
-	const [ categories, setCategories ] = useState<TenorCategory[] | undefined>(undefined);
-	const [ trending, setTrending ] = useState<TenorImage | undefined>(undefined);
-	const [ pickerContext ] = useContext(PickerContext);
-	const [ columnsCount, setColumnsCount ] = useState(1);
+	const [categories, setCategories] = useState<TenorCategory[] | undefined>(undefined);
+	const [trending, setTrending] = useState<TenorImage | undefined>(undefined);
+	const [pickerContext] = useContext(PickerContext);
+	const [columnsCount, setColumnsCount] = useState(1);
 	const tenor = useContext(TenorContext);
 	const ref = useRef<HTMLDivElement>(null);
 
@@ -43,22 +43,34 @@ function Body({ width }: BodyProps): JSX.Element {
 	 */
 	useEffect(() => {
 		const width = ref.current ? ref.current.offsetWidth : 0;
-		let columns = Math.floor( width / MAX_COLUMN_WIDTH );
-		if(columns < 1) columns = 1;
+		let columns = Math.floor(width / MAX_COLUMN_WIDTH);
+		if (columns < 1) columns = 1;
 		setColumnsCount(columns);
-	}, [ ref.current, width ]);
+	}, [ref.current, width]);
 
 	return (
-		<div className='gpr-body' ref={ref}>
+		<div
+			className="gpr-body"
+			ref={ref}
+		>
 			{((): JSX.Element => {
-				if(pickerContext.showTrending) {
+				if (pickerContext.showTrending) {
 					return <TrendingResult columnsCount={columnsCount} />;
-				}
-				else if(pickerContext.searchTerm) {
-					return <SearchResult columnsCount={columnsCount} searchTerm={pickerContext.searchTerm} />;
-				}
-				else {
-					return <CategoryList columnsCount={columnsCount} categories={categories} trending={trending} />;
+				} else if (pickerContext.searchTerm) {
+					return (
+						<SearchResult
+							columnsCount={columnsCount}
+							searchTerm={pickerContext.searchTerm}
+						/>
+					);
+				} else {
+					return (
+						<CategoryList
+							columnsCount={columnsCount}
+							categories={categories}
+							trending={trending}
+						/>
+					);
 				}
 			})()}
 		</div>
diff --git a/src/components/body/Category.tsx b/src/components/body/Category.tsx
index e4c4354..4df4223 100644
--- a/src/components/body/Category.tsx
+++ b/src/components/body/Category.tsx
@@ -8,22 +8,23 @@ export interface CategoryProps {
 	onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
-function Category({ image, text, onClick}: CategoryProps): JSX.Element {
+function Category({ image, text, onClick }: CategoryProps): JSX.Element {
 	const settings = useContext(SettingsContext);
 
 	return (
 		<button
 			type="button"
-			className='gpr-btn gpr-category'
-			style={{height: settings.categoryHeight}}
-			data-testid='gpr-category'
+			className="gpr-btn gpr-category"
+			style={{ height: settings.categoryHeight }}
+			data-testid="gpr-category"
 			onClick={onClick}
 		>
-			<img src={image} loading="lazy"/>
-			<div className='gpr-category-overlay'>
-				<div className='gpr-category-name'>
-					{text}
-				</div>
+			<img
+				src={image}
+				loading="lazy"
+			/>
+			<div className="gpr-category-overlay">
+				<div className="gpr-category-name">{text}</div>
 			</div>
 		</button>
 	);
diff --git a/src/components/body/CategoryList.tsx b/src/components/body/CategoryList.tsx
index 459ca3f..a81a348 100644
--- a/src/components/body/CategoryList.tsx
+++ b/src/components/body/CategoryList.tsx
@@ -14,32 +14,39 @@ export interface CategoryListProps {
 
 function CategoryList({ categories, trending, columnsCount }: CategoryListProps): JSX.Element {
 	/**
-     * Make sure that last categories row is always full by removing
-     * excess categories so the total count is devisable by column count
-     */
+	 * Make sure that last categories row is always full by removing
+	 * excess categories so the total count is devisable by column count
+	 */
 	function getCleanedCategories() {
-		if(!categories) return undefined;
+		if (!categories) return undefined;
 
 		const SPECIAL_CATEGORIES_COUNT = 1; // Trending
 		const totalCategoriesCount = categories.length + SPECIAL_CATEGORIES_COUNT;
 		const excessCategoriesCount = totalCategoriesCount % columnsCount;
 
-		if(excessCategoriesCount == 0) return categories;
+		if (excessCategoriesCount == 0) return categories;
 		return categories?.slice(0, -excessCategoriesCount);
 	}
 
 	return (
-		<div className='gpr-category-list' style={{gridTemplateColumns: `repeat(${columnsCount}, 1fr)`}}>
+		<div
+			className="gpr-category-list"
+			style={{ gridTemplateColumns: `repeat(${columnsCount}, 1fr)` }}
+		>
 			{categories && trending ? (
 				<>
 					<TrendingCategory image={trending.url} />
 					{getCleanedCategories()?.map((cat, i) => (
-						<FeaturedCategory key={i} image={cat.image} name={cat.name} />
+						<FeaturedCategory
+							key={i}
+							image={cat.image}
+							name={cat.name}
+						/>
 					))}
 				</>
 			) : (
 				<>
-					{[ ...Array(10 * columnsCount) ].map((_, i) => (
+					{[...Array(10 * columnsCount)].map((_, i) => (
 						<CategoryPlaceholder key={i} />
 					))}
 				</>
diff --git a/src/components/body/FeaturedCategory.tsx b/src/components/body/FeaturedCategory.tsx
index 6f45420..cfe0789 100644
--- a/src/components/body/FeaturedCategory.tsx
+++ b/src/components/body/FeaturedCategory.tsx
@@ -8,7 +8,7 @@ export interface FeaturedCategory {
 }
 
 function FeaturedCategory({ image, name }: FeaturedCategory): JSX.Element {
-	const [ pickerContext, setPickerContext ] = useContext(PickerContext);
+	const [pickerContext, setPickerContext] = useContext(PickerContext);
 
 	function onClick(): void {
 		const contextCopy = Object.assign({}, pickerContext);
@@ -17,7 +17,11 @@ function FeaturedCategory({ image, name }: FeaturedCategory): JSX.Element {
 	}
 
 	return (
-		<Category image={image} text={name} onClick={onClick} />
+		<Category
+			image={image}
+			text={name}
+			onClick={onClick}
+		/>
 	);
 }
 
diff --git a/src/components/body/GifList.tsx b/src/components/body/GifList.tsx
index aee869d..9d40156 100644
--- a/src/components/body/GifList.tsx
+++ b/src/components/body/GifList.tsx
@@ -13,27 +13,34 @@ export interface GifListProps {
 }
 
 function GifList({ isLoading, result, searchTerm, columnsCount }: GifListProps): JSX.Element {
-	const columns = useMemo(() => generateColumns(result, columnsCount), [ result, columnsCount ]);
+	const columns = useMemo(() => generateColumns(result, columnsCount), [result, columnsCount]);
 	const isEmpty = !result || result.images.length <= 0;
 
-	if(isLoading) {
+	if (isLoading) {
 		return <GifListPlaceholder columnsCount={columnsCount} />;
 	}
 
-	if(isEmpty) {
+	if (isEmpty) {
 		return (
-			<div className='gpr-gif-list-no-result'>
+			<div className="gpr-gif-list-no-result">
 				<span>No GIFs found!</span>
 			</div>
 		);
 	}
 
 	return (
-		<div className='gpr-gif-list'>
+		<div className="gpr-gif-list">
 			{columns.map((col, i) => (
-				<div className='gpr-gif-list-column' key={i}>
+				<div
+					className="gpr-gif-list-column"
+					key={i}
+				>
 					{col.map((img) => (
-						<ResultImage key={img.id} image={img} searchTerm={searchTerm} />
+						<ResultImage
+							key={img.id}
+							image={img}
+							searchTerm={searchTerm}
+						/>
 					))}
 				</div>
 			))}
@@ -48,12 +55,12 @@ function GifList({ isLoading, result, searchTerm, columnsCount }: GifListProps):
  *
  * @returns array of columns (which are the arrays of TenorImage)
  */
-function generateColumns(result?: TenorResult, columnsCount = 2 ): TenorImage[][] {
-	if(!result) return [];
+function generateColumns(result?: TenorResult, columnsCount = 2): TenorImage[][] {
+	if (!result) return [];
 	const columns: TenorImage[][] = new Array(columnsCount).fill(null).map(() => []);
 	const columnsHeight = new Array(columnsCount).fill(0);
 
-	for(const img of result.images) {
+	for (const img of result.images) {
 		const aspectRatio = img.preview.height / img.preview.width;
 		// We want to put image of this loop in shortest column (smallest width)
 		const shortestColumnIndex = columnsHeight.indexOf(Math.min(...columnsHeight));
diff --git a/src/components/body/GifListPlaceholder.tsx b/src/components/body/GifListPlaceholder.tsx
index 83b737f..64b5384 100644
--- a/src/components/body/GifListPlaceholder.tsx
+++ b/src/components/body/GifListPlaceholder.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import ResultPlaceholder from '../placeholders/ResultPlaceholder';
 
 const PLACEHOLDER_HEIGHTS = [
-	[ 120, 100, 130, 175, 154, 110 ],
-	[ 150, 115, 135, 154, 145, 170 ],
-	[ 140, 125, 120, 150, 100, 125 ],
-	[ 130, 145, 175, 120, 135, 100 ]
+	[120, 100, 130, 175, 154, 110],
+	[150, 115, 135, 154, 145, 170],
+	[140, 125, 120, 150, 100, 125],
+	[130, 145, 175, 120, 135, 100],
 ];
 
 export interface GifListPlaceholderProps {
@@ -15,13 +15,17 @@ export interface GifListPlaceholderProps {
 
 function GifListPlaceholder({ columnsCount, showDelay = 70 }: GifListPlaceholderProps) {
 	return (
-		<div className='gpr-gif-list'>
-			{[ ...Array(columnsCount) ].map((_, i) => (
-				<div className='gpr-gif-list-column' key={i}>
+		<div className="gpr-gif-list">
+			{[...Array(columnsCount)].map((_, i) => (
+				<div
+					className="gpr-gif-list-column"
+					key={i}
+				>
 					{PLACEHOLDER_HEIGHTS[i % PLACEHOLDER_HEIGHTS.length].map((height, j) => (
 						<ResultPlaceholder
-							key={j} height={height}
-							showDelay={((j + 1) * showDelay * columnsCount) + showDelay * i}
+							key={j}
+							height={height}
+							showDelay={(j + 1) * showDelay * columnsCount + showDelay * i}
 						/>
 					))}
 				</div>
diff --git a/src/components/body/ResultImage.tsx b/src/components/body/ResultImage.tsx
index 9d66e9a..c5b07c9 100644
--- a/src/components/body/ResultImage.tsx
+++ b/src/components/body/ResultImage.tsx
@@ -6,7 +6,7 @@ import './ResultImage.css';
 
 export interface ResultImageProps {
 	image: TenorImage;
-	searchTerm?: string
+	searchTerm?: string;
 }
 
 function ResultImage({ image, searchTerm }: ResultImageProps): JSX.Element {
@@ -15,17 +15,22 @@ function ResultImage({ image, searchTerm }: ResultImageProps): JSX.Element {
 
 	function onClick(): void {
 		const func = settings.onGifClick;
-		if(func) func(image);
+		if (func) func(image);
 		tenor.registerShare(image, searchTerm);
 	}
 
 	return (
 		<button
 			type="button"
-			className='gpr-btn gpr-result-image'
+			className="gpr-btn gpr-result-image"
 			onClick={onClick}
 		>
-			<img src={image.preview.url} height={image.preview.height} width={image.preview.width} loading="lazy" />
+			<img
+				src={image.preview.url}
+				height={image.preview.height}
+				width={image.preview.width}
+				loading="lazy"
+			/>
 		</button>
 	);
 }
diff --git a/src/components/body/SearchResult.tsx b/src/components/body/SearchResult.tsx
index 8e841c2..f0dc8d1 100644
--- a/src/components/body/SearchResult.tsx
+++ b/src/components/body/SearchResult.tsx
@@ -9,8 +9,8 @@ export interface SearchResultProps {
 }
 
 function SearchResult({ searchTerm, columnsCount }: SearchResultProps) {
-	const [ searchResult, setSearchResult ] = useState<TenorResult>(null!);
-	const [ isLoading, setLoading ] = useState(true);
+	const [searchResult, setSearchResult] = useState<TenorResult>(null!);
+	const [isLoading, setLoading] = useState(true);
 	const tenor = useContext(TenorContext);
 
 	useEffect(() => {
@@ -22,10 +22,15 @@ function SearchResult({ searchTerm, columnsCount }: SearchResultProps) {
 		}
 		const debounce = setTimeout(() => search(), 800);
 		return (): void => clearTimeout(debounce);
-	}, [ searchTerm ]);
+	}, [searchTerm]);
 
 	return (
-		<GifList isLoading={isLoading} columnsCount={columnsCount} result={searchResult} searchTerm={searchTerm} />
+		<GifList
+			isLoading={isLoading}
+			columnsCount={columnsCount}
+			result={searchResult}
+			searchTerm={searchTerm}
+		/>
 	);
 }
 
diff --git a/src/components/body/TrendingCategory.tsx b/src/components/body/TrendingCategory.tsx
index 78fe741..3b56252 100644
--- a/src/components/body/TrendingCategory.tsx
+++ b/src/components/body/TrendingCategory.tsx
@@ -8,7 +8,7 @@ export interface FeaturedCategory {
 }
 
 function TrendingCategory({ image }: FeaturedCategory): JSX.Element {
-	const [ pickerContext, setPickerContext ] = useContext(PickerContext);
+	const [pickerContext, setPickerContext] = useContext(PickerContext);
 
 	function onClick(): void {
 		const contextCopy = Object.assign({}, pickerContext);
@@ -17,12 +17,16 @@ function TrendingCategory({ image }: FeaturedCategory): JSX.Element {
 	}
 
 	return (
-		<Category image={image} onClick={onClick} text={(
-			<div className='gpr-text-trending-category'>
-				<div className="gpr-icn-trending" />
-				<span>Trending GIFs</span>
-			</div>
-		)} />
+		<Category
+			image={image}
+			onClick={onClick}
+			text={
+				<div className="gpr-text-trending-category">
+					<div className="gpr-icn-trending" />
+					<span>Trending GIFs</span>
+				</div>
+			}
+		/>
 	);
 }
 
diff --git a/src/components/body/TrendingResult.tsx b/src/components/body/TrendingResult.tsx
index c37b888..50250c4 100644
--- a/src/components/body/TrendingResult.tsx
+++ b/src/components/body/TrendingResult.tsx
@@ -8,8 +8,8 @@ export interface TrendingResultProps {
 }
 
 function TrendingResult({ columnsCount }: TrendingResultProps) {
-	const [ trendingResult, setSearchResult ] = useState<TenorResult>(null!);
-	const [ isLoading, setLoading ] = useState(true);
+	const [trendingResult, setSearchResult] = useState<TenorResult>(null!);
+	const [isLoading, setLoading] = useState(true);
 
 	const tenor = useContext(TenorContext);
 
@@ -20,11 +20,14 @@ function TrendingResult({ columnsCount }: TrendingResultProps) {
 			setSearchResult(result);
 			setLoading(false);
 		})();
-
-	}, [ ]);
+	}, []);
 
 	return (
-		<GifList columnsCount={columnsCount} isLoading={isLoading} result={trendingResult} />
+		<GifList
+			columnsCount={columnsCount}
+			isLoading={isLoading}
+			result={trendingResult}
+		/>
 	);
 }
 
diff --git a/src/components/header/ClearButton.tsx b/src/components/header/ClearButton.tsx
index 37e5aa3..95b629c 100644
--- a/src/components/header/ClearButton.tsx
+++ b/src/components/header/ClearButton.tsx
@@ -3,12 +3,15 @@ import Button from '../Button';
 import './ClearButton.css';
 
 export interface ClearButtonProps {
-    onClick: React.MouseEventHandler<HTMLButtonElement>
+	onClick: React.MouseEventHandler<HTMLButtonElement>;
 }
 
 function ClearButton({ onClick }: ClearButtonProps) {
 	return (
-		<Button className="gpr-btn-clear-search" onClick={onClick}>
+		<Button
+			className="gpr-btn-clear-search"
+			onClick={onClick}
+		>
 			<div className="gpr-icn-clear-search" />
 		</Button>
 	);
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index eaa3948..45e49a9 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -5,15 +5,11 @@ import Search from './Search';
 import Title from './Title';
 
 function Header(): JSX.Element {
-	const [ pickerContext ] = useContext(PickerContext);
+	const [pickerContext] = useContext(PickerContext);
 
 	return (
-		<div className='gpr-header'>
-			{pickerContext.showTrending ? (
-				<Title>Trending GIFs</Title>
-			) : (
-				<Search />
-			)}
+		<div className="gpr-header">
+			{pickerContext.showTrending ? <Title>Trending GIFs</Title> : <Search />}
 		</div>
 	);
 }
diff --git a/src/components/header/Search.tsx b/src/components/header/Search.tsx
index e14d1cc..16a9a4f 100644
--- a/src/components/header/Search.tsx
+++ b/src/components/header/Search.tsx
@@ -5,7 +5,7 @@ import ClearButton from './ClearButton';
 import './Search.css';
 
 function Search(): JSX.Element {
-	const [ pickerContext, setPickerContext ] = useContext(PickerContext);
+	const [pickerContext, setPickerContext] = useContext(PickerContext);
 	const settings = useContext(SettingsContext);
 
 	function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
@@ -21,7 +21,7 @@ function Search(): JSX.Element {
 	}
 
 	return (
-		<div className='gpr-search-container'>
+		<div className="gpr-search-container">
 			<input
 				autoFocus={settings.autoFocusSearch}
 				aria-label={'Search Tenor'}
@@ -35,9 +35,7 @@ function Search(): JSX.Element {
 				onChange={onChange}
 			/>
 			<div className="gpr-icn-search" />
-			{pickerContext.searchTerm.length > 0 && (
-				<ClearButton onClick={onClear} />
-			)}
+			{pickerContext.searchTerm.length > 0 && <ClearButton onClick={onClear} />}
 		</div>
 	);
 }
diff --git a/src/components/header/Title.tsx b/src/components/header/Title.tsx
index 022b338..778b4b0 100644
--- a/src/components/header/Title.tsx
+++ b/src/components/header/Title.tsx
@@ -8,7 +8,7 @@ export interface TitleProps {
 }
 
 function Title({ children }: TitleProps): JSX.Element {
-	const [ pickerContext, setPickerContext ] = useContext(PickerContext);
+	const [pickerContext, setPickerContext] = useContext(PickerContext);
 
 	function onClear(): void {
 		const contextCopy = Object.assign({}, pickerContext);
@@ -17,12 +17,13 @@ function Title({ children }: TitleProps): JSX.Element {
 	}
 
 	return (
-		<div className='gpr-title-container'>
-			<div className='gpr-title'>
-				{children}
-			</div>
+		<div className="gpr-title-container">
+			<div className="gpr-title">{children}</div>
 
-			<Button className={'gpr-btn-clear-search'} onClick={onClear}>
+			<Button
+				className={'gpr-btn-clear-search'}
+				onClick={onClear}
+			>
 				<div className="gpr-icn-clear-search" />
 			</Button>
 		</div>
diff --git a/src/components/placeholders/CategoryPlaceholder.tsx b/src/components/placeholders/CategoryPlaceholder.tsx
index 1b41d3d..6df1f5f 100644
--- a/src/components/placeholders/CategoryPlaceholder.tsx
+++ b/src/components/placeholders/CategoryPlaceholder.tsx
@@ -7,7 +7,11 @@ function CategoryPlaceholder() {
 	const settings = useContext(SettingsContext);
 
 	return (
-		<Placeholder className="gpr-category-placeholder" height={settings.categoryHeight} width='100%' />
+		<Placeholder
+			className="gpr-category-placeholder"
+			height={settings.categoryHeight}
+			width="100%"
+		/>
 	);
 }
 
diff --git a/src/components/placeholders/Placeholder.tsx b/src/components/placeholders/Placeholder.tsx
index c15e5b3..5cfcbd4 100644
--- a/src/components/placeholders/Placeholder.tsx
+++ b/src/components/placeholders/Placeholder.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import './Placeholder.css';
 
-export interface PlaceholderProps  extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>{
-    width?: number | string;
-    height?: number | string;
+export interface PlaceholderProps
+	extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+	width?: number | string;
+	height?: number | string;
 	className?: string;
 }
 
diff --git a/src/components/placeholders/ResultPlaceholder.tsx b/src/components/placeholders/ResultPlaceholder.tsx
index ccf8493..9994f2b 100644
--- a/src/components/placeholders/ResultPlaceholder.tsx
+++ b/src/components/placeholders/ResultPlaceholder.tsx
@@ -8,21 +8,22 @@ export interface ResultPlaceholderProps {
 }
 
 function ResultPlaceholder({ height, showDelay }: ResultPlaceholderProps) {
-	const [ show, setShow ] = useState(false);
+	const [show, setShow] = useState(false);
 
 	useEffect(() => {
-		if(show) return;
+		if (show) return;
 		function showElement() {
 			setShow(true);
 		}
 		const timeout = setTimeout(showElement, showDelay);
 		return () => clearTimeout(timeout);
-	}, [ ]);
+	}, []);
 
 	return (
 		<Placeholder
 			className="gpr-result-placeholder"
-			height={height} width='100%'
+			height={height}
+			width="100%"
 			style={{ opacity: show ? 1 : 0 }}
 		/>
 	);
diff --git a/src/context/PickerContext.ts b/src/context/PickerContext.ts
index 8555b2a..530e2d3 100644
--- a/src/context/PickerContext.ts
+++ b/src/context/PickerContext.ts
@@ -1,6 +1,8 @@
 import React, { Dispatch, SetStateAction } from 'react';
 import { PickerContextType } from '../hooks/usePickerContext';
 
-const PickerContext = React.createContext<[PickerContextType, Dispatch<SetStateAction<PickerContextType>>]>(null!);
+const PickerContext = React.createContext<
+	[PickerContextType, Dispatch<SetStateAction<PickerContextType>>]
+>(null!);
 
 export default PickerContext;
diff --git a/src/hooks/usePickerContext.ts b/src/hooks/usePickerContext.ts
index c690e80..1538377 100644
--- a/src/hooks/usePickerContext.ts
+++ b/src/hooks/usePickerContext.ts
@@ -1,19 +1,21 @@
 import { Dispatch, SetStateAction, useState } from 'react';
 
 export interface PickerContextType {
-    searchTerm: string;
-	showTrending: boolean
+	searchTerm: string;
+	showTrending: boolean;
 }
 
-function usePickerContext(initialSearchTerm: string): [PickerContextType, Dispatch<SetStateAction<PickerContextType>>] {
+function usePickerContext(
+	initialSearchTerm: string,
+): [PickerContextType, Dispatch<SetStateAction<PickerContextType>>] {
 	const DEFAULT_SETTINGS: PickerContextType = {
 		searchTerm: initialSearchTerm,
-		showTrending: false
+		showTrending: false,
 	};
 
-	const [ pickerContext, setPickerContext ] = useState<PickerContextType>(DEFAULT_SETTINGS);
+	const [pickerContext, setPickerContext] = useState<PickerContextType>(DEFAULT_SETTINGS);
 
-	return [ pickerContext, setPickerContext ];
+	return [pickerContext, setPickerContext];
 }
 
 export default usePickerContext;
diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts
index 0d6d871..1ebb370 100644
--- a/src/hooks/useSettings.ts
+++ b/src/hooks/useSettings.ts
@@ -5,7 +5,7 @@ import { ContentFilter, TenorImage, Theme } from '../types/exposedTypes';
  * This is a parsed version of props with filled defaults
  */
 export type GifPickerSettings = {
-    tenorApiKey: string;
+	tenorApiKey: string;
 	onGifClick?: (gif: TenorImage) => void;
 	autoFocusSearch: boolean;
 	clientKey: string;
@@ -17,10 +17,10 @@ export type GifPickerSettings = {
 	categoryHeight: string;
 	theme: Theme;
 	initialSearchTerm: string;
-}
+};
 
 function useSettings(props: GifPickerReactProps): GifPickerSettings {
-	if(!props.tenorApiKey) {
+	if (!props.tenorApiKey) {
 		throw new Error('tenorApiKey is a required prop that is missing');
 	}
 	return {
@@ -35,7 +35,7 @@ function useSettings(props: GifPickerReactProps): GifPickerSettings {
 		width: praseDimension(props.width ?? 350),
 		categoryHeight: praseDimension(props.categoryHeight ?? 100),
 		theme: getTheme(props.theme),
-		initialSearchTerm: props.initialSearchTerm ?? ''
+		initialSearchTerm: props.initialSearchTerm ?? '',
 	};
 }
 
@@ -46,13 +46,11 @@ function useSettings(props: GifPickerReactProps): GifPickerSettings {
  * @returns css size string
  */
 function praseDimension(dimension: string | number): string {
-	if(typeof dimension == 'number') {
+	if (typeof dimension == 'number') {
 		return `${dimension}px`;
-	}
-	else if(typeof dimension == 'string') {
+	} else if (typeof dimension == 'string') {
 		return dimension;
-	}
-	else {
+	} else {
 		throw new TypeError('Invalid dimension provided');
 	}
 }
@@ -66,8 +64,7 @@ function praseDimension(dimension: string | number): string {
 function getTheme(theme?: Theme): Theme {
 	if (theme === Theme.AUTO) {
 		return isSystemDarkTheme() ? Theme.DARK : Theme.LIGHT;
-	}
-	else {
+	} else {
 		return theme ?? Theme.LIGHT;
 	}
 }
diff --git a/src/index.tsx b/src/index.tsx
index 1ad6d4e..ff80274 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,11 +2,9 @@ import React from 'react';
 import ErrorBoundary from './components/ErrorBoundary';
 import GifPickerReact, { GifPickerReactProps } from './GifPickerReact';
 
-export {
-	ContentFilter, TenorImage, Theme
-} from './types/exposedTypes';
+export { ContentFilter, TenorImage, Theme } from './types/exposedTypes';
 
-export interface GifPickerProps extends GifPickerReactProps { }
+export interface GifPickerProps extends GifPickerReactProps {}
 
 function GifPicker(props: GifPickerProps): JSX.Element {
 	return (
diff --git a/src/managers/TenorManager.ts b/src/managers/TenorManager.ts
index c0764e7..a337158 100644
--- a/src/managers/TenorManager.ts
+++ b/src/managers/TenorManager.ts
@@ -25,7 +25,7 @@ class TenorManager {
 		clientKey: string,
 		country: string,
 		locale: string,
-		contentFilter: ContentFilter
+		contentFilter: ContentFilter,
 	) {
 		this.apiKey = apiKey;
 		this.clientKey = clientKey;
@@ -34,26 +34,26 @@ class TenorManager {
 		this.contentFilter = contentFilter;
 	}
 
-	private async callApi(endpoint: string, params?: {[key: string]: any}): Promise<Response> {
+	private async callApi(endpoint: string, params?: { [key: string]: any }): Promise<Response> {
 		const urlParams = new URLSearchParams({
-			'key': this.apiKey,
-			'client_key': this.clientKey,
-			'contentfilter': this.contentFilter,
-			'media_filter': MEDIA_FILTER,
-			'locale': this.locale,
-			'country': this.country,
-			...params
+			key: this.apiKey,
+			client_key: this.clientKey,
+			contentfilter: this.contentFilter,
+			media_filter: MEDIA_FILTER,
+			locale: this.locale,
+			country: this.country,
+			...params,
 		});
 		const url = BASE_URL + endpoint + '?' + urlParams;
 		return fetch(url)
 			.then((res) => {
-				if(!res.ok) {
+				if (!res.ok) {
 					console.error(res);
 					console.error('[gif-picker-react] Failed to fetch data from Tenor API');
 				}
 				return res;
 			})
-			.then(res => res.json())
+			.then((res) => res.json())
 			.catch((error) => {
 				console.error(error);
 				console.error('[gif-picker-react] Failed to fetch data from Tenor API');
@@ -66,7 +66,7 @@ class TenorManager {
 
 		return {
 			id: img.id,
-			tenorUrl: img['itemurl'] ,
+			tenorUrl: img['itemurl'],
 			shortTenorUrl: img.url,
 			description: img['content_description'],
 			createdAt: new Date(img.created * 1000),
@@ -77,58 +77,55 @@ class TenorManager {
 			preview: {
 				url: preview.url,
 				width: preview.dims[0],
-				height: preview.dims[1]
-			}
+				height: preview.dims[1],
+			},
 		};
 	}
 
 	public async categories(): Promise<TenorCategory[]> {
 		return this.callApi('categories', {
-			type: 'featured'
-		})
-			.then((data: any) => {
-				const tags = data.tags;
-				return tags.map((tag: any) => ({
-					name: tag['searchterm'],
-					image: tag.image
-				}));
-			});
+			type: 'featured',
+		}).then((data: any) => {
+			const tags = data.tags;
+			return tags.map((tag: any) => ({
+				name: tag['searchterm'],
+				image: tag.image,
+			}));
+		});
 	}
 
 	public async search(term: string, limit = 50): Promise<TenorResult> {
 		return this.callApi('search', {
 			q: term,
-			'ar_range': 'all',
-			limit
-		})
-			.then((data: any) => {
-				const results = data.results;
-				const images = results.map(this.praseResult);
-				return {
-					next: data.next,
-					images: images
-				};
-			});
+			ar_range: 'all',
+			limit,
+		}).then((data: any) => {
+			const results = data.results;
+			const images = results.map(this.praseResult);
+			return {
+				next: data.next,
+				images: images,
+			};
+		});
 	}
 
 	public async trending(limit = 50): Promise<TenorResult> {
 		return this.callApi('featured', {
-			'ar_range': 'all',
-			limit
-		})
-			.then((data: any) => {
-				const results = data.results;
-				const images = results.map(this.praseResult);
-				return {
-					next: data.next,
-					images: images
-				};
-			});
+			ar_range: 'all',
+			limit,
+		}).then((data: any) => {
+			const results = data.results;
+			const images = results.map(this.praseResult);
+			return {
+				next: data.next,
+				images: images,
+			};
+		});
 	}
 
 	public async registerShare(image: TenorImage, searchTerm?: string): Promise<void> {
 		const params: any = { id: image.id };
-		if(searchTerm) params['q'] = searchTerm;
+		if (searchTerm) params['q'] = searchTerm;
 		await this.callApi('registershare', params);
 		return;
 	}
diff --git a/src/stories/GifPicker.stories.tsx b/src/stories/GifPicker.stories.tsx
index e9415a9..3fc8391 100644
--- a/src/stories/GifPicker.stories.tsx
+++ b/src/stories/GifPicker.stories.tsx
@@ -5,7 +5,7 @@ import { userEvent, waitFor, within } from '@storybook/testing-library';
 import GifPicker, { Theme } from '..';
 
 const useDebounce = (value: string, delay: number) => {
-	const [ debouncedValue, setDebouncedValue ] = useState(value);
+	const [debouncedValue, setDebouncedValue] = useState(value);
 
 	useEffect(() => {
 		const handler = setTimeout(() => {
@@ -15,7 +15,7 @@ const useDebounce = (value: string, delay: number) => {
 		return () => {
 			clearTimeout(handler);
 		};
-	}, [ value, delay ]);
+	}, [value, delay]);
 
 	return debouncedValue;
 };
@@ -25,65 +25,70 @@ export default {
 	component: (props: any) => {
 		const debouncedSearchTerm = useDebounce(props.initialSearchTerm, 500);
 
-		return <GifPicker key={debouncedSearchTerm} {...props} />;
+		return (
+			<GifPicker
+				key={debouncedSearchTerm}
+				{...props}
+			/>
+		);
 	},
 	argTypes: {
 		tenorApiKey: {
-			type: { name: 'string' }
+			type: { name: 'string' },
 		},
 		onGifClick: {
-			action: 'GIF selected'
+			action: 'GIF selected',
 		},
 		theme: {
-			options: [ 'dark', 'light', 'auto' ],
+			options: ['dark', 'light', 'auto'],
 			control: {
-				type: 'radio'
-			}
+				type: 'radio',
+			},
 		},
 		clientKey: {
-			type: { name: 'string' }
+			type: { name: 'string' },
 		},
 		locale: {
-			type: { name: 'string' }
+			type: { name: 'string' },
 		},
 		country: {
-			type: { name: 'string' }
+			type: { name: 'string' },
 		},
 		width: {
-			type: { name: 'string' }
+			type: { name: 'string' },
 		},
 		height: {
-			type: { name: 'string' }
+			type: { name: 'string' },
 		},
 		categoryHeight: {
-			type: { name: 'string' }
+			type: { name: 'string' },
 		},
 		initialSearchTerm: {
-			type: { name: 'string' }
-		}
-	}
+			type: { name: 'string' },
+		},
+	},
 } as Meta<typeof GifPicker>;
 
 export const Home = {
 	args: {
-		tenorApiKey: process.env.STORYBOOK_TENOR_TOKEN
-	}
+		tenorApiKey: process.env.STORYBOOK_TENOR_TOKEN,
+	},
 };
 
 export const DarkTheme = {
 	...Home,
 	args: {
 		...Home.args,
-		theme: Theme.DARK
-	}
+		theme: Theme.DARK,
+	},
 };
 
 export const Search = {
 	...Home,
 	args: {
 		...Home.args,
-		initialSearchTerm: 'patrick bateman'
-	}
+		initialSearchTerm: 'patrick bateman',
+	},
 };
 
 export const HomeCategory = {
@@ -93,7 +98,7 @@ export const HomeCategory = {
 
 		await waitFor(() => expect(canvas.getAllByTestId('gpr-category')[0]).toBeInTheDocument());
 		await userEvent.click(canvas.getAllByTestId('gpr-category')[1]);
-	}
+	},
 };
 
 export const Trending = {
@@ -103,5 +108,5 @@ export const Trending = {
 
 		await waitFor(() => expect(canvas.getAllByTestId('gpr-category')[0]).toBeInTheDocument());
 		await userEvent.click(canvas.getAllByTestId('gpr-category')[0]);
-	}
+	},
 };
diff --git a/src/types/exposedTypes.ts b/src/types/exposedTypes.ts
index 4dfeab2..3d513e8 100644
--- a/src/types/exposedTypes.ts
+++ b/src/types/exposedTypes.ts
@@ -1,30 +1,30 @@
 export enum ContentFilter {
-    HIGH = 'high',
-    MEDIUM = 'medium',
-    LOW = 'low',
-    OFF = 'off'
+	HIGH = 'high',
+	MEDIUM = 'medium',
+	LOW = 'low',
+	OFF = 'off',
 }
 export enum Theme {
-    LIGHT = 'light',
-    DARK = 'dark',
-    AUTO = 'auto'
+	LIGHT = 'light',
+	DARK = 'dark',
+	AUTO = 'auto',
 }
 
 export interface TenorImage {
 	id: string;
-    tenorUrl: string;
-    shortTenorUrl: string;
-    description: string;
-    createdAt: Date;
-    tags: string[];
-    url: string;
-    height: number;
-    width: number;
-    preview: TenorImagePreview;
+	tenorUrl: string;
+	shortTenorUrl: string;
+	description: string;
+	createdAt: Date;
+	tags: string[];
+	url: string;
+	height: number;
+	width: number;
+	preview: TenorImagePreview;
 }
 
 export interface TenorImagePreview {
-    url: string;
-    height: number;
-    width: number;
+	url: string;
+	height: number;
+	width: number;
 }