mirror of
https://github.com/mastodon/mastodon.git
synced 2024-12-22 21:06:01 +01:00
Convert Home timeline components to Typescript (#25583)
This commit is contained in:
Renaud Chaput
GitHub
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);
|
|
||||||
|
|
@ -22,8 +22,8 @@ import Column from '../../components/column';
|
||||||
import ColumnHeader from '../../components/column_header';
|
import ColumnHeader from '../../components/column_header';
|
||||||
import StatusListContainer from '../ui/containers/status_list_container';
|
import StatusListContainer from '../ui/containers/status_list_container';
|
||||||
|
|
||||||
|
import { ColumnSettings } from './components/column_settings';
|
||||||
import { ExplorePrompt } from './components/explore_prompt';
|
import { ExplorePrompt } from './components/explore_prompt';
|
||||||
import ColumnSettingsContainer from './containers/column_settings_container';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
title: { id: 'column.home', defaultMessage: 'Home' },
|
title: { id: 'column.home', defaultMessage: 'Home' },
|
||||||
|
|
@ -191,7 +191,7 @@ class HomeTimeline extends PureComponent {
|
||||||
extraButton={announcementsButton}
|
extraButton={announcementsButton}
|
||||||
appendContent={hasAnnouncements && showAnnouncements && <AnnouncementsContainer />}
|
appendContent={hasAnnouncements && showAnnouncements && <AnnouncementsContainer />}
|
||||||
>
|
>
|
||||||
<ColumnSettingsContainer />
|
<ColumnSettings />
|
||||||
</ColumnHeader>
|
</ColumnHeader>
|
||||||
|
|
||||||
{signedIn ? (
|
{signedIn ? (
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue