From 7836672f642f775428e770f009ba55416b486acf Mon Sep 17 00:00:00 2001
From: mohamad <mohamad>
Date: Thu, 8 May 2025 21:59:13 +0200
Subject: [PATCH] Refactor API calls in GroupDetailPage and GroupsPage
 components to remove versioning; enhance error handling for group creation
 and joining processes.

---
 fe/src/pages/GroupDetailPage.vue |  4 +-
 fe/src/pages/GroupsPage.vue      | 74 ++++++++++++++++++++------------
 2 files changed, 49 insertions(+), 29 deletions(-)

diff --git a/fe/src/pages/GroupDetailPage.vue b/fe/src/pages/GroupDetailPage.vue
index e2ded20..805a024 100644
--- a/fe/src/pages/GroupDetailPage.vue
+++ b/fe/src/pages/GroupDetailPage.vue
@@ -67,7 +67,7 @@ const fetchGroupDetails = async () => {
   if (!groupId.value) return;
   loading.value = true;
   try {
-    const response = await api.get(`/api/v1/groups/${groupId.value}`, {
+    const response = await api.get(`/groups/${groupId.value}`, {
       headers: { Authorization: `Bearer ${authStore.accessToken}` },
     });
     group.value = response.data;
@@ -89,7 +89,7 @@ const generateInviteCode = async () => {
   inviteCode.value = null;
   try {
     const response = await api.post(
-      `/api/v1/groups/${groupId.value}/invites`,
+      `/groups/${groupId.value}/invites`,
       {},
       {
         headers: { Authorization: `Bearer ${authStore.accessToken}` },
diff --git a/fe/src/pages/GroupsPage.vue b/fe/src/pages/GroupsPage.vue
index 7f77d7e..b1ab151 100644
--- a/fe/src/pages/GroupsPage.vue
+++ b/fe/src/pages/GroupsPage.vue
@@ -102,8 +102,6 @@ const $q = useQuasar();
 const groups = ref<Group[]>([]);
 const loading = ref(true);
 const showCreateGroupDialog = ref(false);
-const showJoinGroupDialog = ref(false);
-
 const newGroupName = ref('');
 const creatingGroup = ref(false);
 const newGroupNameInput = ref<QInput | null>(null);
@@ -115,10 +113,11 @@ const joinInviteCodeInput = ref<QInput | null>(null);
 const fetchGroups = async () => {
   loading.value = true;
   try {
-    const response = await api.get<{ data: Group[] }>('/api/v1/groups');
-    groups.value = response.data.data; // Adjusted based on typical API responses
+    const response = await api.get<Group[]>('/groups');
+    groups.value = Array.isArray(response.data) ? response.data : [];
   } catch (error: unknown) {
     console.error('Error fetching groups:', error);
+    groups.value = [];
     $q.notify({
       color: 'negative',
       position: 'top',
@@ -142,17 +141,29 @@ const handleCreateGroup = async () => {
   }
   creatingGroup.value = true;
   try {
-    const response = await api.post<{ data: Group }>('/api/v1/groups', {
+    const response = await api.post<{ data: Group }>('/groups', {
       name: newGroupName.value,
     });
-    groups.value.push(response.data.data); // Adjusted based on typical API responses
-    showCreateGroupDialog.value = false;
-    $q.notify({
-      color: 'positive',
-      position: 'top',
-      message: `Group '${newGroupName.value}' created successfully.`,
-      icon: 'check_circle',
-    });
+    const newGroup = response.data?.data; // Safely access .data
+
+    if (newGroup && typeof newGroup.id === 'string' && typeof newGroup.name === 'string') {
+      groups.value.push(newGroup);
+      showCreateGroupDialog.value = false;
+      $q.notify({
+        color: 'positive',
+        position: 'top',
+        message: `Group '${newGroup.name}' created successfully.`,
+        icon: 'check_circle',
+      });
+    } else {
+      console.error('Invalid group data received from API after creation:', response.data);
+      $q.notify({
+        color: 'negative',
+        position: 'top',
+        message: 'Failed to create group: Invalid data received from server.',
+        icon: 'report_problem',
+      });
+    }
   } catch (error: unknown) {
     console.error('Error creating group:', error);
     $q.notify({
@@ -168,25 +179,34 @@ const handleCreateGroup = async () => {
 
 const handleJoinGroup = async () => {
   if (!inviteCodeToJoin.value || inviteCodeToJoin.value.trim() === '') {
-    void joinInviteCodeInput.value?.validate(); // Assuming QInput has a validate method
+    void joinInviteCodeInput.value?.validate();
     return;
   }
   joiningGroup.value = true;
   try {
-    const response = await api.post<{ data: Group }>(
-      '/api/v1/groups/join',
-      {
-        invite_code: inviteCodeToJoin.value,
-      }
-    );
-    groups.value.push(response.data.data); // Add the newly joined group to the list
-    showJoinGroupDialog.value = false;
-    $q.notify({
-      color: 'positive',
-      position: 'top',
-      message: `Successfully joined group.`,
-      icon: 'check_circle',
+    const response = await api.post<Group>('/groups/join', {
+      invite_code: inviteCodeToJoin.value,
     });
+    const joinedGroup = response.data;
+
+    if (joinedGroup && typeof joinedGroup.id === 'string' && typeof joinedGroup.name === 'string') {
+      groups.value.push(joinedGroup);
+      inviteCodeToJoin.value = '';
+      $q.notify({
+        color: 'positive',
+        position: 'top',
+        message: `Successfully joined group '${joinedGroup.name}'.`,
+        icon: 'check_circle',
+      });
+    } else {
+      console.error('Invalid group data received from API after joining:', response.data);
+      $q.notify({
+        color: 'negative',
+        position: 'top',
+        message: 'Failed to join group: Invalid data received from server.',
+        icon: 'report_problem',
+      });
+    }
   } catch (error: unknown) {
     console.error('Error joining group:', error);
     $q.notify({