Beginning to reformat propTypes and set redux, intl functions to end of component files

• Beginning:
- to reformat propTypes and set redux, intl functions to end of component files
This commit is contained in:
mgabdev 2020-08-17 17:06:22 -05:00
parent 0a331ad389
commit 46a0cbca7d
28 changed files with 650 additions and 645 deletions

@ -10,24 +10,8 @@ import Heading from './heading'
import BackButton from './back_button'
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
const messages = defineMessages({
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
menu: { id: 'menu', defaultMessage: 'Menu' },
})
export default
@injectIntl
class AboutSidebar extends ImmutablePureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
account: ImmutablePropTypes.map,
title: PropTypes.string,
items: PropTypes.array.isRequired,
}
render() {
const {
intl,
@ -76,4 +60,20 @@ class AboutSidebar extends ImmutablePureComponent {
)
}
}
}
const messages = defineMessages({
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
menu: { id: 'menu', defaultMessage: 'Menu' },
})
AboutSidebar.propTypes = {
intl: PropTypes.object.isRequired,
account: ImmutablePropTypes.map,
title: PropTypes.string,
items: PropTypes.array.isRequired,
}
export default injectIntl(AboutSidebar)

@ -5,16 +5,7 @@ import Button from '../../../components/button'
const cx = classNames.bind(_s)
export default class ComposeExtraButton extends React.PureComponent {
static propTypes = {
title: PropTypes.string,
disabled: PropTypes.bool,
onClick: PropTypes.func,
icon: PropTypes.string,
small: PropTypes.bool,
active: PropTypes.bool,
buttonRef: PropTypes.func,
}
class ComposeExtraButton extends React.PureComponent {
render() {
const {
@ -79,4 +70,17 @@ export default class ComposeExtraButton extends React.PureComponent {
</div>
)
}
}
}
ComposeExtraButton.propTypes = {
title: PropTypes.string,
disabled: PropTypes.bool,
onClick: PropTypes.func,
icon: PropTypes.string,
small: PropTypes.bool,
active: PropTypes.bool,
buttonRef: PropTypes.func,
}
export default ComposeExtraButton

@ -41,8 +41,6 @@ const messages = defineMessages({
schedulePost: { id: 'compose_form.schedule_post', defaultMessage: 'Schedule Post' },
})
export default
@injectIntl
class ComposeForm extends ImmutablePureComponent {
static contextTypes = {
@ -53,53 +51,6 @@ class ComposeForm extends ImmutablePureComponent {
composeFocused: false,
}
static propTypes = {
intl: PropTypes.object.isRequired,
edit: PropTypes.bool,
isMatch: PropTypes.bool,
text: PropTypes.string.isRequired,
markdown: PropTypes.string,
suggestions: ImmutablePropTypes.list,
account: ImmutablePropTypes.map.isRequired,
status: ImmutablePropTypes.map,
spoiler: PropTypes.bool,
privacy: PropTypes.string,
spoilerText: PropTypes.string,
focusDate: PropTypes.instanceOf(Date),
caretPosition: PropTypes.number,
preselectDate: PropTypes.instanceOf(Date),
isSubmitting: PropTypes.bool,
isChangingUpload: PropTypes.bool,
isUploading: PropTypes.bool,
onChange: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
onClearSuggestions: PropTypes.func.isRequired,
onFetchSuggestions: PropTypes.func.isRequired,
onSuggestionSelected: PropTypes.func.isRequired,
onChangeSpoilerText: PropTypes.func.isRequired,
onPaste: PropTypes.func.isRequired,
onPickEmoji: PropTypes.func.isRequired,
showSearch: PropTypes.bool,
anyMedia: PropTypes.bool,
shouldCondense: PropTypes.bool,
autoFocus: PropTypes.bool,
groupId: PropTypes.string,
isModalOpen: PropTypes.bool,
scheduledAt: PropTypes.instanceOf(Date),
setScheduledAt: PropTypes.func.isRequired,
replyToId: PropTypes.string,
reduxReplyToId: PropTypes.string,
hasPoll: PropTypes.bool,
selectedGifSrc: PropTypes.string,
isPro: PropTypes.bool,
hidePro: PropTypes.bool,
autoJoinGroup: PropTypes.bool,
}
static defaultProps = {
showSearch: false,
};
handleChange = (e, selectionStart) => {
this.props.onChange(e.target.value, e.target.markdown, this.props.replyToId, selectionStart)
}
@ -528,4 +479,53 @@ class ComposeForm extends ImmutablePureComponent {
)
}
}
}
ComposeForm.propTypes = {
intl: PropTypes.object.isRequired,
edit: PropTypes.bool,
isMatch: PropTypes.bool,
text: PropTypes.string.isRequired,
markdown: PropTypes.string,
suggestions: ImmutablePropTypes.list,
account: ImmutablePropTypes.map.isRequired,
status: ImmutablePropTypes.map,
spoiler: PropTypes.bool,
privacy: PropTypes.string,
spoilerText: PropTypes.string,
focusDate: PropTypes.instanceOf(Date),
caretPosition: PropTypes.number,
preselectDate: PropTypes.instanceOf(Date),
isSubmitting: PropTypes.bool,
isChangingUpload: PropTypes.bool,
isUploading: PropTypes.bool,
onChange: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
onClearSuggestions: PropTypes.func.isRequired,
onFetchSuggestions: PropTypes.func.isRequired,
onSuggestionSelected: PropTypes.func.isRequired,
onChangeSpoilerText: PropTypes.func.isRequired,
onPaste: PropTypes.func.isRequired,
onPickEmoji: PropTypes.func.isRequired,
showSearch: PropTypes.bool,
anyMedia: PropTypes.bool,
shouldCondense: PropTypes.bool,
autoFocus: PropTypes.bool,
groupId: PropTypes.string,
isModalOpen: PropTypes.bool,
scheduledAt: PropTypes.instanceOf(Date),
setScheduledAt: PropTypes.func.isRequired,
replyToId: PropTypes.string,
reduxReplyToId: PropTypes.string,
hasPoll: PropTypes.bool,
selectedGifSrc: PropTypes.string,
isPro: PropTypes.bool,
hidePro: PropTypes.bool,
autoJoinGroup: PropTypes.bool,
}
ComposeForm.defaultProps = {
showSearch: false,
}
export default injectIntl(ComposeForm)

