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