fix : lint errors & bump chess.js version

src/hooks/useAtomLocalStorage.ts

@@ -9,11 +9,11 @@ export function useAtomLocalStorage<T>(
   const [storedValue, setStoredValue] = useAtom(atom);
 
   useEffect(() => {
-    const item = window.localStorage.getItem(key);
-    if (item) {
-      setStoredValue(parseJSON<T>(item));
-    }
     setKeyTemp(key);
+    const item = window.localStorage.getItem(key);
+    if (!item) return;
+    const value = parseJSON<T>(item);
+    if (value) setStoredValue(value);
   }, [key, setStoredValue]);
 
   useEffect(() => {
@@ -24,6 +24,6 @@ export function useAtomLocalStorage<T>(
   return [storedValue, setStoredValue];
 }
 
-function parseJSON<T>(value: string): T {
+function parseJSON<T>(value: string): T | undefined {
   return value === "undefined" ? undefined : JSON.parse(value);
 }

src/hooks/useLocalStorage.ts

@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
 type SetValue<T> = Dispatch<SetStateAction<T>>;
 
-export function useLocalStorage<T = string | number | boolean | undefined>(
+export function useLocalStorage<T = string | number | boolean>(
   key: string,
   initialValue: T
 ): [T | null, SetValue<T>] {
@@ -11,10 +11,13 @@ export function useLocalStorage<T = string | number | boolean | undefined>(
   useEffect(() => {
     const item = window.localStorage.getItem(key);
     if (item) {
-      setStoredValue(parseJSON<T>(item));
-    } else {
-      setStoredValue(initialValue);
+      const value = parseJSON<T>(item);
+      if (value) {
+        setStoredValue(value);
+        return;
+      }
     }
+    setStoredValue(initialValue);
   }, [key, initialValue]);
 
   const setValue: SetValue<T> = (value) => {
@@ -28,6 +31,6 @@ export function useLocalStorage<T = string | number | boolean | undefined>(
   return [storedValue, setValue];
 }
 
-function parseJSON<T>(value: string): T {
+function parseJSON<T>(value: string): T | undefined {
   return value === "undefined" ? undefined : JSON.parse(value);
 }

src/hooks/usePlayerNames.ts

@@ -5,17 +5,13 @@ import { useGameDatabase } from "./useGameDatabase";
 export const usePlayersNames = (gameAtom: PrimitiveAtom<Chess>) => {
   const game = useAtomValue(gameAtom);
   const { gameFromUrl } = useGameDatabase();
+  const headers = game.getHeaders();
 
-  const whiteName =
-    gameFromUrl?.white?.name || game.header()["White"] || "White";
-  const blackName =
-    gameFromUrl?.black?.name || game.header()["Black"] || "Black";
+  const whiteName = gameFromUrl?.white?.name || headers.White || "White";
+  const blackName = gameFromUrl?.black?.name || headers.Black || "Black";
 
-  const whiteElo =
-    gameFromUrl?.white?.rating || game.header()["WhiteElo"] || undefined;
-
-  const blackElo =
-    gameFromUrl?.black?.rating || game.header()["BlackElo"] || undefined;
+  const whiteElo = gameFromUrl?.white?.rating || headers.WhiteElo || undefined;
+  const blackElo = gameFromUrl?.black?.rating || headers.BlackElo || undefined;
 
   return {
     whiteName,