Feature/person posts (#7)

* Added person post feed * fixed list key error
sublinks · Dec 15, 2023 · 7eba580 · 7eba580
1 parent 66a887a
commit 7eba580
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 42 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 
 import PostFeed from '@/components/post-feed';
+import * as testData from '../../test-data.json';
 
 const Feed = () => (
   <div>
-    <PostFeed />
+    <PostFeed data={testData.posts} />
   </div>
 );
 

diff --git a/src/app/user/[userslug]/page.tsx b/src/app/user/[userslug]/page.tsx
@@ -28,7 +28,7 @@ const User = () => (
       </MainCard>
     </div>
     <MainCard>
-      <PersonDetailSelection />
+      <PersonDetailSelection postViews={testData.posts} />
     </MainCard>
   </div>
 );

diff --git a/src/components/moderates-list/index.tsx b/src/components/moderates-list/index.tsx
@@ -14,7 +14,7 @@ export const ModeratesListItem = (props: ModeratesListItemProps) => {
   const { communityName, communityAvatar, url } = props;
 
   return (
-    <Link className="flex gap-12 relative center items-center" href={url}>
+    <Link className="flex gap-12 relative center items-center dark:text-white" href={url}>
       {communityAvatar && (
       <Image
         src={communityAvatar}

diff --git a/src/components/person-comments-posts/index.tsx b/src/components/person-comments-posts/index.tsx
@@ -6,36 +6,51 @@ import {
   Tab,
   TabPanel
 } from '@/components/TailwindMaterial';
+import { Community, Post, PostAggregates } from 'sublinks-js-client';
+import PostFeed from '../post-feed';
 
-const tabs = [
-  { label: 'Posts', value: 'posts' },
-  { label: 'Comments', value: 'comments' }
-];
+interface PersonDetailSelectionProps {
+  postViews: {
+    post: Post;
+    counts: PostAggregates;
+    community: Community;
+  }[]
+}
 
 // @todo: implement posts and comments
-export const PersonDetailSelection = () => (
-  <div className="mt-24 text-gray-600 dark:text-gray-200 text-sm">
-    <Tabs value="posts">
-      <TabsHeader
-        indicatorProps={{
-          className: 'bg-gray-900/10 shadow-none !text-gray-900'
-        }}
-      >
-        {tabs.map(({ label, value }) => (
-          <Tab key={value} value={value}>
-            {label}
-          </Tab>
-        ))}
-      </TabsHeader>
-      <TabsBody>
-        {tabs.map(({ value }) => (
-          <TabPanel key={value} value={value}>
-            TODO:
-            {' '}
-            {value}
-          </TabPanel>
-        ))}
-      </TabsBody>
-    </Tabs>
-  </div>
-);
+export const PersonDetailSelection = ({ postViews }: PersonDetailSelectionProps) => {
+  const tabs: {
+    label: string;
+    value: string;
+    content?: React.JSX.Element;
+  }[] = [
+    { label: 'Posts', value: 'posts', content: <PostFeed data={postViews.slice(0, 25)} /> },
+    { label: 'Comments', value: 'comments' }
+  ];
+
+  return (
+    <div className="mt-8 text-sm">
+      <Tabs value="posts">
+        <TabsHeader
+          indicatorProps={{
+            className: 'bg-gray-900/10 dark:bg-gray-200/10 shadow-none'
+          }}
+          className="bg-secondary dark:bg-secondary-dark"
+        >
+          {tabs.map(({ label, value }) => (
+            <Tab key={value} value={value} className="text-black dark:text-white">
+              {label}
+            </Tab>
+          ))}
+        </TabsHeader>
+        <TabsBody>
+          {tabs.map(({ value, content }) => (
+            <TabPanel key={value} value={value} className="mt-8">
+              {content || `TODO: ${value}`}
+            </TabPanel>
+          ))}
+        </TabsBody>
+      </Tabs>
+    </div>
+  );
+};
diff --git a/src/components/post-feed/index.tsx b/src/components/post-feed/index.tsx
@@ -1,17 +1,28 @@
 import React from 'react';
 
-import * as testData from '../../../test-data.json';
+import { Community, Post, PostAggregates } from 'sublinks-js-client';
 import { PostCard } from '../post';
+import { H1 } from '../text';
 
-const PostFeed = () => (
+interface PostFeedProps {
+  data: {
+    post: Post;
+    counts: PostAggregates;
+    community: Community;
+  }[]
+}
+
+const PostFeed = ({ data: posts }: PostFeedProps) => (
   <div className="bg-primary dark:bg-primary-dark flex flex-col gap-8">
-    {testData.posts.map(postData => (
-      <PostCard
-        community={postData.community}
-        counts={postData.counts}
-        post={postData.post}
-      />
-    ))}
+    {posts && posts.length > 0 ? posts.map(postData => (
+      <div key={postData.post.ap_id}>
+        <PostCard
+          community={postData.community}
+          counts={postData.counts}
+          post={postData.post}
+        />
+      </div>
+    )) : (<H1 className="text-center">No posts available!</H1>)}
   </div>
 );