commerce/site/lib/hooks/useUserAvatar.ts

import { useEffect } from 'react';
import { useUI } from '@components/ui/context';
import { getRandomPairOfColors } from '@lib/colors';

export const useUserAvatar = (name = 'userAvatar') => {
  const { userAvatar, setUserAvatar } = useUI();

  useEffect(() => {
    if (!userAvatar && localStorage.getItem(name)) {
      // Get bg from localStorage and push it to the context.
      setUserAvatar(localStorage.getItem(name));
    }
    if (!localStorage.getItem(name)) {
      // bg not set locally, generating one, setting localStorage and context to persist.
      const bg = getRandomPairOfColors();
      const value = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`;
      localStorage.setItem(name, value);
      setUserAvatar(value);
    }
  }, []);

  return {
    userAvatar,
    setUserAvatar,
  };
};