refactor: centralize feature API calls (#297)

* refactor: centralize feature API calls

- Move cohorts, dashboard, search and trainee-profile HTTP calls into feature api/api.ts modules
- Update React Query hooks to consume typed API helpers
- Extract shared search response and trainee save request types

Refs:  #287

* Improved error handling

* Removed try/catch to preserve 401 redirect functionality

* improved parameter handling

* refactor: streamline API response handling in trainee info functions

* fixed params for axios

Author: Hadley99

client/src/features/cohorts/api/api.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+import { Cohort } from '../Cohorts';
+
+export const getCohorts = async () => {
+  const { data } = await axios.get<Cohort[]>('/api/cohorts');
+  return data;
+};

client/src/features/cohorts/data/useCohortsData.tsx

@@ -1,17 +1,13 @@
-import { Cohort } from '../Cohorts';
-import axios from 'axios';
 import { useQuery } from '@tanstack/react-query';
+import { getCohorts } from '../api/api';
 
 /**
  * A React Query hook that fetches cohort data form api for specific dates.
  */
 export const useCohortsData = () => {
   return useQuery({
     queryKey: ['CohortsInfo'],
-    queryFn: async () => {
-      const { data } = await axios.get<Cohort[]>(`/api/cohorts`);
-      return data;
-    },
+    queryFn: getCohorts,
     refetchOnWindowFocus: false, // Prevent refetching on window focus
   });
 };

client/src/features/dashboard/api/api.ts

@@ -0,0 +1,13 @@
+import axios from 'axios';
+import { DashboardData } from '../Dashboard';
+
+export const getDashboardData = async (startDate?: string, endDate?: string): Promise<DashboardData> => {
+  const params = {
+    ...(startDate && { startDate }),
+    ...(endDate && { endDate }),
+  };
+
+  const response = await axios.get<DashboardData>('/api/dashboard', { params });
+
+  return response.data;
+};

client/src/features/dashboard/data/useDashboardData.tsx

@@ -1,20 +1,16 @@
-import { DashboardData } from '../Dashboard';
-import axios from 'axios';
 import { useQuery } from '@tanstack/react-query';
+import { getDashboardData } from '../api/api';
 
 /**
- * A React Query hook that fetches dashboard data form api for specific dates.
+ * A React Query hook that fetches dashboard data from api for specific dates.
  *
  * @param {string | undefined} startDate
  * @param {string | undefined} endDate
  */
 export const useDashboardData = (startDate: string | undefined, endDate: string | undefined) => {
   return useQuery({
     queryKey: ['DashboardInfo'],
-    queryFn: async () => {
-      const response = await axios.get<DashboardData>(`/api/dashboard?startDate=${startDate}&endDate=${endDate}`);
-      return response.data;
-    },
+    queryFn: () => getDashboardData(startDate, endDate),
     refetchOnWindowFocus: false, // Prevent refetching on window focus
   });
 };

client/src/features/search/Search.ts

@@ -5,3 +5,9 @@ export interface SearchResult {
   profilePath: string;
   cohort: number | null;
 }
+
+export interface SearchResultResponse {
+  hits: {
+    data: SearchResult[];
+  };
+}

client/src/features/search/api/api.ts

@@ -0,0 +1,9 @@
+import axios from 'axios';
+import { SearchResult, SearchResultResponse } from '../Search';
+
+export const getSearchResults = async (query: string): Promise<SearchResult[]> => {
+  const response = await axios.get<SearchResultResponse>('/api/search', {
+    params: { q: query, limit: 20 },
+  });
+  return response.data.hits.data;
+};

client/src/features/search/data/queries.ts

@@ -1,6 +1,5 @@
-import { SearchResult } from '../Search';
-import axios from 'axios';
 import { useQuery } from '@tanstack/react-query';
+import { getSearchResults } from '../api/api';
 
 export const searchKeys = {
   all: ['search'] as const, // for broad invalidation
@@ -11,23 +10,9 @@ export const searchKeys = {
 export const useSearch = (query: string) => {
   return useQuery({
     queryKey: searchKeys.byQuery(query),
-    queryFn: async () => {
-      const response = await axios.get(`/api/search?q=${query}&limit=20`);
-      const trainees: SearchResult[] = response.data.hits.data.map((trainee: SearchResult) => trainee);
-      return trainees;
-    },
+    queryFn: () => getSearchResults(query),
     enabled: query.length > 1, // Query runs only if search string has more than 1 character
     refetchOnMount: false,
     refetchOnWindowFocus: false,
   });
 };
-
-interface SearchResultResponse {
-  hits: {
-    data: SearchResult[];
-  };
-}
-export const getSearchResults = async (query: string): Promise<SearchResult[]> => {
-  const response = await axios.get<SearchResultResponse>(`/api/search?q=${query}&limit=20`);
-  return response.data.hits.data;
-};

client/src/features/trainee-profile/education/strikes/api/api.ts

@@ -0,0 +1,35 @@
+import axios from 'axios';
+import { Strike } from '../../../../../data/types/Trainee';
+
+export const getStrikes = async (traineeId: string) => {
+  const { data } = await axios.get<Strike[]>(`/api/trainees/${traineeId}/strikes`);
+  return data;
+};
+
+export const addStrike = async (traineeId: string, strike: Strike) => {
+  try {
+    await axios.post(`/api/trainees/${traineeId}/strikes`, strike);
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      throw new Error(error.response?.data?.error || 'Failed to add strike');
+    }
+
+    throw new Error(error instanceof Error ? error.message : 'An unexpected error occurred');
+  }
+};
+
+export const deleteStrike = async (traineeId: string, strikeId: string) => {
+  await axios.delete(`/api/trainees/${traineeId}/strikes/${strikeId}`);
+};
+
+export const editStrike = async (traineeId: string, strike: Strike) => {
+  try {
+    await axios.put(`/api/trainees/${traineeId}/strikes/${strike.id}`, strike);
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      throw new Error(error.response?.data?.error || 'Failed to edit strike');
+    }
+
+    throw new Error(error instanceof Error ? error.message : 'An unexpected error occurred');
+  }
+};

client/src/features/trainee-profile/education/strikes/data/strike-queries.ts

@@ -1,7 +1,6 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
-
 import { Strike } from '../../../../../data/types/Trainee';
-import axios from 'axios';
+import { getStrikes, addStrike, deleteStrike, editStrike } from '../api/api';
 
 /**
  * Hook to add a strike to a trainee.
@@ -10,11 +9,7 @@ import axios from 'axios';
  */
 export const useAddStrike = (traineeId: string) => {
   return useMutation({
-    mutationFn: async (strike: Strike) => {
-      return axios.post(`/api/trainees/${traineeId}/strikes`, strike).catch((error) => {
-        throw new Error(error.response?.data?.error || 'Failed to add strike');
-      });
-    },
+    mutationFn: (strike: Strike) => addStrike(traineeId, strike),
   });
 };
 
@@ -27,8 +22,8 @@ export const useGetStrikes = (traineeId: string) => {
   return useQuery({
     queryKey: ['strikes', traineeId],
     queryFn: async () => {
-      const { data } = await axios.get<Strike[]>(`/api/trainees/${traineeId}/strikes`);
-      return orderStrikesByDateDesc(data as Strike[]);
+      const data = await getStrikes(traineeId);
+      return orderStrikesByDateDesc(data);
     },
     enabled: !!traineeId,
     refetchOnWindowFocus: false,
@@ -43,9 +38,7 @@ export const useGetStrikes = (traineeId: string) => {
 
 export const useDeleteStrike = (traineeId: string) => {
   return useMutation({
-    mutationFn: async (strikeId: string) => {
-      return axios.delete(`/api/trainees/${traineeId}/strikes/${strikeId}`);
-    },
+    mutationFn: (strikeId: string) => deleteStrike(traineeId, strikeId),
   });
 };
 
@@ -55,11 +48,7 @@ export const useDeleteStrike = (traineeId: string) => {
  */
 export const useEditStrike = (traineeId: string) => {
   return useMutation({
-    mutationFn: async (strike: Strike) => {
-      return axios.put(`/api/trainees/${traineeId}/strikes/${strike.id}`, strike).catch((error) => {
-        throw new Error(error.response?.data?.error || 'Failed to edit strike');
-      });
-    },
+    mutationFn: (strike: Strike) => editStrike(traineeId, strike),
   });
 };
 

client/src/features/trainee-profile/education/tests/api/api.ts

@@ -0,0 +1,35 @@
+import axios from 'axios';
+import { Test } from '../../../../../data/types/Trainee';
+
+export const getTests = async (traineeId: string) => {
+  const { data } = await axios.get<Test[]>(`/api/trainees/${traineeId}/tests`);
+  return data;
+};
+
+export const addTest = async (traineeId: string, test: Test) => {
+  try {
+    await axios.post(`/api/trainees/${traineeId}/tests`, test);
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      throw new Error(error.response?.data?.error || 'Failed to add test');
+    }
+
+    throw new Error(error instanceof Error ? error.message : 'An unexpected error occurred');
+  }
+};
+
+export const deleteTest = async (traineeId: string, testId: string) => {
+  await axios.delete(`/api/trainees/${traineeId}/tests/${testId}`);
+};
+
+export const editTest = async (traineeId: string, test: Test) => {
+  try {
+    await axios.put(`/api/trainees/${traineeId}/tests/${test.id}`, test);
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      throw new Error(error.response?.data?.error || 'Failed to edit test');
+    }
+
+    throw new Error(error instanceof Error ? error.message : 'An unexpected error occurred');
+  }
+};