@ -5,37 +5,8 @@ import { defineMessages, injectIntl } from 'react-intl'
import { openPopover } from '../../../actions/popover'
import ComposeExtraButton from './compose_extra_button'
const messages = defineMessages({
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
})
const mapStateToProps = (state) => ({
active: state.getIn(['popover', 'popoverType']) === 'EMOJI_PICKER',
})
const mapDispatchToProps = (dispatch) => ({
onClick(targetRef) {
dispatch(openPopover('EMOJI_PICKER', {
targetRef,
}))
},
})
export default
@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
class EmojiPickerButton extends React.PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
onClick: PropTypes.func.isRequired,
active: PropTypes.bool,
small: PropTypes.bool,
isMatch: PropTypes.bool,
}
handleClick = (e) => {
e.preventDefault()
this.props.onClick(this.button)
@ -66,3 +37,31 @@ class EmojiPickerButton extends React.PureComponent {
}
}
const messages = defineMessages({
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
})
const mapStateToProps = (state) => ({
active: state.getIn(['popover', 'popoverType']) === 'EMOJI_PICKER',
})
const mapDispatchToProps = (dispatch) => ({
onClick(targetRef) {
dispatch(openPopover('EMOJI_PICKER', {
targetRef,
}))
},
})
EmojiPickerButton.propTypes = {
intl: PropTypes.object.isRequired,
onClick: PropTypes.func.isRequired,
active: PropTypes.bool,
small: PropTypes.bool,
isMatch: PropTypes.bool,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(EmojiPickerButton))

