From 66fbd0a56d00edea5763baf9223482357ae90d65 Mon Sep 17 00:00:00 2001 From: ingawei Date: Wed, 14 Sep 2022 22:59:53 -0700 Subject: [PATCH] added follow verification, put back in watch/tip buttons --- web/components/contract/contract-details.tsx | 8 +-- .../contract/contract-info-dialog.tsx | 10 +--- .../contract/extra-contract-actions-row.tsx | 5 ++ web/components/follow-button.tsx | 49 ++++++++++++++----- 4 files changed, 46 insertions(+), 26 deletions(-) diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx index b06522e7..303ad5d1 100644 --- a/web/components/contract/contract-details.tsx +++ b/web/components/contract/contract-details.tsx @@ -160,7 +160,7 @@ export function ContractDetails(props: { {(!!closeTime || !!resolvedDate) && ( - + {resolvedDate && resolutionTime ? ( <>
resolved 
- {resolvedDate} + {resolvedDate}
) : null} - {!resolvedDate && closeTime && user && ( + {!resolvedDate && closeTime && ( -
Closes 
+
closes 
- - - <div> - <FollowMarketButton contract={contract} user={user} /> - {user?.id !== contract.creatorId && ( - <LikeMarketButton contract={contract} user={user} /> - )} - </div> - </Row> + <Title className="!mt-0 !mb-0" text="This Market" /> <table className="table-compact table-zebra table w-full text-gray-500"> <tbody> diff --git a/web/components/contract/extra-contract-actions-row.tsx b/web/components/contract/extra-contract-actions-row.tsx index 3d3fd138..289880e8 100644 --- a/web/components/contract/extra-contract-actions-row.tsx +++ b/web/components/contract/extra-contract-actions-row.tsx @@ -15,6 +15,7 @@ import { withTracking } from 'web/lib/service/analytics' import { CreateChallengeModal } from 'web/components/challenges/create-challenge-modal' import { CHALLENGES_ENABLED } from 'common/challenge' import ChallengeIcon from 'web/lib/icons/challenge-icon' +import { getIsMobile } from './contract-details' export function ExtraContractActionsRow(props: { contract: Contract }) { const { contract } = props @@ -28,6 +29,10 @@ export function ExtraContractActionsRow(props: { contract: Contract }) { return ( <Row> + <FollowMarketButton contract={contract} user={user} /> + {user?.id !== contract.creatorId && ( + <LikeMarketButton contract={contract} user={user} /> + )} <Button size="sm" color="gray-white" diff --git a/web/components/follow-button.tsx b/web/components/follow-button.tsx index cbff38f4..0b90fb4b 100644 --- a/web/components/follow-button.tsx +++ b/web/components/follow-button.tsx @@ -1,6 +1,6 @@ import { CheckCircleIcon, PlusCircleIcon } from '@heroicons/react/solid' import clsx from 'clsx' -import { useEffect, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import { useFollows } from 'web/hooks/use-follows' import { useUser } from 'web/hooks/use-user' import { follow, unfollow } from 'web/lib/firebase/users' @@ -76,14 +76,41 @@ export function UserFollowButton(props: { userId: string; small?: boolean }) { export function MiniUserFollowButton(props: { userId: string }) { const { userId } = props - const currentUser = useUser() - const following = useFollows(currentUser?.id) - const isFollowing = following?.includes(userId) const user = useUser() + const following = useFollows(user?.id) + const isFollowing = following?.includes(userId) + const isFirstRender = useRef(true) + const [justFollowed, setJustFollowed] = useState(false) + // const [followFade, setfollowFade] = useState(false) + useEffect(() => { + if (isFirstRender.current) { + if (isFollowing != undefined) { + isFirstRender.current = false + } + return + } + if (isFollowing) { + setJustFollowed(true) + setTimeout(() => { + setJustFollowed(false) + }, 1000) + } + }, [isFollowing]) + + if (justFollowed) { + return ( + <CheckCircleIcon + className={clsx( + 'text-highlight-blue ml-3 mt-2 h-5 w-5 rounded-full bg-white sm:mr-2' + )} + aria-hidden="true" + /> + ) + } if ( - !currentUser || - currentUser.id === userId || + !user || + user.id === userId || isFollowing || !user || isFollowing === undefined @@ -91,18 +118,14 @@ export function MiniUserFollowButton(props: { userId: string }) { return null return ( <> - <Button - size="sm" - color="highlight-blue" - onClick={withTracking(() => follow(currentUser.id, userId), 'follow')} - > + <button onClick={withTracking(() => follow(user.id, userId), 'follow')}> <PlusCircleIcon className={clsx( - 'hover:text-hover-blue h-5 w-5 rounded-full bg-white sm:mr-2' + 'text-highlight-blue hover:text-hover-blue mt-2 ml-3 h-5 w-5 rounded-full bg-white sm:mr-2' )} aria-hidden="true" /> - </Button> + </button> </> ) }