Disconnect socket on navigation, add icon

package.json

@@ -4,6 +4,9 @@
   "private": true,
   "homepage": "/deep",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-regular-svg-icons": "^6.2.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/App.jsx

@@ -7,6 +7,10 @@ import {SocketProvider} from './SocketContext';
 
 function App() {
 
+  if (window.screen.width <= 700) {
+    window.location = "https://blackholechat.onrender.com/";
+  }
+
   return (
     <SocketProvider>
     <HashRouter>

src/components/ChatBody/ChatBody.jsx

@@ -10,16 +10,17 @@ const ChatBody = () => {
   const [users, setUsers] = useState([]);
   const socket = useContext(SocketContext);
 
+  function addFormattedTime(message) {
+    if (!message.formattedTime) {
+      message.formattedTime = formatTime(message.time);
+    }
+  };
+
   useEffect(() => {
-    socket.on("updateUserList", (userList) => {
-      function addFormattedTime(message) {
-        if (!message.formattedTime) {
-          message.formattedTime = formatTime(message.time);
-        }
-      };
+    socket.on("updateUserList", (userList) => {     
       userList.forEach((user) =>
-        user.messages.forEach((message) => addFormattedTime(message))
-      );
+        {user.messages?.forEach((message) => addFormattedTime(message))}
+    );
       setUsers(userList);
     });
   }, [socket, users]);

src/components/ChatInput/ChatInput.jsx

@@ -1,8 +1,10 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import SocketContext from '../../SocketContext';
 import { useContext } from 'react';
 import { useNavigate } from "react-router-dom";
 import styles from "./chatinput.module.scss";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+  import { faQuestionCircle } from '@fortawesome/free-regular-svg-icons'
 
 
 const ChatInput = () => {
@@ -27,7 +29,6 @@ const ChatInput = () => {
     socket.close();
     localStorage.removeItem("userName");
     navigate("/");
-    window.location.reload();
   };
 
   return (
@@ -43,6 +44,7 @@ const ChatInput = () => {
         />
         <button className="primary-btn" type="submit">talk</button>
         </form>
+        <FontAwesomeIcon icon={faQuestionCircle} className={styles.question}/>
         <button className="secondary-btn" onClick={handleLeaveChat}>
         leave
       </button>

src/components/ChatInput/chatinput.module.scss

@@ -13,3 +13,5 @@
   min-width: 30vw;
   margin-right: $spacing-normal;
 }
+
+.question {font-size: $spacing-big; background-color:black; border-radius: 50%}

src/components/ChatPage/ChatPage.tsx

@@ -3,18 +3,9 @@ import SocketContext from '../../SocketContext';
 import ChatBody from "../ChatBody/ChatBody";
 import ChatInput from "../ChatInput/ChatInput";
 import styles from "./chatpage.module.scss";
-import { useNavigate } from "react-router-dom";
 
 const ChatPage = () => {
   const socket = useContext(SocketContext);
-  const navigate = useNavigate();
-
-  const handleLeaveChat = () => {
-    socket.close();
-    localStorage.removeItem("userName");
-    navigate("/");
-    window.location.reload();
-  };
 
   const handleKeyDown = (event: { key: string; }) => {
     if (event.key.includes("Arrow"))
@@ -31,15 +22,14 @@ const ChatPage = () => {
     });
   };
 
+
   useEffect(() => {
     window.addEventListener('keydown', handleKeyDown);
     window.addEventListener('keyup', handleKeyUp);
-    window.addEventListener('beforeunload', handleLeaveChat);
     // cleanup this component
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
       window.removeEventListener('keyup', handleKeyUp);
-      window.removeEventListener('beforeunload', handleLeaveChat)
     };
   }, []);
 

src/components/Home/Home.jsx

@@ -1,11 +1,12 @@
 import styles from "./home.module.scss";
 
-import { useState, useContext } from "react";
-import { useNavigate } from "react-router-dom";
+import { useState, useEffect, useContext } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
 import SocketContext from "../../SocketContext";
 
 const Home = () => {
   const navigate = useNavigate();
+  const location = useLocation();
   const [userName, setUserName] = useState("");
 
   function randomVal(min, max) {
@@ -25,6 +26,19 @@ const Home = () => {
 
   const socket = useContext(SocketContext);
 
+  const switchSocket = () => {
+    {socket.close();
+    localStorage.removeItem("userName");
+    socket.open();
+  }
+  };
+
+  //gör att socket stängs och öppnas igen om man backat i browsern
+  useEffect(() => {
+    switchSocket();
+  }, [location]);
+
+
   const handleSubmit = (e) => {
     e.preventDefault();
     localStorage.setItem("userName", userName);