manifold/web/pages/[username]/[contractId].tsx

import React from 'react'
import { useRouter } from 'next/router'
import Head from 'next/head'
import clsx from 'clsx'

import { useContract } from '../../hooks/use-contract'
import { Header } from '../../components/header'
import { ContractOverview } from '../../components/contract-overview'
import { BetPanel } from '../../components/bet-panel'
import { Col } from '../../components/layout/col'
import { useUser } from '../../hooks/use-user'
import { ResolutionPanel } from '../../components/resolution-panel'
import { Contract, getContract } from '../../lib/firebase/contracts'

export async function getServerSideProps({ params }: { params: any }) {
  const contract = await getContract(params.contractId)
  // console.log('params', params, 'contract', contract)

  return {
    props: {
      contract: contract || null,
    },
  }
}

// export async function getStaticPaths() {
//   return {
//     paths: [],
//     fallback: 'blocking',
//   }
// }

export default function ContractPage({ contract }: { contract: Contract }) {
  const user = null // useUser()

  // const router = useRouter()
  // const { contractId } = router.query as { contractId: string }
  // const contract = useContract(contractId)
  // if (contract === 'loading') {
  //   return <div />
  // }
  // if (!contract) {
  //   return <div>Contract not found...</div>
  // }

  if (contract === null) {
    return <div>Contract not found...</div>
  }
  if (!contract) return <div />

  const { creatorId, isResolved } = contract
  // const isCreator = user?.id === creatorId

  const isCreator = false

  return (
    <Col className="max-w-7xl mx-auto sm:px-6 lg:px-8">
      <Head>
        <title>{contract.question} | Mantic Markets</title>
        <meta
          property="og:title"
          name="twitter:title"
          content={contract.question}
          key="title"
        />
        <meta name="description" content={contract.description} />
        <meta
          property="og:description"
          name="twitter:description"
          content={contract.description}
        />
      </Head>

      <Header />

      <Col
        className={clsx(
          'w-full items-start md:flex-row mt-4',
          isResolved ? 'md:justify-center' : 'md:justify-between'
        )}
      >
        <ContractOverview
          contract={contract}
          className="max-w-4xl w-full p-4"
        />

        {!isResolved && (
          <>
            <div className="mt-12 md:mt-0 md:ml-8" />

            <Col className="w-full sm:w-auto sm:self-center">
              <BetPanel contract={contract} />

              {isCreator && user && (
                <ResolutionPanel creator={user} contract={contract} />
              )}
            </Col>
          </>
        )}
      </Col>
    </Col>
  )
}
Contract page (#5) * Add Firestore package and config * Upload basic Firebase Auth code * Basic ability to sign in and view profile * Move html head content to Next's _document * Apply dark theme to all DaisyUI components * Add contract page * Smaller width bet input * Add some buttons * Add Row, Col, and Spacer components * Implement skeleton ContractPage * Apply dark theme to all DaisyUI components * Fix hooks lints (#3) * Add background to bet panel * Changes based on review comments Co-authored-by: Austin Chen <akrolsmir@gmail.com> 2021-12-10 14:56:17 +00:00			`import React from 'react'`
Create contract page 2021-12-09 21:31:02 +00:00			`import { useRouter } from 'next/router'`
add meta tags to contract 2021-12-16 03:14:00 +00:00			`import Head from 'next/head'`
			`import clsx from 'clsx'`

Add template contract page 2021-12-09 22:05:55 +00:00			`import { useContract } from '../../hooks/use-contract'`
Contract page (#5) * Add Firestore package and config * Upload basic Firebase Auth code * Basic ability to sign in and view profile * Move html head content to Next's _document * Apply dark theme to all DaisyUI components * Add contract page * Smaller width bet input * Add some buttons * Add Row, Col, and Spacer components * Implement skeleton ContractPage * Apply dark theme to all DaisyUI components * Fix hooks lints (#3) * Add background to bet panel * Changes based on review comments Co-authored-by: Austin Chen <akrolsmir@gmail.com> 2021-12-10 14:56:17 +00:00			`import { Header } from '../../components/header'`
			`import { ContractOverview } from '../../components/contract-overview'`
			`import { BetPanel } from '../../components/bet-panel'`
Better layout on mobile for contract page 2021-12-10 18:52:11 +00:00			`import { Col } from '../../components/layout/col'`
Add UI for resolution panel! 2021-12-14 00:00:02 +00:00			`import { useUser } from '../../hooks/use-user'`
			`import { ResolutionPanel } from '../../components/resolution-panel'`
test ssg 2021-12-16 03:24:11 +00:00			`import { Contract, getContract } from '../../lib/firebase/contracts'`
ContractPage: static paths blocking 2021-12-16 03:42:05 +00:00
test ssr 2021-12-16 03:45:31 +00:00			`export async function getServerSideProps({ params }: { params: any }) {`
test ssg 2021-12-16 03:24:11 +00:00			`const contract = await getContract(params.contractId)`
test 2021-12-16 04:52:07 +00:00			`// console.log('params', params, 'contract', contract)`
test ssg 2021-12-16 03:24:11 +00:00
			`return {`
			`props: {`
			`contract: contract \|\| null,`
			`},`
			`}`
			`}`
Create contract page 2021-12-09 21:31:02 +00:00
test ssr 2021-12-16 03:45:31 +00:00			`// export async function getStaticPaths() {`
			`// return {`
			`// paths: [],`
			`// fallback: 'blocking',`
			`// }`
			`// }`
add meta tags to contract 2021-12-16 03:14:00 +00:00
test ssg 2021-12-16 03:24:11 +00:00			`export default function ContractPage({ contract }: { contract: Contract }) {`
test 2021-12-16 04:10:14 +00:00			`const user = null // useUser()`
Add template contract page 2021-12-09 22:05:55 +00:00
test 2021-12-16 04:10:14 +00:00			`// const router = useRouter()`
			`// const { contractId } = router.query as { contractId: string }`
test ssg 2021-12-16 03:24:11 +00:00			`// const contract = useContract(contractId)`
			`// if (contract === 'loading') {`
			`// return <div />`
			`// }`
			`// if (!contract) {`
add meta tags to contract 2021-12-16 03:14:00 +00:00			`// return <div>Contract not found...</div>`
			`// }`
test ssg 2021-12-16 03:24:11 +00:00
			`if (contract === null) {`
			`return <div>Contract not found...</div>`
			`}`
			`if (!contract) return <div />`
add meta tags to contract 2021-12-16 03:14:00 +00:00
Simple market resolved panel 2021-12-14 06:12:25 +00:00			`const { creatorId, isResolved } = contract`
test 2021-12-16 04:12:27 +00:00			`// const isCreator = user?.id === creatorId`

			`const isCreator = false`
Add UI for resolution panel! 2021-12-14 00:00:02 +00:00
Add template contract page 2021-12-09 22:05:55 +00:00			`return (`
test 2021-12-16 04:52:07 +00:00			`<Col className="max-w-7xl mx-auto sm:px-6 lg:px-8">`
add meta tags to contract 2021-12-16 03:14:00 +00:00			`<Head>`
test 2021-12-16 04:52:07 +00:00			`<title>{contract.question} \| Mantic Markets</title>`
add meta tags to contract 2021-12-16 03:14:00 +00:00			`<meta`
			`property="og:title"`
			`name="twitter:title"`
			`content={contract.question}`
			`key="title"`
			`/>`
test ssg 2021-12-16 03:24:11 +00:00			`<meta name="description" content={contract.description} />`
add meta tags to contract 2021-12-16 03:14:00 +00:00			`<meta`
			`property="og:description"`
			`name="twitter:description"`
			`content={contract.description}`
			`/>`
			`</Head>`

test 2021-12-16 04:52:07 +00:00			`<Header />`

			`<Col`
			`className={clsx(`
			`'w-full items-start md:flex-row mt-4',`
			`isResolved ? 'md:justify-center' : 'md:justify-between'`
			`)}`
			`>`
			`<ContractOverview`
			`contract={contract}`
			`className="max-w-4xl w-full p-4"`
			`/>`
test 2021-12-16 04:10:14 +00:00
test 2021-12-16 04:52:07 +00:00			`{!isResolved && (`
			`<>`
			`<div className="mt-12 md:mt-0 md:ml-8" />`
test 2021-12-16 04:10:14 +00:00
test 2021-12-16 04:52:07 +00:00			`<Col className="w-full sm:w-auto sm:self-center">`
			`<BetPanel contract={contract} />`
test 2021-12-16 04:10:14 +00:00
test 2021-12-16 04:52:07 +00:00			`{isCreator && user && (`
			`<ResolutionPanel creator={user} contract={contract} />`
			`)}`
			`</Col>`
			`</>`
			`)}`
Graph bets by afterProb. 2021-12-12 22:14:52 +00:00			`</Col>`
test 2021-12-16 04:52:07 +00:00			`</Col>`
Add template contract page 2021-12-09 22:05:55 +00:00			`)`
			`}`