Centralize API calls within feature modules #287
Description
API endpoint URLs and request logic are currently defined inline across the codebase. This makes them harder to maintain and update consistently.
Solution:
Create dedicated api.ts modules within each feature folder to centralize API interactions. Each api.ts should contain typed functions for that feature's endpoints.
Requirements:
- Create an api.ts file in each feature folder (e.g., features/search/api/api.ts)
- Extract inline API calls into dedicated, typed functions
- Separate data transformation logic from API calls
- Add proper TypeScript types for requests and responses
for example:
Before:
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;
},
});
};
After:
// features/search/api/api.ts
export const getSearchResults = async (query: string): Promise<SearchResult[]> => {
const response = await axios.get(`/api/search?q=${query}&limit=20`);
return response.data.hits.data;
}
// features/search/hooks/useSearch.ts
export const useSearch = (query: string) => {
return useQuery({
queryKey: searchKeys.byQuery(query),
queryFn: () => getSearchResults(query),
});
};