Merge pull request #17 from Ferlab-Ste-Justine/refresh-token

refresh tokens

frontend/apps/variant/package.json

@@ -24,9 +24,11 @@
   },
   "dependencies": {
     "components": "file:../../components",
+    "utils": "file:../../utils",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "swr": "^2.3.1"
+    "swr": "^2.3.1",
+    "axios": "1.7.9"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",

frontend/apps/variant/src/App.tsx

@@ -14,14 +14,20 @@ import {
   defaultSettings,
 } from "./include_variant_table";
 import { IVariantEntity } from "@/variant_type";
-import useSWR, { Fetcher } from "swr";
+import useSWR from "swr";
+import { axiosClient } from "@/utils/axios";
 
-export interface AppProps {}
+type OccurrenceInput = {
+  seqId: string;
+  listBody: ListBody;
+};
 
-const fetcher: Fetcher<Occurrence[], string> = (url: string) =>
-  fetch(url, {
-    method: "POST",
-    body: JSON.stringify({
+const fetcher = (input: OccurrenceInput) =>
+  axiosClient.post("/occurrences", input).then((res) => res.data);
+
+function App() {
+  const { data } = useSWR<Occurrence[], any, OccurrenceInput>(
+    {
       seqId: "5011",
       listBody: {
         selected_fields: ["hgvsg", "variant_class"],
@@ -39,13 +45,12 @@ const fetcher: Fetcher<Occurrence[], string> = (url: string) =>
           value: [4],
         },
       },
-    }),
-  }).then((res) => res.json());
-
-function App({}: AppProps) {
-  const { data, error, isLoading } = useSWR("/api/occurrences", fetcher, {
-    revalidateOnFocus: false,
-  });
+    },
+    fetcher,
+    {
+      revalidateOnFocus: false,
+    }
+  );
   const occurrences = data || [];
 
   return (

frontend/apps/variant/tsconfig.app.json

@@ -27,6 +27,7 @@
     "noUncheckedSideEffectImports": true,
     "paths": {
       "@/api/*": ["../../api/*"],
+      "@/utils/*": ["../../utils/*"],
       "@/components/*": ["../../components/*"],
       "@/base/ui/*": ["../../components/base/ui/*"],
       "@/lib/*": ["../../components/lib/*"],

frontend/docs/project-structure.md

@@ -13,6 +13,7 @@ Instead of working by portals, now we work by applications and we have to make s
 ## Project Structure
 
 ### Directory Organization
+
 ```
 frontend/
 ├── apps/                # Full applications for a domain (e.g., Variant, Prescription)
@@ -28,36 +29,43 @@ frontend/
 ├── themes/              #
 │   ├── themesX/        # Theme-specific assets
 │   |   └── assets/     #
+│   utils/              # Shared utils
 └── types/               # TypeScript types/interfaces
 ```
 
 ---
 
 ### 1. **Apps**
+
 The `Apps` directory contains full applications designed to serve specific business domains.
 Each application is a complete unit, including pages and modal dialogs specific to its purpose.
 
 It does not contain navigation, site layout. Only the core features of the application.
 
 #### Examples:
+
 - **Variant**: Application related to variant exploration.
 - **Prescription**: Handles prescription-related functionalities.
 - **Community**: Manages community-specific features.
 
 #### Key Characteristics:
+
 - Combines pages and modals for cohesive user flows for a specific domain.
 - Leverages components from the `Components` directory for reusable building blocks.
 
 ---
 
 ### 2. **Components**
+
 The `Components` directory holds all basic to advanced UI components required to build applications. These components are categorized into generic and custom components.
 
 #### Types of Components:
+
 - **Generic Components**: Built using [shadcn](https://shadcn.dev), leveraging pre-made, highly customizable components.
 - **Custom Components**: Created with React and TailwindCSS for unique design and behavior tailored to application needs.
 
 #### Key Features:
+
 - Encourages reusability across multiple applications.
 - Provides a shared library of consistent UI elements.
 
@@ -66,26 +74,32 @@ The `Components` directory holds all basic to advanced UI components required to
 ---
 
 ### 3. **Portals**
+
 The `Portals` directory contains the layout and setup for portals, including the base structure for generating different portals (e.g., "Radiant").
 
 #### Functionality:
+
 - Uses `react-router` for navigation and routing.
 - Capable of generating multiple portals based on different themes and environment configurations during the build process.
 
 ---
 
 ### 4. **Themes**
+
 The `Themes` directory houses theme-related assets such as images and TailwindCSS configurations. These themes are used to style the portals and applications, ensuring a consistent look and feel across the project.
 
 #### Contents:
+
 - **Images**: Logos, backgrounds, and other visual assets.
 - **CSS**: TailwindCSS configurations for styling components and layouts.
 
 ---
 
 ### 5. **Storybook**
+
 The `Storybook` directory contains a setup for testing and demonstrating components. It allows developers to preview individual components or groups of components in isolation.
 
 #### Capabilities:
+
 - Select and test components with different themes applied.
 - Serves as a living documentation for the component library.

frontend/package.json

@@ -9,5 +9,8 @@
   "devDependencies": {
     "@ferlab/eslint-config": "^2.0.0",
     "eslint-plugin-prettier": "^5.2.3"
+  },
+  "dependencies": {
+    "axios": "^1.7.9"
   }
 }

frontend/portals/radiant/app/api/occurrences.ts

@@ -1,5 +1,6 @@
 import { getOccurrencesApi } from "~/utils/api.server";
 import type { Route } from "./+types/occurrences";
+import { AxiosError, HttpStatusCode } from "axios";
 
 export function action({ request }: Route.ActionArgs) {
   switch (request.method) {
@@ -25,11 +26,20 @@ const fetchOccurences = async (request: Request) => {
       },
     });
   } catch (error: any) {
-    return new Response(JSON.stringify([]), {
-      status: 200,
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
+    if (error instanceof AxiosError) {
+      return new Response(JSON.stringify(error.response?.data), {
+        status: error.response?.status || HttpStatusCode.InternalServerError,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+    } else {
+      return new Response(JSON.stringify(error), {
+        status: HttpStatusCode.InternalServerError,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+    }
   }
 };

frontend/portals/radiant/app/api/refresh-token.ts

@@ -1,13 +1,18 @@
+import { HttpStatusCode } from "axios";
 import type { Route } from "./+types/occurrences";
 import { refreshAccessToken } from "~/utils/auth.server";
 
 export async function action({ request }: Route.LoaderArgs) {
-  const results = await refreshAccessToken(request);
+  if (request.method === "POST") {
+    const results = await refreshAccessToken(request);
 
-  return new Response(JSON.stringify({ success: true }), {
-    status: 200,
-    headers: {
-      "Set-Cookie": results.cookie,
-    },
-  });
+    return new Response(JSON.stringify({ success: true }), {
+      status: HttpStatusCode.Ok,
+      headers: {
+        "Set-Cookie": results.cookie,
+      },
+    });
+  }
+
+  return new Response(null, { status: HttpStatusCode.MethodNotAllowed });
 }

frontend/portals/radiant/app/routes.ts

@@ -10,5 +10,8 @@ export default [
   layout("./layout/protected-layout.tsx", [index("./routes/home.tsx")]),
   route("auth/callback", "./routes/auth/callback.ts"),
   route("auth/logout", "./routes/auth/logout.ts"),
-  ...prefix("api", [route("occurrences", "./api/occurrences.ts")]),
+  ...prefix("api", [
+    route("occurrences", "./api/occurrences.ts"),
+    route("refresh-token", "./api/refresh-token.ts"),
+  ]),
 ] satisfies RouteConfig;

frontend/utils/axios.ts

@@ -0,0 +1,44 @@
+import axios, { HttpStatusCode } from "axios";
+
+export const axiosClient = axios.create({
+  baseURL: "/api",
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+let refreshTokenPromise: Promise<any> | null = null;
+
+axiosClient.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    if (refreshTokenPromise) {
+      await refreshTokenPromise;
+
+      return axiosClient(originalRequest);
+    }
+
+    if (
+      error.response.status === HttpStatusCode.Unauthorized &&
+      !originalRequest._retry
+    ) {
+      originalRequest._retry = true;
+
+      try {
+        refreshTokenPromise = axios.post("/api/refresh-token").finally(() => {
+          refreshTokenPromise = null;
+        });
+
+        await refreshTokenPromise;
+
+        return axiosClient(originalRequest);
+      } catch (refreshError) {
+        window.location.href = "/auth/logout";
+        return Promise.reject(refreshError);
+      }
+    }
+    return Promise.reject(error);
+  }
+);