Compass/web/components/widgets/star-button.tsx

import {StarIcon} from '@heroicons/react/24/outline'
import clsx from 'clsx'
import {Profile} from 'common/profiles/profile'
import {useEffect, useState} from 'react'
import {buttonClass} from 'web/components/buttons/button'
import {Tooltip} from 'web/components/widgets/tooltip'
import {api} from 'web/lib/api'
import {useT} from 'web/lib/locale'
import {track} from 'web/lib/service/analytics'

export const StarButton = (props: {
  targetProfile: Profile
  isStarred: boolean
  refresh: () => Promise<void>
  hideTooltip?: boolean
  className?: string
}) => {
  const {targetProfile, refresh, hideTooltip, className} = props
  const targetId = targetProfile.user_id
  const [isStarred, setIsStarred] = useState(props.isStarred)
  const t = useT()

  useEffect(() => {
    setIsStarred(props.isStarred)
  }, [props.isStarred])

  const star = async () => {
    setIsStarred(!isStarred)
    await api('star-profile', {
      targetUserId: targetId,
      remove: isStarred,
    }).catch(() => {
      setIsStarred(isStarred)
    })
    track('star profile', {
      targetId,
      remove: isStarred,
    })
    await refresh()
  }

  const button = (
    <button
      className={clsx(buttonClass('xs', 'none'), 'text-ink-500 group !rounded-full', className)}
      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
        e.preventDefault()
        star()
      }}
    >
      <StarIcon
        className={clsx(
          'h-8 w-8 transition-colors group-hover:fill-yellow-400/70',
          isStarred && 'fill-yellow-400 stroke-yellow-500 dark:stroke-yellow-600',
        )}
      />
    </button>
  )

  if (hideTooltip) return button

  return (
    <Tooltip
      text={
        isStarred
          ? t('star_button.unsave', 'Unsave Profile')
          : t('star_button.save', 'Save Profile')
      }
      noTap
    >
      {button}
    </Tooltip>
  )
}