From c4973111f1ff05dfb56f9b8483c3eeb1554c1763 Mon Sep 17 00:00:00 2001 From: Philipp Herz Date: Thu, 14 Dec 2023 20:31:49 +0100 Subject: [PATCH 1/5] Added person post feed --- src/app/user/[userslug]/page.tsx | 2 +- .../person-comments-posts/index.tsx | 74 +++++++++++-------- src/components/person-post-feed/index.tsx | 27 +++++++ 3 files changed, 72 insertions(+), 31 deletions(-) create mode 100644 src/components/person-post-feed/index.tsx diff --git a/src/app/user/[userslug]/page.tsx b/src/app/user/[userslug]/page.tsx index 421923a..4ac5e4c 100644 --- a/src/app/user/[userslug]/page.tsx +++ b/src/app/user/[userslug]/page.tsx @@ -28,7 +28,7 @@ const User = () => ( - + ); diff --git a/src/components/person-comments-posts/index.tsx b/src/components/person-comments-posts/index.tsx index 7b9cd52..4a81e95 100644 --- a/src/components/person-comments-posts/index.tsx +++ b/src/components/person-comments-posts/index.tsx @@ -6,36 +6,50 @@ import { Tab, TabPanel } from '@/components/TailwindMaterial'; +import { Community, Post, PostAggregates } from 'sublinks-js-client'; +import { PersonPostFeed } from '../person-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 = () => ( -
- - - {tabs.map(({ label, value }) => ( - - {label} - - ))} - - - {tabs.map(({ value }) => ( - - TODO: - {' '} - {value} - - ))} - - -
-); +export const PersonDetailSelection = ({ postViews }: PersonDetailSelectionProps) => { + const tabs: { + label: string; + value: string; + element?: React.JSX.Element; + }[] = [ + { label: 'Posts', value: 'posts', element: }, + { label: 'Comments', value: 'comments' } + ]; + + return ( +
+ + + {tabs.map(({ label, value }) => ( + + {label} + + ))} + + + {tabs.map(({ value, element }) => ( + + {element || `TODO: ${value}`} + + ))} + + +
+ ); +}; diff --git a/src/components/person-post-feed/index.tsx b/src/components/person-post-feed/index.tsx new file mode 100644 index 0000000..dd1bb4a --- /dev/null +++ b/src/components/person-post-feed/index.tsx @@ -0,0 +1,27 @@ +import { Community, Post, PostAggregates } from 'sublinks-js-client'; +import React from 'react'; +import { PostCard } from '../post'; + +interface PersonPostFeedProps { + data: { + post: Post; + counts: PostAggregates; + community: Community; + }[] +} + +export const PersonPostFeed = ({ + data: postsViews +}: PersonPostFeedProps) => ( +
+ {postsViews.map(postView => ( +
+ +
+ ))} +
+); From c01c086148b1f82232113b86c01b8b0b66406392 Mon Sep 17 00:00:00 2001 From: Philipp Herz Date: Thu, 14 Dec 2023 22:01:55 +0100 Subject: [PATCH 2/5] fixed list key error --- src/components/post-feed/index.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/post-feed/index.tsx b/src/components/post-feed/index.tsx index 30d34d7..026c19d 100644 --- a/src/components/post-feed/index.tsx +++ b/src/components/post-feed/index.tsx @@ -6,11 +6,13 @@ import { PostCard } from '../post'; const PostFeed = () => (
{testData.posts.map(postData => ( - +
+ +
))}
); From 6340b0ede2d903fb81bc26f468abfd72b9504fd4 Mon Sep 17 00:00:00 2001 From: Philipp Herz Date: Fri, 15 Dec 2023 07:46:10 +0100 Subject: [PATCH 3/5] Improved some dark mode and fixed some stuff --- src/app/page.tsx | 3 ++- src/components/moderates-list/index.tsx | 2 +- .../person-comments-posts/index.tsx | 11 ++++---- src/components/person-post-feed/index.tsx | 27 ------------------- src/components/post-feed/index.tsx | 19 +++++++++---- 5 files changed, 23 insertions(+), 39 deletions(-) delete mode 100644 src/components/person-post-feed/index.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index 9f47ef8..64ba64e 100644 --- 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 = () => (
- +
); diff --git a/src/components/moderates-list/index.tsx b/src/components/moderates-list/index.tsx index cc096b1..e367bdc 100644 --- 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 ( - + {communityAvatar && ( }, + { label: 'Posts', value: 'posts', element: }, { label: 'Comments', value: 'comments' } ]; return ( -
+
{tabs.map(({ label, value }) => ( - + {label} ))} diff --git a/src/components/person-post-feed/index.tsx b/src/components/person-post-feed/index.tsx deleted file mode 100644 index dd1bb4a..0000000 --- a/src/components/person-post-feed/index.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { Community, Post, PostAggregates } from 'sublinks-js-client'; -import React from 'react'; -import { PostCard } from '../post'; - -interface PersonPostFeedProps { - data: { - post: Post; - counts: PostAggregates; - community: Community; - }[] -} - -export const PersonPostFeed = ({ - data: postsViews -}: PersonPostFeedProps) => ( -
- {postsViews.map(postView => ( -
- -
- ))} -
-); diff --git a/src/components/post-feed/index.tsx b/src/components/post-feed/index.tsx index 026c19d..56191a3 100644 --- a/src/components/post-feed/index.tsx +++ b/src/components/post-feed/index.tsx @@ -1,19 +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) => (
- {testData.posts.map(postData => ( -
+ {posts && posts.length > 0 ? posts.map(postData => ( +
- ))} + )) : (

No posts available!

)}
); From 29ed37b1c9f212e76df22957d7859eea47056d94 Mon Sep 17 00:00:00 2001 From: Philipp Herz Date: Fri, 15 Dec 2023 12:56:43 +0100 Subject: [PATCH 4/5] renamed attribute --- src/components/person-comments-posts/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/person-comments-posts/index.tsx b/src/components/person-comments-posts/index.tsx index f4ac7da..06df1b3 100644 --- a/src/components/person-comments-posts/index.tsx +++ b/src/components/person-comments-posts/index.tsx @@ -22,9 +22,9 @@ export const PersonDetailSelection = ({ postViews }: PersonDetailSelectionProps) const tabs: { label: string; value: string; - element?: React.JSX.Element; + content?: React.JSX.Element; }[] = [ - { label: 'Posts', value: 'posts', element: }, + { label: 'Posts', value: 'posts', content: }, { label: 'Comments', value: 'comments' } ]; From e4f4809016201480f6885e1f09d7bdc464cafa6f Mon Sep 17 00:00:00 2001 From: Philipp Herz Date: Fri, 15 Dec 2023 12:57:15 +0100 Subject: [PATCH 5/5] Renamed attribute --- src/components/person-comments-posts/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/person-comments-posts/index.tsx b/src/components/person-comments-posts/index.tsx index 06df1b3..5402f0c 100644 --- a/src/components/person-comments-posts/index.tsx +++ b/src/components/person-comments-posts/index.tsx @@ -44,9 +44,9 @@ export const PersonDetailSelection = ({ postViews }: PersonDetailSelectionProps) ))} - {tabs.map(({ value, element }) => ( + {tabs.map(({ value, content }) => ( - {element || `TODO: ${value}`} + {content || `TODO: ${value}`} ))}