🏗️ Refactoring AcquisitionPanel

2023-11-20 14:17:55 -05:00
parent 21a5a6028e
commit 9e5612237b
6 changed files with 201 additions and 119 deletions
--- a/src/client/components/ComicDetail/AcquisitionPanel.tsx
+++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx
@@ -14,6 +14,8 @@ import { RootState, SearchInstance } from "threetwo-ui-typings";
 import ellipsize from "ellipsize";
 import { Form, Field } from "react-final-form";
 import { isEmpty, isNil, map } from "lodash";
+import { useStore } from "../../store";
+import { useShallow } from "zustand/react/shallow";

 interface IAcquisitionPanelProps {
  query: any;
@@ -25,26 +27,38 @@ interface IAcquisitionPanelProps {
 export const AcquisitionPanel = (
  props: IAcquisitionPanelProps,
 ): ReactElement => {
+  const {
+    airDCPPSocketInstance,
+    airDCPPClientConfiguration,
+    airDCPPSessionInformation,
+  } = useStore(
+    useShallow((state) => ({
+      airDCPPSocketInstance: state.airDCPPSocketInstance,
+      airDCPPClientConfiguration: state.airDCPPClientConfiguration,
+      airDCPPSessionInformation: state.airDCPPSessionInformation,
+    })),
+  );
+  console.log("ulhas umlaut", airDCPPSessionInformation);
  const issueName = props.query.issue.name || "";
  // const { settings } = props;
  const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");

  // Selectors for picking state
-  const airDCPPSearchResults = useSelector((state: RootState) => {
-    return state.airdcpp.searchResults;
-  });
-  const isAirDCPPSearchInProgress = useSelector(
-    (state: RootState) => state.airdcpp.isAirDCPPSearchInProgress,
-  );
-  const searchInfo = useSelector(
-    (state: RootState) => state.airdcpp.searchInfo,
-  );
-  const searchInstance: SearchInstance = useSelector(
-    (state: RootState) => state.airdcpp.searchInstance,
-  );
+  // const airDCPPSearchResults = useSelector((state: RootState) => {
+  //   return state.airdcpp.searchResults;
+  // });
+  // const isAirDCPPSearchInProgress = useSelector(
+  //   (state: RootState) => state.airdcpp.isAirDCPPSearchInProgress,
+  // );
+  // const searchInfo = useSelector(
+  //   (state: RootState) => state.airdcpp.searchInfo,
+  // );
+  // const searchInstance: SearchInstance = useSelector(
+  //   (state: RootState) => state.airdcpp.searchInstance,
+  // );

  // const settings = useSelector((state: RootState) => state.settings.data);
-  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+  // const airDCPPConfiguration = useContext(AirDCPPSocketContext);

  const [dcppQuery, setDcppQuery] = useState({});

--- a/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx
+++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx
@@ -1,38 +1,67 @@
 import React, { ReactElement, useEffect, useState, useContext } from "react";
 import { Form, Field } from "react-final-form";
-import { useDispatch } from "react-redux";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import Select from "react-select";
 import { saveSettings } from "../../../actions/settings.actions";
-import { AirDCPPSocketContext } from "../../../context/AirDCPPSocket";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useStore } from "../../../store";
+import { useShallow } from "zustand/react/shallow";
+import axios from "axios";

 export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
-  const dispatch = useDispatch();
-  const [hubList, setHubList] = useState([]);
-  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+  const queryClient = useQueryClient();
  const {
-    airDCPPState: { settings, socket },
-  } = airDCPPConfiguration;
+    airDCPPSocketInstance,
+    airDCPPClientConfiguration,
+    airDCPPSessionInformation,
+  } = useStore(
+    useShallow((state) => ({
+      airDCPPSocketInstance: state.airDCPPSocketInstance,
+      airDCPPClientConfiguration: state.airDCPPClientConfiguration,
+      airDCPPSessionInformation: state.airDCPPSessionInformation,
+    })),
+  );

-  useEffect(() => {
-    (async () => {
-      if (!isEmpty(settings)) {
-        const hubs = await socket.get(`hubs`);
-        const hubSelectionOptions = hubs.map(({ hub_url, identity }) => ({
-          value: hub_url,
-          label: identity.name,
-        }));
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["settings"],
+    queryFn: async () =>
+      await axios({
+        url: "http://localhost:3000/api/settings/getAllSettings",
+        method: "GET",
+      }),
+  });

-        setHubList(hubSelectionOptions);
-      }
-    })();
-  }, []);
+  console.log("Asd", data);
+  const {
+    settings: {
+      data: { directConnect },
+    },
+  } = data;

-  const onSubmit = (values) => {
-    if (!isUndefined(values.hubs)) {
-      dispatch(saveSettings({ ...settings, hubs: values.hubs }, settings._id));
-    }
-  };
+  const { data: hubs } = useQuery({
+    queryKey: [],
+    queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
+    enabled: !!settings,
+  });
+  let hubList = {};
+  if (hubs) {
+    hubList = hubs.map(({ hub_url, identity }) => ({
+      value: hub_url,
+      label: identity.name,
+    }));
+  }
+
+  const { mutate } = useMutation({
+    mutationFn: async (values) =>
+      await axios({
+        url: `http://localhost:3000/api/settings/saveSettings`,
+        method: "POST",
+        data: { settingsPayload: values, settingsKey: "directConnect" },
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["settings"] });
+    },
+  });

  const validate = async () => {};

