From ca082b82204f75fdbccb865317090a35ad5f4c54 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Fri, 24 Sep 2021 15:08:54 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=91=BA=20Fixed=20usage=20of=20context=20w?= =?UTF-8?q?ith=20sockets?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/actions/fileops.actions.tsx | 83 ++++++++++---------- src/client/components/AcquisitionPanel.tsx | 22 +++--- src/client/components/ComicDetail.tsx | 2 +- src/client/components/DownloadsPanel.tsx | 8 +- src/client/components/Import.tsx | 6 +- src/client/context/socket/socket.context.tsx | 36 ++++----- src/client/index.tsx | 6 +- 7 files changed, 82 insertions(+), 81 deletions(-) diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx index 0579b26..a7ec3b8 100644 --- a/src/client/actions/fileops.actions.tsx +++ b/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> { return axios @@ -48,49 +48,50 @@ export async function walkFolder(path: string): Promise> { * @param {Object} options * @return {Promise} 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: ` Socket ${socket.id} connected. ${walkedFolders.length} 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: ` Socket ${socket.id} connected. ${walkedFolders.length} 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; diff --git a/src/client/components/AcquisitionPanel.tsx b/src/client/components/AcquisitionPanel.tsx index cfbdc6f..6bff0f2 100644 --- a/src/client/components/AcquisitionPanel.tsx +++ b/src/client/components/AcquisitionPanel.tsx @@ -177,17 +177,17 @@ export const AcquisitionPanel = ( - - downloadDCPPResult( - searchInstance.id, - result.id, - props.comicBookMetadata._id, - ) - } - > - - + + downloadDCPPResult( + searchInstance.id, + result.id, + props.comicBookMetadata._id, + ) + } + > + + ); diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index d8c1fc0..7a429ed 100644 --- a/src/client/components/ComicDetail.tsx +++ b/src/client/components/ComicDetail.tsx @@ -213,7 +213,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
Raw File Details
{props.data.containedIn}
-
{props.data.path}
+
{props.data.path}
diff --git a/src/client/components/DownloadsPanel.tsx b/src/client/components/DownloadsPanel.tsx index c15490c..da15fac 100644 --- a/src/client/components/DownloadsPanel.tsx +++ b/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 = ( Filename Size - Time + Download Time @@ -86,6 +87,11 @@ export const DownloadsPanel = ( {bundle.target} {prettyBytes(bundle.size)} + + {dayjs + .unix(bundle.time_finished) + .format("h:mm on ddd, D MMM, YYYY")} + ))} diff --git a/src/client/components/Import.tsx b/src/client/components/Import.tsx index 73742c9..e64efd7 100644 --- a/src/client/components/Import.tsx +++ b/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(); diff --git a/src/client/context/socket/socket.context.tsx b/src/client/context/socket/socket.context.tsx index 793ef75..c9c78c6 100644 --- a/src/client/context/socket/socket.context.tsx +++ b/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 ( {children} diff --git a/src/client/index.tsx b/src/client/index.tsx index 4513a49..fed90b4 100644 --- a/src/client/index.tsx +++ b/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({});