refactor(hooks): rewrite useLocalStorage hook

* return a tuple instead of an object
* add a validator function as parameter (if the stored value
is manually changed, it is not safe to cast its type)
* add tests

1 files changed, 38 insertions, 0 deletions

diff --git a/src/utils/hooks/use-local-storage/use-local-storage.ts b/src/utils/hooks/use-local-storage/use-local-storage.ts
new file mode 100644
index 0000000..47b98ff
--- /dev/null
+++ b/src/utils/hooks/use-local-storage/use-local-storage.ts
@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import { LocalStorage } from '../../../services/local-storage';
+import type { Validator } from '../../../types';
+
+const getInitialValueOrFallback = <T>(
+  key: string,
+  fallbackValue: T,
+  validator: Validator<T>
+) => {
+  if (typeof window === 'undefined') return fallbackValue;
+  const storedValue = LocalStorage.get(key);
+
+  return validator(storedValue) ? storedValue : fallbackValue;
+};
+
+/**
+ * Use the local storage.
+ *
+ * @param {string} key - The storage local key.
+ * @param {T} fallbackValue - A fallback value if local storage is empty.
+ * @param {Validator<T>} validator - A function to validate the stored value.
+ * @returns A tuple with the value and a setter.
+ */
+export const useLocalStorage = <T>(
+  key: string,
+  fallbackValue: T,
+  validator: Validator<T>
+) => {
+  const [value, setValue] = useState(
+    getInitialValueOrFallback(key, fallbackValue, validator)
+  );
+
+  useEffect(() => {
+    LocalStorage.set(key, value);
+  }, [key, value]);
+
+  return [value, setValue] as const;
+};