👺 Fixed usage of context with sockets

src/client/actions/fileops.actions.tsx

@@ -20,7 +20,7 @@ import {
 import { refineQuery } from "../shared/utils/filenameparser.utils";
 import sortBy from "array-sort-by";
 import { success } from "react-notification-system-redux";
-import { WebSocketContext } from "../context/socket/socket.context";
+import { Socket } from "socket.io-client";
 
 export async function walkFolder(path: string): Promise<Array<IFolderData>> {
   return axios
@@ -48,49 +48,50 @@ export async function walkFolder(path: string): Promise<Array<IFolderData>> {
  * @param  {Object} options
  * @return {Promise<string>}                HTML of the page
  */
-export const fetchComicBookMetadata = (options) => async (dispatch) => {
-  const socket = useContext(WebSocketContext);
-  const extractionOptions = {
-    extractTarget: "cover",
-    targetExtractionFolder: "./userdata/covers",
-    extractionMode: "bulk",
-    paginationOptions: {
-      pageLimit: 25,
-      page: 1,
-    },
-  };
-  const walkedFolders = await walkFolder("./comics");
-  dispatch(
-    success({
-      // uid: 'once-please', // you can specify your own uid if required
-      title: "Import Started",
-      message: `<span class="icon-text has-text-success"><i class="fas fa-plug"></i></span> Socket <span class="has-text-info">${socket.id}</span> connected. <strong>${walkedFolders.length}</strong> comics scanned.`,
-      dismissible: "click",
-      position: "tr",
-      autoDismiss: 0,
-    }),
-  );
-  await axios
-    .request({
-      url: "http://localhost:8050/api/getComicCovers",
-      method: "POST",
-      data: {
-        extractionOptions,
-        walkedFolders,
+export const fetchComicBookMetadata =
+  (options, socketInstance: Socket) => async (dispatch) => {
+    const socket = socketInstance.socket;
+    const extractionOptions = {
+      extractTarget: "cover",
+      targetExtractionFolder: "./userdata/covers",
+      extractionMode: "bulk",
+      paginationOptions: {
+        pageLimit: 25,
+        page: 1,
       },
-    })
-    .then((response) => {
-      console.log("Response from import call", response);
-    });
+    };
+    const walkedFolders = await walkFolder("./comics");
+    dispatch(
+      success({
+        // uid: 'once-please', // you can specify your own uid if required
+        title: "Import Started",
+        message: `<span class="icon-text has-text-success"><i class="fas fa-plug"></i></span> Socket <span class="has-text-info">${socket.id}</span> connected. <strong>${walkedFolders.length}</strong> comics scanned.`,
+        dismissible: "click",
+        position: "tr",
+        autoDismiss: 0,
+      }),
+    );
+    await axios
+      .request({
+        url: "http://localhost:8050/api/getComicCovers",
+        method: "POST",
+        data: {
+          extractionOptions,
+          walkedFolders,
+        },
+      })
+      .then((response) => {
+        console.log("Response from import call", response);
+      });
 
-  socket.on("coverExtracted", (data) => {
-    console.log(data);
-    dispatch({
-      type: IMS_COMICBOOK_METADATA_FETCHED,
-      data,
+    socket.on("coverExtracted", (data) => {
+      console.log(data);
+      dispatch({
+        type: IMS_COMICBOOK_METADATA_FETCHED,
+        data,
+      });
     });
-  });
-};
+  };
 
 export const getComicBooks = (options) => async (dispatch) => {
   const { paginationOptions } = options;

src/client/components/AcquisitionPanel.tsx

@@ -177,17 +177,17 @@ export const AcquisitionPanel = (
                       </div>
                     </td>
                     <td>
-                        <a
-                          onClick={() =>
-                            downloadDCPPResult(
-                              searchInstance.id,
-                              result.id,
-                              props.comicBookMetadata._id,
-                            )
-                          }
-                        >
-                          <i className="fas fa-file-download"></i>
-                        </a>
+                      <a
+                        onClick={() =>
+                          downloadDCPPResult(
+                            searchInstance.id,
+                            result.id,
+                            props.comicBookMetadata._id,
+                          )
+                        }
+                      >
+                        <i className="fas fa-file-download"></i>
+                      </a>
                     </td>
                   </tr>
                 );

src/client/components/ComicDetail.tsx

@@ -213,7 +213,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
       <dl>
         <dt>Raw File Details</dt>
         <dd>{props.data.containedIn}</dd>
-        <dd>{props.data.path}</dd>
+        <dd className="is-size-7">{props.data.path}</dd>
         <dd>
           <div className="field is-grouped">
             <div className="control">

src/client/components/DownloadsPanel.tsx

@@ -7,6 +7,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "threetwo-ui-typings";
 import { isNil, map } from "lodash";
 import prettyBytes from "pretty-bytes";
+import dayjs from "dayjs";
 import ellipsize from "ellipsize";
 
 interface IDownloadsPanelProps {
@@ -73,7 +74,7 @@ export const DownloadsPanel = (
           <tr>
             <th>Filename</th>
             <th>Size</th>
-            <th>Time</th>
+            <th>Download Time</th>
           </tr>
         </thead>
         <tbody>
@@ -86,6 +87,11 @@ export const DownloadsPanel = (
                   <span className="is-size-7">{bundle.target}</span>
                 </td>
                 <td>{prettyBytes(bundle.size)}</td>
+                <td>
+                  {dayjs
+                    .unix(bundle.time_finished)
+                    .format("h:mm on ddd, D MMM, YYYY")}
+                </td>
               </tr>
             ))}
         </tbody>

src/client/components/Import.tsx

@@ -1,7 +1,8 @@
-import React, { ReactElement, useCallback } from "react";
+import React, { ReactElement, useCallback, useContext } from "react";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import { useSelector, useDispatch } from "react-redux";
 import { fetchComicBookMetadata } from "../actions/fileops.actions";
+import { WebSocketContext } from "../context/socket/socket.context";
 import { IFolderData } from "threetwo-ui-typings";
 import { LazyLog, ScrollFollow } from "react-lazylog";
 import DynamicList, { createCache } from "react-window-dynamic-list";
@@ -29,6 +30,7 @@ interface IProps {
  */
 
 export const Import = (props: IProps): ReactElement => {
+  const socket = useContext(WebSocketContext);
   const dispatch = useDispatch();
   const isSocketConnected = useSelector((state: RootState) => {
     console.log(state);
@@ -43,7 +45,7 @@ export const Import = (props: IProps): ReactElement => {
   const initiateImport = useCallback(() => {
     if (typeof props.path !== "undefined") {
       console.log("asdasd");
-      dispatch(fetchComicBookMetadata(props.path));
+      dispatch(fetchComicBookMetadata(props.path, socket));
     }
   }, [dispatch]);
   const cache = createCache();

src/client/context/socket/socket.context.tsx

@@ -1,34 +1,28 @@
-import React, { createContext } from "react";
+import React, { createContext, ReactElement } from "react";
 import io, { Socket } from "socket.io-client";
 import { SOCKET_BASE_URI } from "../../constants/endpoints";
 import { useDispatch } from "react-redux";
 import { RMQ_SOCKET_CONNECTED } from "../../constants/action-types";
-import { isNil } from "lodash";
 
 const WebSocketContext = createContext(null);
-export const WebSocketProvider = ({ children }) => {
-  let socket: Socket;
-  let ws;
+export const WebSocketProvider = ({ children }): ReactElement => {
   const dispatch = useDispatch();
+  const socket: Socket = io(SOCKET_BASE_URI);
 
-  if (!isNil(socket)) {
-    socket = io(SOCKET_BASE_URI);
-
-    socket.on("connect", () => {
-      dispatch({
-        type: RMQ_SOCKET_CONNECTED,
-        isSocketConnected: true,
-        socketId: socket.id,
-      });
-    });
-    socket.on("disconnect", () => {
-      console.log(`disconnect`);
+  socket.on("connect", () => {
+    dispatch({
+      type: RMQ_SOCKET_CONNECTED,
+      isSocketConnected: true,
+      socketId: socket.id,
     });
+  });
+  socket.on("disconnect", () => {
+    console.log(`disconnect`);
+  });
 
-    ws = {
-      socket: socket,
-    };
-  }
+  const ws: any = {
+    socket,
+  };
 
   return (
     <WebSocketContext.Provider value={ws}>{children}</WebSocketContext.Provider>

src/client/index.tsx

@@ -1,10 +1,8 @@
-import * as React from "react";
+import React from "react";
 import { render } from "react-dom";
 import { Provider } from "react-redux";
 import { ConnectedRouter } from "connected-react-router";
-import WebSocketProvider, {
-  WebSocketContext,
-} from "./context/socket/socket.context";
+import WebSocketProvider from "./context/socket/socket.context";
 import configureStore, { history } from "./store/index";
 import App from "./components/App";
 const store = configureStore({});