From 7427032bf6d0457f835d3a29eb59a6b725e24f18 Mon Sep 17 00:00:00 2001
From: Miron Pawlik <mironiasty@users.noreply.github.com>
Date: Mon, 2 Dec 2024 18:03:41 +0100
Subject: [PATCH] [FCE-925] Show connection error (#189)

## Description

Show connection error to user, in case of incorrect URL.

## Motivation and Context

This is small change to help with debugging example app.

## Types of changes

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to
      not work as expected)
---
 .../src/components/JoinRoomCard.tsx           | 40 +++++++++++--------
 .../fishjam-chat/src/lib/roomManager.ts       |  9 +++--
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/examples/react-client/fishjam-chat/src/components/JoinRoomCard.tsx b/examples/react-client/fishjam-chat/src/components/JoinRoomCard.tsx
index c5c3dde2..34994a9c 100644
--- a/examples/react-client/fishjam-chat/src/components/JoinRoomCard.tsx
+++ b/examples/react-client/fishjam-chat/src/components/JoinRoomCard.tsx
@@ -64,30 +64,38 @@ export const JoinRoomCard: FC<Props> = (props) => {
     roomName,
     peerName,
   }: RoomForm) => {
-    const { url, peerToken } = await getRoomCredentials(
-      roomManagerUrl,
-      roomName,
-      peerName,
-    );
-    persistFormValues({ roomManagerUrl, roomName, peerName });
-    await joinRoom({
-      url,
-      peerToken,
-      peerMetadata: { displayName: peerName },
-    });
-
-    await Promise.all([
-      camera.startStreaming({ simulcast: false }),
-      mic.startStreaming({ simulcast: false }),
-    ]);
+    try {
+      const { url, peerToken } = await getRoomCredentials(
+        roomManagerUrl,
+        roomName,
+        peerName,
+      );
+      persistFormValues({ roomManagerUrl, roomName, peerName });
+      await joinRoom({
+        url,
+        peerToken,
+        peerMetadata: { displayName: peerName },
+      });
+
+      await Promise.all([
+        camera.startStreaming({ simulcast: false }),
+        mic.startStreaming({ simulcast: false }),
+      ]);
+      form.clearErrors();
+    } catch (e) {
+      form.setError("root", { message: (e as { message?: string })?.message });
+    }
   };
 
+  const error = form.formState.errors.root?.message;
+
   return (
     <Card {...props}>
       <form onSubmit={form.handleSubmit(onJoinRoom)}>
         <CardHeader>
           <CardTitle>Fishjam Chat</CardTitle>
           <CardDescription>Fill out the form to join the call.</CardDescription>
+          {error && <CardFooter className="text-red-500">{error}</CardFooter>}
         </CardHeader>
 
         <CardContent>
diff --git a/examples/react-client/fishjam-chat/src/lib/roomManager.ts b/examples/react-client/fishjam-chat/src/lib/roomManager.ts
index 88ec82ee..a83ceabd 100644
--- a/examples/react-client/fishjam-chat/src/lib/roomManager.ts
+++ b/examples/react-client/fishjam-chat/src/lib/roomManager.ts
@@ -13,9 +13,12 @@ export const getRoomCredentials = async (
   roomName: string,
   peerName: string,
 ) => {
-  const res = await axios.get<RoomManagerResponse>(roomManagerUrl, {
-    params: { peerName, roomName },
-  });
+  // remove duplicate get params (in case user will just copy params from UI)
+  const url = new URL(roomManagerUrl)!;
+  url.searchParams.set("roomName", roomName);
+  url.searchParams.set("peerName", peerName);
+
+  const res = await axios.get<RoomManagerResponse>(url.toString());
 
   return res.data;
 };