Combine session status events into one event

src/contexts/AuthContext.js

@@ -26,8 +26,6 @@ export function AuthProvider({ children }) {
     storage.setItem("auth", password);
   }, [password]);
 
-  const [authenticationStatus, setAuthenticationStatus] = useState("unknown");
-
   const [userId, setUserId] = useState();
   useEffect(() => {
     if (!database || databaseStatus === "loading") {
@@ -51,8 +49,6 @@ export function AuthProvider({ children }) {
     userId,
     password,
     setPassword,
-    authenticationStatus,
-    setAuthenticationStatus,
   };
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }

src/modals/AuthModal.js

@@ -5,8 +5,8 @@ import { useAuth } from "../contexts/AuthContext";
 
 import Modal from "../components/Modal";
 
-function AuthModal({ isOpen }) {
-  const { password, setPassword, setAuthenticationStatus } = useAuth();
+function AuthModal({ isOpen, onSubmit }) {
+  const { password, setPassword } = useAuth();
   const [tmpPassword, setTempPassword] = useState(password);
 
   function handleChange(event) {
@@ -15,8 +15,8 @@ function AuthModal({ isOpen }) {
 
   function handleSubmit(event) {
     event.preventDefault();
-    setAuthenticationStatus("unknown");
     setPassword(tmpPassword);
+    onSubmit(tmpPassword);
   }
 
   const inputRef = useRef();
@@ -38,9 +38,7 @@ function AuthModal({ isOpen }) {
           autoComplete="off"
         />
         <Flex py={2}>
-          <Button sx={{ flexGrow: 1 }} disabled={!tmpPassword}>
-            Join
-          </Button>
+          <Button sx={{ flexGrow: 1 }}>Join</Button>
         </Flex>
       </Box>
     </Modal>

src/network/Session.js

@@ -21,6 +21,13 @@ import { logError } from "../helpers/logging";
  * @param {string} channel - The channel to send to
  */
 
+/**
+ * Session Status Event - Status of the session has changed
+ *
+ * @event Session#status
+ * @property {"ready"|"joining"|"joined"|"offline"|"reconnecting"|"auth"} status
+ */
+
 /**
  *
  * Handles connections to multiple peers
@@ -31,10 +38,7 @@ import { logError } from "../helpers/logging";
  * @fires Session#peerTrackRemoved
  * @fires Session#peerDisconnect
  * @fires Session#peerError
- * @fires Session#authenticationSuccess
- * @fires Session#authenticationError
- * @fires Session#connected
- * @fires Session#disconnected
+ * @fires Session#status
  * @fires Session#playerJoined
  * @fires Session#playerLeft
  */
@@ -53,13 +57,6 @@ class Session extends EventEmitter {
    */
   peers;
 
-  /**
-   * The state of the session
-   *
-   * @type {('unknown'|'online'|'offline')}
-   */
-  state;
-
   get id() {
     return this.socket && this.socket.id;
   }
@@ -73,7 +70,6 @@ class Session extends EventEmitter {
   constructor() {
     super();
     this.peers = {};
-    this.state = "unknown";
     // Signal connected peers of a closure on refresh
     window.addEventListener("beforeunload", this._handleUnload.bind(this));
   }
@@ -102,10 +98,10 @@ class Session extends EventEmitter {
       this.socket.on("disconnect", this._handleSocketDisconnect.bind(this));
       this.socket.io.on("reconnect", this._handleSocketReconnect.bind(this));
 
-      this.state = "online";
+      this.emit("status", "ready");
     } catch (error) {
       logError(error);
-      this.state = "offline";
+      this.emit("status", "offline");
     }
   }
 
@@ -194,6 +190,7 @@ class Session extends EventEmitter {
     this._gameId = gameId;
     this._password = password;
     this.socket.emit("join_game", gameId, password);
+    this.emit("status", "joining");
   }
 
   /**
@@ -345,18 +342,7 @@ class Session extends EventEmitter {
   }
 
   _handleJoinedGame() {
-    /**
-     * Authentication Success Event - Successfully authenticated when joining a game
-     *
-     * @event Session#authenticationSuccess
-     */
-    this.emit("authenticationSuccess");
-    /**
-     * Connected Event - You have connected to the game
-     *
-     * @event Session#connected
-     */
-    this.emit("connected");
+    this.emit("status", "joined");
   }
 
   _handlePlayerJoined(id) {
@@ -394,12 +380,7 @@ class Session extends EventEmitter {
   }
 
   _handleAuthError() {
-    /**
-     * Authentication Error Event - Unsuccessfully authenticated when joining a game
-     *
-     * @event Session#authenticationError
-     */
-    this.emit("authenticationError");
+    this.emit("status", "auth");
   }
 
   _handleUnload() {
@@ -409,12 +390,7 @@ class Session extends EventEmitter {
   }
 
   _handleSocketDisconnect() {
-    /**
-     * Disconnected Event - You have disconnected from the party
-     *
-     * @event Session#disconnected
-     */
-    this.emit("disconnected");
+    this.emit("status", "reconnecting");
     for (let peer of Object.values(this.peers)) {
       peer.connection && peer.connection.destroy();
     }

src/routes/Game.js

@@ -22,36 +22,19 @@ import Session from "../network/Session";
 
 function Game() {
   const { id: gameId } = useParams();
-  const { authenticationStatus, password, setAuthenticationStatus } = useAuth();
+  const { password } = useAuth();
   const { databaseStatus } = useDatabase();
 
   const [session] = useState(new Session());
-  const [offline, setOffline] = useState();
+  const [sessionStatus, setSessionStatus] = useState();
+
   useEffect(() => {
     async function connect() {
       await session.connect();
-      setOffline(session.state === "offline");
     }
     connect();
   }, [session]);
 
-  // Handle authentication status
-  useEffect(() => {
-    function handleAuthSuccess() {
-      setAuthenticationStatus("authenticated");
-    }
-    function handleAuthError() {
-      setAuthenticationStatus("unauthenticated");
-    }
-    session.on("authenticationSuccess", handleAuthSuccess);
-    session.on("authenticationError", handleAuthError);
-
-    return () => {
-      session.off("authenticationSuccess", handleAuthSuccess);
-      session.off("authenticationError", handleAuthError);
-    };
-  }, [setAuthenticationStatus, session]);
-
   // Handle session errors
   const [peerError, setPeerError] = useState(null);
   useEffect(() => {
@@ -68,32 +51,30 @@ function Game() {
     };
   }, [session]);
 
-  // Handle connection
-  const [connected, setConnected] = useState(false);
   useEffect(() => {
-    function handleConnected() {
-      setConnected(true);
+    function handleStatus(status) {
+      setSessionStatus(status);
     }
 
-    function handleDisconnected() {
-      setConnected(false);
-    }
-
-    session.on("connected", handleConnected);
-    session.on("disconnected", handleDisconnected);
+    session.on("status", handleStatus);
 
     return () => {
-      session.off("connected", handleConnected);
-      session.off("disconnected", handleDisconnected);
+      session.off("status", handleStatus);
     };
   }, [session]);
 
   // Join game
   useEffect(() => {
-    if (session.state === "online" && databaseStatus !== "loading") {
+    if (sessionStatus === "ready" && databaseStatus !== "loading") {
       session.joinGame(gameId, password);
     }
-  }, [gameId, password, databaseStatus, session, offline]);
+  }, [gameId, password, databaseStatus, session, sessionStatus]);
+
+  function handleAuthSubmit(newPassword) {
+    if (databaseStatus !== "loading") {
+      session.joinGame(gameId, newPassword);
+    }
+  }
 
   // A ref to the Konva stage
   // the ref will be assigned in the MapInteraction component
@@ -126,7 +107,11 @@ function Game() {
               </Text>
             </Box>
           </Banner>
-          <Banner isOpen={offline} onRequestClose={() => {}} allowClose={false}>
+          <Banner
+            isOpen={sessionStatus === "offline"}
+            onRequestClose={() => {}}
+            allowClose={false}
+          >
             <Box p={1}>
               <Text as="p" variant="body2">
                 Unable to connect to game, refresh to reconnect.
@@ -134,7 +119,7 @@ function Game() {
             </Box>
           </Banner>
           <Banner
-            isOpen={!connected && authenticationStatus === "authenticated"}
+            isOpen={sessionStatus === "reconnecting"}
             onRequestClose={() => {}}
             allowClose={false}
           >
@@ -144,8 +129,11 @@ function Game() {
               </Text>
             </Box>
           </Banner>
-          <AuthModal isOpen={authenticationStatus === "unauthenticated"} />
-          {authenticationStatus === "unknown" && !offline && <LoadingOverlay />}
+          <AuthModal
+            isOpen={sessionStatus === "auth"}
+            onSubmit={handleAuthSubmit}
+          />
+          {!sessionStatus && <LoadingOverlay />}
           <MapLoadingOverlay />
         </MapStageProvider>
       </PartyProvider>