🔧 More fixes for the react-refresh plugin bugs

package.json

@@ -5,11 +5,11 @@
   "main": "server/index.js",
   "typings": "server/index.js",
   "scripts": {
-    "build": "NODE_ENV=production webpack --mode production",
+    "build": "webpack --mode production",
     "start": "npm run build && npm run server",
     "client": "webpack serve --mode development --devtool inline-source-map --hot",
     "server": "tsc -p tsconfig.server.json && node server/",
-    "dev": "NODE_ENV=development concurrently \"nodemon\" \"npm run client\"",
+    "dev": "concurrently \"nodemon\" \"npm run client\"",
     "server-dev": "nodemon",
     "docs": "jsdoc -c jsdoc.json"
   },
@@ -151,7 +151,7 @@
     "nodemon": "^1.17.3",
     "npm": "^8.11.0",
     "prettier": "^2.2.1",
-    "react-refresh": "^0.13.0",
+    "react-refresh": "^0.14.0",
     "rimraf": "^3.0.2",
     "sass-loader": "^11.0.1",
     "source-map-loader": "^0.2.4",

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}>

webpack.config.js

@@ -8,13 +8,9 @@ const BundleAnalyzerPlugin =
 const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
 
-const isDevelopment = process.env.NODE_ENV !== "production";
-const HMRPlugin = () => (isDevelopment ? new ReactRefreshWebpackPlugin() : {});
-const reactRefreshBabelPlugin = isDevelopment
-  ? require.resolve("react-refresh/babel")
-  : {};
-
-module.exports = () => {
+module.exports = (_, argv) => {
+  const mode = argv.mode;
+  const isDevelopment = mode === "development";
   return {
     entry: ["babel-polyfill", "./src/client/index.tsx"],
     output: {
@@ -47,7 +43,9 @@ module.exports = () => {
             {
               loader: "babel-loader",
               options: {
-                plugins: [reactRefreshBabelPlugin],
+                plugins: [
+                  isDevelopment && require("react-refresh/babel"),
+                ].filter(Boolean),
               },
             },
           ],
@@ -103,7 +101,6 @@ module.exports = () => {
       usedExports: false,
     },
     plugins: [
-      HMRPlugin,
       // new BundleAnalyzerPlugin(),
       new CopyPlugin({
         patterns: [{ from: "./src/client/assets/img/", to: "img/" }],
@@ -111,6 +108,7 @@ module.exports = () => {
           concurrency: 100,
         },
       }),
+      isDevelopment && new ReactRefreshWebpackPlugin(),
       new HtmlWebpackPlugin({
         template: "./public/index.html",
         favicon: "./public/favicon.ico",
@@ -125,6 +123,6 @@ module.exports = () => {
         filename: "./css/[name].css",
         chunkFilename: "./css/[id].css",
       }),
-    ],
+    ].filter(Boolean),
   };
 };

yarn.lock

@@ -12220,10 +12220,10 @@ react-redux@^7.2.6:
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
-react-refresh@^0.13.0:
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.13.0.tgz#cbd01a4482a177a5da8d44c9755ebb1f26d5a1c1"
-  integrity sha512-XP8A9BT0CpRBD+NYLLeIhld/RqG9+gktUjW1FkE+Vm7OCinbG1SshcK5tb9ls4kzvjZr9mOQc7HYgBngEyPAXg==
+react-refresh@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
+  integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
 react-refresh@^0.9.0:
   version "0.9.0"