From ee72295193d1fac15da9f758d03cb71dc3abcce6 Mon Sep 17 00:00:00 2001
From: Douglas Naphas <douglasnaphas@gmail.com>
Date: Mon, 28 Mar 2022 00:26:02 -0400
Subject: [PATCH] Deserialize newParticipant on the front end

gh-250
---
 frontend/src/components/RosterPage.js      | 25 +++++++++++++++-------
 frontend/src/components/RosterPage.test.js |  2 +-
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/RosterPage.js b/frontend/src/components/RosterPage.js
index b1c2f893..373edc8e 100644
--- a/frontend/src/components/RosterPage.js
+++ b/frontend/src/components/RosterPage.js
@@ -115,15 +115,24 @@ class RosterPage extends Component {
         `gamename=${encodeURIComponent(gameName)}`
     );
     webSocket.addEventListener("message", (event) => {
-      if (event.data.newParticipant) {
-        this.setState((state, props) => {
-          return {
-            participants: state.participants.concat([
-              event.data.newParticipant,
-            ]),
-          };
-        });
+      if (!event) {
+        return;
       }
+      if (!event.data) {
+        return;
+      }
+      const eventData = JSON.parse(event.data);
+      if (!eventData) {
+        return;
+      }
+      if (!eventData.newParticipant) {
+        return;
+      }
+      this.setState((state, props) => {
+        return {
+          participants: state.participants.concat([eventData.newParticipant]),
+        };
+      });
     });
   }
   componentWillUnmount() {
diff --git a/frontend/src/components/RosterPage.test.js b/frontend/src/components/RosterPage.test.js
index 2a038494..26012dd5 100644
--- a/frontend/src/components/RosterPage.test.js
+++ b/frontend/src/components/RosterPage.test.js
@@ -219,7 +219,7 @@ describe("RosterPage", () => {
     );
     expect(mockWebSocketConstructorCalls).toEqual(1);
     const testMessage = new MessageEvent("message", {
-      data: { newParticipant: "Em Three" },
+      data: `{"newParticipant":"Em Three"}`,
     });
     let table = await screen.findByRole("table");
     await findByText(table, "Je Teste");