refactor: ♻️ Centralized way to get env value

cypress/specs/reminders.mirage.cy.ts

@@ -2,7 +2,7 @@ import { format } from "date-fns";
 
 import { Response as MirageResponse } from "miragejs";
 
-import { urlPrefix } from "utils";
+import { urlPrefix, getEnvValue } from "utils";
 
 import { buildScenarios, runServer, TServer } from "services/mocker/mirage";
 import { MOCKER_TYPE } from "services/mocker";
@@ -12,7 +12,7 @@ import { RemindersElements } from "../pages";
 describe("Reminders Page", () => {
   before(function () {
     // skip test if not using mirage
-    cy.skipIf(Cypress.env("REACT_APP_MOCKER") !== MOCKER_TYPE.mirage, this);
+    cy.skipIf(getEnvValue("REACT_APP_MOCKER") !== MOCKER_TYPE.mirage, this);
     cy.setupMirageApiProxy();
   });
 

cypress/specs/reminders.msw.cy.ts

@@ -1,7 +1,7 @@
 import { http, HttpResponse } from "msw";
 import { format } from "date-fns";
 
-import { urlPrefix } from "utils";
+import { urlPrefix, getEnvValue } from "utils";
 
 import { buildScenarios } from "services/mocker/msw";
 import { MOCKER_TYPE } from "services/mocker";
@@ -11,7 +11,7 @@ import { RemindersElements } from "../pages";
 describe("Reminders Page", () => {
   before(function () {
     // skip test if not using msw
-    cy.skipIf(Cypress.env("REACT_APP_MOCKER") !== MOCKER_TYPE.msw, this);
+    cy.skipIf(getEnvValue("REACT_APP_MOCKER") !== MOCKER_TYPE.msw, this);
   });
 
   it("should be able to create a reminder under a reminder group and add a due date", () => {

cypress/support/msw.ts

@@ -3,6 +3,7 @@ import { RequestHandler } from "msw";
 
 import { setupHandlers, db } from "services/mocker/msw";
 import { MOCKER_TYPE } from "services/mocker";
+import { getEnvValue } from "utils";
 
 declare global {
   namespace Cypress {
@@ -19,7 +20,7 @@ let mswWorker: SetupWorker;
 
 before(() => {
   // NOTE: if using msw, setup the msw worker
-  if (Cypress.env("REACT_APP_MOCKER") === MOCKER_TYPE.msw) {
+  if (getEnvValue("REACT_APP_MOCKER") === MOCKER_TYPE.msw) {
     mswWorker = setupWorker(...setupHandlers({ db }));
 
     cy.wrap(

src/index.tsx

@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 
 import { i18n } from "modules/i18n";
 import { MOCKER_TYPE } from "services/mocker";
+import { getEnvValue } from "utils";
 
 import { App } from "./app";
 
@@ -30,8 +31,7 @@ async function setupApp() {
   }
 
   // NOTE: extra configuration to support mirage in cypress
-  // with window.Cypress.env we can access are the environment variables from Cypress configuration
-  if (window.Cypress && window.Cypress.env("REACT_APP_MOCKER") === MOCKER_TYPE.mirage) {
+  if (getEnvValue("REACT_APP_MOCKER") === MOCKER_TYPE.mirage) {
     await import("services/mocker/mirage/proxyServer").then(({ startProxyMirageServer }) => {
       startProxyMirageServer();
     });

src/services/mocker/mirage/proxyServer.ts

@@ -13,7 +13,7 @@ export type THandleProxyMirageServerRequest = (
 declare global {
   // eslint-disable-next-line
   interface Window {
-    handleProxyMirageServerRequest: THandleProxyMirageServerRequest;
+    handleProxyMirageServerRequest?: THandleProxyMirageServerRequest;
   }
 }
 
@@ -31,9 +31,12 @@ export const startProxyMirageServer = function (config: Omit<TRunMirageServerCon
         for (const method of methods) {
           // @ts-ignore
           this[method](`${domain}*`, async (_, request: TMirageRequest) => {
-            const [status, headers, body] = await window.handleProxyMirageServerRequest(request);
+            // check if the window object has the handleProxyMirageServerRequest function before calling it
+            if (window.handleProxyMirageServerRequest) {
+              const [status, headers, body] = await window.handleProxyMirageServerRequest(request);
 
-            return new MirageResponse(status, headers, body);
+              return new MirageResponse(status, headers, body);
+            }
           });
         }
       }

src/store/apiSlice.ts

@@ -1,12 +1,13 @@
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 
 import { i18n } from "modules/i18n";
+import { urlPrefix } from "utils";
 
 export const apiSlice = createApi({
   reducerPath: "api",
   // small wrapper around fetch that aims to simplify HTTP requests (like axios)
   baseQuery: fetchBaseQuery({
-    baseUrl: window.Cypress ? window.Cypress.env("REACT_APP_API_URL") : process.env.REACT_APP_API_URL,
+    baseUrl: urlPrefix("/"),
     prepareHeaders: (headers) => {
       headers.set("Accept-Language", i18n.currentLanguage);
     },

src/utils/env.ts

@@ -0,0 +1,11 @@
+export const getEnvValue = (key: string, defaultValue?: string) => {
+  // with window.Cypress.env we can access are the environment variables from Cypress configuration
+  // NOTE: ORDER MATTERS, order of precedence: process.env > window.Cypress.env > defaultValue
+  const value =
+    process.env[key] || (typeof window !== "undefined" && window.Cypress && window.Cypress.env(key)) || defaultValue;
+
+  if (value === undefined) {
+    throw new Error(`Environment variable ${key} is not defined`);
+  }
+  return value;
+};

src/utils/index.ts

@@ -3,3 +3,4 @@ export * from "./classNames";
 export * from "./utils";
 export * from "./url";
 export * from "./async";
+export * from "./env";

src/utils/url.ts

@@ -1,3 +1,5 @@
+import { getEnvValue } from "./env";
+
 export function appendQueryParams<T extends Record<string, string>>(url: string, queryParams: T) {
   const queries = Object.keys(queryParams);
 
@@ -30,8 +32,7 @@ export const getUrlSearchParams = (url: string) => {
 };
 
 export const urlPrefix = (path: string, baseUrl?: string) => {
-  const apiUrl =
-    baseUrl || process.env.REACT_APP_API_URL || ((window.Cypress && window.Cypress.env("REACT_APP_API_URL")) as string);
+  const apiUrl = baseUrl || getEnvValue("REACT_APP_API_URL");
 
   if (path[0] !== "/") {
     throw new Error("Path should start with a forward slash.");