From a7899d8a4ac7b2863a3a3e9deb9a6d9c35c4c7b3 Mon Sep 17 00:00:00 2001
From: Mathis <avnyr@yidhra.fr>
Date: Wed, 12 Jun 2024 09:47:56 +0200
Subject: [PATCH] feat(services): refactor localStorage service

The updated code refactors the `localStorage.ts` service. The refactoring introduces typescript syntax on the import statement, adds a safer use of localStorage when window is undefined, and enhances readability of the code by modifying the function signature to multiple lines. Additionally, it removes unnecessary lines for cleaner code structure.
---
 src/services/localStorage.ts | 54 +++++++++++++++++++-----------------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/services/localStorage.ts b/src/services/localStorage.ts
index e53b358..0b6658b 100644
--- a/src/services/localStorage.ts
+++ b/src/services/localStorage.ts
@@ -1,6 +1,9 @@
-'use client'
+"use client";
 
-import React, {useEffect, useRef, useState} from "react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+
+const localStorage = typeof window !== "undefined" ? window.localStorage : null;
 
 /**
  * A custom React hook that allows you to store and retrieve data in the browser's localStorage.
@@ -9,34 +12,33 @@ import React, {useEffect, useRef, useState} from "react";
  * @param {T} initial - The initial value for the stored data.
  * @returns {[T, React.Dispatch<React.SetStateAction<T>>]} - An array containing the stored value and a function to update the stored value.
  */
-export function useLocalStorage<T>(key: string, initial: T): [T, React.Dispatch<React.SetStateAction<T>>] {
+export function useLocalStorage<T>(
+	key: string,
+	initial: T,
+): [T, React.Dispatch<React.SetStateAction<T>>] {
 	const readValue = () => {
-		const item = typeof window !== 'undefined' ? window.localStorage.getItem(key) : null
-
+		const item = localStorage?.getItem(key);
 		if (item) {
 			try {
-				return JSON.parse(item)
-			} catch(error) {
-				console.warn(`Error reading localStorage key “${key}”:`, error)
+				return JSON.parse(item);
+			} catch (error) {
+				console.warn(`Error reading localStorage key “${key}”:`, error);
 			}
 		}
+		return initial;
+	};
 
-		return initial
-	}
-
-	const [storedValue, setStoredValue] = useState<T>(readValue)
+	const [storedValue, setStoredValue] = useState<T>(readValue);
 
 	useEffect(() => {
 		try {
-			typeof window !== 'undefined' && window.localStorage.setItem(key, JSON.stringify(storedValue))
+			localStorage?.setItem(key, JSON.stringify(storedValue));
 		} catch (error) {
-			console.warn(`Error setting localStorage key “${key}”:`, error)
+			console.warn(`Error setting localStorage key “${key}”:`, error);
 		}
-	}, [key, storedValue])
-
-	return [storedValue, setStoredValue]
+	}, [key, storedValue]);
+	return [storedValue, setStoredValue];
 }
-
 /**
  * Custom hook that provides a way to store and retrieve encoded values in local storage.
  *
@@ -47,19 +49,22 @@ export function useLocalStorage<T>(key: string, initial: T): [T, React.Dispatch<
  *
  * @return {readonly [T,  React.Dispatch<React.SetStateAction<T>>]} - An array containing the encoded value and a function to update the encoded value.
  */
-export function useEncodedLocalStorage<T>(key: string, fallbackValue: T): readonly [T, React.Dispatch<React.SetStateAction<T>>] {
-	console.log("Pong !")
+export function useEncodedLocalStorage<T>(
+	key: string,
+	fallbackValue: T,
+): readonly [T, React.Dispatch<React.SetStateAction<T>>] {
+	console.log("Pong !");
 	const [encodedValue, setEncodedValue] = useState<T>(() => {
-		const stored = localStorage.getItem(key);
+		const stored = localStorage?.getItem(key);
 		return stored ? safelyParse(stored, fallbackValue) : fallbackValue;
 	});
 
 	const prevValue = useRef(encodedValue);
 
 	useEffect(() => {
-		console.log({encodedValue})
+		console.log({ encodedValue });
 		if (!b64ValEqual(prevValue.current, encodedValue)) {
-			localStorage.setItem(key, safelyStringify(encodedValue));
+			localStorage?.setItem(key, safelyStringify(encodedValue));
 		}
 		prevValue.current = encodedValue; // Set ref to current value
 	}, [key, encodedValue]);
@@ -77,7 +82,6 @@ export function useEncodedLocalStorage<T>(key: string, fallbackValue: T): readon
 		return btoa(JSON.stringify(v1)) === btoa(JSON.stringify(v2));
 	}
 
-
 	function safelyStringify(value: T): string {
 		try {
 			return btoa(JSON.stringify(value));
@@ -85,4 +89,4 @@ export function useEncodedLocalStorage<T>(key: string, fallbackValue: T): readon
 			return btoa(JSON.stringify(fallbackValue));
 		}
 	}
-}
\ No newline at end of file
+}