From c78df4abded2da00ecacde52075e4ef908b9719c Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Fri, 4 Mar 2022 15:45:01 -0800
Subject: [PATCH] Add see more button, description to explore items

---
 web/components/activity-feed.tsx    | 31 ++++++++++++++++------
 web/components/contract-feed.tsx    | 40 +++++++++++++++++++++--------
 web/pages/fold/[...slugs]/index.tsx |  1 +
 web/pages/home.tsx                  |  2 +-
 4 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/web/components/activity-feed.tsx b/web/components/activity-feed.tsx
index e05165d1..bfd4cc1c 100644
--- a/web/components/activity-feed.tsx
+++ b/web/components/activity-feed.tsx
@@ -1,5 +1,9 @@
 import _ from 'lodash'
-import { ContractActivityFeed, ContractSummaryFeed } from './contract-feed'
+import {
+  ContractActivityFeed,
+  ContractFeed,
+  ContractSummaryFeed,
+} from './contract-feed'
 import { Contract } from '../lib/firebase/contracts'
 import { Comment } from '../lib/firebase/comments'
 import { Col } from './layout/col'
@@ -73,8 +77,10 @@ export function ActivityFeed(props: {
   contracts: Contract[]
   recentBets: Bet[]
   recentComments: Comment[]
+  loadBetAndCommentHistory?: boolean
 }) {
-  const { contracts, recentBets, recentComments } = props
+  const { contracts, recentBets, recentComments, loadBetAndCommentHistory } =
+    props
 
   const groupedBets = _.groupBy(recentBets, (bet) => bet.contractId)
   const groupedComments = _.groupBy(
@@ -86,13 +92,22 @@ export function ActivityFeed(props: {
     <Col className="items-center">
       <Col className="w-full">
         <Col className="w-full divide-y divide-gray-300 self-center bg-white">
-          {contracts.map((contract, i) => (
+          {contracts.map((contract) => (
             <div key={contract.id} className="py-6 px-2 sm:px-4">
-              <ContractActivityFeed
-                contract={contract}
-                bets={groupedBets[contract.id] ?? []}
-                comments={groupedComments[contract.id] ?? []}
-              />
+              {loadBetAndCommentHistory ? (
+                <ContractFeed
+                  contract={contract}
+                  bets={groupedBets[contract.id] ?? []}
+                  comments={groupedComments[contract.id] ?? []}
+                  feedType="activity"
+                />
+              ) : (
+                <ContractActivityFeed
+                  contract={contract}
+                  bets={groupedBets[contract.id] ?? []}
+                  comments={groupedComments[contract.id] ?? []}
+                />
+              )}
             </div>
           ))}
         </Col>
diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx
index 2269efbb..766ba94b 100644
--- a/web/components/contract-feed.tsx
+++ b/web/components/contract-feed.tsx
@@ -304,8 +304,11 @@ function TruncatedComment(props: {
   )
 }
 
-function FeedQuestion(props: { contract: Contract }) {
-  const { contract } = props
+function FeedQuestion(props: {
+  contract: Contract
+  showDescription?: boolean
+}) {
+  const { contract, showDescription } = props
   const { creatorName, creatorUsername, question, resolution, outcomeType } =
     contract
   const { truePool } = contractMetrics(contract)
@@ -341,16 +344,33 @@ function FeedQuestion(props: { contract: Contract }) {
           </span>
         </div>
         <Col className="items-start justify-between gap-2 sm:flex-row sm:gap-4">
-          <SiteLink
-            href={contractPath(contract)}
-            className="text-lg text-indigo-700 sm:text-xl"
-          >
-            {question}
-          </SiteLink>
+          <Col>
+            <SiteLink
+              href={contractPath(contract)}
+              className="text-lg text-indigo-700 sm:text-xl"
+            >
+              {question}
+            </SiteLink>
+            {!showDescription && (
+              <SiteLink
+                href={contractPath(contract)}
+                className="text-sm relative top-4"
+              >
+                <div className="text-gray-500 pb-1.5">See more...</div>
+              </SiteLink>
+            )}
+          </Col>
           {(isBinary || resolution) && (
             <ResolutionOrChance className="items-center" contract={contract} />
           )}
         </Col>
+        {showDescription && (
+          <TruncatedComment
+            comment={contract.description}
+            moreHref={contractPath(contract)}
+            shouldTruncate
+          />
+        )}
       </div>
     </>
   )
@@ -705,7 +725,7 @@ function FeedItems(props: {
 
   return (
     <div className="flow-root pr-2 md:pr-0">
-      <div className={clsx(tradingAllowed(contract) ? '' : '-mb-8')}>
+      <div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}>
         {items.map((activityItem, activityItemIdx) => (
           <div key={activityItem.id} className="relative pb-6">
             {activityItemIdx !== items.length - 1 ? (
@@ -875,7 +895,7 @@ export function ContractSummaryFeed(props: {
       <div className={clsx(tradingAllowed(contract) ? '' : '-mb-8')}>
         <div className="relative pb-8">
           <div className="relative flex items-start space-x-3">
-            <FeedQuestion contract={contract} />
+            <FeedQuestion contract={contract} showDescription />
           </div>
         </div>
       </div>
diff --git a/web/pages/fold/[...slugs]/index.tsx b/web/pages/fold/[...slugs]/index.tsx
index 9fd1f4fc..757fe325 100644
--- a/web/pages/fold/[...slugs]/index.tsx
+++ b/web/pages/fold/[...slugs]/index.tsx
@@ -234,6 +234,7 @@ export default function FoldPage(props: {
                     contracts={activeContracts}
                     recentBets={recentBets ?? []}
                     recentComments={recentComments ?? []}
+                    loadBetAndCommentHistory
                   />
                   {activeContracts.length === 0 && (
                     <div className="mx-2 mt-4 text-gray-500 lg:mx-0">
diff --git a/web/pages/home.tsx b/web/pages/home.tsx
index 5fb6321d..548f1057 100644
--- a/web/pages/home.tsx
+++ b/web/pages/home.tsx
@@ -57,7 +57,7 @@ const Home = (props: {
   const { activeContracts } = useFindActiveContracts({
     contracts: yourContracts,
     recentBets: initialRecentBets ?? [],
-    recentComments,
+    recentComments: props.recentComments,
   })
 
   const exploreContracts = useExploreContracts()