449 show registrations for group (#508)

* Add fetch group registrations api

* Show proposal title and description on secret groups table

* Add min heigth to containers and remove console log

packages/api/src/fetchGroupRegistrations.ts

@@ -0,0 +1,27 @@
+import { GetGroupRegistration } from './types/GroupRegistrationsType';
+
+async function fetchGroupRegistrations(groupId: string): Promise<GetGroupRegistration | null> {
+  try {
+    const response = await fetch(
+      `${import.meta.env.VITE_SERVER_URL}/api/groups/${groupId}/registrations`,
+      {
+        credentials: 'include',
+        headers: {
+          'Content-type': 'application/json',
+        },
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP Error! Status: ${response.status}`);
+    }
+
+    const groups = (await response.json()) as { data: GetGroupRegistration };
+    return groups.data;
+  } catch (error) {
+    console.error('Error fetching group registrations:', error);
+    return null;
+  }
+}
+
+export default fetchGroupRegistrations;

packages/api/src/index.ts

@@ -11,8 +11,9 @@ export { default as fetchEventCycles } from './fetchEventCycles';
 export { default as fetchEvents } from './fetchEvents';
 export { default as fetchForumQuestionStatistics } from './fetchForumQuestionStatistics';
 export { default as fetchGroupCategories } from './fetchGroupCategories';
-export { default as fetchGroups } from './fetchGroups';
 export { default as fetchGroupMembers } from './fetchGroupMembers';
+export { default as fetchGroupRegistrations } from './fetchGroupRegistrations';
+export { default as fetchGroups } from './fetchGroups';
 export { default as fetchOption } from './fetchOption';
 export { default as fetchOptionUsers } from './fetchOptionUsers';
 export { default as fetchRegistrationData } from './fetchRegistrationData';

packages/api/src/types/GroupRegistrationsType.ts

@@ -0,0 +1,47 @@
+// This can be optimized
+
+type RegistrationField = {
+  id: string;
+  eventId: string;
+  name: string;
+  description: string | null;
+  type: 'SELECT' | 'TEXT' | 'NUMBER' | 'DATE' | 'BOOLEAN';
+  required: boolean;
+  fieldDisplayRank: number | null;
+  characterLimit: number;
+  forGroup: boolean;
+  forUser: boolean;
+  createdAt: string;
+  updatedAt: string;
+};
+
+type RegistrationData = {
+  id: string;
+  registrationId: string;
+  registrationFieldId: string;
+  value: string;
+  createdAt: string;
+  updatedAt: string;
+  registrationField: RegistrationField;
+};
+
+type Registration = {
+  id: string;
+  userId: string;
+  eventId: string;
+  groupId: string;
+  status: string;
+  createdAt: string;
+  updatedAt: string;
+  registrationData: RegistrationData[];
+};
+
+export type GetGroupRegistration = {
+  id: string;
+  name: string;
+  description: string | null;
+  groupCategoryId: string;
+  createdAt: string;
+  updatedAt: string;
+  registrations: Registration[];
+}[];

packages/api/src/types/index.ts

@@ -3,6 +3,7 @@ export * from './CycleType';
 export * from './EventType';
 export * from './ForumQuestionType';
 export * from './GroupCategoryType';
+export * from './GroupRegistrationsType';
 export * from './GroupType';
 export * from './LikeType';
 export * from './QuestionOptionType';

packages/berlin/src/components/tables/groups-table/GroupsTable.styled.tsx

@@ -19,3 +19,8 @@ export const Card = styled(Grid)<{ $expanded: boolean }>`
 export const Group = styled(Body)``;
 
 export const Secret = styled(Body)``;
+
+export const GroupProposalDescription = styled(Body)`
+  border-bottom: 1px solid var(--color-gray);
+  padding-bottom: 1.5rem;
+`;

packages/berlin/src/components/tables/groups-table/GroupsTable.tsx

@@ -9,14 +9,15 @@ import {
   fetchUsersToGroups,
   fetchGroupMembers,
   GetUsersToGroupsResponse,
+  fetchGroupRegistrations,
 } from 'api';
 
 // Hooks
 import { useAppStore } from '../../../store';
 import useUser from '../../../hooks/useUser';
 
 // Components
-import { Card, Group, Secret } from './GroupsTable.styled';
+import { Card, Group, GroupProposalDescription, Secret } from './GroupsTable.styled';
 import Button from '../../button';
 import Dialog from '../../dialog';
 import IconButton from '../../icon-button';
@@ -40,6 +41,12 @@ function GroupCard({ userToGroup, theme, onLeaveGroup }: GroupCardProps) {
     enabled: !!userToGroup.group.id,
   });
 
+  const { data: groupRegistrations } = useQuery({
+    queryKey: ['group', userToGroup.group.id, 'group-registrations'],
+    queryFn: () => fetchGroupRegistrations(userToGroup.group.id || ''),
+    enabled: !!userToGroup.group.id,
+  });
+
   const handleCopyButtonClick = (secretCode: string) => {
     navigator.clipboard.writeText(secretCode);
     toast.success(`Secret code ${secretCode} copied to clipboard`);
@@ -79,9 +86,39 @@ function GroupCard({ userToGroup, theme, onLeaveGroup }: GroupCardProps) {
       />
       <FlexColumn className="description" $gap="1.5rem">
         <Body>
-          <Bold>Group members:</Bold> {groupMembers?.map((member) => member.username)}
+          <Bold>Group members:</Bold> {groupMembers?.map((member) => member.username).join(', ')}
         </Body>
-        <Body>More details here...</Body>
+        {groupRegistrations &&
+          groupRegistrations.flatMap((groupRegistration) =>
+            groupRegistration.registrations.flatMap((registration) =>
+              registration.registrationData
+                .filter(
+                  ({ registrationField }) =>
+                    registrationField.fieldDisplayRank === 0 ||
+                    registrationField.fieldDisplayRank === 1,
+                )
+                .map(({ id, value, registrationField }) => {
+                  if (registrationField.fieldDisplayRank === 0) {
+                    return (
+                      <div key={id}>
+                        <Body>
+                          <Bold>Title:</Bold> {value}
+                        </Body>
+                      </div>
+                    );
+                  } else if (registrationField.fieldDisplayRank === 1) {
+                    return (
+                      <div key={id}>
+                        <GroupProposalDescription>
+                          <Bold>Description:</Bold> {value}
+                        </GroupProposalDescription>
+                      </div>
+                    );
+                  }
+                  return null;
+                }),
+            ),
+          )}
       </FlexColumn>
     </Card>
   );

packages/berlin/src/pages/SecretGroupRegistration.tsx

@@ -118,17 +118,19 @@ function SecretGroupRegistration() {
   return (
     <FlexColumn>
       <FlexRowToColumn $gap="2rem">
-        <FlexColumn>
+        {/* // TODO: avoid inline styles */}
+        <FlexColumn style={{ minHeight: 180 }}>
           <Subtitle>{groups.create.subtitle}</Subtitle>
           {groups.create.body.map(({ id, text }) => (
             <Body key={id}>{text}</Body>
           ))}
-          {groupName && secretCode && <SecretCode groupName={groupName} secretCode={secretCode} />}
           <Dialog
             open={isDialogOpen}
             onOpenChange={setIsDialogOpen}
             trigger={
-              <Button onClick={() => setIsDialogOpen(true)}>{groups.create.buttonText}</Button>
+              <Button style={{ marginTop: 'auto' }} onClick={() => setIsDialogOpen(true)}>
+                {groups.create.buttonText}
+              </Button>
             }
             content={
               <ResearchGroupForm
@@ -139,9 +141,10 @@ function SecretGroupRegistration() {
             }
             dialogButtons={false}
           />
+          {groupName && secretCode && <SecretCode groupName={groupName} secretCode={secretCode} />}
         </FlexColumn>
         <Divider $height={330} />
-        <FlexColumn>
+        <FlexColumn style={{ minHeight: 180 }}>
           <Subtitle>{groups.join.subtitle}</Subtitle>
           {groups.join.body.map(({ id, text }) => (
             <Body key={id}>{text}</Body>