Add activity page. Copy explore page into home

web/components/contract-search.tsx

@@ -44,14 +44,15 @@ export function ContractSearch(props: {
   querySortOptions?: {
     defaultSort: Sort
     defaultFilter?: filter
-    filter?: {
-      creatorId?: string
-      tag?: string
-    }
     shouldLoadFromStorage?: boolean
   }
+  additionalFilter?: {
+    creatorId?: string
+    tag?: string
+    category?: string
+  }
 }) {
-  const { querySortOptions } = props
+  const { querySortOptions, additionalFilter } = props
 
   const { initialSort } = useInitialQueryAndSort(querySortOptions)
 
@@ -71,9 +72,7 @@ export function ContractSearch(props: {
       searchClient={searchClient}
       indexName={`${indexPrefix}contracts-${sort}`}
       key={`search-${
-        querySortOptions?.filter?.tag ??
-        querySortOptions?.filter?.creatorId ??
-        ''
+        additionalFilter?.tag ?? additionalFilter?.creatorId ?? ''
       }`}
     >
       <Row className="flex-wrap gap-2">
@@ -105,10 +104,15 @@ export function ContractSearch(props: {
           />
         </Row>
       </Row>
-      <ContractSearchInner
-        querySortOptions={querySortOptions}
-        filter={filter}
-      />
+      <div>
+        <Spacer h={8} />
+
+        <ContractSearchInner
+          querySortOptions={querySortOptions}
+          filter={filter}
+          additionalFilter={additionalFilter}
+        />
+      </div>
     </InstantSearch>
   )
 }
@@ -116,15 +120,16 @@ export function ContractSearch(props: {
 export function ContractSearchInner(props: {
   querySortOptions?: {
     defaultSort: Sort
-    filter?: {
-      creatorId?: string
-      tag?: string
-    }
     shouldLoadFromStorage?: boolean
   }
   filter: filter
+  additionalFilter?: {
+    creatorId?: string
+    tag?: string
+    category?: string
+  }
 }) {
-  const { querySortOptions, filter } = props
+  const { querySortOptions, filter, additionalFilter } = props
   const { initialQuery } = useInitialQueryAndSort(querySortOptions)
 
   const { query, setQuery, setSort } = useUpdateQueryAndSort({
@@ -156,10 +161,10 @@ export function ContractSearchInner(props: {
     }
   }, [index])
 
-  const creatorId = querySortOptions?.filter?.creatorId
+  const creatorId = additionalFilter?.creatorId
   useFilterCreator(creatorId)
 
-  const tag = querySortOptions?.filter?.tag
+  const tag = additionalFilter?.tag
   useFilterTag(tag)
 
   useFilterClosed(
@@ -179,19 +184,15 @@ export function ContractSearchInner(props: {
   const router = useRouter()
   const hasLoaded = contracts.length > 0 || router.isReady
 
-  return (
-    <div>
-      <Spacer h={8} />
+  if (!hasLoaded) return <></>
 
-      {hasLoaded && (
-        <ContractsGrid
-          contracts={contracts}
-          loadMore={showMore}
-          hasMore={!isLastPage}
-          showCloseTime={index === 'contracts-closing-soon'}
-        />
-      )}
-    </div>
+  return (
+    <ContractsGrid
+      contracts={contracts}
+      loadMore={showMore}
+      hasMore={!isLastPage}
+      showCloseTime={index === 'contracts-closing-soon'}
+    />
   )
 }
 

web/components/contract/contracts-list.tsx

@@ -53,13 +53,13 @@ export function CreatorContractsList(props: { creator: User }) {
   return (
     <ContractSearch
       querySortOptions={{
-        filter: {
-          creatorId: creator.id,
-        },
         defaultSort: 'newest',
         defaultFilter: 'all',
         shouldLoadFromStorage: false,
       }}
+      additionalFilter={{
+        creatorId: creator.id,
+      }}
     />
   )
 }

web/pages/activity.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from 'react'
+import Router, { useRouter } from 'next/router'
+import { Page } from 'web/components/page'
+import { ActivityFeed } from 'web/components/feed/activity-feed'
+import { Spacer } from 'web/components/layout/spacer'
+import { Col } from 'web/components/layout/col'
+import { useUser } from 'web/hooks/use-user'
+import { LoadingIndicator } from 'web/components/loading-indicator'
+import { useAlgoFeed } from 'web/hooks/use-algo-feed'
+import { ContractPageContent } from './[username]/[contractSlug]'
+import { CategorySelector } from '../components/feed/category-selector'
+
+export default function Activity() {
+  const user = useUser()
+  const [category, setCategory] = useState<string>('all')
+
+  const feed = useAlgoFeed(user, category)
+
+  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="mx-auto w-full max-w-[700px]">
+          <CategorySelector
+            user={user}
+            category={category}
+            setCategory={setCategory}
+          />
+          <Spacer h={1} />
+          {feed ? (
+            <ActivityFeed
+              feed={feed}
+              mode="only-recent"
+              getContractPath={(c) =>
+                `activity?u=${c.creatorUsername}&s=${c.slug}`
+              }
+            />
+          ) : (
+            <LoadingIndicator className="mt-4" />
+          )}
+        </Col>
+      </Page>
+
+      {contract && (
+        <ContractPageContent
+          contract={contract}
+          username={contract.creatorUsername}
+          slug={contract.slug}
+          bets={[]}
+          comments={[]}
+          backToHome={router.back}
+        />
+      )}
+    </>
+  )
+}

web/pages/home.tsx

@@ -1,76 +1,39 @@
-import React, { useEffect, useState } from 'react'
-import Router, { useRouter } from 'next/router'
+import React, { useState } from 'react'
+import Router from 'next/router'
 import { Page } from 'web/components/page'
-import { ActivityFeed } from 'web/components/feed/activity-feed'
-import FeedCreate from 'web/components/feed-create'
 import { Spacer } from 'web/components/layout/spacer'
 import { Col } from 'web/components/layout/col'
 import { useUser } from 'web/hooks/use-user'
-import { LoadingIndicator } from 'web/components/loading-indicator'
-import { useAlgoFeed } from 'web/hooks/use-algo-feed'
-import { ContractPageContent } from './[username]/[contractSlug]'
 import { CategorySelector } from '../components/feed/category-selector'
+import { ContractSearch } from 'web/components/contract-search'
 
 const Home = () => {
   const user = useUser()
   const [category, setCategory] = useState<string>('all')
 
-  const feed = useAlgoFeed(user, category)
-
-  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="mx-auto w-full max-w-[700px]">
-          <FeedCreate user={user ?? undefined} />
-          <Spacer h={2} />
-          <CategorySelector
-            user={user}
-            category={category}
-            setCategory={setCategory}
-          />
-          <Spacer h={1} />
-          {feed ? (
-            <ActivityFeed
-              feed={feed}
-              mode="only-recent"
-              getContractPath={(c) => `home?u=${c.creatorUsername}&s=${c.slug}`}
-            />
-          ) : (
-            <LoadingIndicator className="mt-4" />
-          )}
-        </Col>
-      </Page>
-
-      {contract && (
-        <ContractPageContent
-          contract={contract}
-          username={contract.creatorUsername}
-          slug={contract.slug}
-          bets={[]}
-          comments={[]}
-          backToHome={router.back}
+    <Page assertUser="signed-in">
+      <Col className="mx-auto w-full">
+        <ContractSearch
+          additionalFilter={{ category }}
+          querySortOptions={{
+            shouldLoadFromStorage: false,
+            defaultSort: '24-hour-vol',
+          }}
         />
-      )}
-    </>
+        <CategorySelector
+          user={user}
+          category={category}
+          setCategory={setCategory}
+        />
+        <Spacer h={1} />
+      </Col>
+    </Page>
   )
 }
 

web/pages/tag/[tag].tsx

@@ -13,10 +13,10 @@ export default function TagPage() {
       <Title text={`#${tag}`} />
       <ContractSearch
         querySortOptions={{
-          filter: { tag },
           defaultSort: 'newest',
           shouldLoadFromStorage: false,
         }}
+        additionalFilter={{ tag }}
       />
     </Page>
   )