Add repost tab to post popup

Nerimity · Dec 23, 2024 · 98034ef · 98034ef
1 parent e56a2c6
commit 98034ef
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 25 deletions.
diff --git a/src/chat-api/services/PostService.ts b/src/chat-api/services/PostService.ts
@@ -205,6 +205,15 @@ export const getLikesPosts = async (postId: string) => {
   return data;
 };
 
+export const getPostReposts = async (postId: string) => {
+  const data = await request<RawPost[]>({
+    method: "GET",
+    url: env.SERVER_URL + "/api" + ServiceEndpoints.postReposts(postId),
+    useToken: true,
+  });
+  return data;
+};
+
 export const getPostNotifications = async () => {
   const data = await request<RawPostNotification[]>({
     method: "GET",

diff --git a/src/chat-api/services/ServiceEndpoints.ts b/src/chat-api/services/ServiceEndpoints.ts
@@ -2,27 +2,31 @@ export default {
   login: () => "/users/login",
   register: () => "/users/register",
 
-
   tickets: (id?: string) => `/tickets/${id || ""}`,
 
   servers: () => "/servers",
   server: (serverId: string) => `/servers/${serverId}`,
   serverInvites: (serverId: string) => `/servers/${serverId}/invites`,
   serverInviteCode: (inviteCode: string) => `/servers/invites/${inviteCode}`,
   serverChannels: (serverId: string) => `/servers/${serverId}/channels`,
-  serverChannel: (serverId: string, channelId: string) => `/servers/${serverId}/channels/${channelId}`,
+  serverChannel: (serverId: string, channelId: string) =>
+    `/servers/${serverId}/channels/${channelId}`,
   serverRoles: (serverId: string) => `/servers/${serverId}/roles`,
   serverRolesOrder: (serverId: string) => `/servers/${serverId}/roles/order`,
-  serverChannelOrder: (serverId: string) => `/servers/${serverId}/channels/order`,
+  serverChannelOrder: (serverId: string) =>
+    `/servers/${serverId}/channels/order`,
   serverOrder: () => "/servers/order",
-  serverRole: (serverId: string, roleId: string) => `/servers/${serverId}/roles/${roleId}`,
-  serverMember: (serverId: string, userId: string) => `/servers/${serverId}/members/${userId}`,
-  serverMemberKick: (serverId: string, userId: string) => `/servers/${serverId}/members/${userId}/kick`,
-  serverMemberBan: (serverId: string, userId: string) => `/servers/${serverId}/bans/${userId}`,
+  serverRole: (serverId: string, roleId: string) =>
+    `/servers/${serverId}/roles/${roleId}`,
+  serverMember: (serverId: string, userId: string) =>
+    `/servers/${serverId}/members/${userId}`,
+  serverMemberKick: (serverId: string, userId: string) =>
+    `/servers/${serverId}/members/${userId}/kick`,
+  serverMemberBan: (serverId: string, userId: string) =>
+    `/servers/${serverId}/bans/${userId}`,
 
   exploreServer: (serverId: string) => `/explore/servers/${serverId}`,
 
-
   user: (userId: string) => `/users/${userId}`,
 
   openUserDM: (userId: string) => `/users/${userId}/open-channel`,
@@ -31,17 +35,19 @@ export default {
 
   channel: (channelId: string) => `/channels/${channelId}`,
   messages: (channelId: string) => `/channels/${channelId}/messages`,
-  channelAttachments: (channelId: string) => `/channels/${channelId}/attachments`,
+  channelAttachments: (channelId: string) =>
+    `/channels/${channelId}/attachments`,
   channelTyping: (channelId: string) => `/channels/${channelId}/typing`,
-  message: (channelId: string, messageId: string) => `/channels/${channelId}/messages/${messageId}`,
+  message: (channelId: string, messageId: string) =>
+    `/channels/${channelId}/messages/${messageId}`,
   addFriend: () => "/friends/add",
   friends: (friendId: string) => `/friends/${friendId}`,
 
   posts: (userId?: string) => {
-    return userId ? `/users/${userId}/posts` : "/posts"; 
+    return userId ? `/users/${userId}/posts` : "/posts";
   },
   likedPosts: (userId: string) => {
-    return `/users/${userId}/posts/liked`; 
+    return `/users/${userId}/posts/liked`;
   },
 
   postComments: (postId: string) => {
@@ -50,17 +56,19 @@ export default {
   postLikes: (postId: string) => {
     return `/posts/${postId}/likes`;
   },
+  postReposts: (postId: string) => {
+    return `/posts/${postId}/reposts`;
+  },
 
   postNotifications: () => "/posts/notifications",
   postNotificationDismiss: () => "/posts/notifications/dismiss",
   postNotificationCount: () => "/posts/notifications/count",
   post: (postId: string) => `/posts/${postId}`,
-  postVotePoll: (postId: string, pollId: string, choiceId: string) => `/posts/${postId}/polls/${pollId}/choices/${choiceId}`,
+  postVotePoll: (postId: string, pollId: string, choiceId: string) =>
+    `/posts/${postId}/polls/${pollId}/choices/${choiceId}`,
   likePost: (postId: string) => `/posts/${postId}/like`,
   unlikePost: (postId: string) => `/posts/${postId}/unlike`,
   feedPosts: () => "/posts/feed",
 
-
-  userFollow: (userId: string) => `/users/${userId}/follow`
-
-};
+  userFollow: (userId: string) => `/users/${userId}/follow`,
+};
diff --git a/src/components/PostsArea.tsx b/src/components/PostsArea.tsx
@@ -1,12 +1,15 @@
 import {
   PostNotificationType,
+  RawPost,
   RawPostChoice,
   RawPostNotification,
+  RawUser,
 } from "@/chat-api/RawData";
 import {
   DiscoverSort,
   getLikesPosts,
   getPostNotifications,
+  getPostReposts,
   LikedPost,
 } from "@/chat-api/services/PostService";
 import { Post } from "@/chat-api/store/usePosts";
@@ -477,6 +480,39 @@ function LikedUsers(props: { postId: string }) {
     </FlexColumn>
   );
 }
+function RepostedUsers(props: { postId: string }) {
+  const [reposts, setReposts] = createSignal<RawPost[]>([]);
+
+  const fetchAndSetReposts = async () => {
+    const newReposts = await getPostReposts(props.postId);
+    return setReposts(newReposts);
+  };
+
+  createEffect(() => {
+    fetchAndSetReposts();
+  });
+
+  return (
+    <FlexColumn gap={3}>
+      <For each={reposts()}>
+        {(repost) => (
+          <CustomLink href={RouterEndpoints.PROFILE(repost.createdBy.id)}>
+            <LikedUserContainer gap={10}>
+              <Avatar user={repost.createdBy} size={20} />
+              <FlexRow style={{ "margin-right": "auto" }}>
+                <Text>{repost.createdBy.username}</Text>
+                <Text opacity={0.6}>:{repost.createdBy.tag}</Text>
+              </FlexRow>
+              <Text opacity={0.6} size={12}>
+                {formatTimestamp(repost.createdAt)}
+              </Text>
+            </LikedUserContainer>
+          </CustomLink>
+        )}
+      </For>
+    </FlexColumn>
+  );
+}
 
 const PostsContainer = styled(FlexColumn)`
   overflow: auto;
@@ -1037,9 +1073,9 @@ export function PostNotificationsArea(props: { style?: JSX.CSSProperties }) {
 
 export function ViewPostModal(props: { close(): void }) {
   const [searchParams, setSearchParams] = useSearchParams<{ postId: string }>();
-  const [selectedTab, setSelectedTab] = createSignal<"comments" | "likes">(
-    "comments"
-  );
+  const [selectedTab, setSelectedTab] = createSignal<
+    "comments" | "likes" | "reposts"
+  >("comments");
   const { paneWidth } = useWindowProperties();
 
   const postId = () => searchParams.postId;
@@ -1137,7 +1173,25 @@ export function ViewPostModal(props: { close(): void }) {
                       : "rgba(255,255,255,0.6)"
                   }
                 >
-                  {`Liked by (${post()?._count?.likedBy})`}
+                  {`Likes (${post()?._count?.likedBy})`}
+                </Text>
+              </ItemContainer>
+              <ItemContainer
+                handlePosition="bottom"
+                selected={selectedTab() === "reposts"}
+                style={{ padding: "8px", gap: "4px" }}
+                onClick={() => setSelectedTab("reposts")}
+              >
+                <Icon size={14} name="repeat" />
+                <Text
+                  size={14}
+                  color={
+                    selectedTab() === "reposts"
+                      ? "white"
+                      : "rgba(255,255,255,0.6)"
+                  }
+                >
+                  {`Reposts (${post()?._count?.reposts})`}
                 </Text>
               </ItemContainer>
             </Show>
@@ -1147,10 +1201,10 @@ export function ViewPostModal(props: { close(): void }) {
               <PostsArea style={{ overflow: "initial" }} postId={post()?.id} />
             </Match>
             <Match when={selectedTab() === "likes"}>
-              <LikedUsers
-                style={{ overflow: "initial" }}
-                postId={post()?.id!}
-              />
+              <LikedUsers postId={post()?.id!} />
+            </Match>
+            <Match when={selectedTab() === "reposts"}>
+              <RepostedUsers postId={post()?.id!} />
             </Match>
           </Switch>
         </Show>