Feat/new api

.env

@@ -1,2 +1,3 @@
 # Backend url
 VITE_BACKEND_URL=https://intercom-manager.prod.eyevinn.technology/
+VITE_BACKEND_API_VERSION=api/v1/

.env.local.sample

@@ -1,2 +1,3 @@
 # Example .env.local file
 VITE_BACKEND_URL=https://intercom-manager.dev.eyevinn.technology/
+VITE_BACKEND_API_VERSION=api/v1/

.env.staging

@@ -1,2 +1,3 @@
 # Example .env.local file
 VITE_BACKEND_URL=https://intercom-manager.dev.eyevinn.technology/
+VITE_BACKEND_API_VERSION=api/v1/

src/api/api.ts

@@ -1,7 +1,9 @@
 import { handleFetchRequest } from "./handle-fetch-request.ts";
 
+const API_VERSION = import.meta.env.VITE_BACKEND_API_VERSION ?? "api/v1/";
 const API_URL =
-  import.meta.env.VITE_BACKEND_URL ?? `${window.location.origin}/api/v1/`;
+  `${import.meta.env.VITE_BACKEND_URL}${API_VERSION}` ??
+  `${window.location.origin}/${API_VERSION}`;
 
 type TCreateProductionOptions = {
   name: string;
@@ -10,21 +12,21 @@ type TCreateProductionOptions = {
 
 type TParticipant = {
   name: string;
-  sessionid: string;
-  endpointid: string;
+  sessionId: string;
+  endpointId: string;
   isActive: boolean;
 };
 
 type TLine = {
   name: string;
   id: string;
-  smbconferenceid: string;
+  smbConferenceId: string;
   participants: TParticipant[];
 };
 
 type TBasicProductionResponse = {
   name: string;
-  productionid: string;
+  productionId: string;
 };
 
 type TFetchProductionResponse = TBasicProductionResponse & {
@@ -41,21 +43,17 @@ type TOfferAudioSessionOptions = {
 
 type TOfferAudioSessionResponse = {
   sdp: string;
-  sessionid: string;
+  sessionId: string;
 };
 
 type TPatchAudioSessionOptions = {
-  productionId: number;
-  lineId: number;
   sessionId: string;
   sdpAnswer: string;
 };
 
 type TPatchAudioSessionResponse = null;
 
 type TDeleteAudioSessionOptions = {
-  productionId: number;
-  lineId: number;
   sessionId: string;
 };
 
@@ -79,23 +77,23 @@ export const API = {
     ),
   listProductions: (): Promise<TListProductionsResponse> =>
     handleFetchRequest<TListProductionsResponse>(
-      fetch(`${API_URL}productions/`, { method: "GET" })
+      fetch(`${API_URL}production/`, { method: "GET" })
     ),
   fetchProduction: (id: number): Promise<TFetchProductionResponse> =>
     handleFetchRequest<TFetchProductionResponse>(
-      fetch(`${API_URL}productions/${id}`, { method: "GET" })
+      fetch(`${API_URL}production/${id}`, { method: "GET" })
     ),
   deleteProduction: (id: number): Promise<string> =>
     handleFetchRequest<string>(
-      fetch(`${API_URL}productions/${id}`, { method: "DELETE" })
+      fetch(`${API_URL}production/${id}`, { method: "DELETE" })
     ),
   listProductionLines: (id: number) =>
     handleFetchRequest<TLine[]>(
-      fetch(`${API_URL}productions/${id}/lines`, { method: "GET" })
+      fetch(`${API_URL}production/${id}/line`, { method: "GET" })
     ),
   fetchProductionLine: (productionId: number, lineId: number): Promise<TLine> =>
     handleFetchRequest<TLine>(
-      fetch(`${API_URL}productions/${productionId}/lines/${lineId}`, {
+      fetch(`${API_URL}production/${productionId}/line/${lineId}`, {
         method: "GET",
       })
     ),
@@ -105,36 +103,38 @@ export const API = {
     username,
   }: TOfferAudioSessionOptions): Promise<TOfferAudioSessionResponse> =>
     handleFetchRequest<TOfferAudioSessionResponse>(
-      fetch(
-        `${API_URL}productions/${productionId}/lines/${lineId}/users/${username}`,
-        { method: "POST" }
-      )
+      fetch(`${API_URL}session/`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          productionId,
+          lineId,
+          username,
+        }),
+      })
     ),
   patchAudioSession: ({
-    productionId,
-    lineId,
     sessionId,
     sdpAnswer,
   }: TPatchAudioSessionOptions): Promise<TPatchAudioSessionResponse> =>
     handleFetchRequest<TPatchAudioSessionResponse>(
-      fetch(
-        `${API_URL}productions/${productionId}/lines/${lineId}/session/${sessionId}`,
-        {
-          method: "PATCH",
-          body: sdpAnswer,
-        }
-      )
+      fetch(`${API_URL}session/${sessionId}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          sdpAnswer,
+        }),
+      })
     ),
   deleteAudioSession: ({
-    productionId,
-    lineId,
     sessionId,
   }: TDeleteAudioSessionOptions): Promise<string> =>
     handleFetchRequest<string>(
-      fetch(
-        `${API_URL}productions/${productionId}/lines/${lineId}/session/${sessionId}`,
-        { method: "DELETE" }
-      )
+      fetch(`${API_URL}session/${sessionId}`, { method: "DELETE" })
     ),
   heartbeat: ({ sessionId }: THeartbeatOptions): Promise<string> =>
     handleFetchRequest<string>(

src/components/landing-page/create-production.tsx

@@ -85,7 +85,7 @@ export const CreateProduction = () => {
       lines: [{ name: value.defaultLine }, ...value.lines],
     })
       .then((v) => {
-        setCreatedProductionId(v.productionid);
+        setCreatedProductionId(v.productionId);
         setLoading(false);
       })
       .catch((error) => {

src/components/landing-page/productions-list.tsx

@@ -115,9 +115,9 @@ export const ProductionsList = () => {
         {error && <LocalError error={error} />}
         {!error &&
           productions.map((p) => (
-            <ProductionItem key={p.productionid}>
+            <ProductionItem key={p.productionId}>
               <ProductionName>{p.name}</ProductionName>
-              <ProductionId>{p.productionid}</ProductionId>
+              <ProductionId>{p.productionId}</ProductionId>
             </ProductionItem>
           ))}
       </ProductionListContainer>

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

@@ -308,7 +308,7 @@ export const ProductionLine: FC = () => {
           <ListWrapper>
             {line && (
               <UserList
-                sessionid={sessionId}
+                sessionId={sessionId}
                 participants={line.participants}
                 dominantSpeaker={dominantSpeaker}
                 audioLevelAboveThreshold={audioLevelAboveThreshold}

src/components/production-line/types.ts

@@ -10,8 +10,8 @@ export type TJoinProductionOptions = {
 
 export type TParticipant = {
   name: string;
-  sessionid: string;
-  endpointid: string;
+  sessionId: string;
+  endpointId: string;
   isActive: boolean;
 };
 
@@ -23,7 +23,7 @@ export type TLine = {
 
 export type TBasicProduction = {
   name: string;
-  productionid: string;
+  productionId: string;
 };
 
 export type TProduction = TBasicProduction & {

src/components/production-line/use-establish-session.ts

@@ -34,7 +34,7 @@ export const useEstablishSession = ({
       .then((response) => {
         if (aborted) return;
 
-        setSessionId(response.sessionid);
+        setSessionId(response.sessionId);
         setSdpOffer(response.sdp);
       })
       .catch((e) => {
@@ -57,14 +57,9 @@ export const useEstablishSession = ({
     () => () => {
       if (!joinProductionOptions) return;
 
-      const productionId = parseInt(joinProductionOptions.productionId, 10);
-      const lineId = parseInt(joinProductionOptions.lineId, 10);
-
       if (sessionId) {
         API.deleteAudioSession({
           sessionId,
-          productionId,
-          lineId,
         }).catch(console.error);
       }
     },

src/components/production-line/use-rtc-connection.ts

@@ -173,8 +173,6 @@ const establishConnection = ({
     console.log("sdp PATCH sent");
 
     await API.patchAudioSession({
-      productionId: parseInt(joinProductionOptions.productionId, 10),
-      lineId: parseInt(joinProductionOptions.lineId, 10),
       sessionId,
       sdpAnswer: sdpAnswer.sdp,
     });

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

@@ -81,14 +81,14 @@ const IconWrapper = styled.div`
 
 type TUserListOptions = {
   participants: TParticipant[];
-  sessionid: string | null;
+  sessionId: string | null;
   dominantSpeaker: string | null;
   audioLevelAboveThreshold: boolean;
 };
 
 export const UserList = ({
   participants,
-  sessionid,
+  sessionId,
   dominantSpeaker,
   audioLevelAboveThreshold,
 }: TUserListOptions) => {
@@ -99,10 +99,10 @@ export const UserList = ({
       <DisplayContainerHeader>Participants</DisplayContainerHeader>
       <ListWrapper>
         {participants.map((p) => (
-          <User key={p.sessionid} isYou={p.sessionid === sessionid}>
+          <User key={p.sessionId} isYou={p.sessionId === sessionId}>
             <IsTalkingIndicator
               isTalking={
-                audioLevelAboveThreshold && p.endpointid === dominantSpeaker
+                audioLevelAboveThreshold && p.endpointId === dominantSpeaker
               }
             >
               <OnlineIndicator isActive={p.isActive}>