improve error handling for 401 requests and fetch

resources/js/Components/Common/Member/MemberTableRow.vue

@@ -24,6 +24,7 @@ async function invitePlaceholder(id: string) {
     const organizationId = getCurrentOrganizationId();
     if (organizationId) {
         await handleApiRequestNotifications(
+            () =>
                 api.invitePlaceholder(
                     {},
                     {

resources/js/Pages/Teams/Partials/ImportData.vue

@@ -10,6 +10,7 @@ import { getCurrentOrganizationId } from '@/utils/useUser';
 import type { ImportReport, ImportType } from '@/utils/api';
 import DialogModal from '@/Components/DialogModal.vue';
 import SecondaryButton from '@/Components/SecondaryButton.vue';
+import { initializeStores } from '@/utils/init';
 const importTypeOptions = ref<ImportType[]>([]);
 
 const { addNotification } = useNotificationsStore();
@@ -50,8 +51,9 @@ async function importData() {
     if (organizationId !== null) {
         const { handleApiRequestNotifications } = useNotificationsStore();
 
-        reportResult.value = await handleApiRequestNotifications(
+        reportResult.value = await handleApiRequestNotifications(() => {
-            api.importData(
+            if (importType.value) {
+                return api.importData(
                     {
                         type: importType.value.key,
                         data: base64String,
@@ -61,8 +63,12 @@ async function importData() {
                             organization: organizationId,
                         },
                     }
-            )
                 );
+            }
+            return new Promise((resolve, reject) => {
+                reject('Import type is null');
+            });
+        });
         if (reportResult.value) {
             showResultModal.value = true;
         }

resources/js/utils/notification.ts

@@ -37,13 +37,23 @@ export const useNotificationsStore = defineStore('notifications', () => {
         }
     }
 
+    async function fetchToken() {
+        return new Promise((resolve) => {
+            router.reload({
+                onFinish: () => {
+                    resolve(null);
+                },
+            });
+        });
+    }
+
     async function handleApiRequestNotifications<T>(
-        apiRequest: Promise<T>,
+        apiRequest: () => Promise<T>,
         successMessage?: string,
         errorMessage?: string
     ) {
         try {
-            const response = await apiRequest;
+            const response = await apiRequest();
             if (successMessage) {
                 addNotification('success', successMessage);
             }
@@ -65,7 +75,16 @@ export const useNotificationsStore = defineStore('notifications', () => {
                     const message = error.response.data.message;
                     addNotification('error', message);
                 } else if (error?.response?.status === 401) {
+                    await fetchToken();
+                    try {
+                        const response = await apiRequest();
+                        if (successMessage) {
+                            addNotification('success', successMessage);
+                        }
+                        return response;
+                    } catch (error) {
                         router.get(route('login'));
+                    }
                 } else {
                     addNotification(
                         'error',

resources/js/utils/useClients.ts

@@ -17,6 +17,7 @@ export const useClientsStore = defineStore('clients', () => {
         const organization = getCurrentOrganizationId();
         if (organization) {
             clientResponse.value = await handleApiRequestNotifications(
+                () =>
                     api.getClients({
                         params: {
                             organization: organization,
@@ -34,6 +35,7 @@ export const useClientsStore = defineStore('clients', () => {
         const organization = getCurrentOrganizationId();
         if (organization) {
             const response = await handleApiRequestNotifications(
+                () =>
                     api.createClient(clientBody, {
                         params: {
                             organization: organization,
@@ -51,6 +53,7 @@ export const useClientsStore = defineStore('clients', () => {
         const organization = getCurrentOrganizationId();
         if (organization) {
             await handleApiRequestNotifications(
+                () =>
                     api.deleteClient(
                         {},
                         {

resources/js/utils/useCurrentTimeEntry.ts

@@ -89,6 +89,7 @@ export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
                     ? currentTimeEntry.value.start
                     : dayjs().utc().format();
             const response = await handleApiRequestNotifications(
+                () =>
                     api.createTimeEntry(
                         {
                             member_id: membership,
@@ -119,6 +120,7 @@ export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
         if (organization) {
             const currentDateTime = dayjs().utc().format();
             await handleApiRequestNotifications(
+                () =>
                     api.updateTimeEntry(
                         {
                             user_id: user,
@@ -147,6 +149,7 @@ export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
         const organization = getCurrentOrganizationId();
         if (organization) {
             const response = await handleApiRequestNotifications(
+                () =>
                     api.updateTimeEntry(
                         {
                             description: currentTimeEntry.value.description,

resources/js/utils/useInvitations.ts

@@ -17,6 +17,7 @@ export const useInvitationsStore = defineStore('invitations', () => {
         const organization = getCurrentOrganizationId();
         if (organization) {
             invitationsResponse.value = await handleApiRequestNotifications(
+                () =>
                     api.getInvitations({
                         params: {
                             organization: organization,
@@ -34,6 +35,7 @@ export const useInvitationsStore = defineStore('invitations', () => {
         const organization = getCurrentOrganizationId();
         if (organization) {
             await handleApiRequestNotifications(
+                () =>
                     api.invite(inviteBody, {
                         params: {
                             organization: organization,

resources/js/utils/useMembers.ts

@@ -13,6 +13,7 @@ export const useMembersStore = defineStore('members', () => {
         const organization = getCurrentOrganizationId();
         if (organization) {
             membersResponse.value = await handleApiRequestNotifications(
+                () =>
                     api.getMembers({
                         params: {
                             organization: organization,
@@ -28,6 +29,7 @@ export const useMembersStore = defineStore('members', () => {
         const organization = getCurrentOrganizationId();
         if (organization) {
             await handleApiRequestNotifications(
+                () =>
                     api.removeMember(
                         {},
                         {

resources/js/utils/useProjectMembers.ts

@@ -17,6 +17,7 @@ export const useProjectMembersStore = defineStore('project-members', () => {
         const organization = getCurrentOrganizationId();
         if (organization) {
             projectMemberResponse.value = await handleApiRequestNotifications(
+                () =>
                     api.getProjectMembers({
                         params: {
                             organization: organization,
@@ -36,6 +37,7 @@ export const useProjectMembersStore = defineStore('project-members', () => {
         const organization = getCurrentOrganizationId();
         if (organization) {
             await handleApiRequestNotifications(
+                () =>
                     api.createProjectMember(projectMemberBody, {
                         params: {
                             organization: organization,
@@ -56,6 +58,7 @@ export const useProjectMembersStore = defineStore('project-members', () => {
         const organizationId = getCurrentOrganizationId();
         if (organizationId) {
             await handleApiRequestNotifications(
+                () =>
                     api.deleteProjectMember(
                         {},
                         {

resources/js/utils/useProjects.ts

@@ -17,6 +17,7 @@ export const useProjectsStore = defineStore('projects', () => {
         const organization = getCurrentOrganizationId();
         if (organization) {
             projectResponse.value = await handleApiRequestNotifications(
+                () =>
                     api.getProjects({
                         params: {
                             organization: organization,
@@ -32,6 +33,7 @@ export const useProjectsStore = defineStore('projects', () => {
         const organization = getCurrentOrganizationId();
         if (organization) {
             await handleApiRequestNotifications(
+                () =>
                     api.createProject(projectBody, {
                         params: {
                             organization: organization,
@@ -49,6 +51,7 @@ export const useProjectsStore = defineStore('projects', () => {
         const organizationId = getCurrentOrganizationId();
         if (organizationId) {
             await handleApiRequestNotifications(
+                () =>
                     api.deleteProject(
                         {},
                         {
@@ -72,6 +75,7 @@ export const useProjectsStore = defineStore('projects', () => {
         const organizationId = getCurrentOrganizationId();
         if (organizationId) {
             await handleApiRequestNotifications(
+                () =>
                     api.updateProject(updateProjectBody, {
                         params: {
                             organization: organizationId,

resources/js/utils/useReporting.ts

@@ -39,6 +39,7 @@ export const useReportingStore = defineStore('reporting', () => {
         const organization = getCurrentOrganizationId();
         if (organization) {
             reportingGraphResponse.value = await handleApiRequestNotifications(
+                () =>
                     api.getAggregatedTimeEntries({
                         params: {
                             organization: organization,
@@ -57,6 +58,7 @@ export const useReportingStore = defineStore('reporting', () => {
         const organization = getCurrentOrganizationId();
         if (organization) {
             reportingTableResponse.value = await handleApiRequestNotifications(
+                () =>
                     api.getAggregatedTimeEntries({
                         params: {
                             organization: organization,

resources/js/utils/useTags.ts

@@ -12,6 +12,7 @@ export const useTagsStore = defineStore('tags', () => {
         const organizationId = getCurrentOrganizationId();
         if (organizationId) {
             const response = await handleApiRequestNotifications(
+                () =>
                     api.getTags({
                         params: {
                             organization: organizationId,
@@ -34,6 +35,7 @@ export const useTagsStore = defineStore('tags', () => {
         const organizationId = getCurrentOrganizationId();
         if (organizationId) {
             await handleApiRequestNotifications(
+                () =>
                     api.deleteTag(
                         {},
                         {
@@ -54,6 +56,7 @@ export const useTagsStore = defineStore('tags', () => {
         const organizationId = getCurrentOrganizationId();
         if (organizationId) {
             const response = await handleApiRequestNotifications(
+                () =>
                     api.createTag(
                         {
                             name: name,

resources/js/utils/useTasks.ts

@@ -12,7 +12,7 @@ export const useTasksStore = defineStore('tasks', () => {
     async function fetchTasks() {
         const organizationId = getCurrentOrganizationId();
         if (organizationId) {
-            const tasksResponse = await handleApiRequestNotifications(
+            const tasksResponse = await handleApiRequestNotifications(() =>
                 api.getTasks({
                     params: {
                         organization: organizationId,
@@ -29,6 +29,7 @@ export const useTasksStore = defineStore('tasks', () => {
         const organizationId = getCurrentOrganizationId();
         if (organizationId) {
             await handleApiRequestNotifications(
+                () =>
                     api.updateTask(task, {
                         params: {
                             organization: organizationId,
@@ -45,6 +46,7 @@ export const useTasksStore = defineStore('tasks', () => {
         const organizationId = getCurrentOrganizationId();
         if (organizationId) {
             await handleApiRequestNotifications(
+                () =>
                     api.createTask(task, {
                         params: {
                             organization: organizationId,
@@ -61,6 +63,7 @@ export const useTasksStore = defineStore('tasks', () => {
         const organizationId = getCurrentOrganizationId();
         if (organizationId) {
             await handleApiRequestNotifications(
+                () =>
                     api.deleteTask(
                         {},
                         {

resources/js/utils/useTimeEntries.ts

@@ -21,6 +21,7 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
         const organizationId = getCurrentOrganizationId();
         if (organizationId) {
             const timeEntriesResponse = await handleApiRequestNotifications(
+                () =>
                     api.getTimeEntries({
                         params: {
                             organization: organizationId,
@@ -47,6 +48,7 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
             dayjs(latestTimeEntry.start).utc().format('YYYY-MM-DD');
 
             const timeEntriesResponse = await handleApiRequestNotifications(
+                () =>
                     api.getTimeEntries({
                         params: {
                             organization: organizationId,
@@ -77,6 +79,7 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
         const organizationId = getCurrentOrganizationId();
         if (organizationId) {
             await handleApiRequestNotifications(
+                () =>
                     api.updateTimeEntry(timeEntry, {
                         params: {
                             organization: organizationId,
@@ -100,6 +103,7 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
                 member_id: memberId,
             } as CreateTimeEntryBody;
             await handleApiRequestNotifications(
+                () =>
                     api.createTimeEntry(newTimeEntry, {
                         params: {
                             organization: organizationId,
@@ -116,6 +120,7 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
         const organizationId = getCurrentOrganizationId();
         if (organizationId) {
             await handleApiRequestNotifications(
+                () =>
                     api.deleteTimeEntry(
                         {},
                         {