manifold/web/components/follow-market-button.tsx

import { Button } from 'web/components/button'
import {
  Contract,
  followContract,
  unFollowContract,
} from 'web/lib/firebase/contracts'
import toast from 'react-hot-toast'
import { CheckIcon, EyeIcon, EyeOffIcon } from '@heroicons/react/outline'
import clsx from 'clsx'
import { User } from 'common/user'
import { useContractFollows } from 'web/hooks/use-follows'
import { firebaseLogin, updateUser } from 'web/lib/firebase/users'
import { track } from 'web/lib/service/analytics'
import { WatchMarketModal } from 'web/components/contract/watch-market-modal'
import { useState } from 'react'
import { Col } from 'web/components/layout/col'

export const FollowMarketButton = (props: {
  contract: Contract
  user: User | undefined | null
}) => {
  const { contract, user } = props
  const followers = useContractFollows(contract.id)
  const [open, setOpen] = useState(false)

  return (
    <Button
      size={'sm'}
      color={'gray-white'}
      onClick={async () => {
        if (!user) return firebaseLogin()
        if (followers?.includes(user.id)) {
          await unFollowContract(contract.id, user.id)
          toast("You'll no longer receive notifications from this market", {
            icon: <CheckIcon className={'text-primary h-5 w-5'} />,
          })
          track('Unwatch Market', {
            slug: contract.slug,
          })
        } else {
          await followContract(contract.id, user.id)
          toast("You'll now receive notifications from this market!", {
            icon: <CheckIcon className={'text-primary h-5 w-5'} />,
          })
          track('Watch Market', {
            slug: contract.slug,
          })
        }
        if (!user.hasSeenContractFollowModal) {
          await updateUser(user.id, {
            hasSeenContractFollowModal: true,
          })
          setOpen(true)
        }
      }}
    >
      {followers?.includes(user?.id ?? 'nope') ? (
        <Col className={'items-center gap-x-2 sm:flex-row'}>
          <EyeOffIcon
            className={clsx('h-5 w-5 sm:h-6 sm:w-6')}
            aria-hidden="true"
          />
          {/* Unwatch */}
        </Col>
      ) : (
        <Col className={'items-center gap-x-2 sm:flex-row'}>
          <EyeIcon
            className={clsx('h-5 w-5 sm:h-6 sm:w-6')}
            aria-hidden="true"
          />
          {/* Watch */}
        </Col>
      )}
      <WatchMarketModal
        open={open}
        setOpen={setOpen}
        title={`You ${
          followers?.includes(user?.id ?? 'nope') ? 'watched' : 'unwatched'
        } a question!`}
      />
    </Button>
  )
}