Untitled

import { useState, useEffect } from 'react';
import CryptoJS from 'crypto-js';
import { useRouter } from 'next/router';

function useLocalStorage<T>(
  key: 'userAuth' | 'cartItems' | 'test',
  initialValue: any,
): [T, (value: T) => void] {
  // protect-key for encrypt and decrypt local-storage
  const protectKey = 'Z>rp1p+~u';

  // local-storage state status : undefined (loading before set local-storage data), initialValue (initial value and not found key in local storage), data
  const [state, setState] = useState<any>(undefined);

  // if change route update customHook state
  // if(key in local-storage) ? set-state(decrypted key-value) : set-state(initialValue)
  // if edited local-storage ===> remove key from local storage ===> re-render useEffect [key is dependencies] ===> not found key in local storage and set-state(initialValue)
  const router = useRouter();
  const { asPath } = router;
  useEffect(() => {
    const item = localStorage.getItem(key);
    if (item) {
      try {
        const decryptState = CryptoJS.AES.decrypt(item, protectKey).toString(
          CryptoJS.enc.Utf8,
        );
        setState(JSON.parse(decryptState));
      } catch {
        localStorage.removeItem(key);
      }
    } else {
      setState(initialValue);
    }
  }, [key, asPath]);

  // encrypt and set-data to local-storage
  const setStateHandler = (value: T) => {
    const encryptedState = CryptoJS.AES.encrypt(
      JSON.stringify(value),
      protectKey,
    );
    localStorage.setItem(key, encryptedState.toString());
    setState(value);
  };

  return [state, setStateHandler];
}

export default useLocalStorage;