WorkSimplon/brief-07-front
WorkSimplon/brief-07-front
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(services): refactor localStorage service

Browse Source 
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.
This commit is contained in:
Mathis H (Avnyr) 2024-06-12 09:47:56 +02:00
parent 1c42b6a4b6
commit a7899d8a4a
Signed by: Mathis
GPG Key ID: DD9E0666A747D126
1 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/services/localStorage.ts
View File

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