Simplify {Login,Socket}StatusPane.

src/components/ConnectForm.js

@@ -1,10 +1,7 @@
-import React from "react";
 import { useDispatch } from "react-redux";
 import { Form, Field } from "react-final-form";
 
 import SocketStatusPane from "./SocketStatusPane";
-import { SocketRecord } from "../reducers/socket";
-import { STATE_CLOSED } from "../constants/socket";
 import {
   SocketSliceState,
   SocketState,
@@ -47,10 +44,7 @@ const ConnectForm: React.FC<Props> = ({ socket }) => {
           </form>
         )}
       />
-      <SocketStatusPane
-          state={socket.state}
-          url={socket.url}
-      />
+      <SocketStatusPane socket={socket} />
     </div>
   );
 };

src/components/LoginStatusPane.js

@@ -1,11 +1,15 @@
 import { LoginStatus, LoginSliceState } from "../modules/login/slice";
 
-const LoginStatusPane = (props: LoginSliceState) => {
+interface Props {
+  login: LoginSliceState,
+};
+
+const LoginStatusPane: React.FC<Props> = ({ login }) => {
   let statusText;
   let motd;
   let reason;
 
-  switch (props.status) {
+  switch (login.status) {
       case LoginStatus.Unknown:
           statusText = "unknown";
           break;
@@ -15,29 +19,29 @@ const LoginStatusPane = (props: LoginSliceState) => {
           break;
 
       case LoginStatus.Pending:
-          statusText = `logging in as ${props.username}`;
+          statusText = `logging in as ${login.username}`;
           break;
 
       case LoginStatus.Success:
-          statusText = `logged in as ${props.username}`;
+          statusText = `logged in as ${login.username}`;
           motd = (
               <span id="login-status-motd">
-                  MOTD: {props.motd}
+                  MOTD: {login.motd}
               </span>
           );
           break;
 
       case LoginStatus.Failure:
-          statusText = `failed to log in as ${props.username}`;
+          statusText = `failed to log in as ${login.username}`;
           reason = (
               <span id="login-status-reason">
-                  Reason: {props.reason}
+                  Reason: {login.reason}
               </span>
           );
           break;
 
       default:
-          statusText = `invalid status ${props.status}`;
+          statusText = `invalid status ${login.status}`;
           break;
   }
 

src/components/SocketStatusPane.tsx

@@ -1,31 +1,29 @@
 import React from "react";
 
-import {
-    STATE_OPENING, STATE_OPEN, STATE_CLOSING, STATE_CLOSED
-} from "../constants/socket";
+import { SocketSliceState, SocketState } from "../modules/websocket/slice";
 
-type Props = {
-  state: number,
-  url: string,
-};
+function socketStateToString(socket: SocketSliceState): string {
+  const { state, url } = socket;
+  switch (state) {
+    case SocketState.Opening:
+      return `connecting to ${url}`;
+    case SocketState.Open:
+      return `connected to ${url}`;
+    case SocketState.Closing:
+      return `disconnecting from ${url}`;
+    case SocketState.Closed:
+      return "disconnected";
+  }
+}
 
-const SocketStatusPane: React.FC<Props> = ({ state, url }) => {
-    let string;
-    switch (state) {
-        case STATE_OPENING:
-            string = `connecting to ${url}`;
-            break;
-        case STATE_OPEN:
-            string = `connected to ${url}`;
-            break;
-        case STATE_CLOSING:
-            string = `disconnecting from ${url}`;
-            break;
-        case STATE_CLOSED:
-            string = `disconnected`;
-            break;
-    }
-    return <div id="socket-status-pane">Connection status: {string}</div>;
+interface Props {
+  socket: SocketSliceState,
 };
 
+const SocketStatusPane: React.FC<Props> = ({ socket }: Props) => (
+  <div id="socket-status-pane">
+    Connection status: {socketStateToString(socket)}
+  </div>
+);
+
 export default SocketStatusPane;

src/containers/ConnectPage.js

@@ -3,13 +3,11 @@ import { useLocation } from "react-router";
 import { Redirect } from "react-router-dom";
 
 import ConnectForm from  "../components/ConnectForm";
-import LoginStatusPane from "../components/LoginStatusPane";
 import { LoginStatus, selectLogin } from "../modules/login/slice";
 import { loginStatusRequest } from "../modules/login/message";
 import {
   selectSocket,
   socketSendMessage,
-  SocketSliceState,
   SocketState,
 } from "../modules/websocket/slice";
 

src/containers/Footer.js

@@ -1,27 +1,19 @@
+import { FC } from "react";
 import { useSelector } from "react-redux";
 
-import { RootState } from "../app/store";
 import { selectLogin } from "../modules/login/slice";
 import { selectSocket } from "../modules/websocket/slice";
 import LoginStatusPane from "../components/LoginStatusPane";
 import SocketStatusPane from "../components/SocketStatusPane";
 
-const Footer = () => {
+const Footer: FC = () => {
   const login = useSelector(selectLogin);
   const socket = useSelector(selectSocket);
 
   return (
     <footer>
-      <SocketStatusPane
-          state={socket.state}
-          url={socket.url}
-      />
-      <LoginStatusPane
-          status={login.status}
-          username={login.username}
-          motd={login.motd}
-          reason={login.reason}
-      />
+      <SocketStatusPane socket={socket} />
+      <LoginStatusPane login={login} />
     </footer>
   );
 }

src/modules/login/message.ts

@@ -4,6 +4,7 @@ import { SocketMessage } from "../websocket/message";
 export function loginStatusRequest(): SocketMessage {
   return {
     variant: "LoginStatusRequest",
+    fields: [],
   }
 }
 

src/modules/websocket/slice.ts

@@ -12,12 +12,11 @@ export enum SocketState {
 
 export interface SocketSliceState {
   state: SocketState,
-  url: string | null,
+  url?: string,
 };
 
 const initialState: SocketSliceState = {
   state: SocketState.Closed,
-  url: null,
 };
 
 export const socketSlice = createSlice({