@@ -43,7 +72,7 @@ export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
  return (
    <>
      <Form
-        onSubmit={onSubmit}
+        onSubmit={mutate}
        validate={validate}
        render={({ handleSubmit }) => (
          <form onSubmit={handleSubmit}>
@@ -82,12 +111,13 @@ export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
      </div>
      <div className="box mt-3">
        <h6>Selected hubs</h6>
-        {settings.directConnect.client.hubs.map(({ value, label }) => (
-          <div key={value}>
-            <div>{label}</div>
-            <span className="is-size-7">{value}</span>
-          </div>
-        ))}
+        {settings &&
+          settings?.directConnect?.client.hubs.map(({ value, label }) => (
+            <div key={value}>
+              <div>{label}</div>
+              <span className="is-size-7">{value}</span>
+            </div>
+          ))}
      </div>
    </>
  );
--- a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx
+++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx
@@ -2,8 +2,10 @@ import React, { ReactElement, useCallback } from "react";
 import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
 import { isUndefined, isEmpty } from "lodash";
 import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
-import { useStore } from "../../../store/index";
+import { initializeAirDCPPSocket, useStore } from "../../../store/index";
 import { useShallow } from "zustand/react/shallow";
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";

 export const AirDCPPSettingsForm = (): ReactElement => {
  // cherry-picking selectors for:
@@ -24,13 +26,27 @@ export const AirDCPPSettingsForm = (): ReactElement => {
      airDCPPSocketInstance: state.airDCPPSocketInstance,
    })),
  );
-  const onSubmit = useCallback(async (values) => {
-    try {
-      // airDCPPSettings.setSettings(values);
-    } catch (error) {
-      console.log(error);
-    }
-  }, []);
+
+  const { mutate } = useMutation({
+    mutationFn: async (values) =>
+      await axios({
+        url: `http://localhost:3000/api/settings/saveSettings`,
+        method: "POST",
+        data: { settingsPayload: values, settingsKey: "directConnect" },
+      }),
+    onSuccess: (values) => {
+      const {
+        data: {
+          directConnect: {
+            client: { host },
+          },
+        },
+      } = values;
+      console.log("asdas", host);
+      initializeAirDCPPSocket(host);
+    },
+  });
+
  const removeSettings = useCallback(async () => {
    // airDCPPSettings.setSettings({});
  }, []);
@@ -43,7 +59,7 @@ export const AirDCPPSettingsForm = (): ReactElement => {
    <>
      <ConnectionForm
        initialData={initFormData}
-        submitHandler={onSubmit}
+        submitHandler={mutate}
        formHeading={"Configure AirDC++"}
      />

--- a/src/client/components/Settings/Settings.tsx
+++ b/src/client/components/Settings/Settings.tsx
@@ -14,7 +14,11 @@ export const Settings = (props: ISettingsProps): ReactElement => {
  const settingsContent = [
    {
      id: "adc-hubs",
-      content: <div key="adc-hubs">{/* <AirDCPPHubsForm /> */}</div>,
+      content: (
+        <div key="adc-hubs">
+          <AirDCPPHubsForm />
+        </div>
+      ),
    },
    {
      id: "adc-connection",
--- a/src/client/components/shared/Navbar.tsx
+++ b/src/client/components/shared/Navbar.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { SearchBar } from "../GlobalSearchBar/SearchBar";
 import { DownloadProgressTick } from "../ComicDetail/DownloadProgressTick";
 import { Link } from "react-router-dom";
-import { isEmpty, isUndefined } from "lodash";
+import { isEmpty, isNil, isUndefined } from "lodash";
 import { format, fromUnixTime } from "date-fns";
 import { useStore } from "../../store/index";
 import { useShallow } from "zustand/react/shallow";
@@ -23,6 +23,7 @@ const Navbar: React.FunctionComponent = (props) => {
      importJobQueue: state.importJobQueue,
    })),
  );
+  console.log(airDCPPSessionInformation);
  //   const downloadProgressTick = useSelector(
  //     (state: RootState) => state.airdcpp.downloadProgressData,
  //   );
@@ -146,7 +147,7 @@ const Navbar: React.FunctionComponent = (props) => {

          {/* AirDC++ socket connection status */}
          <div className="navbar-item has-dropdown is-hoverable">
-            {airDCPPSocketConnected ? (
+            {!isUndefined(airDCPPSessionInformation.user) ? (
              <>
                <a className="navbar-link is-arrowless has-text-success">
                  <i className="fa-solid fa-bolt"></i>
@@ -158,7 +159,9 @@ const Navbar: React.FunctionComponent = (props) => {
                    Last login was{" "}
                    <span className="tag">
                      {format(
-                        fromUnixTime(airDCPPSessionInformation.user.last_login),
+                        fromUnixTime(
+                          airDCPPSessionInformation?.user.last_login,
+                        ),
                        "dd MMMM, yyyy",
                      )}
                    </span>
@@ -178,7 +181,11 @@ const Navbar: React.FunctionComponent = (props) => {
                    </span>
                  </p>

-                  {/* <pre>{JSON.stringify(airDCPPSessionInfo, null, 2)}</pre> */}
+                  {
+                    <pre>
+                      {JSON.stringify(airDCPPSessionInformation, null, 2)}
+                    </pre>
+                  }
                </div>
              </>
            ) : (