Run linter

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

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 (

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> {

src/components/PickerMain.tsx

@@ -3,19 +3,22 @@ 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 {
 	const settings = useContext(SettingsContext);
 
 	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>
 	);

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>

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

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} />
 					))}
 				</>

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}
+		/>
 	);
 }
 

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

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>

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

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}
+		/>
 	);
 }