manifold/web/pages/home.tsx

63 lines
1.7 KiB
TypeScript
Raw Normal View History

import React from 'react'
2022-01-23 00:16:23 +00:00
import Router from 'next/router'
import _ from 'lodash'
2022-01-23 00:16:23 +00:00
import { Page } from '../components/page'
import { ActivityFeed } from '../components/feed/activity-feed'
2022-01-23 00:16:23 +00:00
import FeedCreate from '../components/feed-create'
import { Spacer } from '../components/layout/spacer'
import { Col } from '../components/layout/col'
import { useUser } from '../hooks/use-user'
2022-02-03 23:12:09 +00:00
import { LoadingIndicator } from '../components/loading-indicator'
import { useRecentBets } from '../hooks/use-bets'
import { useActiveContracts } from '../hooks/use-contracts'
import { useRecentComments } from '../hooks/use-comments'
import { useAlgoFeed } from '../hooks/use-algo-feed'
2022-01-23 00:16:23 +00:00
const Home = () => {
2022-01-23 00:16:23 +00:00
const user = useUser()
const contracts = useActiveContracts()
const contractsDict = _.keyBy(contracts, 'id')
const recentBets = useRecentBets()
const recentComments = useRecentComments()
const feedContracts = useAlgoFeed(user, contracts, recentBets, recentComments)
const updatedContracts = feedContracts.map(
(contract) => contractsDict[contract.id] ?? contract
)
2022-01-23 00:16:23 +00:00
if (user === null) {
Router.replace('/')
return <></>
}
const activityContent =
contracts && recentBets && recentComments ? (
<ActivityFeed
contracts={updatedContracts}
recentBets={recentBets}
recentComments={recentComments}
mode="only-recent"
/>
) : (
<LoadingIndicator className="mt-4" />
)
2022-01-23 00:16:23 +00:00
return (
<Page assertUser="signed-in">
2022-01-23 00:16:23 +00:00
<Col className="items-center">
<Col className="w-full max-w-[700px]">
<FeedCreate user={user ?? undefined} />
<Spacer h={10} />
{activityContent}
2022-01-23 00:16:23 +00:00
</Col>
</Col>
</Page>
)
}
export default Home