From 2244d2f5125cbc0cead7b081a397d5127c273144 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Tue, 14 Jun 2022 20:25:26 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20More=20fixes=20for=20the=20react?= =?UTF-8?q?-refresh=20plugin=20bugs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 6 +-- .../AirDCPPSettings/AirDCPPHubsForm.tsx | 12 ++---- .../AirDCPPSettings/AirDCPPSettingsForm.tsx | 27 +++----------- src/client/components/Settings.tsx | 37 ++----------------- .../SystemSettings/SystemSettingsForm.tsx | 1 - src/client/index.tsx | 1 - webpack.config.js | 18 ++++----- yarn.lock | 8 ++-- 8 files changed, 26 insertions(+), 84 deletions(-) diff --git a/package.json b/package.json index 3e357aa..1e24763 100644 --- a/package.json +++ b/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", diff --git a/src/client/components/AirDCPPSettings/AirDCPPHubsForm.tsx b/src/client/components/AirDCPPSettings/AirDCPPHubsForm.tsx index db81138..f70669f 100644 --- a/src/client/components/AirDCPPSettings/AirDCPPHubsForm.tsx +++ b/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, diff --git a/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx b/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx index 5997271..4f919b4 100644 --- a/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx +++ b/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 () => {}; diff --git a/src/client/components/Settings.tsx b/src/client/components/Settings.tsx index c142939..e946a39 100644 --- a/src/client/components/Settings.tsx +++ b/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) ? ( - - ) : null} - - ), + content: <>{}, }, { id: "adc-connection", content: ( <> - + ), }, @@ -57,7 +26,7 @@ export const Settings = (props: ISettingsProps): ReactElement => { id: "flushdb", content: ( <> - + ), }, diff --git a/src/client/components/SystemSettings/SystemSettingsForm.tsx b/src/client/components/SystemSettings/SystemSettingsForm.tsx index c668845..7a3b46f 100644 --- a/src/client/components/SystemSettings/SystemSettingsForm.tsx +++ b/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( diff --git a/src/client/index.tsx b/src/client/index.tsx index 17f06fe..f96522b 100644 --- a/src/client/index.tsx +++ b/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( diff --git a/webpack.config.js b/webpack.config.js index 40ec65f..9e6cabc 100644 --- a/webpack.config.js +++ b/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), }; }; diff --git a/yarn.lock b/yarn.lock index 8c4a8da..c8e24ed 100644 --- a/yarn.lock +++ b/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"