fix: useLocalStorage

zextras · May 11, 2022 · 03bbc8e · 03bbc8e
1 parent 94c0e03
commit 03bbc8e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 20 deletions.
diff --git a/src/search/search-bar.tsx b/src/search/search-bar.tsx
@@ -52,6 +52,13 @@ const StyledContainer = styled(Container)`
 	}
 `;
 
+type SearchLocalStorage = Array<{
+	value: string;
+	label: string;
+	icon: string;
+	app: string;
+	id: string;
+}>;
 export const SearchBar: FC<SearchBarProps> = ({
 	activeRoute
 	// primaryAction,
@@ -60,7 +67,10 @@ export const SearchBar: FC<SearchBarProps> = ({
 	const [searchIsEnabled, setSearchIsEnabled] = useState(false);
 	const inputRef = useRef<HTMLInputElement>();
 	const [t] = useTranslation();
-	const [storedValue, setStoredValue] = useLocalStorage('search_suggestions', []);
+	const [storedValue, setStoredValue] = useLocalStorage<SearchLocalStorage>(
+		'search_suggestions',
+		[]
+	);
 	const [inputTyped, setInputTyped] = useState('');
 	const history = useHistory();
 	const { updateQuery, module, query, searchDisabled, setSearchDisabled } = useSearchStore();
@@ -187,21 +197,17 @@ export const SearchBar: FC<SearchBarProps> = ({
 				module &&
 				!find(appSuggestions, (v) => v.label === newQuery[newQuery.length - 1]?.label)
 			) {
-				setStoredValue(
-					(
-						value: Array<{ value: string; label: string; icon: string; app: string; id: string }>
-					) => [
-						...value,
-						{
-							value: newQuery[newQuery.length - 1].label,
-							label: newQuery[newQuery.length - 1].label,
-							icon: 'ClockOutline',
-							app: module,
-							id: `${value.length}`,
-							hasAvatar: false
-						}
-					]
-				);
+				setStoredValue((value) => [
+					...value,
+					{
+						value: newQuery[newQuery.length - 1].label,
+						label: newQuery[newQuery.length - 1].label,
+						icon: 'ClockOutline',
+						app: module,
+						id: `${value.length}`,
+						hasAvatar: false
+					}
+				]);
 			}
 			/** Commented for future reference */
 			// if (inputRef.current) {

diff --git a/src/shell/hooks.ts b/src/shell/hooks.ts
@@ -6,7 +6,7 @@
 
 /* eslint-disable react-hooks/rules-of-hooks */
 
-import { useContext, useState } from 'react';
+import { Dispatch, SetStateAction, useContext, useState } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -17,7 +17,7 @@ export function useIsMobile(): boolean {
 	return isMobile;
 }
 
-export function useLocalStorage<T>(key: string, initialValue: T): any {
+export function useLocalStorage<T>(key: string, initialValue: T): [T, Dispatch<SetStateAction<T>>] {
 	const [storedValue, setStoredValue] = useState<T>(() => {
 		try {
 			const item = window.localStorage.getItem(key);
@@ -36,5 +36,5 @@ export function useLocalStorage<T>(key: string, initialValue: T): any {
 			console.error(error);
 		}
 	};
-	return [storedValue, setValue] as const;
+	return [storedValue, setValue];
 }
diff --git a/types/exports/index.d.ts b/types/exports/index.d.ts
@@ -5,7 +5,7 @@
  */
 /* eslint-disable @typescript-eslint/ban-types */
 
-import { ComponentType, FC } from 'react';
+import { ComponentType, Dispatch, FC, SetStateAction } from 'react';
 import { LinkProps } from 'react-router-dom';
 import { Reducer, Store } from 'redux';
 import { TFunction } from 'react-i18next';
@@ -225,3 +225,5 @@ export const useFoldersAccordionByView: (
 
 // Run Search
 export const runSearch: (query: Array<QueryChip>, module: string) => void;
+
+export const useLocalStorage: <T>(key: string, initialValue: T) => [T, Dispatch<SetStateAction<T>>];