Merge pull request #660 from votdev/issue_7036_handle_resize

All components handle window resizing events incorrectly
longhorn · Nov 13, 2023 · 0b54117 · 0b54117
2 parents 1b75d71 + d19bd84
commit 0b54117
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 101 deletions.
diff --git a/src/routes/backingImage/index.js b/src/routes/backingImage/index.js
@@ -22,17 +22,19 @@ class BackingImage extends React.Component {
   }
 
   componentDidMount() {
-    let height = document.getElementById('backingImageTable').offsetHeight - C.ContainerMarginHeight
+    this.onResize()
+    window.addEventListener('resize', this.onResize)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.onResize)
+  }
+
+  onResize = () => {
+    const height = document.getElementById('backingImageTable').offsetHeight - C.ContainerMarginHeight
     this.setState({
       height,
     })
-    window.onresize = () => {
-      height = document.getElementById('backingImageTable').offsetHeight - C.ContainerMarginHeight
-      this.setState({
-        height,
-      })
-      this.props.dispatch({ type: 'app/changeNavbar' })
-    }
   }
 
   uploadFile = (file, record) => {

diff --git a/src/routes/backup/BackupList.js b/src/routes/backup/BackupList.js
@@ -54,23 +54,19 @@ class List extends React.Component {
   }
 
   componentDidMount() {
-    let height = document.getElementById('backDetailTable').offsetHeight - C.ContainerMarginHeight
-    this.setState({
-      height,
-    })
-    window.onresize = () => {
-      height = document.getElementById('backDetailTable').offsetHeight - C.ContainerMarginHeight
-      this.setState({
-        height,
-      })
-      this.props.dispatch({ type: 'app/changeNavbar' })
-    }
+    this.onResize()
+    window.addEventListener('resize', this.onResize)
   }
 
   componentWillUnmount() {
-    window.onresize = () => {
-      this.props.dispatch({ type: 'app/changeNavbar' })
-    }
+    window.removeEventListener('resize', this.onResize)
+  }
+
+  onResize = () => {
+    const height = document.getElementById('backDetailTable').offsetHeight - C.ContainerMarginHeight
+    this.setState({
+      height,
+    })
   }
 
   fomartData = (data, key) => {

diff --git a/src/routes/backup/BackupVolumeList.js b/src/routes/backup/BackupVolumeList.js
@@ -22,29 +22,25 @@ class List extends React.Component {
   }
 
   componentDidMount() {
-    let height = document.getElementById('backTable').offsetHeight - C.ContainerMarginHeight
-    this.setState({
-      height,
-    })
-    window.onresize = () => {
-      height = document.getElementById('backTable').offsetHeight - C.ContainerMarginHeight
-      this.setState({
-        height,
-      })
-      this.props.dispatch({ type: 'app/changeNavbar' })
-    }
+    this.onResize()
+    window.addEventListener('resize', this.onResize)
     window.addEventListener('keydown', this.onkeydown)
     window.addEventListener('keyup', this.onkeyup)
   }
 
   componentWillUnmount() {
-    window.onresize = () => {
-      this.props.dispatch({ type: 'app/changeNavbar' })
-    }
+    window.removeEventListener('resize', this.onResize)
     window.removeEventListener('keydown', this.onkeydown)
     window.removeEventListener('keyup', this.onkeyup)
   }
 
+  onResize = () => {
+    const height = document.getElementById('backTable').offsetHeight - C.ContainerMarginHeight
+    this.setState({
+      height,
+    })
+  }
+
   fomartData = (data, key) => {
     if (this.isJson(data)) {
       let obj = JSON.parse(data)

diff --git a/src/routes/host/HostList.js b/src/routes/host/HostList.js
@@ -33,17 +33,8 @@ class List extends React.Component {
   }
 
   componentDidMount() {
-    let height = document.getElementById('hostTable').offsetHeight - C.ContainerMarginHeight
-    this.setState({
-      height,
-    })
-    window.onresize = () => {
-      height = document.getElementById('hostTable').offsetHeight - C.ContainerMarginHeight
-      this.setState({
-        height,
-      })
-      this.props.dispatch({ type: 'app/changeNavbar' })
-    }
+    this.onResize()
+    window.addEventListener('resize', this.onResize)
     window.addEventListener('keydown', this.onkeydown)
     window.addEventListener('keyup', this.onkeyup)
   }
@@ -57,9 +48,14 @@ class List extends React.Component {
     })
     window.removeEventListener('keydown', this.onkeydown)
     window.removeEventListener('keyup', this.onkeyup)
-    window.onresize = () => {
-      this.props.dispatch({ type: 'app/changeNavbar' })
-    }
+    window.removeEventListener('resize', this.onResize)
+  }
+
+  onResize = () => {
+    const height = document.getElementById('hostTable').offsetHeight - C.ContainerMarginHeight
+    this.setState({
+      height,
+    })
   }
 
   onkeyup = () => {

diff --git a/src/routes/instanceManager/index.js b/src/routes/instanceManager/index.js
@@ -21,17 +21,19 @@ class InstanceManager extends React.Component {
   }
 
   componentDidMount() {
-    let height = document.getElementById('instanceManagerTable').offsetHeight - C.ContainerMarginHeight
+    this.onResize()
+    window.addEventListener('resize', this.onResize)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.onResize)
+  }
+
+  onResize = () => {
+    const height = document.getElementById('instanceManagerTable').offsetHeight - C.ContainerMarginHeight
     this.setState({
       height,
     })
-    window.onresize = () => {
-      height = document.getElementById('instanceManagerTable').offsetHeight - C.ContainerMarginHeight
-      this.setState({
-        height,
-      })
-      this.props.dispatch({ type: 'app/changeNavbar' })
-    }
   }
 
   render() {

diff --git a/src/routes/orphanedData/index.js b/src/routes/orphanedData/index.js
@@ -21,17 +21,19 @@ class OrphanedData extends React.Component {
   }
 
   componentDidMount() {
-    let height = document.getElementById('orphanedDataTable').offsetHeight - C.ContainerMarginHeight
+    this.onResize()
+    window.addEventListener('resize', this.onResize)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.onResize)
+  }
+
+  onResize = () => {
+    const height = document.getElementById('orphanedDataTable').offsetHeight - C.ContainerMarginHeight
     this.setState({
       height,
     })
-    window.onresize = () => {
-      height = document.getElementById('orphanedDataTable').offsetHeight - C.ContainerMarginHeight
-      this.setState({
-        height,
-      })
-      this.props.dispatch({ type: 'app/changeNavbar' })
-    }
   }
 
   onResourceTypeChange = () => {

diff --git a/src/routes/recurringJob/index.js b/src/routes/recurringJob/index.js
@@ -30,17 +30,19 @@ class RecurringJob extends React.Component {
   }
 
   componentDidMount() {
-    let height = document.getElementById('recurringJobTable').offsetHeight - C.ContainerMarginHeight
+    this.onResize()
+    window.addEventListener('resize', this.onResize)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.onResize)
+  }
+
+  onResize = () => {
+    const height = document.getElementById('recurringJobTable').offsetHeight - C.ContainerMarginHeight
     this.setState({
       height,
     })
-    window.onresize = () => {
-      height = document.getElementById('recurringJobTable').offsetHeight - C.ContainerMarginHeight
-      this.setState({
-        height,
-      })
-      this.props.dispatch({ type: 'app/changeNavbar' })
-    }
   }
 
   showCreateRecurringJobModal =() => {

diff --git a/src/routes/systemBackups/index.js b/src/routes/systemBackups/index.js
@@ -29,26 +29,24 @@ class SystemBackups extends React.Component {
   }
 
   componentDidMount() {
-    let systemBackupsHeight = document.getElementById('systemBackupsTable').offsetHeight - C.ContainerMarginHeight - 60
-    let systemRestoresHeight = document.getElementById('systemRestoresTable').offsetHeight - C.ContainerMarginHeight + 5
+    this.onResize()
+    window.addEventListener('resize', this.onResize)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.onResize)
+  }
+
+  onResize = () => {
+    const systemBackupsHeight = document.getElementById('systemBackupsTable').offsetHeight - C.ContainerMarginHeight - 60
+    const systemRestoresHeight = document.getElementById('systemRestoresTable').offsetHeight - C.ContainerMarginHeight + 5
     this.setState({
       ...this.state,
       systemBackupsHeight,
       systemRestoresHeight,
     })
-    window.onresize = () => {
-      systemBackupsHeight = document.getElementById('systemBackupsTable').offsetHeight - C.ContainerMarginHeight - 60
-      systemRestoresHeight = document.getElementById('systemRestoresTable').offsetHeight - C.ContainerMarginHeight + 5
-      this.setState({
-        ...this.state,
-        systemBackupsHeight,
-        systemRestoresHeight,
-      })
-      this.props.dispatch({ type: 'app/changeNavbar' })
-    }
   }
 
-
   render() {
     const { loading, dispatch, location } = this.props
     const me = this

diff --git a/src/routes/volume/index.js b/src/routes/volume/index.js
@@ -71,29 +71,25 @@ class Volume extends React.Component {
   }
 
   componentDidMount() {
-    let height = document.getElementById('volumeTable').offsetHeight - C.ContainerMarginHeight
-    this.setState({
-      height,
-    })
-    window.onresize = () => {
-      height = document.getElementById('volumeTable').offsetHeight - C.ContainerMarginHeight
-      this.setState({
-        height,
-      })
-      this.props.dispatch({ type: 'app/changeNavbar' })
-    }
+    this.onResize()
+    window.addEventListener('resize', this.onResize)
     window.addEventListener('keydown', this.onkeydown)
     window.addEventListener('keyup', this.onkeyup)
   }
 
   componentWillUnmount() {
-    window.onresize = () => {
-      this.props.dispatch({ type: 'app/changeNavbar' })
-    }
+    window.removeEventListener('resize', this.onResize)
     window.removeEventListener('keydown', this.onkeydown)
     window.removeEventListener('keyup', this.onkeyup)
   }
 
+  onResize = () => {
+    const height = document.getElementById('volumeTable').offsetHeight - C.ContainerMarginHeight
+    this.setState({
+      height,
+    })
+  }
+
   onkeyup = () => {
     this.setState({
       ...this.state,