From 19c0f83b85d0da0d7ce8c2ee47fca5a6121c3a49 Mon Sep 17 00:00:00 2001 From: jahooma Date: Tue, 11 Jan 2022 21:56:11 -0600 Subject: [PATCH] Activity feed on home page! All markets navbar option. --- web/components/nav-bar.tsx | 35 ++++++++++++++++++++--------- web/components/profile-menu.tsx | 8 +++++-- web/pages/activity.tsx | 12 ++++++---- web/pages/create.tsx | 2 +- web/pages/index.tsx | 40 +++++++++++++++++++++++++-------- web/pages/landing-page.tsx | 9 +------- web/pages/markets.tsx | 38 ++++++------------------------- 7 files changed, 78 insertions(+), 66 deletions(-) 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 24340ef0..136b1425 100644 --- a/web/pages/activity.tsx +++ b/web/pages/activity.tsx @@ -69,11 +69,15 @@ 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.length > 0 ? ( <> @@ -91,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 13c1a98d..f0bab61a 100644 --- a/web/pages/create.tsx +++ b/web/pages/create.tsx @@ -212,7 +212,7 @@ export default function NewContract() { <Spacer h={6} /> - <ActivityFeed /> + <ActivityFeed contracts={[]} recentComments={[]} /> </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}