mo/mitlist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor API calls in GroupDetailPage and GroupsPage components to remove versioning; enhance error handling for group creation and joining processes.

Browse Source
This commit is contained in:
mohamad 2025-05-08 21:59:13 +02:00
parent fe252cfac8
commit 7836672f64
2 changed files with 49 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
fe/src/pages/GroupDetailPage.vue
View File

@ -67,7 +67,7 @@ const fetchGroupDetails = async () => {
if (!groupId.value) return; if (!groupId.value) return;
loading.value = true; loading.value = true;
try { try {
const response = await api.get(`/api/v1/groups/${groupId.value}`, { const response = await api.get(`/groups/${groupId.value}`, {
headers: { Authorization: `Bearer ${authStore.accessToken}` }, headers: { Authorization: `Bearer ${authStore.accessToken}` },
}); });
group.value = response.data; group.value = response.data;
@ -89,7 +89,7 @@ const generateInviteCode = async () => {
inviteCode.value = null; inviteCode.value = null;
try { try {
const response = await api.post( const response = await api.post(
`/api/v1/groups/${groupId.value}/invites`, `/groups/${groupId.value}/invites`,
{}, {},
{ {
headers: { Authorization: `Bearer ${authStore.accessToken}` }, headers: { Authorization: `Bearer ${authStore.accessToken}` },

52
fe/src/pages/GroupsPage.vue
View File

@ -102,8 +102,6 @@ const $q = useQuasar();
const groups = ref<Group[]>([]); const groups = ref<Group[]>([]);
const loading = ref(true); const loading = ref(true);
const showCreateGroupDialog = ref(false); const showCreateGroupDialog = ref(false);
const showJoinGroupDialog = ref(false);
const newGroupName = ref(''); const newGroupName = ref('');
const creatingGroup = ref(false); const creatingGroup = ref(false);
const newGroupNameInput = ref<QInput | null>(null); const newGroupNameInput = ref<QInput | null>(null);
@ -115,10 +113,11 @@ const joinInviteCodeInput = ref<QInput | null>(null);
const fetchGroups = async () => { const fetchGroups = async () => {
loading.value = true; loading.value = true;
try { try {
const response = await api.get<{ data: Group[] }>('/api/v1/groups'); const response = await api.get<Group[]>('/groups');
groups.value = response.data.data; // Adjusted based on typical API responses groups.value = Array.isArray(response.data) ? response.data : [];
} catch (error: unknown) { } catch (error: unknown) {
console.error('Error fetching groups:', error); console.error('Error fetching groups:', error);
groups.value = [];
$q.notify({ $q.notify({
color: 'negative', color: 'negative',
position: 'top', position: 'top',
@ -142,17 +141,29 @@ const handleCreateGroup = async () => {
} }
creatingGroup.value = true; creatingGroup.value = true;
try { try {
const response = await api.post<{ data: Group }>('/api/v1/groups', { const response = await api.post<{ data: Group }>('/groups', {
name: newGroupName.value, name: newGroupName.value,
}); });
groups.value.push(response.data.data); // Adjusted based on typical API responses 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; showCreateGroupDialog.value = false;
$q.notify({ $q.notify({
color: 'positive', color: 'positive',
position: 'top', position: 'top',
message: `Group '${newGroupName.value}' created successfully.`, message: `Group '${newGroup.name}' created successfully.`,
icon: 'check_circle', 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) { } catch (error: unknown) {
console.error('Error creating group:', error); console.error('Error creating group:', error);
$q.notify({ $q.notify({
@ -168,25 +179,34 @@ const handleCreateGroup = async () => {
const handleJoinGroup = async () => { const handleJoinGroup = async () => {
if (!inviteCodeToJoin.value || inviteCodeToJoin.value.trim() === '') { if (!inviteCodeToJoin.value || inviteCodeToJoin.value.trim() === '') {
void joinInviteCodeInput.value?.validate(); // Assuming QInput has a validate method void joinInviteCodeInput.value?.validate();
return; return;
} }
joiningGroup.value = true; joiningGroup.value = true;
try { try {
const response = await api.post<{ data: Group }>( const response = await api.post<Group>('/groups/join', {
'/api/v1/groups/join',
{
invite_code: inviteCodeToJoin.value, invite_code: inviteCodeToJoin.value,
} });
); const joinedGroup = response.data;
groups.value.push(response.data.data); // Add the newly joined group to the list
showJoinGroupDialog.value = false; if (joinedGroup && typeof joinedGroup.id === 'string' && typeof joinedGroup.name === 'string') {
groups.value.push(joinedGroup);
inviteCodeToJoin.value = '';
$q.notify({ $q.notify({
color: 'positive', color: 'positive',
position: 'top', position: 'top',
message: `Successfully joined group.`, message: `Successfully joined group '${joinedGroup.name}'.`,
icon: 'check_circle', 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) { } catch (error: unknown) {
console.error('Error joining group:', error); console.error('Error joining group:', error);
$q.notify({ $q.notify({