Add contract page
This commit is contained in:
parent
b41c467fcb
commit
1cd3e2f1be
15
web/components/contract-overview.tsx
Normal file
15
web/components/contract-overview.tsx
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
import { Contract } from '../lib/firebase/contracts'
|
||||||
|
|
||||||
|
export const ContractOverview = (props: {
|
||||||
|
contract: Contract
|
||||||
|
}) => {
|
||||||
|
const { contract } = props
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full flex">
|
||||||
|
<div className="text-xl font-medium p-10">
|
||||||
|
{contract.question}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
13
web/hooks/use-contract.ts
Normal file
13
web/hooks/use-contract.ts
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import { Contract, listenForContract } from '../lib/firebase/contracts'
|
||||||
|
|
||||||
|
export const useContract = (contractId: string) => {
|
||||||
|
const [contract, setContract] = useState<Contract | null | 'loading'>('loading')
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (contractId)
|
||||||
|
return listenForContract(contractId, setContract)
|
||||||
|
}, [contractId])
|
||||||
|
|
||||||
|
return contract
|
||||||
|
}
|
12
web/hooks/use-user.ts
Normal file
12
web/hooks/use-user.ts
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import { listenForLogin, User } from '../lib/firebase/users'
|
||||||
|
|
||||||
|
export const useUser = () => {
|
||||||
|
const [user, setUser] = useState<User | null>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
return listenForLogin(setUser)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return user
|
||||||
|
}
|
20
web/lib/firebase/contracts.ts
Normal file
20
web/lib/firebase/contracts.ts
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
import { collection, onSnapshot, doc } from '@firebase/firestore'
|
||||||
|
import { db } from './init'
|
||||||
|
|
||||||
|
export type Contract = {
|
||||||
|
id: string
|
||||||
|
question: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const contractCollection = collection(db, 'contracts')
|
||||||
|
|
||||||
|
export function listenForContract(
|
||||||
|
contractId: string,
|
||||||
|
setContract: (contract: Contract) => void
|
||||||
|
) {
|
||||||
|
const contractRef = doc(contractCollection, contractId)
|
||||||
|
|
||||||
|
return onSnapshot(contractRef, (contractSnap) => {
|
||||||
|
setContract(contractSnap.data() as Contract)
|
||||||
|
})
|
||||||
|
}
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { getFirestore } from '@firebase/firestore'
|
||||||
import { initializeApp } from 'firebase/app'
|
import { initializeApp } from 'firebase/app'
|
||||||
const firebaseConfig = {
|
const firebaseConfig = {
|
||||||
apiKey: 'AIzaSyDp3J57vLeAZCzxLD-vcPaGIkAmBoGOSYw',
|
apiKey: 'AIzaSyDp3J57vLeAZCzxLD-vcPaGIkAmBoGOSYw',
|
||||||
|
@ -11,6 +12,8 @@ const firebaseConfig = {
|
||||||
|
|
||||||
// Initialize Firebase
|
// Initialize Firebase
|
||||||
export const app = initializeApp(firebaseConfig)
|
export const app = initializeApp(firebaseConfig)
|
||||||
|
export const db = getFirestore(app)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Note: this is still throwing a console error atm...
|
// Note: this is still throwing a console error atm...
|
||||||
import('firebase/analytics').then((analytics) => {
|
import('firebase/analytics').then((analytics) => {
|
||||||
|
|
27
web/pages/contract/[contractId].tsx
Normal file
27
web/pages/contract/[contractId].tsx
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
|
import { useContract } from '../../hooks/use-contract'
|
||||||
|
import { useUser } from '../../hooks/use-user'
|
||||||
|
|
||||||
|
export default function ContractPage() {
|
||||||
|
const user = useUser()
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const { contractId } = router.query as { contractId: string }
|
||||||
|
|
||||||
|
const contract = useContract(contractId)
|
||||||
|
|
||||||
|
if (contract === 'loading') {
|
||||||
|
return <div>Loading...</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
if (contract === null) {
|
||||||
|
return <div>Contract not found...</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div>{contract.id}</div>
|
||||||
|
<div>{contract.question}</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user