From c87f6b7c4a043c5d3dbbf408580353dbfd6ca889 Mon Sep 17 00:00:00 2001 From: mantikoros Date: Tue, 11 Jan 2022 22:02:31 -0600 Subject: [PATCH] Merge branch 'main' into new-dpm --- web/components/contract-feed.tsx | 14 ++++++----- web/components/nav-bar.tsx | 35 +++++++++++++++++++--------- web/components/profile-menu.tsx | 8 +++++-- web/pages/activity.tsx | 30 +++++++++++++----------- web/pages/create.tsx | 8 +------ web/pages/index.tsx | 40 +++++++++++++++++++++++++------- web/pages/landing-page.tsx | 9 +------ web/pages/markets.tsx | 38 ++++++------------------------ 8 files changed, 94 insertions(+), 88 deletions(-) diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx index 0a317c82..7d02427f 100644 --- a/web/components/contract-feed.tsx +++ b/web/components/contract-feed.tsx @@ -29,8 +29,8 @@ import { createComment } from '../lib/firebase/comments' import { useComments } from '../hooks/use-comments' import { formatMoney } from '../lib/util/format' import { ResolutionOrChance } from './contract-card' -import Link from 'next/link' import { SiteLink } from './site-link' +import { Col } from './layout/col' dayjs.extend(relativeTime) function FeedComment(props: { activityItem: any }) { @@ -73,7 +73,7 @@ function Timestamp(props: { time: number }) { const { time } = props return ( {dayjs(time).fromNow()} @@ -149,6 +149,8 @@ export function ContractDescription(props: { setDescription(editStatement()) } + if (!isCreator && !contract.description.trim()) return null + return (
@@ -213,14 +215,14 @@ function FeedQuestion(props: { contract: Contract }) {
-
+
{contract.creatorName} asked{' '}
- + {contract.question} @@ -229,7 +231,7 @@ function FeedQuestion(props: { contract: Contract }) { resolution={contract.resolution} probPercent={probPercent} /> - +
diff --git a/web/components/nav-bar.tsx b/web/components/nav-bar.tsx index cf2a20d3..210a1814 100644 --- a/web/components/nav-bar.tsx +++ b/web/components/nav-bar.tsx @@ -35,6 +35,30 @@ export function NavBar(props: { {children} + + + + + {!isLandingPage && ( + + + + )} + {user ? ( ) : ( @@ -51,17 +75,6 @@ function SignedInHeaders(props: { user: User; themeClasses?: string }) { return ( <> - - - - } /> @@ -33,7 +33,10 @@ function getNavigationOptions(user: User, options: { mobile: boolean }) { }, ...(mobile ? [ - { name: 'About', href: '/about' }, + { + name: 'All markets', + href: '/markets', + }, { name: 'Create a market', href: '/create', @@ -56,6 +59,7 @@ function getNavigationOptions(user: User, options: { mobile: boolean }) { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh', }, + ...(mobile ? [{ name: 'About', href: '/about' }] : []), { name: 'Sign out', href: '#', diff --git a/web/pages/activity.tsx b/web/pages/activity.tsx index 4feb494c..136b1425 100644 --- a/web/pages/activity.tsx +++ b/web/pages/activity.tsx @@ -1,17 +1,17 @@ import _ from 'lodash' import { ContractFeed } from '../components/contract-feed' -import { Row } from '../components/layout/row' import { Page } from '../components/page' import { Title } from '../components/title' import { useRecentComments } from '../hooks/use-comments' import { useContracts } from '../hooks/use-contracts' import { Contract } from '../lib/firebase/contracts' import { Comment } from '../lib/firebase/comments' +import { Col } from '../components/layout/col' function FeedCard(props: { contract: Contract }) { const { contract } = props return ( -
+
) @@ -69,21 +69,23 @@ function findActiveContracts( return contracts } -export function ActivityFeed() { - const contracts = useContracts() || [] - const recentComments = useRecentComments() || [] +export function ActivityFeed(props: { + contracts: Contract[] + recentComments: Comment[] +}) { + const contracts = useContracts() ?? props.contracts + const recentComments = useRecentComments() ?? props.recentComments // TODO: Handle static props correctly? const activeContracts = findActiveContracts(contracts, recentComments) - return contracts ? ( + + return contracts.length > 0 ? ( <> - <Row className="gap-4"> - <div> - {activeContracts.map((contract) => ( - <FeedCard contract={contract} /> - ))} - </div> - </Row> + <Col className="gap-4"> + {activeContracts.map((contract) => ( + <FeedCard contract={contract} /> + ))} + </Col> </> ) : ( <></> @@ -93,7 +95,7 @@ export function ActivityFeed() { export default function ActivityPage() { return ( <Page> - <ActivityFeed /> + <ActivityFeed contracts={[]} recentComments={[]} /> </Page> ) } diff --git a/web/pages/create.tsx b/web/pages/create.tsx index c4f0de27..ddce4ff6 100644 --- a/web/pages/create.tsx +++ b/web/pages/create.tsx @@ -4,7 +4,6 @@ import clsx from 'clsx' import dayjs from 'dayjs' import Textarea from 'react-expanding-textarea' -import { CreatorContractsList } from '../components/contracts-list' import { Spacer } from '../components/layout/spacer' import { Title } from '../components/title' import { useUser } from '../hooks/use-user' @@ -14,7 +13,6 @@ import { AdvancedPanel } from '../components/advanced-panel' import { createContract } from '../lib/firebase/api-call' import { Row } from '../components/layout/row' import { AmountInput } from '../components/amount-input' -import { ActivityFeed } from './activity' // Allow user to create a new contract export default function NewContract() { @@ -84,7 +82,7 @@ export default function NewContract() { <Page> <Title text="Create a new prediction market" /> - <div className="w-full bg-gray-100 rounded-lg shadow-md px-6 py-4"> + <div className="w-full max-w-3xl bg-gray-100 rounded-lg shadow-md px-6 py-4"> {/* Create a Tailwind form that takes in all the fields needed for a new contract */} {/* When the form is submitted, create a new contract in the database */} <form> @@ -210,10 +208,6 @@ export default function NewContract() { </div> </form> </div> - - <Spacer h={6} /> - - <ActivityFeed /> </Page> ) } diff --git a/web/pages/index.tsx b/web/pages/index.tsx index 80f9a7d3..a641b6b9 100644 --- a/web/pages/index.tsx +++ b/web/pages/index.tsx @@ -1,41 +1,63 @@ import React from 'react' import _ from 'lodash' import { useUser } from '../hooks/use-user' -import Markets from './markets' -import LandingPage from './landing-page' import { Contract, getHotContracts, listAllContracts, } from '../lib/firebase/contracts' +import LandingPage from './landing-page' +import { ContractsGrid } from '../components/contracts-list' +import { Spacer } from '../components/layout/spacer' +import { Page } from '../components/page' +import { Title } from '../components/title' +import { ActivityFeed } from './activity' +import { getRecentComments, Comment } from '../lib/firebase/comments' export async function getStaticProps() { - const [contracts, hotContracts] = await Promise.all([ + const [contracts, hotContracts, recentComments] = await Promise.all([ listAllContracts().catch((_) => []), getHotContracts().catch(() => []), + getRecentComments().catch(() => []), ]) return { props: { contracts, hotContracts, + recentComments, }, revalidate: 60, // regenerate after a minute } } -const Home = (props: { contracts: Contract[]; hotContracts: Contract[] }) => { +const Home = (props: { + contracts: Contract[] + hotContracts: Contract[] + recentComments: Comment[] +}) => { const user = useUser() if (user === undefined) return <></> - const { contracts, hotContracts } = props + const { contracts, hotContracts, recentComments } = props - return user ? ( - <Markets contracts={contracts} hotContracts={hotContracts} /> - ) : ( - <LandingPage hotContracts={hotContracts} /> + if (user === null) { + return <LandingPage hotContracts={hotContracts} /> + } + + return ( + <Page> + <div className="w-full bg-indigo-50 border-2 border-indigo-100 p-6 rounded-lg shadow-md"> + <Title className="mt-0" text="🔥 Markets" /> + <ContractsGrid contracts={hotContracts} showHotVolume /> + </div> + + <Spacer h={10} /> + + <ActivityFeed contracts={contracts} recentComments={recentComments} /> + </Page> ) } diff --git a/web/pages/landing-page.tsx b/web/pages/landing-page.tsx index f3379576..12f2e675 100644 --- a/web/pages/landing-page.tsx +++ b/web/pages/landing-page.tsx @@ -34,14 +34,7 @@ const scrollToAbout = () => { function Hero() { return ( <div className="overflow-hidden h-screen bg-world-trading bg-cover bg-gray-900 bg-center lg:bg-left"> - <NavBar isLandingPage darkBackground> - <div - className="text-base font-medium text-white ml-8 cursor-pointer hover:underline hover:decoration-teal-500 hover:decoration-2" - onClick={scrollToAbout} - > - About - </div> - </NavBar> + <NavBar isLandingPage darkBackground /> <main> <div className="pt-32 sm:pt-8 lg:pt-0 lg:pb-14 lg:overflow-hidden"> <div className="mx-auto max-w-7xl lg:px-8 xl:px-0"> diff --git a/web/pages/markets.tsx b/web/pages/markets.tsx index 5a3c70f8..961c318e 100644 --- a/web/pages/markets.tsx +++ b/web/pages/markets.tsx @@ -1,54 +1,30 @@ import _ from 'lodash' -import { ContractsGrid, SearchableGrid } from '../components/contracts-list' -import { Spacer } from '../components/layout/spacer' +import { SearchableGrid } from '../components/contracts-list' import { Page } from '../components/page' -import { Title } from '../components/title' -import { useContracts, useHotContracts } from '../hooks/use-contracts' +import { useContracts } from '../hooks/use-contracts' import { useQueryAndSortParams } from '../hooks/use-sort-and-query-params' -import { - Contract, - getHotContracts, - listAllContracts, -} from '../lib/firebase/contracts' +import { Contract, listAllContracts } from '../lib/firebase/contracts' export async function getStaticProps() { - const [contracts, hotContracts] = await Promise.all([ - listAllContracts().catch((_) => []), - getHotContracts().catch(() => []), - ]) + const contracts = await listAllContracts().catch((_) => {}) return { props: { contracts, - hotContracts, }, revalidate: 60, // regenerate after a minute } } -export default function Markets(props: { - contracts: Contract[] - hotContracts: Contract[] -}) { - const contracts = useContracts() - const hotContracts = useHotContracts() +export default function Markets(props: { contracts: Contract[] }) { + const contracts = useContracts() ?? props.contracts const { query, setQuery, sort, setSort } = useQueryAndSortParams() - const readyHotContracts = hotContracts ?? props.hotContracts - const readyContracts = contracts ?? props.contracts - return ( <Page> - <div className="w-full bg-indigo-50 border-2 border-indigo-100 p-6 rounded-lg shadow-md"> - <Title className="mt-0" text="🔥 Markets" /> - <ContractsGrid contracts={readyHotContracts} showHotVolume /> - </div> - - <Spacer h={10} /> - <SearchableGrid - contracts={readyContracts} + contracts={contracts} query={query} setQuery={setQuery} sort={sort}