From 6c9df223d85e5e4b2b9b7774db0d6057ab2963e0 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Tue, 10 May 2022 13:59:19 -0700
Subject: [PATCH] Feed container markup cleanup (#173)

* Move FeedContainer stuff into ActivityFeed

* Greatly clean up ActivityFeed container markup
---
 web/components/answers/answers-panel.tsx |  2 +-
 web/components/feed/activity-feed.tsx    | 49 ++++++------------------
 web/components/feed/feed-items.tsx       |  2 +-
 3 files changed, 13 insertions(+), 40 deletions(-)

diff --git a/web/components/answers/answers-panel.tsx b/web/components/answers/answers-panel.tsx
index 3d9d066b..ae2c0100 100644
--- a/web/components/answers/answers-panel.tsx
+++ b/web/components/answers/answers-panel.tsx
@@ -111,7 +111,7 @@ export function AnswersPanel(props: {
         <FeedItems
           contract={contract}
           items={answerItems}
-          className={''}
+          className={'pr-2 md:pr-0'}
           betRowClassName={''}
         />
       )}
diff --git a/web/components/feed/activity-feed.tsx b/web/components/feed/activity-feed.tsx
index c8d14476..9e0b23c4 100644
--- a/web/components/feed/activity-feed.tsx
+++ b/web/components/feed/activity-feed.tsx
@@ -17,51 +17,24 @@ export function ActivityFeed(props: {
   getContractPath?: (contract: Contract) => string
 }) {
   const { feed, mode, getContractPath } = props
-
   const user = useUser()
 
   return (
-    <FeedContainer
-      feed={feed}
-      renderItem={({ contract, recentBets, recentComments }) => (
+    <Col className="divide-y divide-gray-300 bg-white">
+      {feed.map((item) => (
         <ContractActivity
+          key={item.contract.id}
+          className="py-6 px-2 sm:px-4"
           user={user}
-          contract={contract}
-          bets={recentBets}
-          comments={recentComments}
+          contract={item.contract}
+          bets={item.recentBets}
+          comments={item.recentComments}
           mode={mode}
-          contractPath={getContractPath ? getContractPath(contract) : undefined}
+          contractPath={
+            getContractPath ? getContractPath(item.contract) : undefined
+          }
         />
-      )}
-    />
-  )
-}
-
-function FeedContainer(props: {
-  feed: {
-    contract: Contract
-    recentBets: Bet[]
-    recentComments: Comment[]
-  }[]
-  renderItem: (item: {
-    contract: Contract
-    recentBets: Bet[]
-    recentComments: Comment[]
-  }) => any
-}) {
-  const { feed, renderItem } = props
-
-  return (
-    <Col className="items-center">
-      <Col className="w-full max-w-3xl">
-        <Col className="w-full divide-y divide-gray-300 self-center bg-white">
-          {feed.map((item) => (
-            <div key={item.contract.id} className="py-6 px-2 sm:px-4">
-              {renderItem(item)}
-            </div>
-          ))}
-        </Col>
-      </Col>
+      ))}
     </Col>
   )
 }
diff --git a/web/components/feed/feed-items.tsx b/web/components/feed/feed-items.tsx
index e2df8f48..0a690d1b 100644
--- a/web/components/feed/feed-items.tsx
+++ b/web/components/feed/feed-items.tsx
@@ -65,7 +65,7 @@ export function FeedItems(props: {
   useSaveSeenContract(ref, contract)
 
   return (
-    <div className={clsx('flow-root pr-2 md:pr-0', className)} ref={ref}>
+    <div className={clsx('flow-root', className)} ref={ref}>
       <div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}>
         {items.map((item, activityItemIdx) => (
           <div