🔧 Added scaffold for the qBittorrent connection form

src/client/actions/settings.actions.tsx

@@ -3,10 +3,12 @@ import {
   SETTINGS_OBJECT_FETCHED,
   SETTINGS_CALL_IN_PROGRESS,
   SETTINGS_DB_FLUSH_SUCCESS,
+  SETTINGS_QBITTORRENT_TORRENTS_LIST_FETCHED,
 } from "../constants/action-types";
 import {
   LIBRARY_SERVICE_BASE_URI,
   SETTINGS_SERVICE_BASE_URI,
+  QBITTORRENT_SERVICE_BASE_URI,
 } from "../constants/endpoints";
 
 export const saveSettings =
@@ -67,3 +69,19 @@ export const flushDb = () => async (dispatch) => {
     });
   }
 };
+
+
+
+export const getQBitTorrentClientInfo = () => async (dispatch) => {
+  
+  const foo = await axios.request({
+    url: `${QBITTORRENT_SERVICE_BASE_URI}/getList`,
+    method: "GET",
+  });
+  
+  dispatch({
+    type: SETTINGS_QBITTORRENT_TORRENTS_LIST_FETCHED,
+    data: foo,
+  })
+  
+}

src/client/components/QbittorrentSettings/QbittorrentConnectionForm.tsx

@@ -0,0 +1,20 @@
+import React, { ReactElement, useCallback, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getQBitTorrentClientInfo } from "../../actions/settings.actions";
+
+export const QbittorrentConnectionForm = (): ReactElement => {
+  const dispatch = useDispatch();
+  const torrents = useSelector((state: RootState) => state.settings.torrentsList)
+
+  useEffect(() => {
+	  dispatch(getQBitTorrentClientInfo());
+  }, [])
+
+  return (
+	<div className="is-clearfix">
+	 <pre> {JSON.stringify(torrents, null, 4)} </pre>
+	</div>
+  );
+};
+
+export default QbittorrentConnectionForm;

src/client/components/Settings.tsx

@@ -1,12 +1,13 @@
 import React, { useState, ReactElement } from "react";
 import { AirDCPPSettingsForm } from "./AirDCPPSettings/AirDCPPSettingsForm";
 import { AirDCPPHubsForm } from "./AirDCPPSettings/AirDCPPHubsForm";
+import { QbittorrentConnectionForm } from "./QbittorrentSettings/QbittorrentConnectionForm";
 import { SystemSettingsForm } from "./SystemSettings/SystemSettingsForm";
 import { ServiceStatuses } from "./ServiceStatuses/ServiceStatuses";
 import settingsObject from "../constants/settings/settingsMenu.json";
 import { isUndefined, map } from "lodash";
 
-interface ISettingsProps {}
+interface ISettingsProps { }
 
 export const Settings = (props: ISettingsProps): ReactElement => {
   const [active, setActive] = useState("gen-db");
@@ -26,7 +27,9 @@ export const Settings = (props: ISettingsProps): ReactElement => {
     {
       id: "qbt-connection",
       content: (
-        <div key="qbt-connection">{/* <QbitTorrentSettingsForm /> */}</div>
+        <div key="qbt-connection">
+          <QbittorrentConnectionForm />
+        </div>
       ),
     },
     {

src/client/constants/action-types.ts

@@ -143,6 +143,8 @@ export const SETTINGS_CALL_FAILED = "SETTINGS_CALL_FAILED";
 export const SETTINGS_OBJECT_DELETED = "SETTINGS_OBJECT_DELETED";
 export const SETTINGS_DB_FLUSH_SUCCESS = "SETTINGS_DB_FLUSH_SUCCESS";
 
+export const SETTINGS_QBITTORRENT_TORRENTS_LIST_FETCHED = "SETTINGS_QBITTORRENT_TORRENTS_LIST_FETCHED";
+
 // Metron Metadata
 export const METRON_DATA_FETCH_SUCCESS = "METRON_DATA_FETCH_SUCCESS";
 export const METRON_DATA_FETCH_IN_PROGRESS = "METRON_DATA_FETCH_IN_PROGRESS";

src/client/constants/endpoints.ts

@@ -84,3 +84,10 @@ export const JOB_QUEUE_SERVICE_BASE_URI = hostURIBuilder({
   port: "3000",
   apiPath: `/api/jobqueue`,
 });
+
+export const QBITTORRENT_SERVICE_BASE_URI = hostURIBuilder({
+  protocol: "http",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
+  port: "3060",
+  apiPath: `/api/qbittorrent`,
+});

src/client/constants/settings/settingsMenu.json

@@ -40,7 +40,7 @@
       },
       {
         "id": "qbittorrent",
-        "displayName": "qBitTorrent",
+        "displayName": "qBittorrent",
         "children": [
           {
             "id": "qbt-connection",

src/client/reducers/settings.reducer.ts

@@ -4,11 +4,13 @@ import {
   SETTINGS_OBJECT_DELETED,
   SETTINGS_CALL_IN_PROGRESS,
   SETTINGS_DB_FLUSH_SUCCESS,
+  SETTINGS_QBITTORRENT_TORRENTS_LIST_FETCHED,
 } from "../constants/action-types";
 const initialState = {
   data: {},
   inProgress: false,
   DbFlushed: false,
+  torrentsList: [],
 };
 
 function settingsReducer(state = initialState, action) {
@@ -40,6 +42,12 @@ function settingsReducer(state = initialState, action) {
         DbFlushed: action.data,
         inProgress: false,
       };
+      
+    case SETTINGS_QBITTORRENT_TORRENTS_LIST_FETCHED:
+      return {
+        ...state,
+        torrentsList: action.data,
+      }
 
     default:
       return { ...state };