Migrating from Redux to RTK-query

src/client/components/App.tsx

@@ -119,7 +119,6 @@ export const App = (): ReactElement => {
       <AirDCPPSocketContextProvider>
         <div>
           <AirDCPPSocketComponent />
-          <Navbar />
           <Routes>
             <Route path="/" element={<Dashboard />} />
             <Route path="/import" element={<Import path={"./comics"} />} />

src/client/components/Dashboard/Dashboard.tsx

@@ -16,110 +16,50 @@ import Header from "../shared/Header";
 
 export const Dashboard = (): ReactElement => {
   const dispatch = useDispatch();
-  useEffect(() => {
-    dispatch(fetchVolumeGroups());
-    dispatch(
-      getComicBooks({
-        paginationOptions: {
-          page: 0,
-          limit: 5,
-          sort: { updatedAt: "-1" },
-        },
-        predicate: { "acquisition.source.wanted": false },
-        comicStatus: "recent",
-      }),
-    );
-    dispatch(
-      getComicBooks({
-        paginationOptions: {
-          page: 0,
-          limit: 5,
-          sort: { updatedAt: "-1" },
-        },
-        predicate: { "acquisition.source.wanted": true },
-        comicStatus: "wanted",
-      }),
-    );
-    dispatch(getLibraryStatistics());
-  }, []);
-
-  const recentComics = useSelector(
-    (state: RootState) => state.fileOps.recentComics,
-  );
-  const wantedComics = useSelector(
-    (state: RootState) => state.fileOps.wantedComics,
-  );
-  const volumeGroups = useSelector(
-    (state: RootState) => state.fileOps.comicVolumeGroups,
-  );
-
-  const libraryStatistics = useSelector(
-    (state: RootState) => state.comicInfo.libraryStatistics,
-  );
+  //   useEffect(() => {
+  //     dispatch(fetchVolumeGroups());
+  //     dispatch(
+  //       getComicBooks({
+  //         paginationOptions: {
+  //           page: 0,
+  //           limit: 5,
+  //           sort: { updatedAt: "-1" },
+  //         },
+  //         predicate: { "acquisition.source.wanted": false },
+  //         comicStatus: "recent",
+  //       }),
+  //     );
+  //     dispatch(
+  //       getComicBooks({
+  //         paginationOptions: {
+  //           page: 0,
+  //           limit: 5,
+  //           sort: { updatedAt: "-1" },
+  //         },
+  //         predicate: { "acquisition.source.wanted": true },
+  //         comicStatus: "wanted",
+  //       }),
+  //     );
+  //     dispatch(getLibraryStatistics());
+  //   }, []);
+  //
+  //   const recentComics = useSelector(
+  //     (state: RootState) => state.fileOps.recentComics,
+  //   );
+  //   const wantedComics = useSelector(
+  //     (state: RootState) => state.fileOps.wantedComics,
+  //   );
+  //   const volumeGroups = useSelector(
+  //     (state: RootState) => state.fileOps.comicVolumeGroups,
+  //   );
+  //
+  //   const libraryStatistics = useSelector(
+  //     (state: RootState) => state.comicInfo.libraryStatistics,
+  //   );
   return (
     <div className="container">
       <section className="section">
         <h1 className="title">Dashboard</h1>
-
-        {!isEmpty(recentComics) ? (
-          <>
-            {/* Pull List */}
-            <PullList issues={recentComics} />
-            <>
-              <div className="content mt-6">
-                <Header
-                  headerContent="Import Activity"
-                  subHeaderContent="Results aggregated from the last import"
-                  iconClassNames="fa-solid fa-file-invoice mr-2"
-                />
-              </div>
-
-              <table className="table">
-                <thead>
-                  <tr>
-                    <th>
-                      <abbr title="Position">Pos</abbr>
-                    </th>
-                    <th>Team</th>
-                    <th>
-                      <abbr title="Played">Pld</abbr>
-                    </th>
-                  </tr>
-                </thead>
-
-                <tbody>
-                  <tr>
-                    <th>1</th>
-                    <td>38</td>
-                  </tr>
-                </tbody>
-              </table>
-            </>
-
-            {/* Stats */}
-            {!isEmpty(libraryStatistics) && (
-              <LibraryStatistics stats={libraryStatistics} />
-            )}
-            {/* Wanted comics */}
-            {!isEmpty(wantedComics) && (
-              <WantedComicsList comics={wantedComics} />
-            )}
-            {/* Recent imports */}
-            <RecentlyImported comicBookCovers={recentComics} />
-
-            {/* Volumes */}
-            {!isEmpty(volumeGroups) && (
-              <VolumeGroups volumeGroups={volumeGroups} />
-            )}
-          </>
-        ) : (
-          <ZeroState
-            header={"Set the source directory"}
-            message={
-              "No comics were found! Please point ThreeTwo! to a directory..."
-            }
-          />
-        )}
       </section>
     </div>
   );

src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -34,7 +34,11 @@ export const AirDCPPSettingsForm = (): ReactElement => {
 
   return (
     <>
-      <ConnectionForm initialData={initFormData} submitHandler={onSubmit} />
+      <ConnectionForm
+        initialData={initFormData}
+        submitHandler={onSubmit}
+        formHeading={"Configure AirDC++"}
+      />
 
       {!isEmpty(airDCPPSettings.airDCPPState.socketConnectionInformation) ? (
         <AirDCPPSettingsConfirmation

src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx

@@ -1,27 +1,14 @@
 import React, { ReactElement, useCallback, useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useAppDispatch, useAppSelector } from "../../../hooks/store";
 import { getQBitTorrentClientInfo } from "../../../actions/settings.actions";
 import { saveSettings } from "../../../actions/settings.actions";
 import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
+import { useGetAllSettingsQuery } from "../../../services/settings.api";
 import { isUndefined } from "lodash";
+import { useConnectToQBittorrentClientQuery } from "../../../services/torrents.api";
 
 export const QbittorrentConnectionForm = (): ReactElement => {
-  const dispatch = useDispatch();
-  const torrents = useSelector(
-    (state: RootState) => state.settings.torrentsList,
-  );
-
-  const qBittorrentSettings = useSelector((state: RootState) => {
-    if (!isUndefined(state.settings.data.bittorrent)) {
-      return state.settings.data.bittorrent.client.host;
-    }
-  });
-
-  useEffect(() => {
-    if (!isUndefined(qBittorrentSettings)) {
-      dispatch(getQBitTorrentClientInfo(qBittorrentSettings));
-    }
-  }, []);
+  const dispatch = useAppDispatch();
 
   const onSubmit = useCallback(async (values) => {
     try {
@@ -31,15 +18,7 @@ export const QbittorrentConnectionForm = (): ReactElement => {
     }
   }, []);
 
-  return (
-    <>
-      <ConnectionForm
-        initialData={qBittorrentSettings}
-        submitHandler={onSubmit}
-      />
-      <pre> {torrents && JSON.stringify(torrents, null, 4)} </pre>
-    </>
-  );
+  return <></>;
 };
 
 export default QbittorrentConnectionForm;

src/client/components/shared/ConnectionForm/ConnectionForm.tsx

@@ -6,6 +6,7 @@ import { isEmpty } from "lodash";
 export const ConnectionForm = ({
   initialData,
   submitHandler,
+  formHeading,
 }): ReactElement => {
   return (
     <>
@@ -14,8 +15,8 @@ export const ConnectionForm = ({
         initialValues={initialData}
         render={({ handleSubmit }) => (
           <form onSubmit={handleSubmit}>
-            <h2>Configure AirDC++</h2>
-            <label className="label">AirDC++ Hostname</label>
+            <h2>{formHeading}</h2>
+            <label className="label">Hostname</label>
             <div className="field has-addons">
               <p className="control">
                 <span className="select">