front/src/hooks/useLocalStorage.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import { useState, useEffect } from "react";

const STORAGE_KEYS_PREFIX = "chessh-";

const useStorage = (storage, keyPrefix) => (storageKey, fallbackState) => {
  if (!storageKey)
    throw new Error(
      `"storageKey" must be a nonempty string, but "${storageKey}" was passed.`
    );

  const storedString = storage.getItem(keyPrefix + storageKey);
  let parsedObject = null;

  if (storedString !== null) parsedObject = JSON.parse(storedString);

  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [value, setValue] = useState(parsedObject ?? fallbackState);

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    storage.setItem(keyPrefix + storageKey, JSON.stringify(value));
  }, [value, storageKey]);

  return [value, setValue];
};

// eslint-disable-next-line react-hooks/rules-of-hooks
export const useLocalStorage = useStorage(
  window.localStorage,
  STORAGE_KEYS_PREFIX
);