From d84c86cb0a1bdb1bffbfe5cd02c15b93dd1c3aa4 Mon Sep 17 00:00:00 2001
From: Pico2x <pico2x@gmail.com>
Date: Mon, 3 Oct 2022 17:22:31 +0100
Subject: [PATCH] Move post tab to overview tab, refactor components

---
 web/components/groups/group-overview.tsx | 51 +++++++++++++++-
 web/components/pinned-select-modal.tsx   |  2 +-
 web/components/post-card.tsx             | 20 +++++++
 web/pages/group/[...slugs]/index.tsx     | 75 ------------------------
 4 files changed, 70 insertions(+), 78 deletions(-)

diff --git a/web/components/groups/group-overview.tsx b/web/components/groups/group-overview.tsx
index 6da9540a..080453ca 100644
--- a/web/components/groups/group-overview.tsx
+++ b/web/components/groups/group-overview.tsx
@@ -36,8 +36,11 @@ import { CopyLinkButton } from '../copy-link-button'
 import { REFERRAL_AMOUNT } from 'common/economy'
 import toast from 'react-hot-toast'
 import { ENV_CONFIG } from 'common/envs/constants'
-import { PostCard } from '../post-card'
+import { PostCard, PostCardList } from '../post-card'
 import { LoadingIndicator } from '../loading-indicator'
+import { useUser } from 'web/hooks/use-user'
+import { CreatePost } from '../create-post'
+import { Modal } from '../layout/modal'
 
 const MAX_TRENDING_POSTS = 6
 
