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/components/floating_action_button.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { defineMessages, injectIntl } from 'react-intl'
 import { me } from '../initial_state'
-import { getWindowDimension } from '../utils/is_mobile'
 import {
   CX,
   MODAL_COMPOSE,
@@ -12,31 +11,10 @@ import {
 import { openModal } from '../actions/modal'
 import Button from './button'
 
-const initialState = getWindowDimension()
-
 class FloatingActionButton extends React.PureComponent {
 
-  state = {
-    width: initialState.width,
-  }
-
-  componentDidMount() {
-    this.handleResize()
-    window.addEventListener('resize', this.handleResize, false)
-  }
-
-  handleResize = () => {
-    const { width } = getWindowDimension()
-    this.setState({ width })
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize, false)
-  }
-
   render() {
-    const { intl, onOpenCompose } = this.props
+    const { intl, onOpenCompose, state, width } = this.props
-    const { width } = this.state
 
     if (!me) return null
 
@@ -78,6 +56,10 @@ const messages = defineMessages({
   gab: { id: 'gab', defaultMessage: 'Gab' }, 
 })
 
+const mapStateToProps = (state) => ({
+  width: state.getIn(['settings', 'window_dimensions', 'width']),
+})
+
 const mapDispatchToProps = (dispatch) => ({
   onOpenCompose: () => dispatch(openModal(MODAL_COMPOSE)),
 })
@@ -87,4 +69,4 @@ FloatingActionButton.propTypes = {
   onOpenCompose: PropTypes.func.isRequired,
 }
 
-export default injectIntl(connect(null, mapDispatchToProps)(FloatingActionButton))
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(FloatingActionButton))

app/javascript/gabsocial/components/modal/modal_base.js

@@ -2,7 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { injectIntl, defineMessages } from 'react-intl'
-import { getWindowDimension } from '../../utils/is_mobile'
 import { openModal } from '../../actions/modal'
 import { cancelReplyCompose } from '../../actions/compose'
 import {
@@ -10,13 +9,10 @@ import {
   BREAKPOINT_EXTRA_SMALL,
 } from '../../constants'
 
-const initialState = getWindowDimension()
-
 class ModalBase extends React.PureComponent {
 
   state = {
     revealed: !!this.props.children,
-    width: initialState.width,
   }
 
   activeElement = this.state.revealed ? document.activeElement : null
@@ -45,9 +41,7 @@ class ModalBase extends React.PureComponent {
   }
 
   componentDidMount() {
-    this.handleResize()
     window.addEventListener('keyup', this.handleKeyUp, false)
-    window.addEventListener('resize', this.handleResize, false)
   }
 
   componentWillReceiveProps(nextProps) {
@@ -77,15 +71,8 @@ class ModalBase extends React.PureComponent {
     }
   }
 
-  handleResize = () => {
-    const { width } = getWindowDimension()
-
-    this.setState({ width })
-  }
-
   componentWillUnmount() {
     window.removeEventListener('keyup', this.handleKeyUp)
-    window.removeEventListener('resize', this.handleResize, false)
   }
 
   getSiblings = () => {
@@ -101,8 +88,7 @@ class ModalBase extends React.PureComponent {
   }
 
   render() {
-    const { children, isCenteredXS } = this.props
+    const { children, isCenteredXS, width } = this.props
-    const { width } = this.state
 
     const isXS = width <= BREAKPOINT_EXTRA_SMALL
     const visible = !!children
@@ -163,6 +149,7 @@ const messages = defineMessages({
 const mapStateToProps = (state) => ({
   composeId: state.getIn(['compose', 'id']),
   composeText: state.getIn(['compose', 'text']),
+  width: state.getIn(['settings', 'window_dimensions', 'width']),
 })
 
 const mapDispatchToProps = (dispatch) => ({

app/javascript/gabsocial/components/panel/trends_rss_panel.js

@@ -9,21 +9,17 @@ import {
   CX,
   BREAKPOINT_EXTRA_SMALL,
 } from '../../constants'
-import { getWindowDimension } from '../../utils/is_mobile'
 import PanelLayout from './panel_layout'
 import TrendsCard from '../trends_card'
 import Button from '../button'
 import LoadMore from '../load_more'
 import ScrollableList from '../scrollable_list'
 
-const initialState = getWindowDimension()
-
 class TrendsRSSPanel extends ImmutablePureComponent {
 
   state = {
     viewType: 0,
     fetched: false,
-    isXS: initialState.width <= BREAKPOINT_EXTRA_SMALL,
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -47,20 +43,11 @@ class TrendsRSSPanel extends ImmutablePureComponent {
       this.setState({ fetched: true })
     }
 
-    this.handleResize()
     window.addEventListener('keyup', this.handleKeyUp, false)
-    window.addEventListener('resize', this.handleResize, false)
-  }
-
-  handleResize = () => {
-    const { width } = getWindowDimension()
-
-    this.setState({ isXS: width <= BREAKPOINT_EXTRA_SMALL })
   }
 
   componentWillUnmount() {
     window.removeEventListener('keyup', this.handleKeyUp)
-    window.removeEventListener('resize', this.handleResize, false)
   }
 
   onItemViewClick = () => {
@@ -79,13 +66,14 @@ class TrendsRSSPanel extends ImmutablePureComponent {
       items,
       hideReadMore,
       feed,
+      width,
     } = this.props
     const {
       fetched,
       viewType,
-      isXS,
     } = this.state
 
+    const isXS = width <= BREAKPOINT_EXTRA_SMALL
     const count = !!items ? items.count() : 0
     if (count === 0 && fetched) return null
     const hasMore = count % 10 === 0
@@ -129,6 +117,7 @@ const mapStateToProps = (state, { trendsRSSId }) => ({
   isLoading: state.getIn(['news', 'trends_feeds', `${trendsRSSId}`, 'isLoading'], false),
   isFetched: state.getIn(['news', 'trends_feeds', `${trendsRSSId}`, 'isFetched'], false),
   items: state.getIn(['news', 'trends_feeds', `${trendsRSSId}`, 'items'], ImmutableList()),
+  width: state.getIn(['settings', 'window_dimensions', 'width']),
 })
 
 TrendsRSSPanel.propTypes = {

app/javascript/gabsocial/components/popover/popover_root.js

@@ -54,15 +54,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { closePopover } from '../../actions/popover'
-import { getWindowDimension } from '../../utils/is_mobile'
 import Bundle from '../../features/ui/util/bundle'
 import ModalBase from '../modal/modal_base'
 import PopoverBase from './popover_base'
 import ErrorPopover from './error_popover'
 import LoadingPopover from './loading_popover'
 
-const initialState = getWindowDimension()
-
 const POPOVER_COMPONENTS = {
   [POPOVER_CHAT_CONVERSATION_EXPIRATION_OPTIONS]: ChatConversationExpirationOptionsPopover,
   [POPOVER_CHAT_CONVERSATION_OPTIONS]: ChatConversationOptionsPopover,
@@ -91,22 +88,8 @@ const POPOVER_COMPONENTS = {
 
 class PopoverRoot extends React.PureComponent {
 
-  state = {
-    width: initialState.width,
-  }
-
-  componentDidMount() {
-    this.handleResize()
-    window.addEventListener('resize', this.handleResize, false)
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize, false)
-  }
-
   componentDidUpdate() {
-    const { type } = this.props
+    const { type, width } = this.props
-    const { width } = this.state
 
     if (width <= BREAKPOINT_EXTRA_SMALL && !!type) {
       document.body.classList.add(_s.overflowYHidden)
@@ -115,21 +98,15 @@ class PopoverRoot extends React.PureComponent {
     }
   }
 
-  handleResize = () => {
-    const { width } = getWindowDimension()
-
-    this.setState({ width })
-  }
-
   renderLoading = () => {
-    const { width } = this.state
+    const { width } = this.props
     const isXS = width <= BREAKPOINT_EXTRA_SMALL
 
     return <LoadingPopover isXS={isXS} onClose={this.props.onClose} />
   }
 
   renderError = () => {
-    const { width } = this.state
+    const { width } = this.props
     const isXS = width <= BREAKPOINT_EXTRA_SMALL
 
     return <ErrorPopover isXS={isXS} onClose={this.props.onClose} />
@@ -140,8 +117,7 @@ class PopoverRoot extends React.PureComponent {
   }
 
   render() {
-    const { type, props, onClose } = this.props
+    const { type, props, onClose, width } = this.props
-    const { width } = this.state
 
     const visible = !!type
 
@@ -181,6 +157,7 @@ class PopoverRoot extends React.PureComponent {
 const mapStateToProps = (state) => ({
   type: state.getIn(['popover', 'popoverType']),
   props: state.getIn(['popover', 'popoverProps'], {}),
+  width: state.getIn(['settings', 'window_dimensions', 'width']),  
 })
 
 const mapDispatchToProps = (dispatch) => ({

app/javascript/gabsocial/components/pull_to_refresher.js

@@ -1,20 +1,17 @@
 import React from 'react'
 import ReactDOMServer from 'react-dom/server'
+import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import PullToRefresh from 'pulltorefreshjs'
 import moment from 'moment-mini'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
-import { getWindowDimension } from '../utils/is_mobile'
 import Responsive from '../features/ui//util/responsive_component'
 import Text from './text'
 
-const initialState = getWindowDimension()
-
 class PullToRefresher extends React.PureComponent {
 
   state = {
     lastRefreshDate: null,
-    width: initialState.width,
   }
 
   componentDidMount() {
@@ -24,10 +21,7 @@ class PullToRefresher extends React.PureComponent {
     return
     
     if (this.props.isDisabled) return
-    if (this.state.width > BREAKPOINT_EXTRA_SMALL) return
+    if (this.props.width > BREAKPOINT_EXTRA_SMALL) return
-
-    this.handleResize()
-    window.addEventListener('resize', this.handleResize, false)
 
     const textProps = {
       color: 'secondary',
@@ -58,13 +52,6 @@ class PullToRefresher extends React.PureComponent {
 
   handleDestroy() {
     PullToRefresh.destroyAll()
-    window.removeEventListener('resize', this.handleResize, false)
-  }
-
-  handleResize = () => {
-    const { width } = getWindowDimension()
-
-    this.setState({ width })
   }
 
   handleOnRefresh = () => {
@@ -92,9 +79,13 @@ class PullToRefresher extends React.PureComponent {
 
 }
 
+const mapStateToProps = (state) => ({
+  width: state.getIn(['settings', 'window_dimensions', 'width']),
+})
+  
 PullToRefresher.propTypes = {
   onRefresh: PropTypes.func,
   isDisabled: PropTypes.bool,
 }
 
-export default PullToRefresher
+export default connect(mapStateToProps)(PullToRefresher)

app/javascript/gabsocial/components/timeline_injections/timeline_injection_root.js

@@ -20,11 +20,9 @@ import {
 
 import React from 'react'
 import PropTypes from 'prop-types'
-import { getWindowDimension } from '../../utils/is_mobile'
+import { connect } from 'react-redux'
 import Bundle from '../../features/ui/util/bundle'
 
-const initialState = getWindowDimension()
-
 const INJECTION_COMPONENTS = {}
 INJECTION_COMPONENTS[TIMELINE_INJECTION_FEATURED_GROUPS] = FeaturedGroupsInjection
 INJECTION_COMPONENTS[TIMELINE_INJECTION_GROUP_CATEGORIES] = GroupCategoriesInjection
@@ -36,24 +34,6 @@ INJECTION_COMPONENTS[TIMELINE_INJECTION_USER_SUGGESTIONS] = UserSuggestionsInjec
 
 class TimelineInjectionRoot 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 })
-  }
-
   renderLoading = () => {
     return <div />
   }
@@ -63,8 +43,7 @@ class TimelineInjectionRoot extends React.PureComponent {
   }
 
   render() {
-    const { props, type } = this.props
+    const { props, type, width } = this.props
-    const { width } = this.state
 
     const visible = !!type
 
@@ -100,6 +79,10 @@ class TimelineInjectionRoot extends React.PureComponent {
 
 }
 
+const mapStateToProps = (state) => ({
+  width: state.getIn(['settings', 'window_dimensions', 'width']),
+})
+  
 TimelineInjectionRoot.propTypes = {
   type: PropTypes.string,
   props: PropTypes.object,
@@ -109,4 +92,4 @@ TimelineInjectionRoot.defaultProps = {
   props: {},
 }
 
-export default TimelineInjectionRoot
+export default connect(mapStateToProps)(TimelineInjectionRoot)

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 { children, isSmall, width } = this.props
-    const { lazyLoaded, width } = this.state
+    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'
+import { connect } from 'react-redux'
-
-const initialState = getWindowDimension()
 
 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 { children, min, max, width } = this.props
-    const { width } = this.state
 
     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)

app/javascript/gabsocial/layouts/deck_layout.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
 import {
   CX,
   BREAKPOINT_EXTRA_SMALL,
@@ -9,33 +10,11 @@ import Button from '../components/button'
 import Text from '../components/text'
 import DeckSidebar from '../components/sidebar/deck_sidebar'
 import WrappedBundle from '../features/ui/util/wrapped_bundle'
-import { getWindowDimension } from '../utils/is_mobile'
-
-const initialState = getWindowDimension()
 
 class DeckLayout 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 { children, title } = this.props
+    const { children, title, width } = this.props
-    const { width } = this.state
 
     const isXS = width <= BREAKPOINT_EXTRA_SMALL
 
@@ -73,8 +52,12 @@ class DeckLayout extends React.PureComponent {
 
 }
 
+const mapStateToProps = (state) => ({
+  width: state.getIn(['settings', 'window_dimensions', 'width']),
+})
+
 DeckLayout.propTypes = {
   title: PropTypes.string,
 }
 
-export default DeckLayout
+export default connect(mapStateToProps)(DeckLayout)

app/javascript/gabsocial/layouts/messages_layout.js

@@ -10,7 +10,6 @@ import {
   POPOVER_CHAT_SETTINGS,
   MODAL_CHAT_CONVERSATION_CREATE,
 } from '../constants'
-import { getWindowDimension } from '../utils/is_mobile'
 import Layout from './layout'
 import Responsive from '../features/ui/util/responsive_component'
 import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
@@ -23,28 +22,8 @@ import ChatMessageScrollingList from '../features/messages/components/chat_messa
 import ChatMessageComposeForm from '../features/messages/components/chat_message_compose_form'
 import ChatConversationRequestApproveBar from '../features/messages/components/chat_conversation_request_approve_bar'
 
-const initialState = getWindowDimension()
-
 class MessagesLayout 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 })
-  }
-
   handleOpenSettingsOptionsPopover = () => {
     this.props.onOpenSettingsOptionsPopover()
   }
@@ -55,6 +34,7 @@ class MessagesLayout extends React.PureComponent {
 
   render() {
     const {
+      width,
       title,
       children,
       isSettings,
@@ -63,7 +43,6 @@ class MessagesLayout extends React.PureComponent {
       currentConversationIsRequest,
       selectedChatConversationId,
     } = this.props
-    const { width } = this.state
 
     const isXS = width <= BREAKPOINT_EXTRA_SMALL
 
@@ -184,6 +163,7 @@ const mapStateToProps = (state) => {
   return {
     selectedChatConversationId,
     currentConversationIsRequest,
+    width: state.getIn(['settings', 'window_dimensions', 'width']),
   }
 }
 

app/javascript/gabsocial/pages/compose_page.js

@@ -1,38 +1,22 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
 import PageTitle from '../features/ui/util/page_title'
 import ComposeLayout from '../layouts/compose_layout'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
-import { getWindowDimension } from '../utils/is_mobile'
-
-const initialState = getWindowDimension()
 
 class ComposePage extends React.PureComponent {
 
-  state = {
-    width: initialState.width,
-  }
-
   componentDidMount() {
-    this.handleResize()
     window.addEventListener('keyup', this.handleKeyUp, false)
-    window.addEventListener('resize', this.handleResize, false)
-  }
-
-  handleResize = () => {
-    const { width } = getWindowDimension()
-
-    this.setState({ width })
   }
 
   componentWillUnmount() {
     window.removeEventListener('keyup', this.handleKeyUp)
-    window.removeEventListener('resize', this.handleResize, false)
   }
 
   render() {
-    const { children } = this.props
+    const { children, width } = this.props
-    const { width } = this.state
 
     const isXS = width <= BREAKPOINT_EXTRA_SMALL
 
@@ -46,8 +30,12 @@ class ComposePage extends React.PureComponent {
 
 }
 
+const mapStateToProps = (state) => ({
+  width: state.getIn(['settings', 'window_dimensions', 'width']),
+})
+
 ComposePage.propTypes = {
   children: PropTypes.node.isRequired,
 }
 
-export default ComposePage
+export default connect(mapStateToProps)(ComposePage)