From 152e59a66fe7bbdf3a2dcbc2787e2bb4f30aeb83 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Fri, 8 Jan 2021 00:15:53 -0500
Subject: [PATCH] Updated all components that implement window resize to use
redux dimensions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
• Updated:
- all components that implement window resize to use redux dimensions
---
.../components/floating_action_button.js | 30 ++++-------------
.../gabsocial/components/modal/modal_base.js | 17 ++--------
.../components/panel/trends_rss_panel.js | 17 ++--------
.../components/popover/popover_root.js | 33 +++----------------
.../gabsocial/components/pull_to_refresher.js | 23 ++++---------
.../timeline_injection_root.js | 31 ++++-------------
.../components/compose_extra_button_list.js | 29 +++++-----------
app/javascript/gabsocial/features/news.js | 23 ++++---------
.../ui/util/responsive_classes_component.js | 31 ++++-------------
.../features/ui/util/responsive_component.js | 32 ++++--------------
.../gabsocial/layouts/deck_layout.js | 31 ++++-------------
.../gabsocial/layouts/messages_layout.js | 24 ++------------
.../gabsocial/pages/compose_page.js | 26 ++++-----------
13 files changed, 76 insertions(+), 271 deletions(-)
diff --git a/app/javascript/gabsocial/components/floating_action_button.js b/app/javascript/gabsocial/components/floating_action_button.js
index 6653591e..13707c6a 100644
--- a/app/javascript/gabsocial/components/floating_action_button.js
+++ b/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 { width } = this.state
+ const { intl, onOpenCompose, state, width } = this.props
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))
\ No newline at end of file
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(FloatingActionButton))
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/modal/modal_base.js b/app/javascript/gabsocial/components/modal/modal_base.js
index 6ba5824c..3a1b2de5 100644
--- a/app/javascript/gabsocial/components/modal/modal_base.js
+++ b/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 { width } = this.state
+ const { children, isCenteredXS, width } = this.props
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) => ({
diff --git a/app/javascript/gabsocial/components/panel/trends_rss_panel.js b/app/javascript/gabsocial/components/panel/trends_rss_panel.js
index 6b107aa0..52211bad 100644
--- a/app/javascript/gabsocial/components/panel/trends_rss_panel.js
+++ b/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 = {
diff --git a/app/javascript/gabsocial/components/popover/popover_root.js b/app/javascript/gabsocial/components/popover/popover_root.js
index 641689eb..67d27676 100644
--- a/app/javascript/gabsocial/components/popover/popover_root.js
+++ b/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 { width } = this.state
+ const { type, width } = this.props
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
}
renderError = () => {
- const { width } = this.state
+ const { width } = this.props
const isXS = width <= BREAKPOINT_EXTRA_SMALL
return
@@ -140,8 +117,7 @@ class PopoverRoot extends React.PureComponent {
}
render() {
- const { type, props, onClose } = this.props
- const { width } = this.state
+ const { type, props, onClose, width } = this.props
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) => ({
diff --git a/app/javascript/gabsocial/components/pull_to_refresher.js b/app/javascript/gabsocial/components/pull_to_refresher.js
index 31e2a282..6589c7d7 100644
--- a/app/javascript/gabsocial/components/pull_to_refresher.js
+++ b/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
-
- this.handleResize()
- window.addEventListener('resize', this.handleResize, false)
+ if (this.props.width > BREAKPOINT_EXTRA_SMALL) return
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
\ No newline at end of file
+export default connect(mapStateToProps)(PullToRefresher)
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/timeline_injections/timeline_injection_root.js b/app/javascript/gabsocial/components/timeline_injections/timeline_injection_root.js
index 98680940..05d8d27a 100644
--- a/app/javascript/gabsocial/components/timeline_injections/timeline_injection_root.js
+++ b/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
}
@@ -63,8 +43,7 @@ class TimelineInjectionRoot extends React.PureComponent {
}
render() {
- const { props, type } = this.props
- const { width } = this.state
+ const { props, type, width } = this.props
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
\ No newline at end of file
+export default connect(mapStateToProps)(TimelineInjectionRoot)
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/compose/components/compose_extra_button_list.js b/app/javascript/gabsocial/features/compose/components/compose_extra_button_list.js
index 17c0e695..835b70d9 100644
--- a/app/javascript/gabsocial/features/compose/components/compose_extra_button_list.js
+++ b/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)
diff --git a/app/javascript/gabsocial/features/news.js b/app/javascript/gabsocial/features/news.js
index 56e3596e..ce9f67af 100644
--- a/app/javascript/gabsocial/features/news.js
+++ b/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
\ No newline at end of file
+export default connect(mapStateToProps)(News)
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/ui/util/responsive_classes_component.js b/app/javascript/gabsocial/features/ui/util/responsive_classes_component.js
index dd15be99..2d8fafe8 100644
--- a/app/javascript/gabsocial/features/ui/util/responsive_classes_component.js
+++ b/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
\ No newline at end of file
+export default connect(mapStateToProps)(ResponsiveClassesComponent)
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/ui/util/responsive_component.js b/app/javascript/gabsocial/features/ui/util/responsive_component.js
index 3c99d843..ba5a3052 100644
--- a/app/javascript/gabsocial/features/ui/util/responsive_component.js
+++ b/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
\ No newline at end of file
+export default connect(mapStateToProps)(Responsive)
\ No newline at end of file
diff --git a/app/javascript/gabsocial/layouts/deck_layout.js b/app/javascript/gabsocial/layouts/deck_layout.js
index f687a229..75c0907f 100644
--- a/app/javascript/gabsocial/layouts/deck_layout.js
+++ b/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 { width } = this.state
+ const { children, title, width } = this.props
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
\ No newline at end of file
+export default connect(mapStateToProps)(DeckLayout)
\ No newline at end of file
diff --git a/app/javascript/gabsocial/layouts/messages_layout.js b/app/javascript/gabsocial/layouts/messages_layout.js
index 8827cef4..7f9e8e78 100644
--- a/app/javascript/gabsocial/layouts/messages_layout.js
+++ b/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']),
}
}
diff --git a/app/javascript/gabsocial/pages/compose_page.js b/app/javascript/gabsocial/pages/compose_page.js
index cdc113d7..84d0d75d 100644
--- a/app/javascript/gabsocial/pages/compose_page.js
+++ b/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 { width } = this.state
+ const { children, width } = this.props
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
\ No newline at end of file
+export default connect(mapStateToProps)(ComposePage)
\ No newline at end of file