👺 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,8 +48,9 @@ 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);
+export const fetchComicBookMetadata =
+  (options, socketInstance: Socket) => async (dispatch) => {
+    const socket = socketInstance.socket;
     const extractionOptions = {
       extractTarget: "cover",
       targetExtractionFolder: "./userdata/covers",
@@ -90,7 +91,7 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
         data,
       });
     });
-};
+  };
 
 export const getComicBooks = (options) => async (dispatch) => {
   const { paginationOptions } = options;

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,18 +1,13 @@
-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();
-
-  if (!isNil(socket)) {
-    socket = io(SOCKET_BASE_URI);
+  const socket: Socket = io(SOCKET_BASE_URI);
 
   socket.on("connect", () => {
     dispatch({
@@ -25,10 +20,9 @@ export const WebSocketProvider = ({ children }) => {
     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({});