49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
|
import { User } from 'common/user'
|
||
|
|
import { useState } from 'react'
|
||
|
|
import { TextButton } from 'web/components/text-button'
|
||
|
|
import { Modal } from 'web/components/layout/modal'
|
||
|
|
import { Col } from 'web/components/layout/col'
|
||
|
|
import { useUserLikedContracts } from 'web/hooks/use-likes'
|
||
|
|
import { SiteLink } from 'web/components/site-link'
|
||
|
|
import { Row } from 'web/components/layout/row'
|
||
|
|
import { XIcon } from '@heroicons/react/outline'
|
||
|
|
import { unLikeContract } from 'web/lib/firebase/likes'
|
||
|
|
import { contractPath } from 'web/lib/firebase/contracts'
|
||
|
|
|
||
|
|
export function UserLikesButton(props: { user: User }) {
|
||
|
|
const { user } = props
|
||
|
|
const [isOpen, setIsOpen] = useState(false)
|
||
|
|
|
||
|
|
const likedContracts = useUserLikedContracts(user.id)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<TextButton onClick={() => setIsOpen(true)}>
|
||
|
|
<span className="font-semibold">{likedContracts?.length ?? ''}</span>{' '}
|
||
|
|
Likes
|
||
|
|
</TextButton>
|
||
|
|
<Modal open={isOpen} setOpen={setIsOpen}>
|
||
|
|
<Col className="rounded bg-white p-6">
|
||
|
|
<span className={'mb-4 text-xl'}>Liked Markets</span>
|
||
|
|
<Col className={'gap-4'}>
|
||
|
|
{likedContracts?.map((likedContract) => (
|
||
|
|
<Row key={likedContract.id} className={'justify-between gap-2'}>
|
||
|
|
<SiteLink
|
||
|
|
href={contractPath(likedContract)}
|
||
|
|
className={'truncate text-indigo-700'}
|
||
|
|
>
|
||
|
|
{likedContract.question}
|
||
|
|
</SiteLink>
|
||
|
|
<XIcon
|
||
|
|
className="ml-2 h-5 w-5 shrink-0 cursor-pointer"
|
||
|
|
onClick={() => unLikeContract(user.id, likedContract.id)}
|
||
|
|
/>
|
||
|
|
</Row>
|
||
|
|
))}
|
||
|
|
</Col>
|
||
|
|
</Col>
|
||
|
|
</Modal>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|