Merge pull request #221 from ShotaTanemura/fix/chat-listener

chat listenerの確認
ShotaTanemura · Oct 20, 2024 · d51d844 · d51d844
2 parents 13b1759 + 49f0754
commit d51d844
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 40 deletions.
diff --git a/pong/pong/static/pong/components/ChatContainer.js b/pong/pong/static/pong/components/ChatContainer.js
@@ -47,9 +47,15 @@ export class ChatContainer extends Component {
 
   displayRoom(select) {
     const chatContainer = document.querySelector(".direct-message-content");
+    if (!chatContainer) {
+      return;
+    }
     chatContainer.innerHTML = "";
 
     const roomHeader = document.querySelector(".direct-message-header");
+    if (!roomHeader) {
+      return;
+    }
     roomHeader.innerHTML = `<h3>${select.name}</h3>`;
 
     const messages = document.createElement("div");
@@ -90,11 +96,17 @@ export class ChatContainer extends Component {
       );
 
       const header = document.querySelector(".direct-message-header");
+      if (!header) {
+        return;
+      }
       header.innerHTML = `<h3>${select.name}</h3> 
                           <button class="invite-button">ゲームに招待する</button> 
                           <button class="leave-button">ルームから退出</button>`;
 
       const leaveButton = document.querySelector(".leave-button");
+      if (!leaveButton) {
+        return;
+      }
       this.eventListeners.leaveButtonClickListener = () =>
         this.confirmLeaveRoom();
       leaveButton.addEventListener(
@@ -103,6 +115,9 @@ export class ChatContainer extends Component {
       );
 
       const inviteButton = document.querySelector(".invite-button");
+      if (!inviteButton) {
+        return;
+      }
       this.eventListeners.inviteButtonClickListener = () =>
         this.inviteToGame(select.uuid);
       inviteButton.addEventListener(
@@ -224,7 +239,9 @@ export class ChatContainer extends Component {
     }
 
     const header = document.querySelector(".direct-message-header");
-    header.innerHTML = "ルームを選択してください";
+    if (header) {
+      header.innerHTML = "ルームを選択してください";
+    }
 
     this.removeEventListeners();
     this.render();

diff --git a/pong/pong/static/pong/components/DirectoryContainer.js b/pong/pong/static/pong/components/DirectoryContainer.js
@@ -39,14 +39,19 @@ export class DirectoryContainer extends Component {
       if (searchBar) searchBar.removeEventListener("input", searchBarListener);
     }
     if (confirmJoinButtonListener) {
-      document
-        .getElementById("confirmJoinButton")
-        .removeEventListener("click", confirmJoinButtonListener);
+      const confirmJoinButton = document.getElementById("confirmJoinButton");
+      if (confirmJoinButton) {
+        confirmJoinButton.removeEventListener(
+          "click",
+          confirmJoinButtonListener,
+        );
+      }
     }
     if (cancelJoinButtonListener) {
-      document
-        .getElementById("cancelJoinButton")
-        .removeEventListener("click", cancelJoinButtonListener);
+      const cancelJoinButton = document.getElementById("cancelJoinButton");
+      if (cancelJoinButton) {
+        cancelJoinButton.removeEventListener("click", cancelJoinButtonListener);
+      }
     }
     if (modalClickListener) {
       window.removeEventListener("click", modalClickListener);
@@ -64,7 +69,9 @@ export class DirectoryContainer extends Component {
 
   refreshRoomMembers(users) {
     const membersContainer = document.querySelector(".members-list");
-    membersContainer.innerHTML = "";
+    if (membersContainer) {
+      membersContainer.innerHTML = "";
+    }
 
     users.forEach((user) => {
       const memberElement = document.createElement("div");
@@ -249,6 +256,9 @@ export class DirectoryContainer extends Component {
 
   handleDOMContentLoaded() {
     const searchBar = document.querySelector(".unjoined-search-bar input");
+    if (!searchBar) {
+      return;
+    }
 
     this.eventListeners.searchBarListener = (event) => {
       const query = event.target.value;

diff --git a/pong/pong/static/pong/components/MyRoomsContainer.js b/pong/pong/static/pong/components/MyRoomsContainer.js
@@ -59,29 +59,39 @@ export class MyRoomsContainer extends Component {
     } = this.eventListeners;
 
     if (searchBarListener) {
-      document
-        .querySelector(".search-bar input")
-        .removeEventListener("input", searchBarListener);
+      const searchBar = document.querySelector(".search-bar input");
+      if (searchBar) {
+        searchBar.removeEventListener("input", searchBarListener);
+      }
     }
     if (roomTypeListener) {
-      document
-        .getElementById("roomType")
-        .removeEventListener("change", roomTypeListener);
+      const roomTypeSelect = document.getElementById("roomType");
+      if (roomTypeSelect) {
+        roomTypeSelect.removeEventListener("change", roomTypeListener);
+      }
     }
     if (createChatroomListener) {
-      document
-        .querySelector(".create-chatroom-button")
-        .removeEventListener("click", createChatroomListener);
+      const createChatroomButton = document.querySelector(
+        ".create-chatroom-button",
+      );
+      if (createChatroomButton) {
+        createChatroomButton.removeEventListener(
+          "click",
+          createChatroomListener,
+        );
+      }
     }
     if (closeModalListener) {
-      document
-        .querySelector(".close-modal")
-        .removeEventListener("click", closeModalListener);
+      const closeModal = document.querySelector(".close-modal");
+      if (closeModal) {
+        closeModal.removeEventListener("click", closeModalListener);
+      }
     }
     if (formSubmitListener) {
-      document
-        .getElementById("createChatroomForm")
-        .removeEventListener("submit", formSubmitListener);
+      const createChatroomForm = document.getElementById("createChatroomForm");
+      if (createChatroomForm) {
+        createChatroomForm.removeEventListener("submit", formSubmitListener);
+      }
     }
     if (modalClickListener) {
       window.removeEventListener("click", modalClickListener);
@@ -102,7 +112,12 @@ export class MyRoomsContainer extends Component {
       const query = event.target.value.toLowerCase();
       this.displayRooms(this.rooms, query);
     };
-    searchBar.addEventListener("input", this.eventListeners.searchBarListener);
+    if (searchBar) {
+      searchBar.addEventListener(
+        "input",
+        this.eventListeners.searchBarListener,
+      );
+    }
 
     this.eventListeners.roomTypeListener = (event) => {
       const emailField = document.getElementById("emailField");
@@ -115,26 +130,32 @@ export class MyRoomsContainer extends Component {
         emailInput.removeAttribute("required");
       }
     };
-    roomTypeSelect.addEventListener(
-      "change",
-      this.eventListeners.roomTypeListener,
-    );
+    if (roomTypeSelect) {
+      roomTypeSelect.addEventListener(
+        "change",
+        this.eventListeners.roomTypeListener,
+      );
+    }
 
     this.eventListeners.createChatroomListener = () => {
       modal.style.display = "block";
     };
-    createChatroomButton.addEventListener(
-      "click",
-      this.eventListeners.createChatroomListener,
-    );
+    if (createChatroomButton) {
+      createChatroomButton.addEventListener(
+        "click",
+        this.eventListeners.createChatroomListener,
+      );
+    }
 
     this.eventListeners.closeModalListener = () => {
       modal.style.display = "none";
     };
-    closeModal.addEventListener(
-      "click",
-      this.eventListeners.closeModalListener,
-    );
+    if (closeModal) {
+      closeModal.addEventListener(
+        "click",
+        this.eventListeners.closeModalListener,
+      );
+    }
 
     this.eventListeners.formSubmitListener = (event) => {
       event.preventDefault();
@@ -158,10 +179,12 @@ export class MyRoomsContainer extends Component {
 
       modal.style.display = "none";
     };
-    createChatroomForm.addEventListener(
-      "submit",
-      this.eventListeners.formSubmitListener,
-    );
+    if (createChatroomForm) {
+      createChatroomForm.addEventListener(
+        "submit",
+        this.eventListeners.formSubmitListener,
+      );
+    }
 
     this.eventListeners.modalClickListener = (event) => {
       if (event.target === modal) {