Convert Home timeline components to Typescript (#25583)
parent
73b64b8917
commit
a75138d073
6 changed files with 114 additions and 87 deletions
@ -1,38 +0,0 @@ |
||||
import PropTypes from 'prop-types'; |
||||
import { PureComponent } from 'react'; |
||||
|
||||
import { injectIntl, FormattedMessage } from 'react-intl'; |
||||
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||
|
||||
import SettingToggle from '../../notifications/components/setting_toggle'; |
||||
|
||||
class ColumnSettings extends PureComponent { |
||||
|
||||
static propTypes = { |
||||
settings: ImmutablePropTypes.map.isRequired, |
||||
onChange: PropTypes.func.isRequired, |
||||
intl: PropTypes.object.isRequired, |
||||
}; |
||||
|
||||
render () { |
||||
const { settings, onChange } = this.props; |
||||
|
||||
return ( |
||||
<div> |
||||
<span className='column-settings__section'><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span> |
||||
|
||||
<div className='column-settings__row'> |
||||
<SettingToggle prefix='home_timeline' settings={settings} settingPath={['shows', 'reblog']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show boosts' />} /> |
||||
</div> |
||||
|
||||
<div className='column-settings__row'> |
||||
<SettingToggle prefix='home_timeline' settings={settings} settingPath={['shows', 'reply']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />} /> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
||||
|
||||
export default injectIntl(ColumnSettings); |
@ -0,0 +1,66 @@ |
||||
/* eslint-disable @typescript-eslint/no-unsafe-call, |
||||
@typescript-eslint/no-unsafe-return, |
||||
@typescript-eslint/no-unsafe-assignment, |
||||
@typescript-eslint/no-unsafe-member-access |
||||
-- the settings store is not yet typed */ |
||||
import { useCallback } from 'react'; |
||||
|
||||
import { FormattedMessage } from 'react-intl'; |
||||
|
||||
import { useAppSelector, useAppDispatch } from 'mastodon/store'; |
||||
|
||||
import { changeSetting } from '../../../actions/settings'; |
||||
import SettingToggle from '../../notifications/components/setting_toggle'; |
||||
|
||||
export const ColumnSettings: React.FC = () => { |
||||
const settings = useAppSelector((state) => state.settings.get('home')); |
||||
|
||||
const dispatch = useAppDispatch(); |
||||
const onChange = useCallback( |
||||
(key: string, checked: boolean) => { |
||||
void dispatch(changeSetting(['home', ...key], checked)); |
||||
}, |
||||
[dispatch] |
||||
); |
||||
|
||||
return ( |
||||
<div> |
||||
<span className='column-settings__section'> |
||||
<FormattedMessage |
||||
id='home.column_settings.basic' |
||||
defaultMessage='Basic' |
||||
/> |
||||
</span> |
||||
|
||||
<div className='column-settings__row'> |
||||
<SettingToggle |
||||
prefix='home_timeline' |
||||
settings={settings} |
||||
settingPath={['shows', 'reblog']} |
||||
onChange={onChange} |
||||
label={ |
||||
<FormattedMessage |
||||
id='home.column_settings.show_reblogs' |
||||
defaultMessage='Show boosts' |
||||
/> |
||||
} |
||||
/> |
||||
</div> |
||||
|
||||
<div className='column-settings__row'> |
||||
<SettingToggle |
||||
prefix='home_timeline' |
||||
settings={settings} |
||||
settingPath={['shows', 'reply']} |
||||
onChange={onChange} |
||||
label={ |
||||
<FormattedMessage |
||||
id='home.column_settings.show_replies' |
||||
defaultMessage='Show replies' |
||||
/> |
||||
} |
||||
/> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
@ -1,25 +0,0 @@ |
||||
import React from 'react'; |
||||
|
||||
import { FormattedMessage } from 'react-intl'; |
||||
|
||||
import { Link } from 'react-router-dom'; |
||||
|
||||
import background from 'mastodon/../images/friends-cropped.png'; |
||||
import { DismissableBanner } from 'mastodon/components/dismissable_banner'; |
||||
|
||||
|
||||
export const ExplorePrompt = () => ( |
||||
<DismissableBanner id='home.explore_prompt'> |
||||
<img src={background} alt='' className='dismissable-banner__background-image' /> |
||||
|
||||
<h1><FormattedMessage id='home.explore_prompt.title' defaultMessage='This is your home base within Mastodon.' /></h1> |
||||
<p><FormattedMessage id='home.explore_prompt.body' defaultMessage="Your home feed will have a mix of posts from the hashtags you've chosen to follow, the people you've chosen to follow, and the posts they boost. It's looking pretty quiet right now, so how about:" /></p> |
||||
|
||||
<div className='dismissable-banner__message__actions__wrapper'> |
||||
<div className='dismissable-banner__message__actions'> |
||||
<Link to='/explore' className='button'><FormattedMessage id='home.actions.go_to_explore' defaultMessage="See what's trending" /></Link> |
||||
<Link to='/explore/suggestions' className='button button-tertiary'><FormattedMessage id='home.actions.go_to_suggestions' defaultMessage='Find people to follow' /></Link> |
||||
</div> |
||||
</div> |
||||
</DismissableBanner> |
||||
); |
@ -0,0 +1,46 @@ |
||||
import { FormattedMessage } from 'react-intl'; |
||||
|
||||
import { Link } from 'react-router-dom'; |
||||
|
||||
import background from 'mastodon/../images/friends-cropped.png'; |
||||
import { DismissableBanner } from 'mastodon/components/dismissable_banner'; |
||||
|
||||
export const ExplorePrompt = () => ( |
||||
<DismissableBanner id='home.explore_prompt'> |
||||
<img |
||||
src={background} |
||||
alt='' |
||||
className='dismissable-banner__background-image' |
||||
/> |
||||
|
||||
<h1> |
||||
<FormattedMessage |
||||
id='home.explore_prompt.title' |
||||
defaultMessage='This is your home base within Mastodon.' |
||||
/> |
||||
</h1> |
||||
<p> |
||||
<FormattedMessage |
||||
id='home.explore_prompt.body' |
||||
defaultMessage="Your home feed will have a mix of posts from the hashtags you've chosen to follow, the people you've chosen to follow, and the posts they boost. It's looking pretty quiet right now, so how about:" |
||||
/> |
||||
</p> |
||||
|
||||
<div className='dismissable-banner__message__wrapper'> |
||||
<div className='dismissable-banner__message__actions'> |
||||
<Link to='/explore' className='button'> |
||||
<FormattedMessage |
||||
id='home.actions.go_to_explore' |
||||
defaultMessage="See what's trending" |
||||
/> |
||||
</Link> |
||||
<Link to='/explore/suggestions' className='button button-tertiary'> |
||||
<FormattedMessage |
||||
id='home.actions.go_to_suggestions' |
||||
defaultMessage='Find people to follow' |
||||
/> |
||||
</Link> |
||||
</div> |
||||
</div> |
||||
</DismissableBanner> |
||||
); |
@ -1,22 +0,0 @@ |
||||
import { connect } from 'react-redux'; |
||||
|
||||
import { changeSetting, saveSettings } from '../../../actions/settings'; |
||||
import ColumnSettings from '../components/column_settings'; |
||||
|
||||
const mapStateToProps = state => ({ |
||||
settings: state.getIn(['settings', 'home']), |
||||
}); |
||||
|
||||
const mapDispatchToProps = dispatch => ({ |
||||
|
||||
onChange (key, checked) { |
||||
dispatch(changeSetting(['home', ...key], checked)); |
||||
}, |
||||
|
||||
onSave () { |
||||
dispatch(saveSettings()); |
||||
}, |
||||
|
||||
}); |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings); |
Loading…
Reference in new issue