Refactor contract components into contract directory

web/components/contract/contract-card.tsx

@@ -2,24 +2,24 @@ import clsx from 'clsx'
 import Link from 'next/link'
 import { ClockIcon, DatabaseIcon, PencilIcon } from '@heroicons/react/outline'
 import { TrendingUpIcon } from '@heroicons/react/solid'
-import { Row } from '../components/layout/row'
-import { formatMoney, formatPercent } from '../../common/util/format'
-import { UserLink } from './user-page'
+import { Row } from '../layout/row'
+import { formatMoney, formatPercent } from '../../../common/util/format'
+import { UserLink } from '../user-page'
 import {
   Contract,
   contractMetrics,
   contractPath,
   getBinaryProbPercent,
   updateContract,
-} from '../lib/firebase/contracts'
-import { Col } from './layout/col'
+} from '../../lib/firebase/contracts'
+import { Col } from '../layout/col'
 import dayjs from 'dayjs'
-import { DateTimeTooltip } from './datetime-tooltip'
-import { fromNow } from '../lib/util/time'
-import { Avatar } from './avatar'
-import { Spacer } from './layout/spacer'
+import { DateTimeTooltip } from '../datetime-tooltip'
+import { fromNow } from '../../lib/util/time'
+import { Avatar } from '../avatar'
+import { Spacer } from '../layout/spacer'
 import { useState } from 'react'
-import { getProbability } from '../../common/calculate'
+import { getProbability } from '../../../common/calculate'
 import { ContractInfoDialog } from './contract-info-dialog'
 
 export function ContractCard(props: {

web/components/contract/contract-description.tsx

@@ -0,0 +1,133 @@
+import clsx from 'clsx'
+import dayjs from 'dayjs'
+import { useState } from 'react'
+import Textarea from 'react-expanding-textarea'
+
+import { Contract } from '../../../common/contract'
+import { parseTags } from '../../../common/util/parse'
+import { useAdmin } from '../../hooks/use-admin'
+import { updateContract } from '../../lib/firebase/contracts'
+import { Row } from '../layout/row'
+import { Linkify } from '../linkify'
+
+export function ContractDescription(props: {
+  contract: Contract
+  isCreator: boolean
+  className?: string
+}) {
+  const { contract, isCreator, className } = props
+  const descriptionTimestamp = () => `${dayjs().format('MMM D, h:mma')}: `
+  const isAdmin = useAdmin()
+
+  // Append the new description (after a newline)
+  async function saveDescription(newText: string) {
+    const newDescription = `${contract.description}\n\n${newText}`.trim()
+    const tags = parseTags(
+      `${newDescription} ${contract.tags.map((tag) => `#${tag}`).join(' ')}`
+    )
+    const lowercaseTags = tags.map((tag) => tag.toLowerCase())
+    await updateContract(contract.id, {
+      description: newDescription,
+      tags,
+      lowercaseTags,
+    })
+  }
+
+  if (!isCreator && !contract.description.trim()) return null
+
+  return (
+    <div
+      className={clsx(
+        'mt-2 whitespace-pre-line break-words text-gray-700',
+        className
+      )}
+    >
+      <Linkify text={contract.description} />
+      <br />
+      {isCreator && (
+        <EditContract
+          // Note: Because descriptionTimestamp is called once, later edits use
+          // a stale timestamp. Ideally this is a function that gets called when
+          // isEditing is set to true.
+          text={descriptionTimestamp()}
+          onSave={saveDescription}
+          buttonText="Add to description"
+        />
+      )}
+      {isAdmin && (
+        <EditContract
+          text={contract.question}
+          onSave={(question) => updateContract(contract.id, { question })}
+          buttonText="ADMIN: Edit question"
+        />
+      )}
+      {/* {isAdmin && (
+        <EditContract
+          text={contract.createdTime.toString()}
+          onSave={(time) =>
+            updateContract(contract.id, { createdTime: Number(time) })
+          }
+          buttonText="ADMIN: Edit createdTime"
+        />
+      )} */}
+    </div>
+  )
+}
+
+function EditContract(props: {
+  text: string
+  onSave: (newText: string) => void
+  buttonText: string
+}) {
+  const [text, setText] = useState(props.text)
+  const [editing, setEditing] = useState(false)
+  const onSave = (newText: string) => {
+    setEditing(false)
+    setText(props.text) // Reset to original text
+    props.onSave(newText)
+  }
+
+  return editing ? (
+    <div className="mt-4">
+      <Textarea
+        className="textarea textarea-bordered mb-1 h-24 w-full resize-none"
+        rows={3}
+        value={text}
+        onChange={(e) => setText(e.target.value || '')}
+        autoFocus
+        onFocus={(e) =>
+          // Focus starts at end of text.
+          e.target.setSelectionRange(text.length, text.length)
+        }
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+            onSave(text)
+          }
+        }}
+      />
+      <Row className="gap-2">
+        <button
+          className="btn btn-neutral btn-outline btn-sm"
+          onClick={() => onSave(text)}
+        >
+          Save
+        </button>
+        <button
+          className="btn btn-error btn-outline btn-sm"
+          onClick={() => setEditing(false)}
+        >
+          Cancel
+        </button>
+      </Row>
+    </div>
+  ) : (
+    <Row>
+      <button
+        className="btn btn-neutral btn-outline btn-xs mt-4"
+        onClick={() => setEditing(true)}
+      >
+        {props.buttonText}
+      </button>
+    </Row>
+  )
+}

