From 35896387cb1c5e27892a3ca423b56441e5431711 Mon Sep 17 00:00:00 2001
From: Camilo Vega <59750365+camilovegag@users.noreply.github.com>
Date: Tue, 14 May 2024 11:32:13 -0500
Subject: [PATCH] 451 display option users at comments page (#452)

* Create fetchOptionUsers and type

* Add query to comments page

* Comment author + co authors & fetchOptionUsers
---
 packages/api/src/fetchOptionUsers.ts      | 27 +++++++++++++++++++++++
 packages/api/src/index.ts                 |  5 +++--
 packages/api/src/types/OptionUsersType.ts | 11 +++++++++
 packages/berlin/src/pages/Comments.tsx    | 22 ++++++++++++++----
 4 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 packages/api/src/fetchOptionUsers.ts
 create mode 100644 packages/api/src/types/OptionUsersType.ts

diff --git a/packages/api/src/fetchOptionUsers.ts b/packages/api/src/fetchOptionUsers.ts
new file mode 100644
index 00000000..a4a66d8a
--- /dev/null
+++ b/packages/api/src/fetchOptionUsers.ts
@@ -0,0 +1,27 @@
+import { GetOptionUsersResponse } from './types/OptionUsersType';
+
+async function fetchOptionUsers(optionId: string): Promise<GetOptionUsersResponse | null> {
+  try {
+    const response = await fetch(
+      `${import.meta.env.VITE_SERVER_URL}/api/options/${optionId}/users`,
+      {
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP Error! Status: ${response.status}`);
+    }
+
+    const alerts = (await response.json()) as { data: GetOptionUsersResponse };
+    return alerts.data;
+  } catch (error) {
+    console.error('Error fetching users:', error);
+    return null;
+  }
+}
+
+export default fetchOptionUsers;
diff --git a/packages/api/src/index.ts b/packages/api/src/index.ts
index ca3906d7..922be563 100644
--- a/packages/api/src/index.ts
+++ b/packages/api/src/index.ts
@@ -14,13 +14,14 @@ export { default as fetchGroupCategories } from './fetchGroupCategories';
 export { default as fetchGroups } from './fetchGroups';
 export { default as fetchGroupMembers } from './fetchGroupMembers';
 export { default as fetchOption } from './fetchOption';
+export { default as fetchOptionUsers } from './fetchOptionUsers';
 export { default as fetchRegistrationData } from './fetchRegistrationData';
 export { default as fetchRegistrationFields } from './fetchRegistrationFields';
 export { default as fetchRegistrations } from './fetchRegistrations';
-export { default as fetchUserAttributes } from './fetchUserAttributes';
 export { default as fetchUser } from './fetchUser';
-export { default as fetchUsersToGroups } from './fetchUsersToGroups';
+export { default as fetchUserAttributes } from './fetchUserAttributes';
 export { default as fetchUserRegistrations } from './fetchUserRegistrations';
+export { default as fetchUsersToGroups } from './fetchUsersToGroups';
 export { default as fetchUserVotes } from './fetchUserVotes';
 export { default as logout } from './logout';
 export { default as postComment } from './postComment';
diff --git a/packages/api/src/types/OptionUsersType.ts b/packages/api/src/types/OptionUsersType.ts
new file mode 100644
index 00000000..8c5a2fa9
--- /dev/null
+++ b/packages/api/src/types/OptionUsersType.ts
@@ -0,0 +1,11 @@
+import { GetGroupsResponse } from './GroupType';
+import { GetUserResponse } from './UserType';
+
+export type GetOptionUsersResponse = {
+  optionId: string;
+  registrationId: string | null;
+  userId: string | null;
+  user: GetUserResponse | null;
+  groupId: string | null;
+  group: GetGroupsResponse | null;
+};
diff --git a/packages/berlin/src/pages/Comments.tsx b/packages/berlin/src/pages/Comments.tsx
index 57b0d283..d0541b95 100644
--- a/packages/berlin/src/pages/Comments.tsx
+++ b/packages/berlin/src/pages/Comments.tsx
@@ -5,7 +5,14 @@ import { useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 
 // API
-import { fetchOption, postVotes, fetchUserVotes, fetchComments, postComment } from 'api';
+import {
+  fetchOption,
+  postVotes,
+  fetchUserVotes,
+  fetchComments,
+  postComment,
+  // fetchOptionUsers,
+} from 'api';
 
 // Hooks
 import useUser from '../hooks/useUser';
@@ -58,6 +65,13 @@ function Comments() {
     enabled: !!user?.id && !!cycleId,
     retry: false,
   });
+
+  // const { data: optionUsers } = useQuery({
+  //   queryKey: ['optionUsers', optionId],
+  //   queryFn: () => fetchOptionUsers(optionId || ''),
+  //   enabled: !!optionId,
+  // });
+
   const { data: comments } = useQuery({
     queryKey: ['comments', optionId],
     queryFn: () => fetchComments({ optionId: optionId || '' }),
@@ -169,12 +183,12 @@ function Comments() {
         </FlexRow>
         <Subtitle>{option?.optionTitle}</Subtitle>
         <Body>{option?.optionSubTitle}</Body>
-        <Body>
-          <Bold>Lead author:</Bold> [// TODO]
+        {/* <Body>
+          <Bold>Lead author: {option?.user}</Bold> [// TODO]
         </Body>
         <Body>
           <Bold>Co-authors:</Bold> [// TODO]
-        </Body>
+        </Body> */}
       </FlexColumn>
 
       <Button onClick={handleSaveVotesWrapper} disabled={!votesAreDifferent}>