Simplify Footer using hooks.

src/containers/Footer.js

@@ -1,34 +1,29 @@
-import React from "react";
-import { connect } from "react-redux";
+import { useSelector } from "react-redux";
 
-import { SocketSliceState } from "../modules/websocket/slice";
+import { RootState } from "../app/store";
+import { selectSocket } from "../modules/websocket/slice";
 import LoginStatusPane from "../components/LoginStatusPane";
 import SocketStatusPane from "../components/SocketStatusPane";
 
-interface Props {
-  //login: any,
-  socket: SocketSliceState,
-};
+const Footer = () => {
+  const socket = useSelector(selectSocket);
 
-const Footer = ({ socket }) => {
-    return (
-        <footer>
-            <SocketStatusPane
-                state={socket.state}
-                url={socket.url}
-            />
-          {/*
-            <LoginStatusPane
-                status={login.status}
-                username={login.username}
-                motd={login.motd}
-                reason={login.reason}
-            />
-            */}
-        </footer>
-    );
-};
+  return (
+    <footer>
+      <SocketStatusPane
+          state={socket.state}
+          url={socket.url}
+      />
+      {/*
+        <LoginStatusPane
+            status={login.status}
+            username={login.username}
+            motd={login.motd}
+            reason={login.reason}
+        />
+      */}
+    </footer>
+  );
+}
 
-const mapStateToProps = ({ socket }) => ({ socket });
-
-export default connect(mapStateToProps)(Footer);
+export default Footer;

src/modules/websocket/slice.ts

@@ -42,6 +42,8 @@ export const socketSlice = createSlice({
 export const { socketOpen, socketOpened, socketClose, socketClosed } =
   socketSlice.actions;
 
+export const selectSocket = (state: RootState) => state.socket;
+
 export const socketSendMessage = createAction<object>("socketSendMessage");
 
 export default socketSlice.reducer;