userAvatar

components/common/Avatar/Avatar.tsx

@@ -1,5 +1,5 @@
-import { FC, useState, useMemo, useRef, useEffect } from 'react'
+import { FC, useRef, useEffect } from 'react'
-import { getRandomPairOfColors } from '@lib/colors'
+import { useUserAvatar } from '@lib/hooks/useUserAvatar'
 
 interface Props {
   className?: string
@@ -7,18 +7,14 @@ interface Props {
 }
 
 const Avatar: FC<Props> = ({}) => {
-  const [bg] = useState(useMemo(() => getRandomPairOfColors, []))
   let ref = useRef() as React.MutableRefObject<HTMLInputElement>
-
+  let { userAvatar } = useUserAvatar()
-  useEffect(() => {
+  console.log(userAvatar)
-    if (ref && ref.current) {
-      ref.current.style.backgroundImage = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`
-    }
-  }, [bg])
 
   return (
     <div
       ref={ref}
+      style={{ backgroundImage: userAvatar }}
       className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition linear-out duration-150"
     >
       {/* Add an image - We're generating a gradient as placeholder  <img></img> */}

components/common/UserNav/UserNav.tsx

@@ -3,11 +3,11 @@ import Link from 'next/link'
 import cn from 'classnames'
 import useCart from '@framework/cart/use-cart'
 import useCustomer from '@framework/customer/use-customer'
+import { Avatar } from '@components/common'
 import { Heart, Bag } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import DropdownMenu from './DropdownMenu'
 import s from './UserNav.module.css'
-import { Avatar } from '@components/common'
 
 interface Props {
   className?: string

components/ui/context.tsx

@@ -8,6 +8,7 @@ export interface State {
   displayToast: boolean
   modalView: string
   toastText: string
+  userAvatar: string
 }
 
 const initialState = {
@@ -17,6 +18,7 @@ const initialState = {
   modalView: 'LOGIN_VIEW',
   displayToast: false,
   toastText: '',
+  userAvatar: '',
 }
 
 type Action =
@@ -52,6 +54,10 @@ type Action =
       type: 'SET_MODAL_VIEW'
       view: MODAL_VIEWS
     }
+  | {
+      type: 'SET_USER_AVATAR'
+      value: string
+    }
 
 type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW' | 'FORGOT_VIEW'
 type ToastText = string
@@ -123,6 +129,12 @@ function uiReducer(state: State, action: Action) {
         toastText: action.text,
       }
     }
+    case 'SET_USER_AVATAR': {
+      return {
+        ...state,
+        userAvatar: action.value,
+      }
+    }
   }
 }
 
@@ -147,6 +159,9 @@ export const UIProvider: FC = (props) => {
   const openToast = () => dispatch({ type: 'OPEN_TOAST' })
   const closeToast = () => dispatch({ type: 'CLOSE_TOAST' })
 
+  const setUserAvatar = (value: string) =>
+    dispatch({ type: 'SET_USER_AVATAR', value })
+
   const setModalView = (view: MODAL_VIEWS) =>
     dispatch({ type: 'SET_MODAL_VIEW', view })
 
@@ -164,6 +179,7 @@ export const UIProvider: FC = (props) => {
       setModalView,
       openToast,
       closeToast,
+      setUserAvatar,
     }),
     [state]
   )

lib/hooks/useUserAvatar.ts

@@ -0,0 +1,26 @@
+import { useEffect } from 'react'
+import { getRandomPairOfColors } from '@lib/colors'
+import { useUI } from '@components/ui/context'
+
+export const useUserAvatar = (name = 'userAvatar') => {
+  const { userAvatar, setUserAvatar } = useUI()
+
+  useEffect(() => {
+    if (!userAvatar && localStorage.getItem(name)) {
+      // get bg value locally.
+      setUserAvatar(localStorage.getItem(name))
+    }
+    if (!localStorage.getItem(name)) {
+      // local not set, set.
+      const bg = getRandomPairOfColors()
+      const value = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`
+      localStorage.setItem(name, value)
+      setUserAvatar(value)
+    }
+  }, [])
+
+  return {
+    userAvatar,
+    setUserAvatar,
+  }
+}

tsconfig.json

@@ -22,8 +22,8 @@
       "@components/*": ["components/*"],
       "@commerce": ["framework/commerce"],
       "@commerce/*": ["framework/commerce/*"],
-      "@framework": ["framework/bigcommerce"]
+      "@framework": ["framework/bigcommerce"],
-      "@framework/*": ["framework/bigcommerce/*"],
+      "@framework/*": ["framework/bigcommerce/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],