open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

contract: static props, useContractWithPreload

Browse Source
This commit is contained in:
mantikoros 2021-12-16 00:36:51 -06:00
parent 2a08f70a9f
commit 00f5fbcf93
2 changed files with 30 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/hooks/use-contract.ts
View File

@ -12,3 +12,16 @@ export const useContract = (contractId: string) => {
return contract return contract
} }
export const useContractWithPreload = (
contractId: string,
initial: Contract | null
) => {
const [contract, setContract] = useState<Contract | null>(initial)
useEffect(() => {
if (contractId) return listenForContract(contractId, setContract)
}, [contractId])
return contract
}

41
web/pages/[username]/[contractId].tsx
View File

@ -1,9 +1,8 @@
import React from 'react' import React from 'react'
import { useRouter } from 'next/router'
import Head from 'next/head' import Head from 'next/head'
import clsx from 'clsx' import clsx from 'clsx'
import { useContract } from '../../hooks/use-contract' import { useContract, useContractWithPreload } from '../../hooks/use-contract'
import { Header } from '../../components/header' import { Header } from '../../components/header'
import { ContractOverview } from '../../components/contract-overview' import { ContractOverview } from '../../components/contract-overview'
import { BetPanel } from '../../components/bet-panel' import { BetPanel } from '../../components/bet-panel'
@ -12,41 +11,35 @@ import { useUser } from '../../hooks/use-user'
import { ResolutionPanel } from '../../components/resolution-panel' import { ResolutionPanel } from '../../components/resolution-panel'
import { Contract, getContract } from '../../lib/firebase/contracts' import { Contract, getContract } from '../../lib/firebase/contracts'
export async function getServerSideProps({ params }: { params: any }) { export async function getStaticProps(props: { params: any }) {
const contract = await getContract(params.contractId) const { contractId } = props.params
console.log('params', params, 'contract', contract) const contract = (await getContract(contractId)) || null
return { return {
props: { props: {
contract: contract || null, contractId,
contract,
}, },
revalidate: 60, // regenerate after a minute
} }
} }
// export async function getStaticPaths() { export async function getStaticPaths() {
// return { return { paths: [], fallback: 'blocking' }
// paths: [], }
// fallback: 'blocking',
// }
// }
export default function ContractPage({ contract }: { contract: Contract }) { export default function ContractPage(props: {
contract: Contract
contractId: string
}) {
const user = useUser() const user = useUser()
// const router = useRouter() const contract = useContractWithPreload(props.contractId, props.contract)
// 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) { if (!contract) {
return <div>Contract not found...</div> return <div>Contract not found...</div>
} }
if (!contract) return <div />
const { creatorId, isResolved } = contract const { creatorId, isResolved } = contract
const isCreator = user?.id === creatorId const isCreator = user?.id === creatorId