🔌 UI for socket connection status

src/client/actions/fileops.actions.tsx

@@ -47,6 +47,7 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
     console.log(`connect ${socket.id}`);
     dispatch({
       type: IMS_SOCKET_CONNECTION_CONNECTED,
+      socketConnected: true,
     });
   });
 

src/client/components/Card.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-
 import { IExtractedComicBookCoverFile } from "../../server/interfaces/folder.interface";
 import { map } from "lodash";
 

src/client/components/Dashboard.tsx

@@ -7,11 +7,12 @@ interface IState {}
 class Dashboard extends React.Component<IProps, IState> {
   public render() {
     return (
+      <div className="container">
         <section className="section">
           <h1 className="title">Dashboard</h1>
           <h2 className="subtitle">
-          A simple container to divide your page into <strong>sections</strong>,
+            A simple container to divide your page into{" "}
-          like the one you're currently reading.
+            <strong>sections</strong>, like the one you're currently reading.
           </h2>
           <ZeroState
             header={"Set the source directory"}
@@ -20,6 +21,7 @@ class Dashboard extends React.Component<IProps, IState> {
             }
           />
         </section>
+      </div>
     );
   }
 }

src/client/components/Import.tsx

@@ -5,6 +5,7 @@ import { fetchComicBookMetadata } from "../actions/fileops.actions";
 import { IFolderData } from "../shared/interfaces/comicinfo.interfaces";
 import Card from "./Card";
 import { io, Socket } from "socket.io-client";
+import { SOCKET_BASE_URI } from "../constants/endpoints";
 
 interface IProps {
   matches: unknown;
@@ -25,13 +26,6 @@ class Import extends React.Component<IProps, IState> {
       folderWalkResults: [],
       searchPaneIndex: undefined,
     };
-    socket = io("ws://localhost:3000/", {
-      reconnectionDelayMax: 10000,
-    });
-
-    socket.on("connect", () => {
-      console.log(`connect ${socket.id}`);
-    });
   }
 
   public toggleSearchResultsPane(paneId: number): void {
@@ -42,6 +36,13 @@ class Import extends React.Component<IProps, IState> {
 
   public initiateSocketConnection = () => {
     if (typeof this.props.path !== "undefined") {
+      socket = io(SOCKET_BASE_URI, {
+        reconnectionDelayMax: 10000,
+      });
+
+      socket.on("connect", () => {
+        console.log(`connect ${socket.id}`);
+      });
       this.props.fetchComicMetadata();
     }
   };

src/client/components/Navbar.tsx

@@ -1,7 +1,10 @@
-import * as React from "react";
+import React from "react";
+import { useSelector } from "react-redux";
 import { Link } from "react-router-dom";
 
 const Navbar: React.FunctionComponent = (props) => {
+  const socketConnected = useSelector((state) => state.fileOps);
+
   return (
     <nav className="navbar ">
       <div className="navbar-brand">
@@ -14,23 +17,15 @@ const Navbar: React.FunctionComponent = (props) => {
           />
         </a>
 
-        <a
+        <a className="navbar-item is-hidden-desktop">
-          className="navbar-item is-hidden-desktop"
-          href="https://github.com/jgthms/bulma"
-          target="_blank"
-        >
           <span className="icon">
-            <i className="fa fa-github"></i>
+            <i className="fas fa-github"></i>
           </span>
         </a>
 
-        <a
+        <a className="navbar-item is-hidden-desktop">
-          className="navbar-item is-hidden-desktop"
-          href="https://twitter.com/jgthms"
-          target="_blank"
-        >
           <span className="icon">
-            <i className="fa fa-twitter"></i>
+            <i className="fas fa-twitter"></i>
           </span>
         </a>
 
@@ -87,9 +82,7 @@ const Navbar: React.FunctionComponent = (props) => {
             </div>
           </div>
           <div className="navbar-item has-dropdown is-hoverable is-mega">
-            <div className="navbar-link flex">
+            <div className="navbar-link flex">Blog</div>
-              Blog 
-            </div>
             <div id="blogDropdown" className="navbar-dropdown">
               <div className="container is-fluid">
                 <div className="columns">
@@ -192,14 +185,16 @@ const Navbar: React.FunctionComponent = (props) => {
         </div>
 
         <div className="navbar-end">
-          <a
+          <a className="navbar-item is-hidden-desktop-only"></a>
-            className="navbar-item is-hidden-desktop-only"
-            href="https://github.com/jgthms/bulma"
-            target="_blank"
-          ></a>
           <div className="navbar-item">
             <div className="field is-grouped">
-              <p className="control"></p>
+              <p className="control">
+                {socketConnected.socketConnected ? (
+                  <span className="icon is-small has-text-success">
+                    <i className="fas fa-plug"></i>
+                  </span>
+                ) : null}
+              </p>
               <p className="control">Settings</p>
             </div>
           </div>

src/client/reducers/fileops.reducer.ts

@@ -7,6 +7,7 @@ import {
 const initialState = {
   dataTransferred: false,
   comicBookMetadata: [],
+  socketConnected: false,
 };
 
 function fileOpsReducer(state = initialState, action) {
@@ -17,6 +18,12 @@ function fileOpsReducer(state = initialState, action) {
         comicBookMetadata: [...state.comicBookMetadata, action.data.data],
         dataTransferred: true,
       };
+
+    case IMS_SOCKET_CONNECTION_CONNECTED:
+      return {
+        ...state,
+        socketConnected: action.socketConnected,
+      };
     default:
       return state;
   }