@ -8,42 +8,8 @@ import { me } from '../../../initial_state'
import { POPOVER_STATUS_EXPIRATION_OPTIONS } from '../../../constants'
import ComposeExtraButton from './compose_extra_button'
const messages = defineMessages({
expires: { id: 'expiration.title', defaultMessage: 'Add status expiration' },
})
const mapStateToProps = (state) => ({
hasScheduledAt: !!state.getIn(['compose', 'scheduled_at']),
active: !!state.getIn(['compose', 'expires_at']) || state.getIn(['popover', 'popoverType']) === POPOVER_STATUS_EXPIRATION_OPTIONS,
isPro: state.getIn(['accounts', me, 'is_pro']),
})
const mapDispatchToProps = (dispatch) => ({
onOpenExpirationPopover(targetRef) {
dispatch(openPopover(POPOVER_STATUS_EXPIRATION_OPTIONS, {
targetRef,
}))
},
onOpenProUpgradeModal() {
dispatch(openModal('PRO_UPGRADE'))
},
})
export default
@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
class ExpiresPostButton extends React.PureComponent {
static propTypes = {
active: PropTypes.bool.isRequired,
intl: PropTypes.object.isRequired,
isPro: PropTypes.bool,
hasScheduledAt: PropTypes.bool,
onOpenProUpgradeModal: PropTypes.func.isRequired,
onOpenExpirationPopover: PropTypes.func.isRequired,
small: PropTypes.bool,
}
handleToggle = () => {
if (!this.props.isPro) {
this.props.onOpenProUpgradeModal()
@ -79,3 +45,36 @@ class ExpiresPostButton extends React.PureComponent {
}
}
const messages = defineMessages({
expires: { id: 'expiration.title', defaultMessage: 'Add status expiration' },
})
const mapStateToProps = (state) => ({
hasScheduledAt: !!state.getIn(['compose', 'scheduled_at']),
active: !!state.getIn(['compose', 'expires_at']) || state.getIn(['popover', 'popoverType']) === POPOVER_STATUS_EXPIRATION_OPTIONS,
isPro: state.getIn(['accounts', me, 'is_pro']),
})
const mapDispatchToProps = (dispatch) => ({
onOpenExpirationPopover(targetRef) {
dispatch(openPopover(POPOVER_STATUS_EXPIRATION_OPTIONS, {
targetRef,
}))
},
onOpenProUpgradeModal() {
dispatch(openModal('PRO_UPGRADE'))
},
})
ExpiresPostButton.propTypes = {
active: PropTypes.bool.isRequired,
intl: PropTypes.object.isRequired,
isPro: PropTypes.bool,
hasScheduledAt: PropTypes.bool,
onOpenProUpgradeModal: PropTypes.func.isRequired,
onOpenExpirationPopover: PropTypes.func.isRequired,
small: PropTypes.bool,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ExpiresPostButton))

@ -4,23 +4,8 @@ import { connect } from 'react-redux'
import { clearSelectedGif } from '../../../actions/tenor'
import Image from '../../../components/image'
const mapDispatchToProps = (dispatch) => ({
onClearSelectedGif() {
dispatch(clearSelectedGif())
},
})
export default
@connect(null, mapDispatchToProps)
class GifForm extends React.PureComponent {
static propTypes = {
onClearSelectedGif: PropTypes.func.isRequired,
replyToId: PropTypes.string,
small: PropTypes.bool,
selectedGifSrc: PropTypes.string.isRequired,
}
render () {
const {
selectedGifSrc,
@ -43,3 +28,18 @@ class GifForm extends React.PureComponent {
}
}
const mapDispatchToProps = (dispatch) => ({
onClearSelectedGif() {
dispatch(clearSelectedGif())
},
})
GifForm.propTypes = {
onClearSelectedGif: PropTypes.func.isRequired,
replyToId: PropTypes.string,
small: PropTypes.bool,
selectedGifSrc: PropTypes.string.isRequired,
}
export default connect(null, mapDispatchToProps)(GifForm)

@ -5,36 +5,8 @@ import { injectIntl, defineMessages } from 'react-intl'
import ComposeExtraButton from './compose_extra_button'
import { openModal } from '../../../actions/modal'
const messages = defineMessages({
marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
title: { id: 'compose_form.gif.title', defaultMessage: 'Insert gif' },
})
const mapStateToProps = (state) => ({
active: !!state.getIn(['compose', 'gif']) || state.getIn(['modal', 'modalType']) === 'GIF_PICKER',
})
const mapDispatchToProps = (dispatch) => ({
onClick() {
dispatch(openModal('GIF_PICKER'))
},
})
export default
@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
class GifSelectorButton extends React.PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
onClick: PropTypes.func.isRequired,
active: PropTypes.bool,
small: PropTypes.bool,
}
handleClick = (e) => {
e.preventDefault()
this.props.onClick(this.button)
@ -60,3 +32,30 @@ class GifSelectorButton extends React.PureComponent {
}
}
const messages = defineMessages({
marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
title: { id: 'compose_form.gif.title', defaultMessage: 'Insert gif' },
})
const mapStateToProps = (state) => ({
active: !!state.getIn(['compose', 'gif']) || state.getIn(['modal', 'modalType']) === 'GIF_PICKER',
})
const mapDispatchToProps = (dispatch) => ({
onClick() {
dispatch(openModal('GIF_PICKER'))
},
})
GifSelectorButton.propTypes = {
intl: PropTypes.object.isRequired,
onClick: PropTypes.func.isRequired,
active: PropTypes.bool,
small: PropTypes.bool,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(GifSelectorButton))

@ -7,42 +7,8 @@ import { defineMessages, injectIntl } from 'react-intl'
import { uploadCompose } from '../../../actions/compose'
import ComposeExtraButton from './compose_extra_button'
const messages = defineMessages({
upload: { id: 'upload_button.label', defaultMessage: 'Add media (JPEG, PNG, GIF, WebM, MP4, MOV)' },
title: { id: 'upload_button.title', defaultMessage: 'Photo/Video' },
})
const makeMapStateToProps = () => {
const mapStateToProps = (state) => ({
acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']),
disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size + state.getIn(['compose', 'pending_media_attachments']) > 3 || state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio', 'gifv'].includes(m.get('type')))),
unavailable: state.getIn(['compose', 'poll']) !== null,
resetFileKey: state.getIn(['compose', 'resetFileKey']),
})
return mapStateToProps
}
const mapDispatchToProps = (dispatch) => ({
onSelectFile: (files) => dispatch(uploadCompose(files)),
})
export default
@connect(makeMapStateToProps, mapDispatchToProps)
@injectIntl
class UploadButton extends ImmutablePureComponent {
static propTypes = {
disabled: PropTypes.bool,
unavailable: PropTypes.bool,
onSelectFile: PropTypes.func.isRequired,
style: PropTypes.object,
resetFileKey: PropTypes.number,
acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired,
intl: PropTypes.object.isRequired,
small: PropTypes.bool,
}
handleChange = (e) => {
if (e.target.files.length > 0) {
this.props.onSelectFile(e.target.files)
@ -88,3 +54,36 @@ class UploadButton extends ImmutablePureComponent {
}
}
const messages = defineMessages({
upload: { id: 'upload_button.label', defaultMessage: 'Add media (JPEG, PNG, GIF, WebM, MP4, MOV)' },
title: { id: 'upload_button.title', defaultMessage: 'Photo/Video' },
})
const makeMapStateToProps = () => {
const mapStateToProps = (state) => ({
acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']),
disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size + state.getIn(['compose', 'pending_media_attachments']) > 3 || state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio', 'gifv'].includes(m.get('type')))),
unavailable: state.getIn(['compose', 'poll']) !== null,
resetFileKey: state.getIn(['compose', 'resetFileKey']),
})
return mapStateToProps
}
const mapDispatchToProps = (dispatch) => ({
onSelectFile: (files) => dispatch(uploadCompose(files)),
})
UploadButton.propTypes = {
disabled: PropTypes.bool,
unavailable: PropTypes.bool,
onSelectFile: PropTypes.func.isRequired,
style: PropTypes.object,
resetFileKey: PropTypes.number,
acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired,
intl: PropTypes.object.isRequired,
small: PropTypes.bool,
}
export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(UploadButton))

@ -14,44 +14,12 @@ import Text from '../../../components/text'
const cx = classNames.bind(_s)
const messages = defineMessages({
description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
delete: { id: 'upload_form.undo', defaultMessage: 'Delete' },
})
const mapStateToProps = (state, { id }) => ({
media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
})
const mapDispatchToProps = (dispatch) => ({
onUndo: (id) => {
dispatch(undoUploadCompose(id))
},
onDescriptionChange: (id, description) => {
dispatch(changeUploadCompose(id, { description }))
},
onSubmit () {
dispatch(submitCompose())
},
});
export default
@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
class Upload extends ImmutablePureComponent {
static contextTypes = {
router: PropTypes.object,
}
static propTypes = {
media: ImmutablePropTypes.map.isRequired,
intl: PropTypes.object.isRequired,
onUndo: PropTypes.func.isRequired,
onDescriptionChange: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
}
state = {
hovered: false,
focused: false,
@ -177,3 +145,34 @@ class Upload extends ImmutablePureComponent {
}
}
const messages = defineMessages({
description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
delete: { id: 'upload_form.undo', defaultMessage: 'Delete' },
})
const mapStateToProps = (state, { id }) => ({
media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
})
const mapDispatchToProps = (dispatch) => ({
onUndo: (id) => {
dispatch(undoUploadCompose(id))
},
onDescriptionChange: (id, description) => {
dispatch(changeUploadCompose(id, { description }))
},
onSubmit () {
dispatch(submitCompose())
},
});
Upload.propTypes = {
media: ImmutablePropTypes.map.isRequired,
intl: PropTypes.object.isRequired,
onUndo: PropTypes.func.isRequired,
onDescriptionChange: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Upload))

@ -5,6 +5,31 @@ import { defineMessages, injectIntl } from 'react-intl'
import { addPoll, removePoll } from '../../../actions/compose'
import ComposeExtraButton from './compose_extra_button'
class PollButton extends React.PureComponent {
handleClick = () => {
this.props.onClick()
}
render() {
const { intl, active, unavailable, disabled, small } = this.props
if (unavailable) return null
return (
<ComposeExtraButton
title={intl.formatMessage(active ? messages.remove_poll : messages.title)}
disabled={disabled}
onClick={this.handleClick}
icon='poll'
small={small}
active={active}
/>
)
}
}
const messages = defineMessages({
add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add poll' },
title: { id: 'poll_button.title', defaultMessage: 'Poll' },
@ -30,39 +55,13 @@ const mapDispatchToProps = (dispatch) => ({
})
export default
@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
class PollButton extends React.PureComponent {
static propTypes = {
disabled: PropTypes.bool,
unavailable: PropTypes.bool,
active: PropTypes.bool,
onClick: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
small: PropTypes.bool,
}
handleClick = () => {
this.props.onClick()
}
render() {
const { intl, active, unavailable, disabled, small } = this.props
if (unavailable) return null
return (
<ComposeExtraButton
title={intl.formatMessage(active ? messages.remove_poll : messages.title)}
disabled={disabled}
onClick={this.handleClick}
icon='poll'
small={small}
active={active}
/>
)
}
PollButton.propTypes = {
disabled: PropTypes.bool,
unavailable: PropTypes.bool,
active: PropTypes.bool,
onClick: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
small: PropTypes.bool,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(PollButton))

@ -18,57 +18,8 @@ import Input from '../../../components/input'
const cx = classNames.bind(_s)
const messages = defineMessages({
option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Choice {number}' },
add_option: { id: 'compose_form.poll.add_option', defaultMessage: 'Add a choice' },
remove_option: { id: 'compose_form.poll.remove_option', defaultMessage: 'Remove this choice' },
poll_duration: { id: 'compose_form.poll.duration', defaultMessage: 'Poll duration' },
minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' },
hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' },
days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' },
})
const mapStateToProps = (state) => ({
options: state.getIn(['compose', 'poll', 'options']),
expiresIn: state.getIn(['compose', 'poll', 'expires_in']),
isMultiple: state.getIn(['compose', 'poll', 'multiple']),
})
const mapDispatchToProps = (dispatch) => ({
onAddOption() {
dispatch(addPollOption(''))
},
onRemoveOption(index) {
dispatch(removePollOption(index))
},
onChangeOption(index, title) {
dispatch(changePollOption(index, title))
},
onChangeSettings(expiresIn, isMultiple) {
dispatch(changePollSettings(expiresIn, isMultiple))
},
})
export default
@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
class PollForm extends ImmutablePureComponent {
static propTypes = {
options: ImmutablePropTypes.list,
expiresIn: PropTypes.number,
isMultiple: PropTypes.bool,
onChangeOption: PropTypes.func.isRequired,
onAddOption: PropTypes.func.isRequired,
onRemoveOption: PropTypes.func.isRequired,
onChangeSettings: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
}
handleSelectDuration = (e) => {
this.props.onChangeSettings(e.target.value, this.props.isMultiple)
}
@ -243,3 +194,51 @@ class PollFormOption extends ImmutablePureComponent {
}
}
const messages = defineMessages({
option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Choice {number}' },
add_option: { id: 'compose_form.poll.add_option', defaultMessage: 'Add a choice' },
remove_option: { id: 'compose_form.poll.remove_option', defaultMessage: 'Remove this choice' },
poll_duration: { id: 'compose_form.poll.duration', defaultMessage: 'Poll duration' },
minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' },
hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' },
days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' },
})
const mapStateToProps = (state) => ({
options: state.getIn(['compose', 'poll', 'options']),
expiresIn: state.getIn(['compose', 'poll', 'expires_in']),
isMultiple: state.getIn(['compose', 'poll', 'multiple']),
})
const mapDispatchToProps = (dispatch) => ({
onAddOption() {
dispatch(addPollOption(''))
},
onRemoveOption(index) {
dispatch(removePollOption(index))
},
onChangeOption(index, title) {
dispatch(changePollOption(index, title))
},
onChangeSettings(expiresIn, isMultiple) {
dispatch(changePollSettings(expiresIn, isMultiple))
},
})
PollForm.propTypes = {
options: ImmutablePropTypes.list,
expiresIn: PropTypes.number,
isMultiple: PropTypes.bool,
onChangeOption: PropTypes.func.isRequired,
onAddOption: PropTypes.func.isRequired,
onRemoveOption: PropTypes.func.isRequired,
onChangeSettings: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(PollForm))

@ -7,42 +7,8 @@ import { openModal } from '../../../actions/modal'
import { me } from '../../../initial_state'
import ComposeExtraButton from './compose_extra_button'
const messages = defineMessages({
marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
title: { id: 'compose_form.rte.title', defaultMessage: 'Rich Text Editor' },
})
const mapStateToProps = (state) => ({
active: state.getIn(['compose', 'rte_controls_visible']),
isPro: state.getIn(['accounts', me, 'is_pro']),
})
const mapDispatchToProps = (dispatch) => ({
onChangeRichTextEditorControlsVisibility() {
dispatch(changeRichTextEditorControlsVisibility())
},
onOpenProUpgradeModal() {
dispatch(openModal('PRO_UPGRADE'))
},
})
export default
@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
class RichTextEditorButton extends React.PureComponent {
static propTypes = {
active: PropTypes.bool,
intl: PropTypes.object.isRequired,
small: PropTypes.bool,
isPro: PropTypes.bool,
onOpenProUpgradeModal: PropTypes.func.isRequired,
onChangeRichTextEditorControlsVisibility: PropTypes.func.isRequired,
}
handleClick = (e) => {
e.preventDefault()
if (!this.props.isPro) {
@ -67,3 +33,36 @@ class RichTextEditorButton extends React.PureComponent {
}
}
const messages = defineMessages({
marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
title: { id: 'compose_form.rte.title', defaultMessage: 'Rich Text Editor' },
})
const mapStateToProps = (state) => ({
active: state.getIn(['compose', 'rte_controls_visible']),
isPro: state.getIn(['accounts', me, 'is_pro']),
})
const mapDispatchToProps = (dispatch) => ({
onChangeRichTextEditorControlsVisibility() {
dispatch(changeRichTextEditorControlsVisibility())
},
onOpenProUpgradeModal() {
dispatch(openModal('PRO_UPGRADE'))
},
})
RichTextEditorButton.propTypes = {
active: PropTypes.bool,
intl: PropTypes.object.isRequired,
small: PropTypes.bool,
isPro: PropTypes.bool,
onOpenProUpgradeModal: PropTypes.func.isRequired,
onChangeRichTextEditorControlsVisibility: PropTypes.func.isRequired,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(RichTextEditorButton))

@ -9,48 +9,8 @@ import ComposeExtraButton from './compose_extra_button'
// import 'react-datepicker/dist/react-datepicker.css'
const messages = defineMessages({
schedule_status: { id: 'schedule_status.title', defaultMessage: 'Schedule' },
})
const mapStateToProps = (state) => ({
hasExpiresAt: !!state.getIn(['compose', 'expires_at']),
active: !!state.getIn(['compose', 'scheduled_at']) || state.getIn(['popover', 'popoverType']) === 'DATE_PICKER',
isPro: state.getIn(['accounts', me, 'is_pro']),
})
const mapDispatchToProps = (dispatch) => ({
onOpenDatePickerPopover(targetRef) {
dispatch(openPopover('DATE_PICKER', {
targetRef,
}))
},
onCloseDatePickerPopover() {
dispatch(closePopover())
},
onOpenProUpgradeModal() {
dispatch(openModal('PRO_UPGRADE'))
},
})
export default
@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
class SchedulePostButton extends React.PureComponent {
static propTypes = {
active: PropTypes.bool.isRequired,
intl: PropTypes.object.isRequired,
isPro: PropTypes.bool,
hasExpiresAt: PropTypes.bool,
onOpenProUpgradeModal: PropTypes.func.isRequired,
onOpenDatePickerPopover: PropTypes.func.isRequired,
onCloseDatePickerPopover: PropTypes.func.isRequired,
small: PropTypes.bool,
}
handleToggle = () => {
if (!this.props.isPro) {
this.props.onOpenProUpgradeModal()
@ -86,3 +46,42 @@ class SchedulePostButton extends React.PureComponent {
}
}
const messages = defineMessages({
schedule_status: { id: 'schedule_status.title', defaultMessage: 'Schedule' },
})
const mapStateToProps = (state) => ({
hasExpiresAt: !!state.getIn(['compose', 'expires_at']),
active: !!state.getIn(['compose', 'scheduled_at']) || state.getIn(['popover', 'popoverType']) === 'DATE_PICKER',
isPro: state.getIn(['accounts', me, 'is_pro']),
})
const mapDispatchToProps = (dispatch) => ({
onOpenDatePickerPopover(targetRef) {
dispatch(openPopover('DATE_PICKER', {
targetRef,
}))
},
onCloseDatePickerPopover() {
dispatch(closePopover())
},
onOpenProUpgradeModal() {
dispatch(openModal('PRO_UPGRADE'))
},
})
SchedulePostButton.propTypes = {
active: PropTypes.bool.isRequired,
intl: PropTypes.object.isRequired,
isPro: PropTypes.bool,
hasExpiresAt: PropTypes.bool,
onOpenProUpgradeModal: PropTypes.func.isRequired,
onOpenDatePickerPopover: PropTypes.func.isRequired,
onCloseDatePickerPopover: PropTypes.func.isRequired,
small: PropTypes.bool,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SchedulePostButton))

@ -5,35 +5,8 @@ import { injectIntl, defineMessages } from 'react-intl'
import { changeComposeSensitivity } from '../../../actions/compose'
import Switch from '../../../components/switch'
const messages = defineMessages({
markAsSensitive: { id: 'compose_form.sensitive.hide', defaultMessage: 'Mark media as sensitive' },
})
const mapStateToProps = (state) => ({
active: state.getIn(['compose', 'sensitive']),
disabled: state.getIn(['compose', 'spoiler']),
})
const mapDispatchToProps = (dispatch) => ({
onClick () {
dispatch(changeComposeSensitivity())
},
})
export default
@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
class SensitiveMediaButton extends React.PureComponent {
static propTypes = {
active: PropTypes.bool,
disabled: PropTypes.bool,
onClick: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
}
render () {
const { active, disabled, onClick, intl } = this.props
@ -52,3 +25,29 @@ class SensitiveMediaButton extends React.PureComponent {
}
}
const messages = defineMessages({
markAsSensitive: { id: 'compose_form.sensitive.hide', defaultMessage: 'Mark media as sensitive' },
})
const mapStateToProps = (state) => ({
active: state.getIn(['compose', 'sensitive']),
disabled: state.getIn(['compose', 'spoiler']),
})
const mapDispatchToProps = (dispatch) => ({
onClick () {
dispatch(changeComposeSensitivity())
},
})
SensitiveMediaButton.propTypes = {
active: PropTypes.bool,
disabled: PropTypes.bool,
onClick: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SensitiveMediaButton))

@ -5,35 +5,8 @@ import { injectIntl, defineMessages } from 'react-intl'
import { changeComposeSpoilerness } from '../../../actions/compose'
import ComposeExtraButton from './compose_extra_button'
const messages = defineMessages({
marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
title: { id: 'compose_form.spoiler.title', defaultMessage: 'Warning' },
})
const mapStateToProps = (state) => ({
active: state.getIn(['compose', 'spoiler']),
})
const mapDispatchToProps = (dispatch) => ({
onClick () {
dispatch(changeComposeSpoilerness())
},
})
export default
@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
class SpoilerButton extends React.PureComponent {
static propTypes = {
active: PropTypes.bool,
intl: PropTypes.object.isRequired,
small: PropTypes.bool,
}
handleClick = (e) => {
e.preventDefault()
this.props.onClick()
@ -54,3 +27,29 @@ class SpoilerButton extends React.PureComponent {
}
}
const messages = defineMessages({
marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
title: { id: 'compose_form.spoiler.title', defaultMessage: 'Warning' },
})
const mapStateToProps = (state) => ({
active: state.getIn(['compose', 'spoiler']),
})
const mapDispatchToProps = (dispatch) => ({
onClick () {
dispatch(changeComposeSpoilerness())
},
})
SpoilerButton.propTypes = {
active: PropTypes.bool,
intl: PropTypes.object.isRequired,
small: PropTypes.bool,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SpoilerButton))

@ -5,38 +5,8 @@ import { defineMessages, injectIntl } from 'react-intl'
import { openPopover } from '../../../actions/popover'
import ComposeExtraButton from './compose_extra_button'
const messages = defineMessages({
visibility: { id: 'privacy.visibility', defaultMessage: 'Visibility' },
})
const mapStateToProps = (state) => ({
value: state.getIn(['compose', 'privacy']),
})
const mapDispatchToProps = (dispatch) => ({
onOpenPopover(targetRef) {
dispatch(openPopover('STATUS_VISIBILITY', {
targetRef,
}))
},
})
export default
@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
class StatusVisibilityButton extends React.PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
small: PropTypes.bool,
onOpenPopover: PropTypes.func.isRequired,
value: PropTypes.oneOf([
'private',
'unlisted',
'public',
]),
}
handleOnClick = () => {
this.props.onOpenPopover(this.button)
}
@ -77,3 +47,32 @@ class StatusVisibilityButton extends React.PureComponent {
}
}
const messages = defineMessages({
visibility: { id: 'privacy.visibility', defaultMessage: 'Visibility' },
})
const mapStateToProps = (state) => ({
value: state.getIn(['compose', 'privacy']),
})
const mapDispatchToProps = (dispatch) => ({
onOpenPopover(targetRef) {
dispatch(openPopover('STATUS_VISIBILITY', {
targetRef,
}))
},
})
StatusVisibilityButton.propTypes = {
intl: PropTypes.object.isRequired,
small: PropTypes.bool,
onOpenPopover: PropTypes.func.isRequired,
value: PropTypes.oneOf([
'private',
'unlisted',
'public',
]),
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(StatusVisibilityButton))

@ -7,23 +7,8 @@ import ProgressBar from '../../../components/progress_bar'
import Upload from './media_upload_item'
import SensitiveMediaButton from './sensitive_media_button'
const mapStateToProps = (state) => ({
mediaIds: state.getIn(['compose', 'media_attachments']).map(item => item.get('id')),
isUploading: state.getIn(['compose', 'is_uploading']),
uploadProgress: state.getIn(['compose', 'progress'], 0),
});
export default
@connect(mapStateToProps)
class UploadForm extends ImmutablePureComponent {
static propTypes = {
isModalOpen: PropTypes.bool,
isUploading: PropTypes.bool,
mediaIds: ImmutablePropTypes.list.isRequired,
uploadProgress: PropTypes.number,
};
render () {
const {
mediaIds,
@ -55,3 +40,18 @@ class UploadForm extends ImmutablePureComponent {
}
}
const mapStateToProps = (state) => ({
mediaIds: state.getIn(['compose', 'media_attachments']).map(item => item.get('id')),
isUploading: state.getIn(['compose', 'is_uploading']),
uploadProgress: state.getIn(['compose', 'progress'], 0),
})
UploadForm.propTypes = {
isModalOpen: PropTypes.bool,
isUploading: PropTypes.bool,
mediaIds: ImmutablePropTypes.list.isRequired,
uploadProgress: PropTypes.number,
}
export default connect(mapStateToProps)(UploadForm)

@ -4,18 +4,8 @@ import { connect } from 'react-redux'
import { clearCompose } from '../../actions/compose'
import ComposeFormContainer from './containers/compose_form_container'
const mapDispatchToProps = (dispatch) => ({
onClearCompose:() => dispatch(clearCompose())
})
export default
@connect(null, mapDispatchToProps)
class Compose extends React.PureComponent {
static propTypes = {
onClearCompose: PropTypes.func.isRequired,
}
componentWillUnmount() {
this.props.onClearCompose()
}
@ -29,3 +19,13 @@ class Compose extends React.PureComponent {
}
}
const mapDispatchToProps = (dispatch) => ({
onClearCompose:() => dispatch(clearCompose())
})
Compose.propTypes = {
onClearCompose: PropTypes.func.isRequired,
}
export default connect(null, mapDispatchToProps)(Compose)

@ -131,12 +131,6 @@ const keyMap = {
class SwitchingArea extends React.PureComponent {
static propTypes = {
children: PropTypes.node,
location: PropTypes.object,
onLayoutChange: PropTypes.func.isRequired,
}
componentDidMount() {
window.addEventListener('resize', this.handleResize, {
passive: true
@ -264,26 +258,18 @@ class SwitchingArea extends React.PureComponent {
}
}
export default
@connect(mapStateToProps)
@injectIntl
@withRouter
SwitchingArea.propTypes = {
children: PropTypes.node,
location: PropTypes.object,
onLayoutChange: PropTypes.func.isRequired,
}
class UI extends React.PureComponent {
static contextTypes = {
router: PropTypes.object.isRequired,
}
static propTypes = {
dispatch: PropTypes.func.isRequired,
children: PropTypes.node,
isComposing: PropTypes.bool,
hasComposingText: PropTypes.bool,
hasMediaAttachments: PropTypes.bool,
location: PropTypes.object,
intl: PropTypes.object.isRequired,
}
state = {
fetchedHome: false,
fetchedNotifications: false,
@ -589,3 +575,15 @@ class UI extends React.PureComponent {
}
}
UI.propTypes = {
dispatch: PropTypes.func.isRequired,
children: PropTypes.node,
isComposing: PropTypes.bool,
hasComposingText: PropTypes.bool,
hasMediaAttachments: PropTypes.bool,
location: PropTypes.object,
intl: PropTypes.object.isRequired,
}
export default injectIntl(withRouter(connect(mapStateToProps)(UI)))

@ -7,45 +7,11 @@ import {
fetchBundleFail,
} from '../../../actions/bundles'
const mapDispatchToProps = (dispatch) => ({
onFetch() {
dispatch(fetchBundleRequest())
},
onFetchSuccess() {
dispatch(fetchBundleSuccess())
},
onFetchFail(error) {
dispatch(fetchBundleFail(error))
},
})
const emptyComponent = () => null
const noop = () => { }
export default
@connect(null, mapDispatchToProps)
class Bundle extends React.PureComponent {
static propTypes = {
fetchComponent: PropTypes.func.isRequired,
loading: PropTypes.func,
error: PropTypes.func,
children: PropTypes.func.isRequired,
renderDelay: PropTypes.number,
onFetch: PropTypes.func,
onFetchSuccess: PropTypes.func,
onFetchFail: PropTypes.func,
}
static defaultProps = {
loading: emptyComponent,
error: emptyComponent,
renderDelay: 0,
onFetch: noop,
onFetchSuccess: noop,
onFetchFail: noop,
}
static cache = new Map
state = {
@ -145,3 +111,37 @@ class Bundle extends React.PureComponent {
}
}
const mapDispatchToProps = (dispatch) => ({
onFetch() {
dispatch(fetchBundleRequest())
},
onFetchSuccess() {
dispatch(fetchBundleSuccess())
},
onFetchFail(error) {
dispatch(fetchBundleFail(error))
},
})
Bundle.propTypes = {
fetchComponent: PropTypes.func.isRequired,
loading: PropTypes.func,
error: PropTypes.func,
children: PropTypes.func.isRequired,
renderDelay: PropTypes.number,
onFetch: PropTypes.func,
onFetchSuccess: PropTypes.func,
onFetchFail: PropTypes.func,
}
Bundle.defaultProps = {
loading: emptyComponent,
error: emptyComponent,
renderDelay: 0,
onFetch: noop,
onFetchSuccess: noop,
onFetchFail: noop,
}
export default connect(null, mapDispatchToProps)(Bundle)

@ -13,12 +13,6 @@ const extractValue = (value) => {
class ReducedMotion extends React.PureComponent {
static propTypes = {
defaultStyle: PropTypes.object,
style: PropTypes.object,
children: PropTypes.func,
}
render() {
const { style, defaultStyle, children } = this.props;
@ -41,4 +35,10 @@ class ReducedMotion extends React.PureComponent {
}
export default ReducedMotion;
ReducedMotion.propTypes = {
defaultStyle: PropTypes.object,
style: PropTypes.object,
children: PropTypes.func,
}
export default ReducedMotion

@ -11,16 +11,7 @@ import { getWindowDimension } from '../../../utils/is_mobile'
const initialState = getWindowDimension()
export default class ResponsiveClassesComponent extends React.PureComponent {
static propTypes = {
classNames: PropTypes.string,
classNamesXL: PropTypes.string,
classNamesLarge: PropTypes.string,
classNamesMedium: PropTypes.string,
classNamesSmall: PropTypes.string,
classNamesXS: PropTypes.string,
}
class ResponsiveClassesComponent extends React.PureComponent {
state = {
width: initialState.width,
@ -75,4 +66,15 @@ export default class ResponsiveClassesComponent extends React.PureComponent {
)
}
}
}
ResponsiveClassesComponent.propTypes = {
classNames: PropTypes.string,
classNamesXL: PropTypes.string,
classNamesLarge: PropTypes.string,
classNamesMedium: PropTypes.string,
classNamesSmall: PropTypes.string,
classNamesXS: PropTypes.string,
}
export default ResponsiveClassesComponent

@ -4,17 +4,7 @@ import { getWindowDimension } from '../../../utils/is_mobile'
const initialState = getWindowDimension()
export default class Responsive extends React.PureComponent {
static propTypes = {
min: PropTypes.number,
max: PropTypes.number,
}
static defaultProps = {
min: 0,
max: Infinity,
}
class Responsive extends React.PureComponent {
state = {
width: initialState.width,
@ -48,4 +38,16 @@ export default class Responsive extends React.PureComponent {
return shouldRender ? children : null
}
}
}
Responsive.propTypes = {
min: PropTypes.number,
max: PropTypes.number,
}
Responsive.defaultProps = {
min: 0,
max: Infinity,
}
export default Responsive

@ -6,18 +6,7 @@ import BundleColumnError from '../../../components/bundle_column_error'
import Bundle from './bundle'
import { me } from '../../../initial_state'
export default class WrappedRoute extends React.PureComponent {
static propTypes = {
component: PropTypes.func.isRequired,
page: PropTypes.func.isRequired,
content: PropTypes.node,
componentParams: PropTypes.object,
publicRoute: PropTypes.bool,
}
static defaultProps = {
componentParams: {},
}
class WrappedRoute extends React.PureComponent {
renderComponent = ({ match }) => {
const {
@ -74,3 +63,17 @@ export default class WrappedRoute extends React.PureComponent {
return <Route {...rest} render={this.renderComponent} />
}
}
WrappedRoute.propTypes = {
component: PropTypes.func.isRequired,
page: PropTypes.func.isRequired,
content: PropTypes.node,
componentParams: PropTypes.object,
publicRoute: PropTypes.bool,
}
WrappedRoute.defaultProps = {
componentParams: {},
}
export default WrappedRoute

@ -17,11 +17,7 @@ import {
SidebarXS,
} from '../features/ui/util/async_components'
export default class SettingsLayout extends React.PureComponent {
static propTypes = {
title: PropTypes.string,
}
class SettingsLayout extends React.PureComponent {
componentWillMount() {
this.menuItems = [
@ -135,3 +131,9 @@ export default class SettingsLayout extends React.PureComponent {
}
}
SettingsLayout.propTypes = {
title: PropTypes.string,
}
export default SettingsLayout

@ -16,17 +16,7 @@ import {
TrendsPanel,
} from '../features/ui/util/async_components'
export default class ExploreLayout extends ImmutablePureComponent {
static propTypes = {
actions: PropTypes.array,
children: PropTypes.node,
group: ImmutablePropTypes.map,
groupId: PropTypes.string,
layout: PropTypes.object,
relationships: ImmutablePropTypes.map,
title: PropTypes.string,
}
class ExploreLayout extends ImmutablePureComponent {
state = {
lazyLoaded: false,
@ -125,4 +115,16 @@ export default class ExploreLayout extends ImmutablePureComponent {
)
}
}
}
ExploreLayout.propTypes = {
actions: PropTypes.array,
children: PropTypes.node,
group: ImmutablePropTypes.map,
groupId: PropTypes.string,
layout: PropTypes.object,
relationships: ImmutablePropTypes.map,
title: PropTypes.string,
}
export default ExploreLayout

@ -23,15 +23,7 @@ import {
SignUpPanel,
} from '../features/ui/util/async_components'
export default class ProfileLayout extends ImmutablePureComponent {
static propTypes = {
account: ImmutablePropTypes.map,
children: PropTypes.node.isRequired,
titleHTML: PropTypes.string,
unavailable: PropTypes.bool,
noSidebar: PropTypes.bool,
}
class ProfileLayout extends ImmutablePureComponent {
render() {
const {
@ -152,4 +144,14 @@ export default class ProfileLayout extends ImmutablePureComponent {
)
}
}
}
ProfileLayout.propTypes = {
account: ImmutablePropTypes.map,
children: PropTypes.node.isRequired,
titleHTML: PropTypes.string,
unavailable: PropTypes.bool,
noSidebar: PropTypes.bool,
}
export default ProfileLayout

@ -15,11 +15,7 @@ import {
SidebarXS,
} from '../features/ui/util/async_components'
export default class SettingsLayout extends React.PureComponent {
static propTypes = {
title: PropTypes.string,
}
class SettingsLayout extends React.PureComponent {
render() {
const { children, title } = this.props
@ -85,3 +81,9 @@ export default class SettingsLayout extends React.PureComponent {
}
}
SettingsLayout.propTypes = {
title: PropTypes.string,
}
export default SettingsLayout