🌊 qBittorrent Settings Scaffold (#90)

* 🌊 qBittorrent settings scaffold * 🔧 Added scaffold for the qBittorrent connection form * 🔧 Some refactoring * 🔧 Cleaned up folder structure * 🔧 Fixed broken paths * 🔧 Cleaned up Search and Import component hierarchy * 🔧 More path fixes * 🔧 Tooling changes * 📝 Qbittorrent form scaffold * ⬆️ Bumped @dnd-kit deps * 🧑🏼‍🔧 Fixed the hostname regex * 🏗️ Adding fields to the settings form * 🔧 Formatting and more layout changes * 🔧 Added Prowlarr settings items in JSON * 📝 Purified Card Component * 📝 Abstracted connection form into a component * 🏗️ Reorganized tabs * Migrating from Redux to RTK-query * ⬇️ Fetched qBittorrent settings * 🏗️ Trying out react-query * 🧩 Added react-query query to qBittorrentSettings page * 📝 qbittorrent form RU actions first draft * 🏗️ Added loading state check * 🏗 Added error check state * 🏗️ Refactored AirDCPP context using react-query * 🏗️ Refactoring AirDCPP Settings Form with react-query * 🔧 Removed context * 🔧 Removing context from AirDCPP settings page * 🔧 Fixed early init error on the store * 🐛 Debugging AirDCPP Settings Form page * 🧸 Zustand-ified AirDCPP Form * ❌ AirDCPP code cleaned up from App.tsx * ➕ Re-added yarn.lock
2023-11-07 12:46:08 -05:00
parent 1bd3d611e4
commit 8bebffd95e
52 changed files with 2715 additions and 5428 deletions
--- a/src/client/store/index.ts
+++ b/src/client/store/index.ts
@@ -1,33 +1,106 @@
-import { createStore, combineReducers, applyMiddleware } from "redux";
-import { createHashHistory } from "history";
-import { composeWithDevTools } from "@redux-devtools/extension";
-import thunk from "redux-thunk";
-import { createReduxHistoryContext } from "redux-first-history";
-import { reducers } from "../reducers/index";
-import socketIoMiddleware from "redux-socket.io-middleware";
-import socketIOMiddleware from "../shared/middleware/SocketIOMiddleware";
-import socketIOConnectionInstance from "../shared/socket.io/instance";
+import { create } from "zustand";
+import { isEmpty } from "lodash";
+import AirDCPPSocket from "../services/DcppSearchService";
+import axios from "axios";

-const customSocketIOMiddleware = socketIOMiddleware(socketIOConnectionInstance);
+export const useStore = create((set, get) => ({
+  // AirDC++ state
+  airDCPPSocketConnected: false,
+  airDCPPDisconnectionInfo: {},
+  airDCPPClientConfiguration: {},
+  airDCPPSocketConnectionInformation: {},
+  setAirDCPPSocketConnectionStatus: () =>
+    set((value) => ({
+      airDCPPSocketConnected: value,
+    })),
+  getAirDCPPConnectionStatus: () => {
+    const airDCPPSocketConnectionStatus = get().airDCPPSocketConnected;
+  },
+  // Socket.io state
+}));

-const { createReduxHistory, routerMiddleware, routerReducer } =
-  createReduxHistoryContext({
-    history: createHashHistory(),
+const { getState, setState } = useStore;
+
+// Method to init AirDC++ Socket with supplied settings
+const initializeAirDCPPSocket = async (configuration) => {
+  console.log("[AirDCPP]: Initializing socket...");
+
+  const initializedAirDCPPSocket = new AirDCPPSocket({
+    protocol: `${configuration.protocol}`,
+    hostname: `${configuration.hostname}:${configuration.port}`,
+    username: `${configuration.username}`,
+    password: `${configuration.password}`,
  });

-export const store = createStore(
-  combineReducers({
-    router: routerReducer,
-    ...reducers,
-  }),
-  composeWithDevTools(
-    applyMiddleware(
-      socketIoMiddleware(socketIOConnectionInstance),
-      customSocketIOMiddleware,
-      thunk,
-      routerMiddleware,
-    ),
-    // window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
-  ),
-);
-export const history = createReduxHistory(store);
+  // Set up connect and disconnect handlers
+  initializedAirDCPPSocket.onConnected = (sessionInfo) => {
+    // update global state with socket connection status
+    setState({
+      airDCPPSocketConnected: true,
+    });
+  };
+  initializedAirDCPPSocket.onDisconnected = async (reason, code, wasClean) => {
+    // update global state with socket connection status
+    setState({
+      disconnectionInfo: { reason, code, wasClean },
+      airDCPPSocketConnected: false,
+    });
+  };
+  // AirDC++ Socket-related connection and post-connection
+  // Attempt connection
+  const airDCPPSocketConnectionInformation =
+    await initializedAirDCPPSocket.connect();
+  setState({
+    airDCPPSocketConnectionInformation,
+  });
+
+  // Set up event listeners
+  initializedAirDCPPSocket.addListener(
+    `queue`,
+    "queue_bundle_tick",
+    async (downloadProgressData) => {
+      console.log(downloadProgressData);
+    },
+  );
+  initializedAirDCPPSocket.addListener(
+    "queue",
+    "queue_bundle_added",
+    async (data) => {
+      console.log("JEMEN:", data);
+    },
+  );
+
+  initializedAirDCPPSocket.addListener(
+    `queue`,
+    "queue_bundle_status",
+    async (bundleData) => {
+      let count = 0;
+      if (bundleData.status.completed && bundleData.status.downloaded) {
+        // dispatch the action for raw import, with the metadata
+        if (count < 1) {
+          console.log(`[AirDCPP]: Download complete.`);
+
+          count += 1;
+        }
+      }
+    },
+  );
+};
+
+// 1. get settings from mongo
+const { data } = await axios({
+  url: "http://localhost:3000/api/settings/getAllSettings",
+  method: "GET",
+});
+
+const directConnectConfiguration = data?.directConnect.client.host;
+
+// 2. If available, init AirDC++ Socket with those settings
+if (!isEmpty(directConnectConfiguration)) {
+  initializeAirDCPPSocket(directConnectConfiguration);
+  setState({
+    airDCPPClientConfiguration: directConnectConfiguration,
+  });
+}
+
+console.log("connected?", getState());