65 Refactored API Layer to TanStack Query Naming Conventions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "torq",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "Generates AI images based on Strava activity data.",
   "type": "module",
   "private": true,

packages/ui/.env.example

@@ -1,5 +1,3 @@
 NEXT_PUBLIC_API_URL=http://localhost:3000
 NEXT_PUBLIC_BASE_URL=http://localhost:3001
-NEXT_PUBLIC_STRAVA_CLIENT_ID=12345
-NEXT_PUBLIC_STRAVA_CLIENT_SECRET=abcdef
 NEXT_PUBLIC_WITH_IMAGE_GENERATION=true

packages/ui/src/api/authStatus/index.ts

@@ -1,2 +1,2 @@
-export { default as fetchAuthStatus } from './fetchAuthStatus';
-export { default as useFetchAuthStatus } from './useFetchAuthStatus';
+export { default as queryAuthStatus } from './queryAuthStatus';
+export { default as useQueryAuthStatus } from './useQueryAuthStatus';

packages/ui/src/api/authStatus/queryAuthStatus.ts

@@ -0,0 +1,29 @@
+import client from '../client';
+import { Response } from './types';
+import { API_ENDPOINTS } from '../constants';
+
+/**
+ * Query authentication status.
+ * @returns {Promise<boolean>} Authentication status.
+ */
+const queryAuthStatus = async (): Promise<boolean> => {
+  try {
+    const response = await client<Response>(
+      API_ENDPOINTS.AUTH_STATUS,
+      {
+        /**
+         * Handles 401 Unauthorized response by returning
+         * a comparible response instead of throwing an error.
+         * @returns {Promise<Response>} Authentication status response.
+         */
+        on401: () => Promise.resolve({ authenticated: false }),
+      },
+    );
+
+    return response?.authenticated ?? false;    
+  } catch {
+    return false;
+  }
+}
+
+export default queryAuthStatus;

packages/ui/src/api/authStatus/types.ts

@@ -0,0 +1,3 @@
+export interface Response {
+  authenticated: boolean;
+}

packages/ui/src/api/authStatus/useFetchAuthStatus.ts → packages/ui/src/api/authStatus/useQueryAuthStatus.ts

@@ -8,18 +8,18 @@ import { API_ENDPOINTS } from '../constants';
  * Checks authentication status.
  * @returns {object} Authentication status data.
  */
-const useFetchAuthStatus = () =>
+const useQueryAuthStatus = () =>
   useQuery({
     queryKey: [API_ENDPOINTS.AUTH_STATUS],
     /**
-     * Fetches authentication status from the internal API.
+     * Queries authentication status from the internal API.
      * @returns {Promise<boolean>} Authentication status.
      */
     queryFn: async (): Promise<boolean> => {
-      const { default: fetchAuthStatus } = await import('./fetchAuthStatus');
+      const { default: queryAuthStatus } = await import('./queryAuthStatus');
 
-      return fetchAuthStatus();
+      return queryAuthStatus();
     },
   });
 
-export default useFetchAuthStatus;
+export default useQueryAuthStatus;

packages/ui/src/api/client.ts

@@ -5,47 +5,65 @@
 
 import env from '@/env';
 
+import { STATUS_CODES } from './constants';
+
+interface Options<T> {
+  init?: RequestInit;
+  on401?: () => Promise<T | null>;
+}
+
 /**
- * Custom error class for API request failures.
+ * Handles 401 Unauthorized responses by logging out the user
+ * and redirecting to the homepage.
+ * @returns {Promise<null>} Null after handling unauthorized response.
  */
-export class APIError extends Error {
-  /**
-   * Creates an API error with HTTP status code.
-   * @param {number} status - HTTP status code
-   * @param {string} message - Error message
-   */
-  constructor(
-    public status: number,
-    message: string,
-  ) {
-    super(message);
-    this.name = 'APIError';
-  }
-}
+const handle401 = async (): Promise<null> => {
+  const { logout } = await import('./logout');
+
+  await logout();
+  window.location.replace('/');
+
+  return null;
+};
 
 /**
  * Makes an authenticated API request to the backend.
- * @param {string} endpoint - API endpoint path
- * @param {RequestInit} [options] - Fetch options
- * @returns {Promise<T>} Response data
+ * 
+ * By default, handles unauthorized responses by
+ * logging out the user and redirecting to the homepage.
+ * 
+ * @param {string} endpoint - API endpoint.
+ * @param {Options<T>} [options] - Fetch options.
+ * @returns {Promise<T | null>} Response data.
  */
