random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated all components that implement window resize to use redux dimensions

Browse Source 
• Updated:
- all components that implement window resize to use redux dimensions
This commit is contained in:
mgabdev
2021-01-08 00:15:53 -05:00
parent 8744868190
commit 152e59a66f
13 changed files with 76 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/javascript/gabsocial/components/floating_action_button.js
View File

@@ -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))
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(FloatingActionButton))

17
app/javascript/gabsocial/components/modal/modal_base.js
View File

@@ -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) => ({

17
app/javascript/gabsocial/components/panel/trends_rss_panel.js
View File

@@ -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 = {

33
app/javascript/gabsocial/components/popover/popover_root.js
View File

@@ -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 <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 { 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) => ({

23
app/javascript/gabsocial/components/pull_to_refresher.js
View File

@@ -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
export default connect(mapStateToProps)(PullToRefresher)

31
app/javascript/gabsocial/components/timeline_injections/timeline_injection_root.js
View File

@@ -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 { 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
export default connect(mapStateToProps)(TimelineInjectionRoot)