From d30fb2ac4f1a95fa47f020a0cce44ea09186d1a3 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Thu, 4 Aug 2022 12:19:00 +0200 Subject: [PATCH 1/4] change(ui) - react upgrade, dnd lib and other runtime fixes --- .../Session_/EventsBlock/EventsBlock.js | 5 ++- frontend/app/initialize.js | 26 ++++++------ frontend/package.json | 7 ++-- frontend/path-alias.js | 42 ++++++++++--------- 4 files changed, 42 insertions(+), 38 deletions(-) diff --git a/frontend/app/components/Session_/EventsBlock/EventsBlock.js b/frontend/app/components/Session_/EventsBlock/EventsBlock.js index e690ce3cc..cc6867fb9 100644 --- a/frontend/app/components/Session_/EventsBlock/EventsBlock.js +++ b/frontend/app/components/Session_/EventsBlock/EventsBlock.js @@ -52,8 +52,9 @@ export default class EventsBlock extends React.PureComponent { const { filter } = this.state; this.setState({ query: '' }) this.props.setEventFilter({ query: '', filter }) - - this.scroller.current.forceUpdateGrid(); + if (this.scroller.current) { + this.scroller.current.forceUpdateGrid(); + } setTimeout(() => { if (!this.scroller.current) return; diff --git a/frontend/app/initialize.js b/frontend/app/initialize.js index df7909916..3ca4972ac 100644 --- a/frontend/app/initialize.js +++ b/frontend/app/initialize.js @@ -1,25 +1,25 @@ import './styles/index.scss'; import React from 'react'; +import { createRoot } from 'react-dom/client'; import './init'; import { render } from 'react-dom'; import { Provider } from 'react-redux'; import store from './store'; import Router from './Router'; -import { StoreProvider, RootStore } from './mstore'; +import { StoreProvider, RootStore } from './mstore'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { DndProvider } from 'react-dnd'; document.addEventListener('DOMContentLoaded', () => { - render( - ( - - - - - - - - ), - document.getElementById('app'), - ); + const container = document.getElementById('app'); + const root = createRoot(container); + root.render( + + + + + + + + ); }); diff --git a/frontend/package.json b/frontend/package.json index 8fb7f651f..d82ada89d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -29,6 +29,7 @@ "jsbi": "^4.1.0", "jshint": "^2.11.1", "jspdf": "^2.5.1", + "jsx-runtime": "^1.2.0", "luxon": "^1.24.1", "mobx": "^6.3.8", "mobx-react-lite": "^3.1.6", @@ -36,14 +37,14 @@ "moment-range": "^3.0.3", "peerjs": "1.3.2", "rc-time-picker": "^3.7.3", - "react": "^16.14.0", + "react": "^18.2.0", "react-circular-progressbar": "^2.1.0", "react-confirm": "^0.1.27", "react-date-range": "^1.4.0", "react-daterange-picker": "^2.0.1", - "react-dnd": "^15.1.1", + "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^15.1.2", - "react-dom": "^16.13.1", + "react-dom": "^18.2.0", "react-draggable": "^4.4.5", "react-google-recaptcha": "^1.1.0", "react-highlight": "^0.14.0", diff --git a/frontend/path-alias.js b/frontend/path-alias.js index 4dd1117e0..630e3868c 100644 --- a/frontend/path-alias.js +++ b/frontend/path-alias.js @@ -1,23 +1,25 @@ const path = require('path'); module.exports = { - "@": path.resolve(__dirname, "app"), - "App": path.resolve(__dirname, "app"), - "App/*": path.resolve(__dirname, "app/*"), - "SVG": path.resolve(__dirname, "app/svg"), - "SVG/*": path.resolve(__dirname, "app/svg/*"), - "Components": path.resolve(__dirname, "app/components"), - "Components/*": path.resolve(__dirname, "app/components/*"), - "Types": path.resolve(__dirname, "app/types" ), - "Types/*": path.resolve(__dirname, "app/types/*"), - "UI": path.resolve(__dirname, "app/components/ui"), - "UI/*": path.resolve(__dirname, "app/components/ui/*"), - "Duck": path.resolve(__dirname, "app/duck"), - "Duck/*": path.resolve(__dirname, "app/duck/*"), - "HOCs": path.resolve(__dirname, "app/components/hocs"), - "HOCs/*": path.resolve(__dirname, "app/components/hocs/*"), - "Shared": path.resolve(__dirname, "app/components/shared"), - "Shared/*": path.resolve(__dirname, "app/components/shared/*"), - "Player": path.resolve(__dirname, "app/player"), - "Player/*": path.resolve(__dirname, "app/player/*"), -}; + '@': path.resolve(__dirname, 'app'), + App: path.resolve(__dirname, 'app'), + 'App/*': path.resolve(__dirname, 'app/*'), + SVG: path.resolve(__dirname, 'app/svg'), + 'SVG/*': path.resolve(__dirname, 'app/svg/*'), + Components: path.resolve(__dirname, 'app/components'), + 'Components/*': path.resolve(__dirname, 'app/components/*'), + Types: path.resolve(__dirname, 'app/types'), + 'Types/*': path.resolve(__dirname, 'app/types/*'), + UI: path.resolve(__dirname, 'app/components/ui'), + 'UI/*': path.resolve(__dirname, 'app/components/ui/*'), + Duck: path.resolve(__dirname, 'app/duck'), + 'Duck/*': path.resolve(__dirname, 'app/duck/*'), + HOCs: path.resolve(__dirname, 'app/components/hocs'), + 'HOCs/*': path.resolve(__dirname, 'app/components/hocs/*'), + Shared: path.resolve(__dirname, 'app/components/shared'), + 'Shared/*': path.resolve(__dirname, 'app/components/shared/*'), + Player: path.resolve(__dirname, 'app/player'), + 'Player/*': path.resolve(__dirname, 'app/player/*'), + 'react/jsx-runtime.js': 'react/jsx-runtime', + 'react/jsx-dev-runtime.js': 'react/jsx-dev-runtime', +}; From de88092502e3e1a8911c89eebc2c0121eaa2b0de Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Thu, 4 Aug 2022 12:20:40 +0200 Subject: [PATCH 2/4] change(ui) - recharts update --- frontend/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/package.json b/frontend/package.json index d82ada89d..74d2acb03 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -58,7 +58,7 @@ "react-tippy": "^1.4.0", "react-toastify": "^9.0.3", "react-virtualized": "^9.22.3", - "recharts": "^2.1.10", + "recharts": "^2.1.13", "redux": "^4.0.5", "redux-immutable": "^4.0.0", "redux-thunk": "^2.3.0", From 7474db30fda2d137dbf4aed6d6974c1f05a623bd Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Thu, 4 Aug 2022 14:02:23 +0200 Subject: [PATCH 3/4] change(ui) - lib updates --- frontend/app/initialize.js | 4 +++- frontend/package.json | 6 +++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/frontend/app/initialize.js b/frontend/app/initialize.js index 3ca4972ac..d6dc1c2a8 100644 --- a/frontend/app/initialize.js +++ b/frontend/app/initialize.js @@ -17,7 +17,9 @@ document.addEventListener('DOMContentLoaded', () => { - + {/* */} + + {/* */} diff --git a/frontend/package.json b/frontend/package.json index 74d2acb03..22c97528f 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -33,13 +33,13 @@ "luxon": "^1.24.1", "mobx": "^6.3.8", "mobx-react-lite": "^3.1.6", - "moment": "^2.29.2", - "moment-range": "^3.0.3", + "moment": "^2.29.4", + "moment-range": "^4.0.2", "peerjs": "1.3.2", "rc-time-picker": "^3.7.3", "react": "^18.2.0", "react-circular-progressbar": "^2.1.0", - "react-confirm": "^0.1.27", + "react-confirm": "^0.2.3", "react-date-range": "^1.4.0", "react-daterange-picker": "^2.0.1", "react-dnd": "^16.0.1", From 7f048731d2709cc2602e81a289c00c4519e6e702 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Wed, 14 Sep 2022 19:01:17 +0530 Subject: [PATCH 4/4] fix(ui) - date picker --- .../app/components/shared/SelectDateRange/SelectDateRange.tsx | 3 ++- frontend/app/initialize.js | 1 - 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx index 7eaabc252..e7d8c8831 100644 --- a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx +++ b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx @@ -40,6 +40,7 @@ function SelectDateRange(props: Props) { const isCustomRange = period.rangeName === CUSTOM_RANGE; const customRange = isCustomRange ? period.rangeFormatted() : ''; + return (