-export async function apiRequest<T>(endpoint: string, options?: RequestInit): Promise<T> {
+const client = async <T>(
+  endpoint: string,
+  options?: Options<T>,
+): Promise<T | null> => {
   const response = await fetch(`${env.apiUrl}${endpoint}`, {
-    ...options,
-    credentials: 'include', // Include cookies
+    ...options?.init,
+    credentials: 'include', // Include cookies.
     headers: {
       'Content-Type': 'application/json',
-      ...options?.headers,
+      ...options?.init?.headers,
     },
   });
+  const isUnauthorized = (
+    !response.ok
+    && response.status === STATUS_CODES.UNAUTHORIZED
+  );
 
-  if (!response.ok) {
-    const error = (await response.json().catch(() => ({ error: response.statusText }))) as {
-      error?: string;
-      message?: string;
-    };
-    throw new APIError(response.status, error.error ?? error.message ?? 'Unknown error');
+  if (isUnauthorized) {
+    console.error('Unauthorized!');
+
+    if (options?.on401) {
+      return await options.on401();
+    } else {
+      return await handle401();
+    }
+  } else {
+    return response.json() as Promise<T>;
   }
+};
 
-  return response.json() as Promise<T>;
-}
+export default client;

packages/ui/src/api/constants.ts

@@ -19,6 +19,25 @@ export const API_ENDPOINTS = {
    * @returns {string} Endpoint URL.
    */
   STRAVA_ACTIVITY_SIGNALS: (id: string) => `/strava/activities/${id}/signals`,
+
+
+  /**
+   * Builds endpoint for generating Strava activity image.
+   * @param {string} activityId - Activity ID.
+   * @param {string} prompt - Image generation prompt.
+   * @returns {string} Endpoint URL.
+   */
+  STRAVA_ACTIVITY_IMAGE_GENERATOR: (activityId: string, prompt: string) =>
+    `/strava/activities/${activityId}/image-generator?prompt=${encodeURIComponent(prompt)}`,
+
+  /**
+   * Builds endpoint for fetching Strava activity image generation prompt.
+   * @param {string} activityId - Activity ID.
+   * @param {string} signalsBase64 - Base64 encoded activity signals.
+   * @returns {string} Endpoint URL.
+   */
+  STRAVA_ACTIVITY_IMAGE_GENERATION_PROMPT: (activityId: string, signalsBase64: string) =>
+    `/strava/activities/${activityId}/image-generator/prompt?signals=${signalsBase64}`,
 };
 
 export const STATUS_CODES = {

packages/ui/src/api/index.ts

@@ -6,22 +6,26 @@ export {
   logout,
 } from './logout';
 export {
-  fetchAuthStatus,
-  useFetchAuthStatus,
+  queryAuthStatus,
+  useQueryAuthStatus,
 } from './authStatus';
 export {
-  fetchStravaActivities,
-  useFetchStravaActivities,
+  queryStravaActivity,
+  useQueryStravaActivity,
+} from './stravaActivity';
+export {
+  queryStravaActivities,
+  useQueryStravaActivities,
 } from './stravaActivities';
 export {
-  useStravaActivitySignals,
-  fetchStravaActivitySignals,
+  queryStravaActivitySignals,
+  useQueryStravaActivitySignals,
 } from './stravaActivitySignals';
 export {
-  useStravaActivityImageGenerationPrompt,
-  fetchStravaActivityImageGenerationPrompt,
+  queryStravaActivityImageGenerationPrompt,
+  useQueryStravaActivityImageGenerationPrompt,
 } from './stravaActivityImageGenerationPrompt';
 export {
-  generateStravaActivityImage,
-  useGenerateStravaActivityImage,
-} from './generateStravaActivityImage';
+  queryStravaActivityImage,
+  useQueryStravaActivityImage,
+} from './stravaActivityImage';

packages/ui/src/api/logout/logout.ts

@@ -1,4 +1,5 @@
-import { apiRequest } from '../client';
+import env from '@/env';
+
 import { API_ENDPOINTS } from '../constants';
 
 /**
@@ -7,8 +8,7 @@ import { API_ENDPOINTS } from '../constants';
  * @returns {Promise<void>} Promise that resolves when logout is complete.
  */
 const logout = async (): Promise<void> => {
-  await apiRequest<void>(API_ENDPOINTS.STRAVA_LOGOUT, {
-    method: 'POST',
+  await fetch(`${env.apiUrl}${API_ENDPOINTS.STRAVA_LOGOUT}`, {
     credentials: 'include', // Include cookies.
     headers: {
       'Content-Type': 'application/json',

packages/ui/src/api/stravaActivities/index.ts

@@ -1,2 +1,2 @@
-export { default as fetchStravaActivities } from './fetchStravaActivities';
-export { default as useFetchStravaActivities } from './useFetchStravaActivities';
+export { default as queryStravaActivities } from './queryStravaActivities';
+export { default as useQueryStravaActivities } from './useQueryStravaActivities';

packages/ui/src/api/stravaActivities/queryStravaActivities.ts

@@ -0,0 +1,13 @@
+import { StravaActivity } from '@torq/strava-api';
+
+import client from '../client';
+import { API_ENDPOINTS } from '../constants';
+
+/**
+ * Queries Strava activities.
+ * @returns {Promise<StravaActivity[]>} Strava activities.
+ */
+const queryStravaActivities = (): Promise<StravaActivity[] | null> =>
+  client<StravaActivity[]>(API_ENDPOINTS.STRAVA_ACTIVITIES);
+
+export default queryStravaActivities;

packages/ui/src/api/stravaActivities/useFetchStravaActivities.ts → packages/ui/src/api/stravaActivities/useQueryStravaActivities.ts

@@ -3,21 +3,21 @@ import { useQuery } from '@tanstack/react-query';
 import { API_ENDPOINTS } from '../constants';
 
 /**
- * Fetches Strava activities.
+ * Queries Strava activities.
  * @returns {object} Strava activities data.
  */
-const useFetchStravaActivities = () =>
+const useQueryStravaActivities = () =>
   useQuery({
     queryKey: [API_ENDPOINTS.STRAVA_ACTIVITIES],
     /**
-     * Fetches Strava activities from the internal API.
+     * Queries Strava activities from the internal API.
      * @returns {Promise<StravaActivity[]>} Strava activities.
      */
     queryFn: async () => {
-      const { default: fetchStravaActivities } = await import('./fetchStravaActivities');
+      const { default: queryStravaActivities } = await import('./queryStravaActivities');
 
-      return fetchStravaActivities();
+      return queryStravaActivities();
     },
   });
 
-export default useFetchStravaActivities;
+export default useQueryStravaActivities;

packages/ui/src/api/stravaActivity/index.ts

@@ -0,0 +1,2 @@
+export { default as queryStravaActivity } from './queryStravaActivity';
+export { default as useQueryStravaActivity } from './useQueryStravaActivity';