Updated all components that implement window resize to use redux dimensions

• Updated:
- all components that implement window resize to use redux dimensions

app/javascript/gabsocial/features/compose/components/compose_extra_button_list.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
 import {
   CX,
   BREAKPOINT_EXTRA_SMALL,
@@ -15,35 +16,17 @@ import ExpiresPostButton from './expires_post_button'
 import RichTextEditorButton from './rich_text_editor_button'
 import StatusVisibilityButton from './status_visibility_button'
 import UploadButton from './media_upload_button'
-import { getWindowDimension } from '../../../utils/is_mobile'
-
-const initialState = getWindowDimension()
  
 class ComposeExtraButtonList extends React.PureComponent {
 
-  state = {
-    height: initialState.height,
-    width: initialState.width,
-  }
-
   componentDidMount() {
-    this.handleResize()
     window.addEventListener('keyup', this.handleKeyUp, false)
-    window.addEventListener('resize', this.handleResize, false)
-  }
-
-  handleResize = () => {
-    const { height, width } = getWindowDimension()
-
-    this.setState({ height, width })
   }
 
   componentWillUnmount() {
     window.removeEventListener('keyup', this.handleKeyUp)
-    window.removeEventListener('resize', this.handleResize, false)
   }
     
-
   render() {
     const {
       isMatch,
@@ -51,8 +34,9 @@ class ComposeExtraButtonList extends React.PureComponent {
       hidePro,
       isModal,
       formLocation,
+      width,
+      height,
     } = this.props
-    const { height, width } = this.state
 
     const isXS = width <= BREAKPOINT_EXTRA_SMALL
     const isStandalone = formLocation === 'standalone'
@@ -92,6 +76,11 @@ class ComposeExtraButtonList extends React.PureComponent {
     )
   }
 }
+
+const mapStateToProps = (state) => ({
+  width: state.getIn(['settings', 'window_dimensions', 'width']),
+  height: state.getIn(['settings', 'window_dimensions', 'height']),
+})
   
 ComposeExtraButtonList.propTypes = {
   hidePro: PropTypes.bool,
@@ -101,4 +90,4 @@ ComposeExtraButtonList.propTypes = {
   formLocation: PropTypes.string,
 }
 
-export default ComposeExtraButtonList
+export default connect(mapStateToProps)(ComposeExtraButtonList)

app/javascript/gabsocial/features/news.js

@@ -21,15 +21,11 @@ import {
   TrendsHeadlinesPanel,
   TrendsRSSPanel,
 } from './ui/util/async_components'
-import { getWindowDimension } from '../utils/is_mobile'
-
-const initialState = getWindowDimension()
 
 class News extends React.PureComponent {
 
   state = {
     lazyLoaded: false,
-    width: initialState.width,
   }
 
   componentDidMount() {
@@ -38,21 +34,12 @@ class News extends React.PureComponent {
 
     this.window.addEventListener('scroll', this.handleScroll)
     
-    this.handleResize()
     window.addEventListener('keyup', this.handleKeyUp, false)
-    window.addEventListener('resize', this.handleResize, false)
   }
 
   componentWillUnmount() {
     this.detachScrollListener()
     window.removeEventListener('keyup', this.handleKeyUp)
-    window.removeEventListener('resize', this.handleResize, false)
-  }
-
-  handleResize = () => {
-    const { width } = getWindowDimension()
-
-    this.setState({ width })
   }
 
   detachScrollListener = () => {
@@ -71,8 +58,8 @@ class News extends React.PureComponent {
   }, 150, { trailing: true })
 
   render() {
-    const { children, isSmall } = this.props
-    const { lazyLoaded, width } = this.state
+    const { children, isSmall, width } = this.props
+    const { lazyLoaded } = this.state
 
     const isXS = width <= BREAKPOINT_EXTRA_SMALL
 
@@ -113,8 +100,12 @@ class News extends React.PureComponent {
 
 }
 
+const mapStateToProps = (state) => ({
+  width: state.getIn(['settings', 'window_dimensions', 'width']),
+})
+
 News.propTypes = {
   isSmall: PropTypes.bool,
 }
 
-export default News
+export default connect(mapStateToProps)(News)

app/javascript/gabsocial/features/ui/util/responsive_classes_component.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
 import {
   BREAKPOINT_EXTRA_LARGE,
   BREAKPOINT_LARGE,
@@ -7,33 +8,12 @@ import {
   BREAKPOINT_SMALL,
   BREAKPOINT_EXTRA_SMALL,
 } from '../../../constants'
-import { getWindowDimension } from '../../../utils/is_mobile'
-
-const initialState = getWindowDimension()
 
 class ResponsiveClassesComponent extends React.PureComponent {
 
-  state = {
-    width: initialState.width,
-  }
-
-  componentDidMount() {
-    this.handleResize()
-    window.addEventListener('resize', this.handleResize, false)
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize, false)
-  }
-
-  handleResize = () => {
-    const { width } = getWindowDimension()
-
-    this.setState({ width })
-  }
-
   render() {
     const {
+      width,
       children,
       classNames,
       classNamesXL,
@@ -42,7 +22,6 @@ class ResponsiveClassesComponent extends React.PureComponent {
       classNamesSmall,
       classNamesXS,
     } = this.props
-    const { width } = this.state
 
     let classes;
     if (width >= BREAKPOINT_EXTRA_LARGE) {
@@ -68,6 +47,10 @@ class ResponsiveClassesComponent extends React.PureComponent {
 
 }
 
+const mapStateToProps = (state) => ({
+  width: state.getIn(['settings', 'window_dimensions', 'width']),
+})
+
 ResponsiveClassesComponent.propTypes = {
   classNames: PropTypes.string,
   classNamesXL: PropTypes.string,
@@ -77,4 +60,4 @@ ResponsiveClassesComponent.propTypes = {
   classNamesXS: PropTypes.string,
 }
 
-export default ResponsiveClassesComponent
+export default connect(mapStateToProps)(ResponsiveClassesComponent)

app/javascript/gabsocial/features/ui/util/responsive_component.js

@@ -1,37 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { getWindowDimension } from '../../../utils/is_mobile'
-
-const initialState = getWindowDimension()
+import { connect } from 'react-redux'
 
 class Responsive extends React.PureComponent {
 
-  state = {
-    width: initialState.width,
-  }
-
-  componentDidMount() {
-    this.handleResize()
-    window.addEventListener('resize', this.handleResize, false)
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize, false)
-  }
-
-  handleResize = () => {
-    const { width } = getWindowDimension()
-
-    this.setState({ width })
-  }
-
   shouldRender = (min, max, width) => {
     return width > min && width < max
   }
 
   render() {
-    const { children, min, max } = this.props
-    const { width } = this.state
+    const { children, min, max, width } = this.props
 
     const shouldRender = this.shouldRender(min, max, width)
 
@@ -40,6 +18,10 @@ class Responsive extends React.PureComponent {
 
 }
 
+const mapStateToProps = (state) => ({
+  width: state.getIn(['settings', 'window_dimensions', 'width']),
+})
+
 Responsive.propTypes = {
   min: PropTypes.number,
   max: PropTypes.number,
@@ -50,4 +32,4 @@ Responsive.defaultProps = {
   max: Infinity,
 }
 
-export default Responsive
+export default connect(mapStateToProps)(Responsive)