web/components/contract/contract-info-dialog.tsx

@@ -1,18 +1,21 @@
 import { DotsHorizontalIcon } from '@heroicons/react/outline'
 import clsx from 'clsx'
 import { useState } from 'react'
-import { Contract } from '../../common/contract'
-import { useFoldsWithTags } from '../hooks/use-fold'
-import { useUser } from '../hooks/use-user'
-import { contractPath, getBinaryProbPercent } from '../lib/firebase/contracts'
-import { Col } from './layout/col'
-import { Modal } from './layout/modal'
-import { Row } from './layout/row'
-import { ShareEmbedButton } from './share-embed-button'
-import { TagsInput } from './tags-input'
-import { FoldTagList } from './tags-list'
-import { Title } from './title'
-import { TweetButton } from './tweet-button'
+import { Contract } from '../../../common/contract'
+import { useFoldsWithTags } from '../../hooks/use-fold'
+import { useUser } from '../../hooks/use-user'
+import {
+  contractPath,
+  getBinaryProbPercent,
+} from '../../lib/firebase/contracts'
+import { Col } from '../layout/col'
+import { Modal } from '../layout/modal'
+import { Row } from '../layout/row'
+import { ShareEmbedButton } from '../share-embed-button'
+import { TagsInput } from '../tags-input'
+import { FoldTagList } from '../tags-list'
+import { Title } from '../title'
+import { TweetButton } from '../tweet-button'
 
 export function ContractInfoDialog(props: { contract: Contract }) {
   const { contract } = props

web/components/contract/contract-overview.tsx

@@ -1,19 +1,19 @@
-import { Contract, tradingAllowed } from '../lib/firebase/contracts'
-import { Col } from './layout/col'
-import { Spacer } from './layout/spacer'
+import { Contract, tradingAllowed } from '../../lib/firebase/contracts'
+import { Col } from '../layout/col'
+import { Spacer } from '../layout/spacer'
 import { ContractProbGraph } from './contract-prob-graph'
-import { useUser } from '../hooks/use-user'
-import { Row } from './layout/row'
-import { Linkify } from './linkify'
+import { useUser } from '../../hooks/use-user'
+import { Row } from '../layout/row'
+import { Linkify } from '../linkify'
 import clsx from 'clsx'
 import { ContractDetails, ResolutionOrChance } from './contract-card'
-import { Bet } from '../../common/bet'
-import { Comment } from '../../common/comment'
-import BetRow from './bet-row'
-import { ContractActivity } from './feed/contract-activity'
-import { AnswersGraph } from './answers/answers-graph'
-import { DPM, FreeResponse, FullContract } from '../../common/contract'
-import { ContractDescription } from './feed/feed-items'
+import { Bet } from '../../../common/bet'
+import { Comment } from '../../../common/comment'
+import BetRow from '../bet-row'
+import { ContractActivity } from '../feed/contract-activity'
+import { AnswersGraph } from '../answers/answers-graph'
+import { DPM, FreeResponse, FullContract } from '../../../common/contract'
+import { ContractDescription } from './contract-description'
 
 export const ContractOverview = (props: {
   contract: Contract

web/components/contract/contract-prob-graph.tsx

@@ -2,11 +2,11 @@ import { DatumValue } from '@nivo/core'
 import { ResponsiveLine } from '@nivo/line'
 import dayjs from 'dayjs'
 import { memo } from 'react'
-import { Bet } from '../../common/bet'
-import { getInitialProbability } from '../../common/calculate'
-import { Binary, CPMM, DPM, FullContract } from '../../common/contract'
-import { useBetsWithoutAntes } from '../hooks/use-bets'
-import { useWindowSize } from '../hooks/use-window-size'
+import { Bet } from '../../../common/bet'
+import { getInitialProbability } from '../../../common/calculate'
+import { Binary, CPMM, DPM, FullContract } from '../../../common/contract'
+import { useBetsWithoutAntes } from '../../hooks/use-bets'
+import { useWindowSize } from '../../hooks/use-window-size'
 
 export const ContractProbGraph = memo(function ContractProbGraph(props: {
   contract: FullContract<DPM | CPMM, Binary>

web/components/contract/contracts-list.tsx

@@ -8,13 +8,16 @@ import {
   Contract,
   listContracts,
   getBinaryProb,
-} from '../lib/firebase/contracts'
-import { User } from '../lib/firebase/users'
-import { Col } from './layout/col'
-import { SiteLink } from './site-link'
+} from '../../lib/firebase/contracts'
+import { User } from '../../lib/firebase/users'
+import { Col } from '../layout/col'
+import { SiteLink } from '../site-link'
 import { ContractCard } from './contract-card'
-import { Sort, useQueryAndSortParams } from '../hooks/use-sort-and-query-params'
-import { Answer } from '../../common/answer'
+import {
+  Sort,
+  useQueryAndSortParams,
+} from '../../hooks/use-sort-and-query-params'
+import { Answer } from '../../../common/answer'
 
 export function ContractsGrid(props: {
   contracts: Contract[]

web/components/feed-create.tsx

@@ -4,7 +4,7 @@ import { useRef, useState } from 'react'
 import { Spacer } from './layout/spacer'
 import { NewContract } from '../pages/create'
 import { firebaseLogin, User } from '../lib/firebase/users'
-import { ContractsGrid } from './contracts-list'
+import { ContractsGrid } from './contract/contracts-list'
 import { Contract, MAX_QUESTION_LENGTH } from '../../common/contract'
 import { Col } from './layout/col'
 import clsx from 'clsx'

web/components/feed/feed-items.tsx

@@ -10,7 +10,6 @@ import {
   UsersIcon,
   XIcon,
 } from '@heroicons/react/solid'
-import dayjs from 'dayjs'
 import clsx from 'clsx'
 import Textarea from 'react-expanding-textarea'
 
@@ -19,7 +18,6 @@ import {
   contractMetrics,
   Contract,
   contractPath,
-  updateContract,
   tradingAllowed,
 } from '../../lib/firebase/contracts'
 import { useUser } from '../../hooks/use-user'
@@ -28,7 +26,7 @@ import { Row } from '../layout/row'
 import { createComment, MAX_COMMENT_LENGTH } from '../../lib/firebase/comments'
 import { formatMoney, formatPercent } from '../../../common/util/format'
 import { Comment } from '../../../common/comment'
-import { ResolutionOrChance } from '../contract-card'
+import { ResolutionOrChance } from '../contract/contract-card'
 import { SiteLink } from '../site-link'
 import { Col } from '../layout/col'
 import { UserLink } from '../user-page'
@@ -37,9 +35,7 @@ import { Bet } from '../../lib/firebase/bets'
 import { JoinSpans } from '../join-spans'
 import { fromNow } from '../../lib/util/time'
 import BetRow from '../bet-row'
-import { parseTags } from '../../../common/util/parse'
 import { Avatar } from '../avatar'
-import { useAdmin } from '../../hooks/use-admin'
 import { Answer } from '../../../common/answer'
 import { ActivityItem } from './activity-items'
 import { FreeResponse, FullContract } from '../../../common/contract'
@@ -265,128 +261,6 @@ export function FeedBet(props: {
   )
 }
 
-function EditContract(props: {
-  text: string
-  onSave: (newText: string) => void
-  buttonText: string
-}) {
-  const [text, setText] = useState(props.text)
-  const [editing, setEditing] = useState(false)
-  const onSave = (newText: string) => {
-    setEditing(false)
-    setText(props.text) // Reset to original text
-    props.onSave(newText)
-  }
-
-  return editing ? (
-    <div className="mt-4">
-      <Textarea
-        className="textarea textarea-bordered mb-1 h-24 w-full resize-none"
-        rows={3}
-        value={text}
-        onChange={(e) => setText(e.target.value || '')}
-        autoFocus
-        onFocus={(e) =>
-          // Focus starts at end of text.
-          e.target.setSelectionRange(text.length, text.length)
-        }
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-            onSave(text)
-          }
-        }}
-      />
-      <Row className="gap-2">
-        <button
-          className="btn btn-neutral btn-outline btn-sm"
-          onClick={() => onSave(text)}
-        >
-          Save
-        </button>
-        <button
-          className="btn btn-error btn-outline btn-sm"
-          onClick={() => setEditing(false)}
-        >
-          Cancel
-        </button>
-      </Row>
-    </div>
-  ) : (
-    <Row>
-      <button
-        className="btn btn-neutral btn-outline btn-xs mt-4"
-        onClick={() => setEditing(true)}
-      >
-        {props.buttonText}
-      </button>
-    </Row>
-  )
-}
-
-export function ContractDescription(props: {
-  contract: Contract
-  isCreator: boolean
-  className?: string
-}) {
-  const { contract, isCreator, className } = props
-  const descriptionTimestamp = () => `${dayjs().format('MMM D, h:mma')}: `
-  const isAdmin = useAdmin()
-
-  // Append the new description (after a newline)
-  async function saveDescription(newText: string) {
-    const newDescription = `${contract.description}\n\n${newText}`.trim()
-    const tags = parseTags(
-      `${newDescription} ${contract.tags.map((tag) => `#${tag}`).join(' ')}`
-    )
-    const lowercaseTags = tags.map((tag) => tag.toLowerCase())
-    await updateContract(contract.id, {
-      description: newDescription,
-      tags,
-      lowercaseTags,
-    })
-  }
-
-  if (!isCreator && !contract.description.trim()) return null
-
-  return (
-    <div
-      className={clsx(
-        'mt-2 whitespace-pre-line break-words text-gray-700',
-        className
-      )}
-    >
-      <Linkify text={contract.description} />
-      <br />
-      {isCreator && (
-        <EditContract
-          // Note: Because descriptionTimestamp is called once, later edits use
-          // a stale timestamp. Ideally this is a function that gets called when
-          // isEditing is set to true.
-          text={descriptionTimestamp()}
-          onSave={saveDescription}
-          buttonText="Add to description"
-        />
-      )}
-      {isAdmin && (
-        <EditContract
-          text={contract.question}
-          onSave={(question) => updateContract(contract.id, { question })}
-          buttonText="ADMIN: Edit question"
-        />
-      )}
-      {/* {isAdmin && (
-        <EditContract
-          text={contract.createdTime.toString()}
-          onSave={(time) =>
-            updateContract(contract.id, { createdTime: Number(time) })
-          }
-          buttonText="ADMIN: Edit createdTime"
-        />
-      )} */}
-    </div>
-  )
-}
-
 function TruncatedComment(props: {
   comment: string
   moreHref: string

web/components/user-page.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import { User } from '../lib/firebase/users'
-import { CreatorContractsList } from './contracts-list'
+import { CreatorContractsList } from './contract/contracts-list'
 import { SEO } from './SEO'
 import { Page } from './page'
 import { SiteLink } from './site-link'

web/pages/[username]/[contractSlug].tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 
 import { useContractWithPreload } from '../../hooks/use-contract'
-import { ContractOverview } from '../../components/contract-overview'
+import { ContractOverview } from '../../components/contract/contract-overview'
 import { BetPanel } from '../../components/bet-panel'
 import { Col } from '../../components/layout/col'
 import { useUser } from '../../hooks/use-user'
@@ -19,7 +19,7 @@ import {
 } from '../../lib/firebase/contracts'
 import { SEO } from '../../components/SEO'
 import { Page } from '../../components/page'
-import { contractTextDetails } from '../../components/contract-card'
+import { contractTextDetails } from '../../components/contract/contract-card'
 import { Bet, listAllBets } from '../../lib/firebase/bets'
 import { Comment, listAllComments } from '../../lib/firebase/comments'
 import Custom404 from '../404'

web/pages/embed/[username]/[contractSlug].tsx

@@ -10,8 +10,8 @@ import { AnswersGraph } from '../../../components/answers/answers-graph'
 import {
   ResolutionOrChance,
   ContractDetails,
-} from '../../../components/contract-card'
-import { ContractProbGraph } from '../../../components/contract-prob-graph'
+} from '../../../components/contract/contract-card'
+import { ContractProbGraph } from '../../../components/contract/contract-prob-graph'
 import { Col } from '../../../components/layout/col'
 import { Row } from '../../../components/layout/row'
 import { Spacer } from '../../../components/layout/spacer'

web/pages/fold/[...slugs]/index.tsx

@@ -21,7 +21,7 @@ import { Spacer } from '../../../components/layout/spacer'
 import { Col } from '../../../components/layout/col'
 import { useUser } from '../../../hooks/use-user'
 import { useFold } from '../../../hooks/use-fold'
-import { SearchableGrid } from '../../../components/contracts-list'
+import { SearchableGrid } from '../../../components/contract/contracts-list'
 import { useRouter } from 'next/router'
 import clsx from 'clsx'
 import { scoreCreators, scoreTraders } from '../../../../common/scoring'

web/pages/landing-page.tsx

@@ -8,7 +8,7 @@ import {
 } from '@heroicons/react/outline'
 
 import { firebaseLogin } from '../lib/firebase/users'
-import { ContractsGrid } from '../components/contracts-list'
+import { ContractsGrid } from '../components/contract/contracts-list'
 import { Col } from '../components/layout/col'
 import Link from 'next/link'
 import { Contract } from '../lib/firebase/contracts'

web/pages/markets.tsx

@@ -1,4 +1,7 @@
-import { ContractsGrid, SearchableGrid } from '../components/contracts-list'
+import {
+  ContractsGrid,
+  SearchableGrid,
+} from '../components/contract/contracts-list'
 import { Page } from '../components/page'
 import { SEO } from '../components/SEO'
 import { Title } from '../components/title'

web/pages/tag/[tag].tsx

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import { SearchableGrid } from '../../components/contracts-list'
+import { SearchableGrid } from '../../components/contract/contracts-list'
 import { Page } from '../../components/page'
 import { Title } from '../../components/title'
 import { useContracts } from '../../hooks/use-contracts'