packages/docs-shared/lib/Hooks/useTooltipOnce.ts

   1 import { useState, useEffect } from 'react'
   2 import { getItem, removeItem, setItem } from '@proton/shared/lib/helpers/storage'
   3 import { isPast } from 'date-fns'
   4
   5 export enum TooltipKey {
   6   PublicDocsMakeCopy = 'tooltip-public-docs-make-copy',
   7   DocsSuggestionModeSpotlight = 'tooltip-docs-suggestion-mode',
   8 }
   9
  10 /**
  11  * Hook to manage showing a tooltip once for new users
  12  * @param key A unique key for the tooltip status in local storage
  13  * @returns Whether tooltip should be shown
  14  */
  15 export const useTooltipOnce = (key: TooltipKey, endDate?: Date) => {
  16   const [wasShown] = useState<boolean>(Boolean(getItem(key, 'false')))
  17   const hasEnded = endDate && isPast(endDate)
  18
  19   useEffect(() => {
  20     if (hasEnded) {
  21       removeItem(key)
  22     } else {
  23       setItem(key, 'true')
  24     }
  25   }, [hasEnded, key])
  26
  27   return {
  28     shouldShowTooltip: !wasShown && !hasEnded,
  29   }
  30 }