👺 Fixed usage of context with sockets

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();