4
0
forked from crowetic/commerce
commerce/lib/hooks/useUserAvatar.ts
2021-02-22 14:06:34 +02:00

27 lines
804 B
TypeScript

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,
}
}