🐂 Support for session-tracking

src/client/actions/fileops.actions.tsx

@@ -40,7 +40,7 @@ import { success } from "react-notification-system-redux";
 
 import { isNil, map } from "lodash";
 
-export const getServiceStatus = (serviceName?: string) => async dispatch => {
+export const getServiceStatus = (serviceName?: string) => async (dispatch) => {
   axios
     .request({
       url: `${LIBRARY_SERVICE_BASE_URI}/getHealthInformation`,
@@ -91,9 +91,9 @@ export const fetchComicBookMetadata = () => async (dispatch) => {
   //   }),
   // );
   dispatch({
-    type: LS_IMPORT,
+    type: "EMIT_SOCKET_EVENT",
     meta: { remote: true },
-    data: {},
+    data: { gym: "asas" },
   });
 };
 export const toggleImportQueueStatus = (options) => async (dispatch) => {

src/client/components/App.tsx

@@ -17,6 +17,8 @@ import {
   AirDCPPSocketContextProvider,
   AirDCPPSocketContext,
 } from "../context/AirDCPPSocket";
+import { SocketIOProvider } from "../context/SocketIOContext";
+import socketIOConnectionInstance from "../shared/socket.io/instance";
 import { isEmpty, isUndefined } from "lodash";
 import {
   AIRDCPP_DOWNLOAD_PROGRESS_TICK,
@@ -95,45 +97,55 @@ const AirDCPPSocketComponent = (): ReactElement => {
   return <></>;
 };
 export const App = (): ReactElement => {
+  useEffect(() => {
+    // Listen for the sessionInitialized event
+    socketIOConnectionInstance.on("sessionInitialized", (sessionId) => {
+      console.log(sessionId);
+      // Store the session ID in Redux state
+      // initSession(sessionId);
+    });
+  }, []);
   return (
-    <AirDCPPSocketContextProvider>
+    <SocketIOProvider socket={socketIOConnectionInstance}>
-      <div>
+      <AirDCPPSocketContextProvider>
-        <AirDCPPSocketComponent />
+        <div>
-        <Navbar />
+          <AirDCPPSocketComponent />
-        <Routes>
+          <Navbar />
-          <Route path="/" element={<Dashboard />} />
+          <Routes>
-          <Route path="/import" element={<Import path={"./comics"} />} />
+            <Route path="/" element={<Dashboard />} />
-          <Route
+            <Route path="/import" element={<Import path={"./comics"} />} />
-            path="/library"
+            <Route
-            element={<TabulatedContentContainer category="library" />}
+              path="/library"
-          />
+              element={<TabulatedContentContainer category="library" />}
-          <Route path="/library-grid" element={<LibraryGrid />} />
+            />
-          <Route path="/downloads" element={<Downloads data={{}} />} />
+            <Route path="/library-grid" element={<LibraryGrid />} />
-          <Route path="/search" element={<Search />} />
+            <Route path="/downloads" element={<Downloads data={{}} />} />
-          <Route
+            <Route path="/search" element={<Search />} />
-            path={"/comic/details/:comicObjectId"}
+            <Route
-            element={<ComicDetailContainer />}
+              path={"/comic/details/:comicObjectId"}
-          />
+              element={<ComicDetailContainer />}
-          <Route
+            />
-            path={"/volume/details/:comicObjectId"}
+            <Route
-            element={<VolumeDetail />}
+              path={"/volume/details/:comicObjectId"}
-          />
+              element={<VolumeDetail />}
-          <Route path="/settings" element={<Settings />} />
+            />
-          <Route
+            <Route path="/settings" element={<Settings />} />
-            path="/pull-list/all"
+            <Route
-            element={<TabulatedContentContainer category="pullList" />}
+              path="/pull-list/all"
-          />
+              element={<TabulatedContentContainer category="pullList" />}
-          <Route
+            />
-            path="/wanted/all"
+            <Route
-            element={<TabulatedContentContainer category="wanted" />}
+              path="/wanted/all"
-          />
+              element={<TabulatedContentContainer category="wanted" />}
-          <Route
+            />
-            path="/volumes/all"
+            <Route
-            element={<TabulatedContentContainer category="volumes" />}
+              path="/volumes/all"
-          />
+              element={<TabulatedContentContainer category="volumes" />}
-        </Routes>
+            />
-      </div>
+          </Routes>
-    </AirDCPPSocketContextProvider>
+        </div>
+      </AirDCPPSocketContextProvider>
+    </SocketIOProvider>
   );
 };
 

src/client/context/SocketIOContext.tsx

@@ -0,0 +1,11 @@
+import React, { createContext } from "react";
+
+export const SocketIOContext = createContext({});
+
+export const SocketIOProvider = ({ children, socket }) => {
+  return (
+    <SocketIOContext.Provider value={socket}>
+      {children}
+    </SocketIOContext.Provider>
+  );
+};

src/client/reducers/fileops.reducer.ts

@@ -64,9 +64,6 @@ const initialState = {
 };
 function fileOpsReducer(state = initialState, action) {
   switch (action.type) {
-    case "sessionId": 
-      console.log(action);
-    break;
     case IMS_COMICBOOK_METADATA_FETCHED:
       return {
         ...state,

src/client/shared/middleware/SocketIOMiddleware.tsx

@@ -0,0 +1,11 @@
+const socketIOMiddleware = (socket) => {
+  return (store) => (next) => (action) => {
+    if (action.type === "EMIT_SOCKET_EVENT") {
+      const { event, data } = action.payload;
+      socket.emit(event, data);
+    }
+    return next(action);
+  };
+};
+
+export default socketIOMiddleware;

src/client/shared/socket.io/instance.tsx

@@ -0,0 +1,9 @@
+import io from "socket.io-client";
+import { SOCKET_BASE_URI } from "../../constants/endpoints";
+
+const socketIOConnectionInstance = io(SOCKET_BASE_URI, {
+  transports: ["websocket"],
+  withCredentials: true,
+});
+
+export default socketIOConnectionInstance;

src/client/store/index.ts

@@ -4,11 +4,11 @@ import { composeWithDevTools } from "@redux-devtools/extension";
 import thunk from "redux-thunk";
 import { createReduxHistoryContext } from "redux-first-history";
 import { reducers } from "../reducers/index";
-
-import { io } from "socket.io-client";
 import socketIoMiddleware from "redux-socket.io-middleware";
-import { SOCKET_BASE_URI } from "../constants/endpoints";
+import socketIOMiddleware from "../shared/middleware/SocketIOMiddleware";
-const socketConnection = io(SOCKET_BASE_URI, { transports: ["websocket"], withCredentials: true, });
+import socketIOConnectionInstance from "../shared/socket.io/instance";
+
+const customSocketIOMiddleware = socketIOMiddleware(socketIOConnectionInstance);
 
 const { createReduxHistory, routerMiddleware, routerReducer } =
   createReduxHistoryContext({
@@ -22,7 +22,8 @@ export const store = createStore(
   }),
   composeWithDevTools(
     applyMiddleware(
-      socketIoMiddleware(socketConnection),
+      socketIoMiddleware(socketIOConnectionInstance),
+      customSocketIOMiddleware,
       thunk,
       routerMiddleware,
     ),