2022-05-16 23:15:22 +00:00
|
|
|
import {
|
|
|
|
ClockIcon,
|
|
|
|
DatabaseIcon,
|
|
|
|
PencilIcon,
|
|
|
|
TrendingUpIcon,
|
2022-06-22 16:35:50 +00:00
|
|
|
UserGroupIcon,
|
2022-05-16 23:15:22 +00:00
|
|
|
} from '@heroicons/react/outline'
|
2022-08-26 06:23:50 +00:00
|
|
|
import clsx from 'clsx'
|
|
|
|
import { Editor } from '@tiptap/react'
|
|
|
|
import dayjs from 'dayjs'
|
2022-08-05 05:22:45 +00:00
|
|
|
|
2022-04-20 03:34:41 +00:00
|
|
|
import { Row } from '../layout/row'
|
2022-05-09 13:04:36 +00:00
|
|
|
import { formatMoney } from 'common/util/format'
|
2022-08-24 23:07:22 +00:00
|
|
|
import { Contract, updateContract } from 'web/lib/firebase/contracts'
|
2022-04-20 03:34:41 +00:00
|
|
|
import { DateTimeTooltip } from '../datetime-tooltip'
|
2022-05-09 13:04:36 +00:00
|
|
|
import { fromNow } from 'web/lib/util/time'
|
2022-04-20 03:34:41 +00:00
|
|
|
import { Avatar } from '../avatar'
|
|
|
|
import { useState } from 'react'
|
|
|
|
import { ContractInfoDialog } from './contract-info-dialog'
|
2022-04-21 06:03:16 +00:00
|
|
|
import NewContractBadge from '../new-contract-badge'
|
2022-06-08 20:27:52 +00:00
|
|
|
import { UserFollowButton } from '../follow-button'
|
2022-06-17 03:52:53 +00:00
|
|
|
import { DAY_MS } from 'common/util/time'
|
2022-07-01 13:47:19 +00:00
|
|
|
import { useUser } from 'web/hooks/use-user'
|
Rich content (#620)
* Add TipTap editor and renderer components
* Change market description editor to rich text
* Type description as JSON, fix string-based logic
- Delete make-predictions.tsx
- Delete feed logic that showed descriptions
* wip Fix API validation
* fix type error
* fix extension import (backend)
In firebase, typescript compiles imports into common js imports
like `const StarterKit = require("@tiptap/starter-kit")`
Even though StarterKit is exported from the cjs file, it gets imported
as undefined. But it magically works if we import *
If you're reading this in the future, consider replacing StarterKit with
the entire list of extensions.
* Stop load on fail create market, improve warning
* Refactor editor as hook / fix infinite submit bug
Move state of editor back up to parent
We have to do this later anyways to allow parent to edit
* Add images - display, paste + uploading
* add uploading state of image
* Fix placeholder, misc styling
min height, quote
* Fix appending to description
* code review fixes: rename, refactor, chop carets
* Add hint & upload button on new lines
- bump to Tailwind 3.1 for arbitrary variants
* clean up, run prettier
* rename FileButton to FileUploadButton
* add image extension as functions dependency
2022-07-13 18:58:22 +00:00
|
|
|
import { exhibitExts } from 'common/util/parse'
|
2022-07-22 17:34:10 +00:00
|
|
|
import { Button } from 'web/components/button'
|
|
|
|
import { Modal } from 'web/components/layout/modal'
|
|
|
|
import { Col } from 'web/components/layout/col'
|
|
|
|
import { ContractGroupsList } from 'web/components/groups/contract-groups-list'
|
2022-07-22 22:28:53 +00:00
|
|
|
import { SiteLink } from 'web/components/site-link'
|
2022-09-01 14:29:56 +00:00
|
|
|
import { getGroupLinkToDisplay, groupPath } from 'web/lib/firebase/groups'
|
2022-08-11 21:32:02 +00:00
|
|
|
import { insertContent } from '../editor/utils'
|
2022-08-19 17:43:57 +00:00
|
|
|
import { contractMetrics } from 'common/contract-details'
|
2022-08-30 15:38:59 +00:00
|
|
|
import { UserLink } from 'web/components/user-link'
|
2022-08-26 02:17:50 +00:00
|
|
|
import { FeaturedContractBadge } from 'web/components/contract/featured-contract-badge'
|
2022-08-30 23:13:25 +00:00
|
|
|
import { Tooltip } from 'web/components/tooltip'
|
|
|
|
import { useWindowSize } from 'web/hooks/use-window-size'
|
2022-04-20 03:34:41 +00:00
|
|
|
|
2022-06-23 17:12:57 +00:00
|
|
|
export type ShowTime = 'resolve-date' | 'close-date'
|
|
|
|
|
2022-05-24 06:44:16 +00:00
|
|
|
export function MiscDetails(props: {
|
2022-04-20 03:34:41 +00:00
|
|
|
contract: Contract
|
|
|
|
showHotVolume?: boolean
|
2022-06-23 17:12:57 +00:00
|
|
|
showTime?: ShowTime
|
2022-07-26 01:27:43 +00:00
|
|
|
hideGroupLink?: boolean
|
2022-04-20 03:34:41 +00:00
|
|
|
}) {
|
2022-07-26 01:27:43 +00:00
|
|
|
const { contract, showHotVolume, showTime, hideGroupLink } = props
|
2022-06-23 17:12:57 +00:00
|
|
|
const {
|
|
|
|
volume,
|
|
|
|
volume24Hours,
|
|
|
|
closeTime,
|
|
|
|
isResolved,
|
|
|
|
createdTime,
|
|
|
|
resolutionTime,
|
|
|
|
} = contract
|
2022-07-22 22:28:53 +00:00
|
|
|
|
2022-06-17 03:52:53 +00:00
|
|
|
const isNew = createdTime > Date.now() - DAY_MS && !isResolved
|
2022-09-01 14:29:56 +00:00
|
|
|
const groupToDisplay = getGroupLinkToDisplay(contract)
|
2022-04-20 03:34:41 +00:00
|
|
|
|
|
|
|
return (
|
2022-08-16 22:03:55 +00:00
|
|
|
<Row className="items-center gap-3 truncate text-sm text-gray-400">
|
2022-05-24 06:44:16 +00:00
|
|
|
{showHotVolume ? (
|
|
|
|
<Row className="gap-0.5">
|
|
|
|
<TrendingUpIcon className="h-5 w-5" /> {formatMoney(volume24Hours)}
|
|
|
|
</Row>
|
2022-06-23 17:12:57 +00:00
|
|
|
) : showTime === 'close-date' ? (
|
2022-08-16 22:03:55 +00:00
|
|
|
<Row className="gap-0.5 whitespace-nowrap">
|
2022-05-24 06:44:16 +00:00
|
|
|
<ClockIcon className="h-5 w-5" />
|
|
|
|
{(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '}
|
|
|
|
{fromNow(closeTime || 0)}
|
2022-04-20 03:34:41 +00:00
|
|
|
</Row>
|
2022-06-23 17:12:57 +00:00
|
|
|
) : showTime === 'resolve-date' && resolutionTime !== undefined ? (
|
|
|
|
<Row className="gap-0.5">
|
|
|
|
<ClockIcon className="h-5 w-5" />
|
|
|
|
{'Resolved '}
|
|
|
|
{fromNow(resolutionTime || 0)}
|
|
|
|
</Row>
|
2022-08-25 13:05:26 +00:00
|
|
|
) : (contract?.featuredOnHomeRank ?? 0) > 0 ? (
|
|
|
|
<FeaturedContractBadge />
|
2022-06-17 03:52:53 +00:00
|
|
|
) : volume > 0 || !isNew ? (
|
2022-08-30 23:13:25 +00:00
|
|
|
<Row className={'shrink-0'}>{formatMoney(volume)} bet</Row>
|
2022-05-24 06:44:16 +00:00
|
|
|
) : (
|
|
|
|
<NewContractBadge />
|
|
|
|
)}
|
2022-05-24 23:57:34 +00:00
|
|
|
|
2022-09-01 14:29:56 +00:00
|
|
|
{!hideGroupLink && groupToDisplay && (
|
2022-07-22 22:28:53 +00:00
|
|
|
<SiteLink
|
2022-09-01 14:29:56 +00:00
|
|
|
href={groupPath(groupToDisplay.slug)}
|
2022-08-15 19:49:33 +00:00
|
|
|
className="truncate text-sm text-gray-400"
|
2022-07-22 22:28:53 +00:00
|
|
|
>
|
2022-09-01 14:29:56 +00:00
|
|
|
{groupToDisplay.name}
|
2022-07-22 22:28:53 +00:00
|
|
|
</SiteLink>
|
2022-05-24 23:57:34 +00:00
|
|
|
)}
|
2022-05-24 06:44:16 +00:00
|
|
|
</Row>
|
|
|
|
)
|
|
|
|
}
|
2022-04-20 03:34:41 +00:00
|
|
|
|
2022-08-15 19:49:33 +00:00
|
|
|
export function AvatarDetails(props: {
|
|
|
|
contract: Contract
|
|
|
|
className?: string
|
|
|
|
short?: boolean
|
|
|
|
}) {
|
|
|
|
const { contract, short, className } = props
|
2022-08-30 23:13:25 +00:00
|
|
|
const { creatorName, creatorUsername, creatorAvatarUrl } = contract
|
2022-05-16 23:15:22 +00:00
|
|
|
|
2022-05-24 06:44:16 +00:00
|
|
|
return (
|
2022-08-15 19:49:33 +00:00
|
|
|
<Row
|
|
|
|
className={clsx('items-center gap-2 text-sm text-gray-400', className)}
|
|
|
|
>
|
2022-05-24 06:44:16 +00:00
|
|
|
<Avatar
|
|
|
|
username={creatorUsername}
|
2022-08-30 23:13:25 +00:00
|
|
|
avatarUrl={creatorAvatarUrl}
|
2022-05-24 06:44:16 +00:00
|
|
|
size={6}
|
|
|
|
/>
|
2022-08-15 19:49:33 +00:00
|
|
|
<UserLink name={creatorName} username={creatorUsername} short={short} />
|
2022-05-24 06:44:16 +00:00
|
|
|
</Row>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export function AbbrContractDetails(props: {
|
|
|
|
contract: Contract
|
|
|
|
showHotVolume?: boolean
|
2022-06-23 17:12:57 +00:00
|
|
|
showTime?: ShowTime
|
2022-05-24 06:44:16 +00:00
|
|
|
}) {
|
2022-06-23 17:12:57 +00:00
|
|
|
const { contract, showHotVolume, showTime } = props
|
2022-05-24 06:44:16 +00:00
|
|
|
return (
|
|
|
|
<Row className="items-center justify-between">
|
|
|
|
<AvatarDetails contract={contract} />
|
|
|
|
|
|
|
|
<MiscDetails
|
|
|
|
contract={contract}
|
|
|
|
showHotVolume={showHotVolume}
|
2022-06-23 17:12:57 +00:00
|
|
|
showTime={showTime}
|
2022-05-24 06:44:16 +00:00
|
|
|
/>
|
|
|
|
</Row>
|
2022-04-20 03:34:41 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export function ContractDetails(props: {
|
|
|
|
contract: Contract
|
2022-05-17 17:31:19 +00:00
|
|
|
disabled?: boolean
|
2022-04-20 03:34:41 +00:00
|
|
|
}) {
|
2022-09-01 21:42:50 +00:00
|
|
|
const { contract, disabled } = props
|
2022-08-30 23:13:25 +00:00
|
|
|
const {
|
|
|
|
closeTime,
|
|
|
|
creatorName,
|
|
|
|
creatorUsername,
|
|
|
|
creatorId,
|
|
|
|
creatorAvatarUrl,
|
|
|
|
resolutionTime,
|
|
|
|
} = contract
|
2022-05-24 06:44:16 +00:00
|
|
|
const { volumeLabel, resolvedDate } = contractMetrics(contract)
|
2022-07-01 13:47:19 +00:00
|
|
|
const user = useUser()
|
2022-09-01 21:42:50 +00:00
|
|
|
const isCreator = user?.id === creatorId
|
2022-07-22 17:34:10 +00:00
|
|
|
const [open, setOpen] = useState(false)
|
2022-08-30 23:13:25 +00:00
|
|
|
const { width } = useWindowSize()
|
|
|
|
const isMobile = (width ?? 0) < 600
|
2022-09-01 14:29:56 +00:00
|
|
|
const groupToDisplay = getGroupLinkToDisplay(contract)
|
2022-08-31 14:29:35 +00:00
|
|
|
const groupInfo = groupToDisplay ? (
|
|
|
|
<Row
|
|
|
|
className={clsx(
|
2022-09-01 14:52:49 +00:00
|
|
|
'items-center pr-0 sm:pr-2',
|
2022-08-31 14:29:35 +00:00
|
|
|
isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
<SiteLink href={groupPath(groupToDisplay.slug)} className={'truncate'}>
|
|
|
|
<Row>
|
|
|
|
<UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" />
|
|
|
|
<span className="items-center truncate">{groupToDisplay.name}</span>
|
|
|
|
</Row>
|
|
|
|
</SiteLink>
|
2022-08-05 05:47:59 +00:00
|
|
|
</Row>
|
2022-08-31 14:29:35 +00:00
|
|
|
) : (
|
|
|
|
<Button
|
|
|
|
size={'xs'}
|
|
|
|
className={'max-w-[200px] pr-2'}
|
|
|
|
color={'gray-white'}
|
|
|
|
onClick={() => !groupToDisplay && setOpen(true)}
|
|
|
|
>
|
|
|
|
<Row>
|
|
|
|
<UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" />
|
|
|
|
<span className="truncate">No Group</span>
|
|
|
|
</Row>
|
|
|
|
</Button>
|
2022-08-05 05:47:59 +00:00
|
|
|
)
|
|
|
|
|
2022-04-20 03:34:41 +00:00
|
|
|
return (
|
2022-08-24 22:41:46 +00:00
|
|
|
<Row className="flex-1 flex-wrap items-center gap-2 text-sm text-gray-500 md:gap-x-4 md:gap-y-2">
|
2022-05-17 17:31:19 +00:00
|
|
|
<Row className="items-center gap-2">
|
|
|
|
<Avatar
|
|
|
|
username={creatorUsername}
|
2022-08-30 23:13:25 +00:00
|
|
|
avatarUrl={creatorAvatarUrl}
|
2022-05-17 17:31:19 +00:00
|
|
|
noLink={disabled}
|
|
|
|
size={6}
|
|
|
|
/>
|
|
|
|
{disabled ? (
|
|
|
|
creatorName
|
|
|
|
) : (
|
2022-04-20 03:34:41 +00:00
|
|
|
<UserLink
|
|
|
|
className="whitespace-nowrap"
|
|
|
|
name={creatorName}
|
|
|
|
username={creatorUsername}
|
2022-08-30 23:13:25 +00:00
|
|
|
short={isMobile}
|
2022-04-20 03:34:41 +00:00
|
|
|
/>
|
2022-05-17 17:31:19 +00:00
|
|
|
)}
|
2022-06-08 20:27:52 +00:00
|
|
|
{!disabled && <UserFollowButton userId={creatorId} small />}
|
2022-05-17 17:31:19 +00:00
|
|
|
</Row>
|
2022-07-22 17:34:10 +00:00
|
|
|
<Row>
|
2022-08-05 05:47:59 +00:00
|
|
|
{disabled ? (
|
|
|
|
groupInfo
|
2022-08-24 22:41:46 +00:00
|
|
|
) : !groupToDisplay && !user ? (
|
|
|
|
<div />
|
2022-08-05 05:47:59 +00:00
|
|
|
) : (
|
2022-08-26 22:25:03 +00:00
|
|
|
<Row>
|
2022-08-31 14:29:35 +00:00
|
|
|
{groupInfo}
|
|
|
|
{user && groupToDisplay && (
|
2022-08-28 21:13:30 +00:00
|
|
|
<Button
|
|
|
|
size={'xs'}
|
|
|
|
color={'gray-white'}
|
|
|
|
onClick={() => setOpen(!open)}
|
|
|
|
>
|
|
|
|
<PencilIcon className="mb-0.5 mr-0.5 inline h-4 w-4 shrink-0" />
|
|
|
|
</Button>
|
|
|
|
)}
|
2022-08-26 22:25:03 +00:00
|
|
|
</Row>
|
2022-08-05 05:47:59 +00:00
|
|
|
)}
|
2022-07-22 17:34:10 +00:00
|
|
|
</Row>
|
|
|
|
<Modal open={open} setOpen={setOpen} size={'md'}>
|
|
|
|
<Col
|
|
|
|
className={
|
|
|
|
'max-h-[70vh] min-h-[20rem] overflow-auto rounded bg-white p-6'
|
|
|
|
}
|
|
|
|
>
|
2022-09-01 14:29:56 +00:00
|
|
|
<ContractGroupsList contract={contract} user={user} />
|
2022-07-22 17:34:10 +00:00
|
|
|
</Col>
|
|
|
|
</Modal>
|
2022-08-24 23:07:22 +00:00
|
|
|
|
2022-05-17 17:31:19 +00:00
|
|
|
{(!!closeTime || !!resolvedDate) && (
|
2022-08-30 23:13:25 +00:00
|
|
|
<Row className="hidden items-center gap-1 md:inline-flex">
|
|
|
|
{resolvedDate && resolutionTime ? (
|
2022-05-17 17:31:19 +00:00
|
|
|
<>
|
2022-08-24 22:41:46 +00:00
|
|
|
<ClockIcon className="h-5 w-5" />
|
2022-08-30 23:13:25 +00:00
|
|
|
<DateTimeTooltip text="Market resolved:" time={resolutionTime}>
|
2022-05-17 17:31:19 +00:00
|
|
|
{resolvedDate}
|
|
|
|
</DateTimeTooltip>
|
|
|
|
</>
|
|
|
|
) : null}
|
|
|
|
|
2022-08-24 22:41:46 +00:00
|
|
|
{!resolvedDate && closeTime && user && (
|
2022-05-17 17:31:19 +00:00
|
|
|
<>
|
2022-08-24 22:41:46 +00:00
|
|
|
<ClockIcon className="h-5 w-5" />
|
2022-05-17 17:31:19 +00:00
|
|
|
<EditableCloseDate
|
|
|
|
closeTime={closeTime}
|
|
|
|
contract={contract}
|
|
|
|
isCreator={isCreator ?? false}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
)}
|
2022-04-20 03:34:41 +00:00
|
|
|
</Row>
|
2022-05-17 17:31:19 +00:00
|
|
|
)}
|
2022-08-24 22:41:46 +00:00
|
|
|
{user && (
|
|
|
|
<>
|
2022-08-30 23:13:25 +00:00
|
|
|
<Row className="hidden items-center gap-1 md:inline-flex">
|
2022-08-24 22:41:46 +00:00
|
|
|
<DatabaseIcon className="h-5 w-5" />
|
|
|
|
<div className="whitespace-nowrap">{volumeLabel}</div>
|
|
|
|
</Row>
|
2022-08-30 23:13:25 +00:00
|
|
|
{!disabled && (
|
|
|
|
<ContractInfoDialog
|
|
|
|
contract={contract}
|
|
|
|
className={'hidden md:inline-flex'}
|
|
|
|
/>
|
|
|
|
)}
|
2022-08-24 22:41:46 +00:00
|
|
|
</>
|
|
|
|
)}
|
2022-05-17 17:31:19 +00:00
|
|
|
</Row>
|
2022-04-20 03:34:41 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-08-30 23:13:25 +00:00
|
|
|
export function ExtraMobileContractDetails(props: {
|
|
|
|
contract: Contract
|
|
|
|
forceShowVolume?: boolean
|
|
|
|
}) {
|
2022-09-01 21:42:50 +00:00
|
|
|
const { contract, forceShowVolume } = props
|
2022-08-30 23:13:25 +00:00
|
|
|
const { volume, resolutionTime, closeTime, creatorId, uniqueBettorCount } =
|
|
|
|
contract
|
2022-09-01 21:42:50 +00:00
|
|
|
const user = useUser()
|
2022-08-30 23:13:25 +00:00
|
|
|
const uniqueBettors = uniqueBettorCount ?? 0
|
|
|
|
const { resolvedDate } = contractMetrics(contract)
|
|
|
|
const volumeTranslation =
|
2022-09-01 13:23:43 +00:00
|
|
|
volume > 800 || uniqueBettors >= 20
|
2022-08-30 23:13:25 +00:00
|
|
|
? 'High'
|
2022-09-01 13:23:43 +00:00
|
|
|
: volume > 300 || uniqueBettors >= 10
|
2022-08-30 23:13:25 +00:00
|
|
|
? 'Medium'
|
|
|
|
: 'Low'
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Row
|
|
|
|
className={clsx(
|
|
|
|
'items-center justify-around md:hidden',
|
|
|
|
user ? 'w-full' : ''
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
{resolvedDate && resolutionTime ? (
|
|
|
|
<Col className={'items-center text-sm'}>
|
|
|
|
<Row className={'text-gray-500'}>
|
|
|
|
<DateTimeTooltip text="Market resolved:" time={resolutionTime}>
|
|
|
|
{resolvedDate}
|
|
|
|
</DateTimeTooltip>
|
|
|
|
</Row>
|
|
|
|
<Row className={'text-gray-400'}>Ended</Row>
|
|
|
|
</Col>
|
|
|
|
) : (
|
|
|
|
!resolvedDate &&
|
|
|
|
closeTime && (
|
|
|
|
<Col className={'items-center text-sm text-gray-500'}>
|
|
|
|
<EditableCloseDate
|
|
|
|
closeTime={closeTime}
|
|
|
|
contract={contract}
|
|
|
|
isCreator={creatorId === user?.id}
|
|
|
|
/>
|
|
|
|
<Row className={'text-gray-400'}>Ends</Row>
|
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
)}
|
|
|
|
{(user || forceShowVolume) && (
|
|
|
|
<Col className={'items-center text-sm text-gray-500'}>
|
|
|
|
<Tooltip
|
|
|
|
text={`${formatMoney(
|
|
|
|
volume
|
|
|
|
)} bet - ${uniqueBettors} unique bettors`}
|
|
|
|
>
|
|
|
|
{volumeTranslation}
|
|
|
|
</Tooltip>
|
|
|
|
<Row className={'text-gray-400'}>Activity</Row>
|
|
|
|
</Col>
|
|
|
|
)}
|
|
|
|
</Row>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-04-20 03:34:41 +00:00
|
|
|
function EditableCloseDate(props: {
|
|
|
|
closeTime: number
|
|
|
|
contract: Contract
|
|
|
|
isCreator: boolean
|
|
|
|
}) {
|
|
|
|
const { closeTime, contract, isCreator } = props
|
|
|
|
|
2022-08-13 00:48:41 +00:00
|
|
|
const dayJsCloseTime = dayjs(closeTime)
|
|
|
|
const dayJsNow = dayjs()
|
|
|
|
|
2022-04-20 03:34:41 +00:00
|
|
|
const [isEditingCloseTime, setIsEditingCloseTime] = useState(false)
|
|
|
|
const [closeDate, setCloseDate] = useState(
|
2022-08-28 05:35:22 +00:00
|
|
|
closeTime && dayJsCloseTime.format('YYYY-MM-DD')
|
2022-04-20 03:34:41 +00:00
|
|
|
)
|
2022-08-28 05:35:22 +00:00
|
|
|
const [closeHoursMinutes, setCloseHoursMinutes] = useState(
|
|
|
|
closeTime && dayJsCloseTime.format('HH:mm')
|
|
|
|
)
|
|
|
|
|
|
|
|
const newCloseTime = closeDate
|
|
|
|
? dayjs(`${closeDate}T${closeHoursMinutes}`).valueOf()
|
|
|
|
: undefined
|
2022-04-20 03:34:41 +00:00
|
|
|
|
2022-08-13 00:48:41 +00:00
|
|
|
const isSameYear = dayJsCloseTime.isSame(dayJsNow, 'year')
|
|
|
|
const isSameDay = dayJsCloseTime.isSame(dayJsNow, 'day')
|
2022-04-20 03:34:41 +00:00
|
|
|
|
|
|
|
const onSave = () => {
|
2022-08-28 05:35:22 +00:00
|
|
|
if (!newCloseTime) return
|
|
|
|
|
2022-04-20 03:34:41 +00:00
|
|
|
if (newCloseTime === closeTime) setIsEditingCloseTime(false)
|
|
|
|
else if (newCloseTime > Date.now()) {
|
Rich content (#620)
* Add TipTap editor and renderer components
* Change market description editor to rich text
* Type description as JSON, fix string-based logic
- Delete make-predictions.tsx
- Delete feed logic that showed descriptions
* wip Fix API validation
* fix type error
* fix extension import (backend)
In firebase, typescript compiles imports into common js imports
like `const StarterKit = require("@tiptap/starter-kit")`
Even though StarterKit is exported from the cjs file, it gets imported
as undefined. But it magically works if we import *
If you're reading this in the future, consider replacing StarterKit with
the entire list of extensions.
* Stop load on fail create market, improve warning
* Refactor editor as hook / fix infinite submit bug
Move state of editor back up to parent
We have to do this later anyways to allow parent to edit
* Add images - display, paste + uploading
* add uploading state of image
* Fix placeholder, misc styling
min height, quote
* Fix appending to description
* code review fixes: rename, refactor, chop carets
* Add hint & upload button on new lines
- bump to Tailwind 3.1 for arbitrary variants
* clean up, run prettier
* rename FileButton to FileUploadButton
* add image extension as functions dependency
2022-07-13 18:58:22 +00:00
|
|
|
const content = contract.description
|
2022-04-20 03:34:41 +00:00
|
|
|
const formattedCloseDate = dayjs(newCloseTime).format('YYYY-MM-DD h:mm a')
|
Rich content (#620)
* Add TipTap editor and renderer components
* Change market description editor to rich text
* Type description as JSON, fix string-based logic
- Delete make-predictions.tsx
- Delete feed logic that showed descriptions
* wip Fix API validation
* fix type error
* fix extension import (backend)
In firebase, typescript compiles imports into common js imports
like `const StarterKit = require("@tiptap/starter-kit")`
Even though StarterKit is exported from the cjs file, it gets imported
as undefined. But it magically works if we import *
If you're reading this in the future, consider replacing StarterKit with
the entire list of extensions.
* Stop load on fail create market, improve warning
* Refactor editor as hook / fix infinite submit bug
Move state of editor back up to parent
We have to do this later anyways to allow parent to edit
* Add images - display, paste + uploading
* add uploading state of image
* Fix placeholder, misc styling
min height, quote
* Fix appending to description
* code review fixes: rename, refactor, chop carets
* Add hint & upload button on new lines
- bump to Tailwind 3.1 for arbitrary variants
* clean up, run prettier
* rename FileButton to FileUploadButton
* add image extension as functions dependency
2022-07-13 18:58:22 +00:00
|
|
|
|
|
|
|
const editor = new Editor({ content, extensions: exhibitExts })
|
2022-08-11 21:32:02 +00:00
|
|
|
editor.commands.focus('end')
|
|
|
|
insertContent(
|
2022-08-06 22:43:41 +00:00
|
|
|
editor,
|
|
|
|
`<br><p>Close date updated to ${formattedCloseDate}</p>`
|
|
|
|
)
|
2022-04-20 03:34:41 +00:00
|
|
|
|
2022-06-15 04:31:20 +00:00
|
|
|
updateContract(contract.id, {
|
2022-04-20 03:34:41 +00:00
|
|
|
closeTime: newCloseTime,
|
Rich content (#620)
* Add TipTap editor and renderer components
* Change market description editor to rich text
* Type description as JSON, fix string-based logic
- Delete make-predictions.tsx
- Delete feed logic that showed descriptions
* wip Fix API validation
* fix type error
* fix extension import (backend)
In firebase, typescript compiles imports into common js imports
like `const StarterKit = require("@tiptap/starter-kit")`
Even though StarterKit is exported from the cjs file, it gets imported
as undefined. But it magically works if we import *
If you're reading this in the future, consider replacing StarterKit with
the entire list of extensions.
* Stop load on fail create market, improve warning
* Refactor editor as hook / fix infinite submit bug
Move state of editor back up to parent
We have to do this later anyways to allow parent to edit
* Add images - display, paste + uploading
* add uploading state of image
* Fix placeholder, misc styling
min height, quote
* Fix appending to description
* code review fixes: rename, refactor, chop carets
* Add hint & upload button on new lines
- bump to Tailwind 3.1 for arbitrary variants
* clean up, run prettier
* rename FileButton to FileUploadButton
* add image extension as functions dependency
2022-07-13 18:58:22 +00:00
|
|
|
description: editor.getJSON(),
|
2022-06-15 04:31:20 +00:00
|
|
|
})
|
|
|
|
|
2022-04-20 03:34:41 +00:00
|
|
|
setIsEditingCloseTime(false)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
{isEditingCloseTime ? (
|
2022-08-30 23:13:25 +00:00
|
|
|
<Row className="z-10 mr-2 w-full shrink-0 items-start items-center gap-1">
|
2022-04-20 03:34:41 +00:00
|
|
|
<input
|
2022-08-28 05:35:22 +00:00
|
|
|
type="date"
|
2022-08-30 23:13:25 +00:00
|
|
|
className="input input-bordered shrink-0"
|
2022-04-20 03:34:41 +00:00
|
|
|
onClick={(e) => e.stopPropagation()}
|
2022-08-28 05:35:22 +00:00
|
|
|
onChange={(e) => setCloseDate(e.target.value)}
|
2022-04-20 03:34:41 +00:00
|
|
|
min={Date.now()}
|
|
|
|
value={closeDate}
|
|
|
|
/>
|
2022-08-28 05:35:22 +00:00
|
|
|
<input
|
|
|
|
type="time"
|
2022-08-30 23:13:25 +00:00
|
|
|
className="input input-bordered shrink-0"
|
2022-08-28 05:35:22 +00:00
|
|
|
onClick={(e) => e.stopPropagation()}
|
|
|
|
onChange={(e) => setCloseHoursMinutes(e.target.value)}
|
|
|
|
min="00:00"
|
|
|
|
value={closeHoursMinutes}
|
|
|
|
/>
|
2022-08-30 23:13:25 +00:00
|
|
|
<Button size={'xs'} color={'blue'} onClick={onSave}>
|
|
|
|
Done
|
|
|
|
</Button>
|
2022-08-28 05:35:22 +00:00
|
|
|
</Row>
|
2022-04-20 03:34:41 +00:00
|
|
|
) : (
|
|
|
|
<DateTimeTooltip
|
|
|
|
text={closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'}
|
2022-08-27 20:46:35 +00:00
|
|
|
time={closeTime}
|
2022-04-20 03:34:41 +00:00
|
|
|
>
|
2022-08-30 23:13:25 +00:00
|
|
|
<span
|
|
|
|
className={isCreator ? 'cursor-pointer' : ''}
|
|
|
|
onClick={() => isCreator && setIsEditingCloseTime(true)}
|
|
|
|
>
|
2022-08-31 14:49:35 +00:00
|
|
|
{isSameDay ? (
|
|
|
|
<span className={'capitalize'}> {fromNow(closeTime)}</span>
|
|
|
|
) : isSameYear ? (
|
|
|
|
dayJsCloseTime.format('MMM D')
|
|
|
|
) : (
|
|
|
|
dayJsCloseTime.format('MMM D, YYYY')
|
|
|
|
)}
|
2022-08-30 23:13:25 +00:00
|
|
|
</span>
|
2022-04-20 03:34:41 +00:00
|
|
|
</DateTimeTooltip>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|