From 26fdb6d3a4e0512bfde867ba50bb982a52690b86 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Wed, 26 Jul 2023 10:15:07 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=82=20Support=20for=20session-tracking?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/actions/fileops.actions.tsx | 6 +- src/client/components/App.tsx | 88 +++++++++++-------- src/client/context/SocketIOContext.tsx | 11 +++ src/client/reducers/fileops.reducer.ts | 3 - .../shared/middleware/SocketIOMiddleware.tsx | 11 +++ src/client/shared/socket.io/instance.tsx | 9 ++ src/client/store/index.ts | 11 +-- 7 files changed, 90 insertions(+), 49 deletions(-) create mode 100644 src/client/context/SocketIOContext.tsx create mode 100644 src/client/shared/middleware/SocketIOMiddleware.tsx create mode 100644 src/client/shared/socket.io/instance.tsx diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx index facb635..4e30fa8 100644 --- a/src/client/actions/fileops.actions.tsx +++ b/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) => { diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx index 6446767..0f5183a 100644 --- a/src/client/components/App.tsx +++ b/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 ( - -
- - - - } /> - } /> - } - /> - } /> - } /> - } /> - } - /> - } - /> - } /> - } - /> - } - /> - } - /> - -
- + + +
+ + + + } /> + } /> + } + /> + } /> + } /> + } /> + } + /> + } + /> + } /> + } + /> + } + /> + } + /> + +
+ + ); }; diff --git a/src/client/context/SocketIOContext.tsx b/src/client/context/SocketIOContext.tsx new file mode 100644 index 0000000..a75f521 --- /dev/null +++ b/src/client/context/SocketIOContext.tsx @@ -0,0 +1,11 @@ +import React, { createContext } from "react"; + +export const SocketIOContext = createContext({}); + +export const SocketIOProvider = ({ children, socket }) => { + return ( + + {children} + + ); +}; diff --git a/src/client/reducers/fileops.reducer.ts b/src/client/reducers/fileops.reducer.ts index c18e848..1443d7c 100644 --- a/src/client/reducers/fileops.reducer.ts +++ b/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, diff --git a/src/client/shared/middleware/SocketIOMiddleware.tsx b/src/client/shared/middleware/SocketIOMiddleware.tsx new file mode 100644 index 0000000..b6e1e39 --- /dev/null +++ b/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; diff --git a/src/client/shared/socket.io/instance.tsx b/src/client/shared/socket.io/instance.tsx new file mode 100644 index 0000000..ba40329 --- /dev/null +++ b/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; diff --git a/src/client/store/index.ts b/src/client/store/index.ts index 2ff4813..c6de8da 100644 --- a/src/client/store/index.ts +++ b/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"; -const socketConnection = io(SOCKET_BASE_URI, { transports: ["websocket"], withCredentials: true, }); +import socketIOMiddleware from "../shared/middleware/SocketIOMiddleware"; +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, ),