@@ -59,7 +62,6 @@ export function GroupOverview(props: {
         posts={posts}
         isEditable={isEditable}
       />
-
       {(group.aboutPostId != null || isEditable) && (
         <>
           <SectionHeader label={'About'} href={'/post/' + group.slug} />
@@ -87,10 +89,55 @@ export function GroupOverview(props: {
         user={user}
         memberIds={memberIds}
       />
+
+      <GroupPosts group={group} posts={posts} />
     </Col>
   )
 }
 
+export function GroupPosts(props: { posts: Post[]; group: Group }) {
+  const { posts, group } = props
+  const [showCreatePost, setShowCreatePost] = useState(false)
+  const user = useUser()
+
+  const createPost = (
+    <Modal size="xl" open={showCreatePost} setOpen={setShowCreatePost}>
+      <div className="w-full bg-white py-10">
+        <CreatePost group={group} />
+      </div>
+    </Modal>
+  )
+
+  const postList = (
+    <div className=" align-start w-full items-start">
+      <Row className="flex justify-between">
+        <Col>
+          <SectionHeader label={'Latest Posts'} />
+        </Col>
+        <Col>
+          {user && (
+            <Button
+              className="btn-md"
+              onClick={() => setShowCreatePost(!showCreatePost)}
+            >
+              Add a Post
+            </Button>
+          )}
+        </Col>
+      </Row>
+
+      <div className="mt-2">
+        <PostCardList posts={posts} />
+        {posts.length === 0 && (
+          <div className="text-center text-gray-500">No posts yet</div>
+        )}
+      </div>
+    </div>
+  )
+
+  return showCreatePost ? createPost : postList
+}
+
 function GroupOverviewPinned(props: {
   group: Group
   posts: Post[]
diff --git a/web/components/pinned-select-modal.tsx b/web/components/pinned-select-modal.tsx
index 98c91a7c..e72deee2 100644
--- a/web/components/pinned-select-modal.tsx
+++ b/web/components/pinned-select-modal.tsx
@@ -2,7 +2,6 @@ import { Contract } from 'common/contract'
 import { Group } from 'common/group'
 import { Post } from 'common/post'
 import { useState } from 'react'
-import { PostCardList } from 'web/pages/group/[...slugs]'
 import { Button } from './button'
 import { PillButton } from './buttons/pill-button'
 import { ContractSearch } from './contract-search'
@@ -10,6 +9,7 @@ import { Col } from './layout/col'
 import { Modal } from './layout/modal'
 import { Row } from './layout/row'
 import { LoadingIndicator } from './loading-indicator'
+import { PostCardList } from './post-card'
 
 export function PinnedSelectModal(props: {
   title: string
diff --git a/web/components/post-card.tsx b/web/components/post-card.tsx
index d34bb935..107b9391 100644
--- a/web/components/post-card.tsx
+++ b/web/components/post-card.tsx
@@ -90,3 +90,23 @@ export function PostCard(props: {
     </div>
   )
 }
+
+export function PostCardList(props: {
+  posts: Post[]
+  highlightOptions?: CardHighlightOptions
+  onPostClick?: (post: Post) => void
+}) {
+  const { posts, onPostClick, highlightOptions } = props
+  return (
+    <div className="w-full">
+      {posts.map((post) => (
+        <PostCard
+          key={post.id}
+          post={post}
+          onPostClick={onPostClick}
+          highlightOptions={highlightOptions}
+        />
+      ))}
+    </div>
+  )
+}
diff --git a/web/pages/group/[...slugs]/index.tsx b/web/pages/group/[...slugs]/index.tsx
index 35c47010..88c05f78 100644
--- a/web/pages/group/[...slugs]/index.tsx
+++ b/web/pages/group/[...slugs]/index.tsx
@@ -42,11 +42,7 @@ import { SelectMarketsModal } from 'web/components/contract-select-modal'
 import { BETTORS } from 'common/user'
 import { Page } from 'web/components/page'
 import { Tabs } from 'web/components/layout/tabs'
-import { Title } from 'web/components/title'
-import { CreatePost } from 'web/components/create-post'
 import { GroupOverview } from 'web/components/groups/group-overview'
-import { CardHighlightOptions } from 'web/components/contract/contracts-grid'
-import { PostCard } from 'web/components/post-card'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: { params: { slugs: string[] } }) {
@@ -183,16 +179,6 @@ export default function GroupPage(props: {
     </Col>
   )
 
-  const postsPage = (
-    <>
-      <Col>
-        <div className="mt-4 flex flex-col gap-8 px-4 md:flex-row">
-          {posts && <GroupPosts posts={groupPosts} group={group} />}
-        </div>
-      </Col>
-    </>
-  )
-
   const overviewPage = (
     <>
       <GroupOverview
@@ -249,10 +235,6 @@ export default function GroupPage(props: {
       title: 'Leaderboards',
       content: leaderboardTab,
     },
-    {
-      title: 'Posts',
-      content: postsPage,
-    },
   ]
 
   return (
@@ -336,63 +318,6 @@ function GroupLeaderboard(props: {
   )
 }
 
-export function GroupPosts(props: { posts: Post[]; group: Group }) {
-  const { posts, group } = props
-  const [showCreatePost, setShowCreatePost] = useState(false)
-  const user = useUser()
-
-  const createPost = <CreatePost group={group} />
-
-  const postList = (
-    <div className=" align-start w-full items-start">
-      <Row className="flex justify-between">
-        <Col>
-          <Title text={'Posts'} className="!mt-0" />
-        </Col>
-        <Col>
-          {user && (
-            <Button
-              className="btn-md"
-              onClick={() => setShowCreatePost(!showCreatePost)}
-            >
-              Add a Post
-            </Button>
-          )}
-        </Col>
-      </Row>
-
-      <div className="mt-2">
-        <PostCardList posts={posts} />
-        {posts.length === 0 && (
-          <div className="text-center text-gray-500">No posts yet</div>
-        )}
-      </div>
-    </div>
-  )
-
-  return showCreatePost ? createPost : postList
-}
-
-export function PostCardList(props: {
-  posts: Post[]
-  highlightOptions?: CardHighlightOptions
-  onPostClick?: (post: Post) => void
-}) {
-  const { posts, onPostClick, highlightOptions } = props
-  return (
-    <div className="w-full">
-      {posts.map((post) => (
-        <PostCard
-          key={post.id}
-          post={post}
-          onPostClick={onPostClick}
-          highlightOptions={highlightOptions}
-        />
-      ))}
-    </div>
-  )
-}
-
 function AddContractButton(props: { group: Group; user: User }) {
   const { group, user } = props
   const [open, setOpen] = useState(false)