First attempt to fix #112 message when connection lost

.env.dist

@@ -1,4 +1,4 @@
-
+SERVER_PORT=3001
 REACT_APP_SOCKET_URL=https://localhost:3001/
 REACT_APP_SOCKET_PATH=
 REACT_APP_GAMELIST_URL=http://localhost:8080/gameList.json

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#202b38" />
     <meta
       name="description"
       content="Web site created using create-react-app"

src/App.js

@@ -1,4 +1,4 @@
-import React, { Suspense, Timeout } from "react";
+import React, { Suspense } from "react";
 
 import {
   BrowserRouter as Router,
@@ -15,6 +15,8 @@ import { useParams } from "react-router-dom";
 import { C2CProvider } from "./hooks/useC2C";
 import BoardView from "./views/BoardView";
 
+import Waiter from "./components/Waiter";
+
 const SOCKET_URL = process.env.REACT_APP_SOCKET_URL || "http://localhost:4000";
 const SOCKET_PATH = process.env.REACT_APP_SOCKET_PATH || "/socket.io";
 
@@ -37,17 +39,9 @@ export const ConnectedBoardView = () => {
   );
 };
 
-const Spinner = ({ children }) => {
-  return (
-    <Timeout ms={5000}>
-      {(didTimeout) => (didTimeout ? <span>Loading...</span> : children)}
-    </Timeout>
-  );
-};
-
 function App() {
   return (
-    <Suspense fallback={<Spinner />}>
+    <Suspense fallback={<Waiter message={"Loading…"} />}>
       <RecoilRoot>
         <Provider url={SOCKET_URL} options={SOCKET_OPTIONS}>
           <Router>

src/components/Waiter.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+import styled from "styled-components";
+
+const Overlay = styled.div`
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  background-color: #202b38;
+  color: #606984;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Waiter = ({ message }) => {
+  return (
+    <Overlay>
+      <div>{message}</div>
+    </Overlay>
+  );
+};
+
+export default Waiter;

src/hooks/useC2C.js

@@ -1,10 +1,14 @@
 import React, { useContext } from "react";
 import { useSocket } from "@scripters/use-socket.io";
 import { join } from "client2client.io";
+import { useTranslation } from "react-i18next";
+
+import Waiter from "../components/Waiter";
 
 export const C2CContext = React.createContext([null, false]);
 
 export const C2CProvider = ({ room, ...props }) => {
+  const { t } = useTranslation();
   const socket = useSocket();
   const [joined, setJoined] = React.useState(false);
   const [isMaster, setIsMaster] = React.useState(false);
@@ -12,6 +16,23 @@ export const C2CProvider = ({ room, ...props }) => {
   const roomRef = React.useRef(null);
 
   React.useEffect(() => {
+    const connect = () => {
+      // Do nothing for now. Need c2c handling reconnection.
+      // setJoined(true);
+    };
+    const disconnect = () => {
+      console.log("disconnected");
+      setJoined(false);
+    };
+    socket.on("connect", connect);
+    socket.on("disconnect", disconnect);
+    return () => {
+      socket.off("disconnect", disconnect);
+      socket.off("connect", connect);
+    };
+  }, [socket]);
+
+  React.useEffect(() => {
     if (!socket) {
       return;
     }
@@ -32,8 +53,8 @@ export const C2CProvider = ({ room, ...props }) => {
     });
   }, [room, socket]);
 
-  if (!joined) {
-    return null;
+  if (!joined || !c2c) {
+    return <Waiter message={t("Waiting for connection…")} />;
   }
 
   return (

src/index.css

@@ -2,6 +2,7 @@ body {
   max-width: 100vw;
   margin: 0;
   padding: 0;
+  background-color: #202b38;
 }
 
 #root {

src/server.js

@@ -8,7 +8,7 @@ var handleC2C = require("client2client.io").handleC2C;
 
 app.use(cors());
 
-const port = process.env.PORT || 4000;
+const port = process.env.SERVER_PORT || 4000;
 
 const socketPath = process.env.REACT_APP_SOCKET_PATH || "/socket.io";