Introduce minimal login slice.

src/app/store.ts

@@ -8,13 +8,14 @@ import counterReducer from "../features/counter/counterSlice";
 // import rooms from "../reducers/rooms";
 // import users from "../reducers/users";
 //
+import loginReducer from "../modules/login/slice";
 import socketMiddleware from "../modules/websocket/middleware";
 import socketReducer from "../modules/websocket/slice";
 
 export const store = configureStore({
   reducer: {
     counter: counterReducer,
-    //login,
+    login: loginReducer,
     //rooms,
     socket: socketReducer,
     //users,

src/components/LoginStatusPane.js

@@ -1,69 +1,51 @@
-import React, { PropTypes } from "react";
-import { connect } from "react-redux";
-
-import propTypeSymbol from "../utils/propTypeSymbol";
-import {
-    LOGIN_STATUS_UNKNOWN,
-    LOGIN_STATUS_GETTING,
-    LOGIN_STATUS_PENDING,
-    LOGIN_STATUS_SUCCESS,
-    LOGIN_STATUS_FAILURE
-} from "../constants/login";
-
-// TODO: Define Props type.
-class LoginStatusPane extends React.Component
-{
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        let statusText;
-        let motd;
-        let reason;
-
-        switch (this.props.status) {
-            case LOGIN_STATUS_UNKNOWN:
-                statusText = "unknown";
-                break;
-
-            case LOGIN_STATUS_GETTING:
-                statusText = "fetching";
-                break;
-
-            case LOGIN_STATUS_PENDING:
-                statusText = `logging in as ${this.props.username}`;
-                break;
-
-            case LOGIN_STATUS_SUCCESS:
-                statusText = `logged in as ${this.props.username}`;
-                motd = (
-                    <span id="login-status-motd">
-                        MOTD: {this.props.motd}
-                    </span>
-                );
-                break;
-
-            case LOGIN_STATUS_FAILURE:
-                statusText = `failed to log in as ${this.props.username}`;
-                reason = (
-                    <span id="login-status-reason">
-                        Reason: {this.props.reason}
-                    </span>
-                );
-                break;
-        }
-
-        return (
-            <div id="login-status-pane">
-                <span id="login-status-text">
-                    Login status: {statusText}
-                </span>
-                {motd}
-                {reason}
-            </div>
-        );
-    }
+import { LoginStatus, LoginSliceState } from "../modules/login/slice";
+
+const LoginStatusPane = (props: LoginSliceState) => {
+  let statusText;
+  let motd;
+  let reason;
+
+  switch (props.status) {
+      case LoginStatus.Unknown:
+          statusText = "unknown";
+          break;
+
+      case LoginStatus.Getting:
+          statusText = "fetching";
+          break;
+
+      case LoginStatus.Pending:
+          statusText = `logging in as ${this.props.username}`;
+          break;
+
+      case LoginStatus.Success:
+          statusText = `logged in as ${this.props.username}`;
+          motd = (
+              <span id="login-status-motd">
+                  MOTD: {props.motd}
+              </span>
+          );
+          break;
+
+      case LoginStatus.Failure:
+          statusText = `failed to log in as ${this.props.username}`;
+          reason = (
+              <span id="login-status-reason">
+                  Reason: {props.reason}
+              </span>
+          );
+          break;
+  }
+
+  return (
+      <div id="login-status-pane">
+          <span id="login-status-text">
+              Login status: {statusText}
+          </span>
+          {motd}
+          {reason}
+      </div>
+  );
 }
 
 export default LoginStatusPane;

src/containers/Footer.js

@@ -1,11 +1,13 @@
 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 login = useSelector(selectLogin);
   const socket = useSelector(selectSocket);
 
   return (
@@ -14,14 +16,12 @@ const Footer = () => {
           state={socket.state}
           url={socket.url}
       />
-      {/*
-        <LoginStatusPane
-            status={login.status}
-            username={login.username}
-            motd={login.motd}
-            reason={login.reason}
-        />
-      */}
+      <LoginStatusPane
+          status={login.status}
+          username={login.username}
+          motd={login.motd}
+          reason={login.reason}
+      />
     </footer>
   );
 }

src/modules/login/slice.ts

@@ -0,0 +1,42 @@
+import { createAction, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { RootState } from '../../app/store';
+
+export enum LoginStatus {
+  Unknown,
+  Getting,
+  Pending,
+  Success,
+  Failure,
+};
+
+export interface LoginSliceState {
+  status: LoginStatus,
+  username: string | null,
+  motd: string | null,
+  reason: string | null,
+};
+
+const initialState: LoginSliceState = {
+  status: LoginStatus.Unknown,
+  url: null,
+  motd: null,
+  reason: null,
+};
+
+export const loginSlice = createSlice({
+  name: 'login',
+  initialState,
+  reducers: {
+    // TODO: add reducer for message received.
+  },
+});
+
+export const { } =
+  loginSlice.actions;
+
+export const selectLogin = (state: RootState) => state.login;
+
+export const loginGetStatus = () => {};
+//export const socketSendMessage = createAction<object>("socketSendMessage");
+
+export default loginSlice.reducer;