🔧 More fixes for the react-refresh plugin bugs

src/client/components/AirDCPPSettings/AirDCPPHubsForm.tsx

@@ -7,21 +7,15 @@ import { saveSettings } from "../../actions/settings.actions";
 import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 
 export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
-  const { settings } = airDCPPClientUserSettings;
   const dispatch = useDispatch();
   const [hubList, setHubList] = useState([]);
-  const { ADCPPSocket } = useContext(AirDCPPSocketContext);
+  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+  const { AirDCPPSocket, settings } = airDCPPConfiguration;
 
   useEffect(() => {
     (async () => {
       if (!isEmpty(settings)) {
-        console.log(ADCPPSocket);
-        await ADCPPSocket.connect(
-          settings.directConnect.client.host.username,
-          settings.directConnect.client.host.password,
-          true,
-        );
-        const hubs = await ADCPPSocket.get(`hubs`);
+        const hubs = await AirDCPPSocket.get(`hubs`);
         const hubSelectionOptions = hubs.map(({ hub_url, identity }) => ({
           value: hub_url,
           label: identity.name,

src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -4,36 +4,20 @@ import { useDispatch } from "react-redux";
 import { saveSettings, deleteSettings } from "../../actions/settings.actions";
 import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
 import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
-import AirDCPPSocket from "../../services/DcppSearchService";
 import { isUndefined, isEmpty, isNil } from "lodash";
 
-export const AirDCPPSettingsForm = (airDCPPClientSettings): ReactElement => {
-  const { settings } = airDCPPClientSettings;
+export const AirDCPPSettingsForm = (): ReactElement => {
   const dispatch = useDispatch();
-  const { setADCPPSocket } = useContext(AirDCPPSocketContext);
+  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+  const { AirDCPPSocket, settings } = airDCPPConfiguration;
 
   const onSubmit = async (values) => {
     try {
-      const socket = new AirDCPPSocket({
-        hostname: `${values.hostname}`,
-        protocol: `${values.protocol}`,
-      });
-      const socketConnectionResponse = await socket.connect(
-        values.username,
-        values.password,
-        true,
-      );
-      if (!isNil(socketConnectionResponse.session_id)) {
+      if (!isNil(AirDCPPSocket.session_id)) {
         dispatch(
           saveSettings({
             host: values,
-            airDCPPUserSettings: socketConnectionResponse,
-          }),
-        );
-        setADCPPSocket(
-          new AirDCPPSocket({
-            hostname: `${values.hostname}`,
-            protocol: `${values.protocol}`,
+            airDCPPUserSettings: settings,
           }),
         );
       }
@@ -44,7 +28,6 @@ export const AirDCPPSettingsForm = (airDCPPClientSettings): ReactElement => {
 
   const removeSettings = useCallback(async () => {
     dispatch(deleteSettings());
-    setADCPPSocket({});
   }, []);
 
   const validate = async () => {};

src/client/components/Settings.tsx

@@ -4,52 +4,21 @@ import { AirDCPPHubsForm } from "./AirDCPPSettings/AirDCPPHubsForm";
 import { SystemSettingsForm } from "./SystemSettings/SystemSettingsForm";
 import settingsObject from "../constants/settings/settingsMenu.json";
 import { isEmpty, isUndefined, map } from "lodash";
-import { useDispatch, useSelector } from "react-redux";
-import { getSettings } from "../actions/settings.actions";
-import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
-import AirDCPPSocket from "../services/DcppSearchService";
 
 interface ISettingsProps {}
 
 export const Settings = (props: ISettingsProps): ReactElement => {
-  // fetch saved AirDC++ settings, if any
-  const airDCPPClientSettings = useSelector(
-    (state: RootState) => state.settings.data,
-  );
-  const dispatch = useDispatch();
-  const { ADCPPSocket, setADCPPSocket } = useContext(AirDCPPSocketContext);
-  useEffect(() => {
-    dispatch(getSettings());
-  }, []);
-
-  useEffect(() => {
-    if (!isEmpty(airDCPPClientSettings)) {
-      setADCPPSocket(
-        new AirDCPPSocket({
-          hostname: `${airDCPPClientSettings.directConnect.client.host.hostname}`,
-          protocol: `${airDCPPClientSettings.directConnect.client.host.protocol}`,
-        }),
-      );
-    }
-  }, [airDCPPClientSettings]);
   const [active, setActive] = useState("gen-db");
-
   const settingsContent = [
     {
       id: "adc-hubs",
-      content: (
-        <>
-          {!isEmpty(airDCPPClientSettings) ? (
-            <AirDCPPHubsForm settings={airDCPPClientSettings} />
-          ) : null}
-        </>
-      ),
+      content: <>{<AirDCPPHubsForm />}</>,
     },
     {
       id: "adc-connection",
       content: (
         <>
-          <AirDCPPSettingsForm settings={airDCPPClientSettings} />
+          <AirDCPPSettingsForm />
         </>
       ),
     },
@@ -57,7 +26,7 @@ export const Settings = (props: ISettingsProps): ReactElement => {
       id: "flushdb",
       content: (
         <>
-          <SystemSettingsForm settings={airDCPPClientSettings} />
+          <SystemSettingsForm />
         </>
       ),
     },

src/client/components/SystemSettings/SystemSettingsForm.tsx

@@ -3,7 +3,6 @@ import { flushDb } from "../../actions/settings.actions";
 import { useDispatch, useSelector } from "react-redux";
 
 export const SystemSettingsForm = (settingsObject): ReactElement => {
-  const { settings } = settingsObject;
 
   const dispatch = useDispatch();
   const isSettingsCallInProgress = useSelector(

src/client/index.tsx

@@ -8,7 +8,6 @@ import App from "./components/App";
 
 const rootEl = document.getElementById("root");
 const root = createRoot(rootEl);
-//In the entry of your indirect code path (e.g. some index.js), add the following two lines:
 
 root.render(
   <Provider store={store}>