🧸 Zustand-ified AirDCPP Form

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

@@ -1,31 +1,39 @@
-import React, { ReactElement, useCallback, useContext } from "react";
-import {
-  saveSettings,
-  deleteSettings,
-} from "../../../actions/settings.actions";
+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 { useShallow } from "zustand/react/shallow";
 
 export const AirDCPPSettingsForm = (): ReactElement => {
   // const airDCPPSettings = useContext(AirDCPPSocketContext);
-  const airDCPPSettings = useStore((store) => store.airDCPPClientConfiguration);
-  console.log("chinnga", airDCPPSettings);
+  const {
+    airDCPPSocketConnected,
+    disconnectionInfo,
+    socketConnectionInformation,
+    airDCPPClientConfiguration,
+  } = useStore(
+    useShallow((state) => ({
+      airDCPPSocketConnected: state.airDCPPSocketConnected,
+      disconnectionInfo: state.disconnectionInfo,
+      airDCPPClientConfiguration: state.airDCPPClientConfiguration,
+      socketConnectionInformation: state.socketConnectionInformation,
+    })),
+  );
 
   const onSubmit = useCallback(async (values) => {
     try {
-      airDCPPSettings.setSettings(values);
+      // airDCPPSettings.setSettings(values);
     } catch (error) {
       console.log(error);
     }
   }, []);
   const removeSettings = useCallback(async () => {
-    airDCPPSettings.setSettings({});
+    // airDCPPSettings.setSettings({});
   }, []);
   //
-  const initFormData = !isUndefined(airDCPPSettings)
-    ? airDCPPSettings
+  const initFormData = !isUndefined(airDCPPClientConfiguration)
+    ? airDCPPClientConfiguration
     : {};
 
   return (
@@ -36,13 +44,11 @@ export const AirDCPPSettingsForm = (): ReactElement => {
         formHeading={"Configure AirDC++"}
       />
 
-      {!isEmpty(airDCPPSettings.airDCPPState.socketConnectionInformation) ? (
-        <AirDCPPSettingsConfirmation
-          settings={airDCPPSettings.airDCPPState.socketConnectionInformation}
-        />
+      {!isEmpty(socketConnectionInformation) ? (
+        <AirDCPPSettingsConfirmation settings={socketConnectionInformation} />
       ) : null}
 
-      {!isEmpty(airDCPPSettings.airDCPPState.socketConnectionInformation) ? (
+      {!isEmpty(airDCPPClientConfiguration) ? (
         <p className="control mt-4">
           <button className="button is-danger" onClick={removeSettings}>
             Delete

src/client/components/Settings/Settings.tsx

@@ -10,7 +10,6 @@ import { isUndefined, map } from "lodash";
 interface ISettingsProps {}
 
 export const Settings = (props: ISettingsProps): ReactElement => {
-  console.log("Asd");
   const [active, setActive] = useState("gen-db");
   const settingsContent = [
     {

src/client/store/index.ts

@@ -7,6 +7,7 @@ export const useStore = create((set, get) => ({
   airDCPPSocketConnected: false,
   disconnectionInfo: {},
   airDCPPClientConfiguration: {},
+  socketConnectionInformation: {},
   setAirDCPPSocketConnectionStatus: () =>
     set((value) => ({
       airDCPPSocketConnected: value,
@@ -45,6 +46,9 @@ const initializeAirDCPPSocket = async (configuration) => {
   };
   // Attempt connection
   const socketConnectionInformation = await initializedAirDCPPSocket.connect();
+  setState({
+    socketConnectionInformation,
+  });
 };
 
 // 1. get settings from mongo