From 78de8752c61bd5b5a0590a4fe733a3d79133f500 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Jun 2021 13:05:55 +0200 Subject: [PATCH] Fixed bug with overwriting opened tabs. Added proxy for websocket --- Socket.js | 4 +- client/package-lock.json | 130 ++++-------------- client/package.json | 4 +- .../src/components/Apps/AppCard/AppCard.tsx | 2 +- .../Bookmarks/BookmarkCard/BookmarkCard.tsx | 2 +- .../UI/Icons/WeatherIcon/WeatherIcon.tsx | 6 +- .../Widgets/WeatherWidget/WeatherWidget.tsx | 6 +- client/src/setupProxy.js | 15 ++ client/src/store/actions/app.ts | 5 +- 9 files changed, 60 insertions(+), 114 deletions(-) create mode 100644 client/src/setupProxy.js diff --git a/Socket.js b/Socket.js index 5b6d05c..af9249a 100644 --- a/Socket.js +++ b/Socket.js @@ -5,11 +5,11 @@ class Socket { this.webSocketServer = new WebSocket.Server({ server }) this.webSocketServer.on('listening', () => { - console.log('socket listen'); + console.log('Socket: listen'); }) this.webSocketServer.on('connection', (webSocketClient) => { - console.log('new connection'); + console.log('Socket: new connection'); }) } diff --git a/client/package-lock.json b/client/package-lock.json index 288d925..476f8d5 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -2304,6 +2304,14 @@ "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz", "integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==" }, + "@types/http-proxy": { + "version": "1.17.6", + "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.6.tgz", + "integrity": "sha512-+qsjqR75S/ib0ig0R9WN+CDoZeOBU6F2XLewgC4KVgdXiNHiKKHFEMRHOrs5PbYE97D5vataw5wPj4KLYfUkuQ==", + "requires": { + "@types/node": "*" + } + }, "@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -7449,110 +7457,21 @@ } }, "http-proxy-middleware": { - "version": "0.19.1", - "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz", - "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.0.tgz", + "integrity": "sha512-S+RN5njuyvYV760aiVKnyuTXqUMcSIvYOsHA891DOVQyrdZOwaXtBHpt9FUVPEDAsOvsPArZp6VXQLs44yvkow==", "requires": { - "http-proxy": "^1.17.0", - "is-glob": "^4.0.0", - "lodash": "^4.17.11", - "micromatch": "^3.1.10" + "@types/http-proxy": "^1.17.5", + "http-proxy": "^1.18.1", + "is-glob": "^4.0.1", + "is-plain-obj": "^3.0.0", + "micromatch": "^4.0.2" }, "dependencies": { - "braces": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz", - "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==", - "requires": { - "arr-flatten": "^1.1.0", - "array-unique": "^0.3.2", - "extend-shallow": "^2.0.1", - "fill-range": "^4.0.0", - "isobject": "^3.0.1", - "repeat-element": "^1.1.2", - "snapdragon": "^0.8.1", - "snapdragon-node": "^2.0.1", - "split-string": "^3.0.2", - "to-regex": "^3.0.1" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "requires": { - "is-extendable": "^0.1.0" - } - } - } - }, - "fill-range": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", - "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=", - "requires": { - "extend-shallow": "^2.0.1", - "is-number": "^3.0.0", - "repeat-string": "^1.6.1", - "to-regex-range": "^2.1.0" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "requires": { - "is-extendable": "^0.1.0" - } - } - } - }, - "is-number": { + "is-plain-obj": { "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", - "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=", - "requires": { - "kind-of": "^3.0.2" - }, - "dependencies": { - "kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "requires": { - "is-buffer": "^1.1.5" - } - } - } - }, - "micromatch": { - "version": "3.1.10", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", - "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==", - "requires": { - "arr-diff": "^4.0.0", - "array-unique": "^0.3.2", - "braces": "^2.3.1", - "define-property": "^2.0.2", - "extend-shallow": "^3.0.2", - "extglob": "^2.0.4", - "fragment-cache": "^0.2.1", - "kind-of": "^6.0.2", - "nanomatch": "^1.2.9", - "object.pick": "^1.3.0", - "regex-not": "^1.0.0", - "snapdragon": "^0.8.1", - "to-regex": "^3.0.2" - } - }, - "to-regex-range": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz", - "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=", - "requires": { - "is-number": "^3.0.0", - "repeat-string": "^1.6.1" - } + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz", + "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==" } } }, @@ -16033,6 +15952,17 @@ } } }, + "http-proxy-middleware": { + "version": "0.19.1", + "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz", + "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==", + "requires": { + "http-proxy": "^1.17.0", + "is-glob": "^4.0.0", + "lodash": "^4.17.11", + "micromatch": "^3.1.10" + } + }, "import-local": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz", diff --git a/client/package.json b/client/package.json index 5a7676c..5467e68 100644 --- a/client/package.json +++ b/client/package.json @@ -15,6 +15,7 @@ "@types/react-redux": "^7.1.16", "@types/react-router-dom": "^5.1.7", "axios": "^0.21.1", + "http-proxy-middleware": "^2.0.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-redux": "^7.2.4", @@ -50,6 +51,5 @@ "last 1 firefox version", "last 1 safari version" ] - }, - "proxy": "http://localhost:5005" + } } diff --git a/client/src/components/Apps/AppCard/AppCard.tsx b/client/src/components/Apps/AppCard/AppCard.tsx index 25edb88..18b5dfd 100644 --- a/client/src/components/Apps/AppCard/AppCard.tsx +++ b/client/src/components/Apps/AppCard/AppCard.tsx @@ -17,7 +17,7 @@ const AppCard = (props: ComponentProps): JSX.Element => { } return ( - +
diff --git a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx index 7a5f25c..5f607b2 100644 --- a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx +++ b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx @@ -16,7 +16,7 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => { {props.category.bookmarks.map((bookmark: Bookmark) => ( {bookmark.icon && (
diff --git a/client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx b/client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx index 6dcfe56..111967e 100644 --- a/client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx +++ b/client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx @@ -12,8 +12,8 @@ interface ComponentProps { const WeatherIcon = (props: ComponentProps): JSX.Element => { const icon = props.isDay - ? (new IconMapping).mapIcon(props.weatherStatusCode, TimeOfDay.day) - : (new IconMapping).mapIcon(props.weatherStatusCode, TimeOfDay.night); + ? new IconMapping().mapIcon(props.weatherStatusCode, TimeOfDay.day) + : new IconMapping().mapIcon(props.weatherStatusCode, TimeOfDay.night); useEffect(() => { const delay = setTimeout(() => { @@ -25,7 +25,7 @@ const WeatherIcon = (props: ComponentProps): JSX.Element => { return () => { clearTimeout(delay); } - }, [props.weatherStatusCode]); + }, [props.weatherStatusCode, icon, props.theme.colors.accent]); return } diff --git a/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx b/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx index 7d7cbd9..b28ef0a 100644 --- a/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx +++ b/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx @@ -50,7 +50,11 @@ const WeatherWidget = (): JSX.Element => { // Open socket for data updates useEffect(() => { - const webSocketClient = new WebSocket('ws://localhost:5005'); + const webSocketClient = new WebSocket(`ws://${window.location.host}/socket`); + + webSocketClient.onopen = () => { + console.log('Socket: listen') + } webSocketClient.onmessage = (e) => { const data = JSON.parse(e.data); diff --git a/client/src/setupProxy.js b/client/src/setupProxy.js new file mode 100644 index 0000000..5cafcb1 --- /dev/null +++ b/client/src/setupProxy.js @@ -0,0 +1,15 @@ +const { createProxyMiddleware } = require('http-proxy-middleware'); + +module.exports = function (app) { + const apiProxy = createProxyMiddleware('/api', { + target: 'http://localhost:5005' + }) + + const wsProxy = createProxyMiddleware('/socket', { + target: 'http://localhost:5005', + ws: true + }) + + app.use(apiProxy); + app.use(wsProxy); +}; \ No newline at end of file diff --git a/client/src/store/actions/app.ts b/client/src/store/actions/app.ts index f7eb3a7..1699e31 100644 --- a/client/src/store/actions/app.ts +++ b/client/src/store/actions/app.ts @@ -23,10 +23,7 @@ export const getApps = () => async (dispatch: Dispatch) => { payload: res.data.data }) } catch (err) { - dispatch>({ - type: ActionTypes.getAppsError, - payload: err.data.data - }) + console.log(err); } }