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

Use tabs component on /home

Browse Source
This commit is contained in:
Austin Chen 2022-03-30 22:57:19 -07:00
parent a2282f5442
commit af86bc1acf
1 changed files with 33 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
web/pages/home.tsx
View File

@ -1,7 +1,6 @@
import React, { useState } from 'react' import React from 'react'
import Router from 'next/router' import Router from 'next/router'
import { SparklesIcon, GlobeAltIcon } from '@heroicons/react/solid' import { SparklesIcon, GlobeAltIcon } from '@heroicons/react/solid'
import clsx from 'clsx'
import _ from 'lodash' import _ from 'lodash'
import { Contract } from '../lib/firebase/contracts' import { Contract } from '../lib/firebase/contracts'
@ -17,8 +16,6 @@ import { Col } from '../components/layout/col'
import { useUser } from '../hooks/use-user' import { useUser } from '../hooks/use-user'
import { Fold } from '../../common/fold' import { Fold } from '../../common/fold'
import { LoadingIndicator } from '../components/loading-indicator' import { LoadingIndicator } from '../components/loading-indicator'
import { Row } from '../components/layout/row'
import { FastFoldFollowing } from '../components/folds/fast-fold-following'
import { import {
getAllContractInfo, getAllContractInfo,
useExploreContracts, useExploreContracts,
@ -29,7 +26,7 @@ import { fromPropz, usePropz } from '../hooks/use-propz'
import { useGetRecentBets, useRecentBets } from '../hooks/use-bets' import { useGetRecentBets, useRecentBets } from '../hooks/use-bets'
import { useActiveContracts } from '../hooks/use-contracts' import { useActiveContracts } from '../hooks/use-contracts'
import { useRecentComments } from '../hooks/use-comments' import { useRecentComments } from '../hooks/use-comments'
import { IS_PRIVATE_MANIFOLD } from '../../common/envs/constants' import { Tabs } from '../components/layout/tabs'
export const getStaticProps = fromPropz(getStaticPropz) export const getStaticProps = fromPropz(getStaticPropz)
export async function getStaticPropz() { export async function getStaticPropz() {
@ -73,13 +70,22 @@ const Home = (props: {
const exploreContracts = useExploreContracts() const exploreContracts = useExploreContracts()
const [feedMode, setFeedMode] = useState<'activity' | 'explore'>('activity')
if (user === null) { if (user === null) {
Router.replace('/') Router.replace('/')
return <></> return <></>
} }
const activityContent = recentBets ? (
<ActivityFeed
contracts={activeContracts}
recentBets={recentBets}
recentComments={recentComments}
mode="only-recent"
/>
) : (
<LoadingIndicator className="mt-4" />
)
return ( return (
<Page assertUser="signed-in"> <Page assertUser="signed-in">
<Col className="items-center"> <Col className="items-center">
@ -98,51 +104,28 @@ const Home = (props: {
<Spacer h={5} /> <Spacer h={5} />
<Col className="mb-3 gap-2 text-sm text-gray-800 sm:flex-row"> <Tabs
<Row className="gap-2"> tabs={[
<div className="tabs"> {
<div title: 'Recent activity',
className={clsx( tabIcon: (
'tab gap-2',
feedMode === 'activity' && 'tab-active'
)}
onClick={() => setFeedMode('activity')}
>
<SparklesIcon className="inline h-5 w-5" aria-hidden="true" /> <SparklesIcon className="inline h-5 w-5" aria-hidden="true" />
Recent activity ),
</div> content: activityContent,
<div },
className={clsx( {
'tab gap-2', title: 'Explore',
feedMode === 'explore' && 'tab-active' tabIcon: (
)}
onClick={() => setFeedMode('explore')}
>
<GlobeAltIcon className="inline h-5 w-5" aria-hidden="true" /> <GlobeAltIcon className="inline h-5 w-5" aria-hidden="true" />
Explore ),
</div> content: exploreContracts ? (
</div> <SummaryActivityFeed contracts={exploreContracts} />
</Row> ) : (
</Col> <LoadingIndicator className="mt-4" />
),
{feedMode === 'activity' && },
(recentBets ? ( ]}
<ActivityFeed />
contracts={activeContracts}
recentBets={recentBets}
recentComments={recentComments}
mode="only-recent"
/>
) : (
<LoadingIndicator className="mt-4" />
))}
{feedMode === 'explore' &&
(exploreContracts ? (
<SummaryActivityFeed contracts={exploreContracts} />
) : (
<LoadingIndicator className="mt-4" />
))}
</Col> </Col>
</Col> </Col>
</Page> </Page>