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
Show Stats 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)

29
app/javascript/gabsocial/features/compose/components/compose_extra_button_list.js
View File

@ -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)

23
app/javascript/gabsocial/features/news.js
View File

@ -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)

31
app/javascript/gabsocial/features/ui/util/responsive_classes_component.js
View File

@ -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)

32
app/javascript/gabsocial/features/ui/util/responsive_component.js
View File

@ -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)

31
app/javascript/gabsocial/layouts/deck_layout.js
View File

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

24
app/javascript/gabsocial/layouts/messages_layout.js
View File

@ -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']),
}
}

26
app/javascript/gabsocial/pages/compose_page.js
View File

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