manifold/web/pages/home.tsx
James Grugett 06b7e49e98
[In progress] Server-side feed computation (#106)
* Store view counts & last viewed time

* Schedule updating user recommendations. Compute using tf-idf.

* Update contract's lastBetTime and lastCommentTime on new bets and comments.

* Remove contract's lastUpdatedTime

* Remove folds activity feed

* Implement getFeed cloud function

* Hook up client to use getFeed

* Script to cache viewCounts and lastViewTime

* Batched wait all userRecommendations

* Cache view script runs on all users

* Update user feed each hour and get feed from cache doc.

* Delete view cache script

* Update feed script

* Tweak feed algorithm

* Compute recommendation scores from updateUserFeed

* Disable lastViewedScore factor

* Update lastCommentTime script

* Comment out console.log

* Fix timeout issue by calling new cloud functions with part of the work.

* Listen for contract updates to feed.

* Handle new user: use default feed of top markets this week

* Track lastUpdatedTime

* Tweak logic of calling cloud functions in batches

* Tweak cloud function batching
2022-05-01 11:36:54 -05:00

76 lines
2.1 KiB
TypeScript

import React, { useEffect } from 'react'
import Router, { useRouter } from 'next/router'
import _ from 'lodash'
import { Page } from '../components/page'
import { ActivityFeed } from '../components/feed/activity-feed'
import FeedCreate from '../components/feed-create'
import { Spacer } from '../components/layout/spacer'
import { Col } from '../components/layout/col'
import { useUser } from '../hooks/use-user'
import { LoadingIndicator } from '../components/loading-indicator'
import { useAlgoFeed } from '../hooks/use-algo-feed'
import { ContractPageContent } from './[username]/[contractSlug]'
const Home = () => {
const user = useUser()
const feed = useAlgoFeed(user)
const router = useRouter()
const { u: username, s: slug } = router.query
const contract = feed?.find(
({ contract }) => contract.slug === slug
)?.contract
useEffect(() => {
// If the page initially loads with query params, redirect to the contract page.
if (router.isReady && slug && username) {
Router.replace(`/${username}/${slug}`)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [router.isReady])
if (user === null) {
Router.replace('/')
return <></>
}
return (
<>
<Page assertUser="signed-in" suspend={!!contract}>
<Col className="items-center">
<Col className="w-full max-w-[700px]">
<FeedCreate user={user ?? undefined} />
<Spacer h={10} />
{feed ? (
<ActivityFeed
feed={feed}
mode="only-recent"
getContractPath={(c) =>
`home?u=${c.creatorUsername}&s=${c.slug}`
}
/>
) : (
<LoadingIndicator className="mt-4" />
)}
</Col>
</Col>
</Page>
{contract && (
<ContractPageContent
contract={contract}
username={contract.creatorUsername}
slug={contract.slug}
bets={[]}
comments={[]}
backToHome={router.back}
/>
)}
</>
)
}
export default Home