feat: API endpoint module wise

src/api/endpoints.ts

@@ -1,23 +1,44 @@
-import type { Endpoints } from '@/types/axios.type';
+import { buildFullUrls } from '@/api/utils';
+
+import type { Endpoints, SuccessOutput } from '@/types/axios.type';
 
 const endpoints = {
-  login: {
-    method: 'POST',
-    url: '/auth/login',
-    manageToast: (res) => !!res.message,
-  },
-  getProfile: {
-    method: 'GET',
-    url: '/user/profile/me',
+  // Auth endpoints
+  auth: {
+    prefix: 'auth',
+    login: {
+      method: 'POST',
+      url: 'login',
+      manageToast: (res: SuccessOutput) => !!res.message,
+    },
   },
-  logout: {
-    method: 'POST',
-    url: '/user/profile/logout',
+
+  // User endpoints
+  user: {
+    prefix: 'user',
+    profile: {
+      prefix: 'profile',
+      me: {
+        method: 'GET',
+        url: 'me',
+        manageToast: (res: SuccessOutput) => !!res.message,
+      },
+      logout: {
+        method: 'POST',
+        url: 'logout',
+        manageToast: (res: SuccessOutput) => !!res.message,
+      },
+    },
   },
-  getAllUsers: {
+
+  // Users endpoints
+  users: {
     method: 'GET',
-    url: '/users',
+    url: 'users',
+    manageToast: (res: SuccessOutput) => !!res.message,
   },
 } satisfies Endpoints;
 
-export default endpoints;
+const finalEndpoints = buildFullUrls(endpoints);
+
+export default finalEndpoints;

src/api/index.ts

@@ -1,16 +1,17 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import axios from '@/api/axios';
-import endpoints from '@/api/endpoints';
+import finalEndpoints from '@/api/endpoints';
 
 import type { AxiosOutput, AxiosPaginatedOutput } from '@/types/axios.type';
 
 const nonPaginatedApis = {
-  login: async (data) => axios({ ...endpoints.login, ...data }),
+  login: async (data) => axios({ ...(finalEndpoints.auth as any).login, ...data }),
 
-  getProfile: async (data) => axios({ ...endpoints.getProfile, ...data }),
+  getProfile: async (data) => axios({ ...(finalEndpoints.user as any).profile.me, ...data }),
 
-  logout: async (data) => axios({ ...endpoints.logout, ...data }),
+  logout: async (data) => axios({ ...(finalEndpoints.user as any).profile.logout, ...data }),
 
-  getAllUsers: async (data) => axios({ ...endpoints.getAllUsers, ...data }),
+  getAllUsers: async (data) => axios({ ...finalEndpoints.users, ...data }),
 } satisfies Record<string, AxiosOutput>;
 
 const paginatedApis = {} satisfies Record<string, AxiosPaginatedOutput>;

src/api/utils.ts

@@ -3,7 +3,13 @@ import { toast } from 'react-toastify';
 
 import { AppError } from '@/api/appError';
 
-import type { AxiosErrConfig, ShowToast, SuccessOutput, ThrowAxiosError } from '@/types/axios.type';
+import type {
+  AxiosErrConfig,
+  Endpoints,
+  ShowToast,
+  SuccessOutput,
+  ThrowAxiosError,
+} from '@/types/axios.type';
 
 export class AxiosErr extends AxiosError {
   config?: AxiosErrConfig;
@@ -44,3 +50,30 @@ export const showToast: ShowToast = (res) => {
   const call = isError ? 'error' : 'success';
   toast[call](toastMessage);
 };
+
+export function buildFullUrls(obj: Endpoints, parentPrefix = ''): Endpoints {
+  const result: Endpoints = {};
+
+  for (const key in obj) {
+    if (Object.hasOwn(obj, key)) {
+      const value = obj[key];
+
+      if (typeof value === 'object' && !Array.isArray(value)) {
+        const currentPrefix =
+          parentPrefix + ('prefix' in value && value.prefix ? `/${value.prefix}` : '');
+
+        result[key] =
+          'method' in value && 'url' in value
+            ? {
+                ...value,
+                url: `${currentPrefix}/${value.url}`,
+              }
+            : buildFullUrls(value as Endpoints, currentPrefix);
+      } else {
+        result[key] = value;
+      }
+    }
+  }
+
+  return result;
+}

src/types/axios.type.ts

@@ -21,7 +21,12 @@ export type AxiosRequestConfigWithExtraProps = AxiosRequestConfig & AxiosExtraPr
 
 type AxiosRequestInput = Pick<AxiosRequestConfigWithExtraProps, 'method' | 'url'> & ManageToast;
 
-export type Endpoints = Record<string, AxiosRequestInput>;
+interface NestedEndpoint {
+  prefix?: string;
+  [key: string]: NestedEndpoint | AxiosRequestInput | string | undefined;
+}
+
+export type Endpoints = Record<string, AxiosRequestInput | NestedEndpoint>;
 
 export type InternalAxiosRequestConfigWithExtraProps = InternalAxiosRequestConfig & AxiosExtraProps;