Feat/add env new

.env

@@ -0,0 +1,2 @@
+# Backend url
+VITE_BACKEND_URL=https://intercom-manager.dev.eyevinn.technology/

.env.local.sample

@@ -0,0 +1 @@
+# Example .env.local file

README.md

@@ -28,3 +28,7 @@ export default {
 - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
 - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
 - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+
+## Example .env.local file
+
+Replace sample with actual values

src/api/api.ts

@@ -1,7 +1,6 @@
-// TODO env variable
 import { handleFetchRequest } from "./handle-fetch-request.ts";
 
-const rootUrl = "https://intercom-manager.dev.eyevinn.technology/";
+const API_URL = import.meta.env.VITE_BACKEND_URL ?? "";
 
 type TCreateProductionOptions = {
   name: string;
@@ -59,7 +58,7 @@ type TDeleteAudioSessionOptions = {
 export const API = {
   createProduction: async ({ name, lines }: TCreateProductionOptions) =>
     handleFetchRequest<TCreateProductionResponse>(
-      fetch(`${rootUrl}production/`, {
+      fetch(`${API_URL}production/`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -72,22 +71,22 @@ export const API = {
     ),
   listProductions: (): Promise<TListProductionsResponse> =>
     handleFetchRequest<TListProductionsResponse>(
-      fetch(`${rootUrl}productions/`, { method: "GET" })
+      fetch(`${API_URL}productions/`, { method: "GET" })
     ),
   fetchProduction: (id: number): Promise<TFetchProductionResponse> =>
     handleFetchRequest<TFetchProductionResponse>(
-      fetch(`${rootUrl}productions/${id}`, { method: "GET" })
+      fetch(`${API_URL}productions/${id}`, { method: "GET" })
     ),
   deleteProduction: (id: number) =>
-    fetch(`${rootUrl}productions/${id}`, { method: "DELETE" }).then(
+    fetch(`${API_URL}productions/${id}`, { method: "DELETE" }).then(
       (response) => response.json()
     ),
   listProductionLines: (id: number) =>
-    fetch(`${rootUrl}productions/${id}/lines`, { method: "GET" }).then(
+    fetch(`${API_URL}productions/${id}/lines`, { method: "GET" }).then(
       (response) => response.json()
     ),
   fetchProductionLine: (productionId: number, lineId: number): Promise<TLine> =>
-    fetch(`${rootUrl}productions/${productionId}/lines/${lineId}`, {
+    fetch(`${API_URL}productions/${productionId}/lines/${lineId}`, {
       method: "GET",
     }).then((response) => response.json()),
   offerAudioSession: ({
@@ -97,7 +96,7 @@ export const API = {
   }: TOfferAudioSessionOptions): Promise<TOfferAudioSessionResponse> =>
     handleFetchRequest<TOfferAudioSessionResponse>(
       fetch(
-        `${rootUrl}productions/${productionId}/lines/${lineId}/users/${username}`,
+        `${API_URL}productions/${productionId}/lines/${lineId}/users/${username}`,
         { method: "POST" }
       )
     ),
@@ -109,7 +108,7 @@ export const API = {
   }: TPatchAudioSessionOptions): Promise<TPatchAudioSessionResponse> =>
     handleFetchRequest<TPatchAudioSessionResponse>(
       fetch(
-        `${rootUrl}productions/${productionId}/lines/${lineId}/session/${sessionId}`,
+        `${API_URL}productions/${productionId}/lines/${lineId}/session/${sessionId}`,
         {
           method: "PATCH",
           body: sdpAnswer,
@@ -123,7 +122,7 @@ export const API = {
   }: TDeleteAudioSessionOptions): Promise<string> =>
     handleFetchRequest<string>(
       fetch(
-        `${rootUrl}productions/${productionId}/lines/${lineId}/session/${sessionId}`,
+        `${API_URL}productions/${productionId}/lines/${lineId}/session/${sessionId}`,
         { method: "DELETE" }
       )
     ),

src/components/production-line/production-line.tsx

@@ -47,12 +47,10 @@ export const ProductionLine: FC = () => {
   useEffect(() => {
     if (!joinProductionOptions) return noop;
 
-    let interval: number | null = null;
-
     const productionId = parseInt(joinProductionOptions.productionId, 10);
     const lineId = parseInt(joinProductionOptions.lineId, 10);
 
-    interval = window.setInterval(() => {
+    const interval = window.setInterval(() => {
       API.fetchProductionLine(productionId, lineId)
         .then((line) => setParticipants(line.participants))
         .catch(console.error);