[Glitch] Convert Home timeline components to Typescript
Port a75138d073 to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Renaud Chaput
Claire
parent
177497b367
commit
447ab7ab24
7 changed files with 153 additions and 105 deletions
|
|
@ -1,54 +0,0 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import { PureComponent } from 'react';
|
||||
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
|
||||
import SettingText from 'flavours/glitch/components/setting_text';
|
||||
import SettingToggle from 'flavours/glitch/features/notifications/components/setting_toggle';
|
||||
|
||||
const messages = defineMessages({
|
||||
filter_regex: { id: 'home.column_settings.filter_regex', defaultMessage: 'Filter out by regular expressions' },
|
||||
settings: { id: 'home.settings', defaultMessage: 'Column settings' },
|
||||
});
|
||||
|
||||
class ColumnSettings extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
settings: ImmutablePropTypes.map.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
render () {
|
||||
const { settings, onChange, intl } = 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 className='column-settings__row'>
|
||||
<SettingToggle prefix='home_timeline' settings={settings} settingPath={['shows', 'direct']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_direct' defaultMessage='Show private mentions' />} />
|
||||
</div>
|
||||
|
||||
<span className='column-settings__section'><FormattedMessage id='home.column_settings.advanced' defaultMessage='Advanced' /></span>
|
||||
|
||||
<div className='column-settings__row'>
|
||||
<SettingText prefix='home_timeline' settings={settings} settingPath={['regex', 'body']} onChange={onChange} label={intl.formatMessage(messages.filter_regex)} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default injectIntl(ColumnSettings);
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
/* 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 SettingText from 'flavours/glitch/components/setting_text';
|
||||
import { useAppSelector, useAppDispatch } from 'flavours/glitch/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 className='column-settings__row'>
|
||||
<SettingToggle
|
||||
prefix='home_timeline'
|
||||
settings={settings}
|
||||
settingPath={['shows', 'direct']}
|
||||
onChange={onChange}
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='home.column_settings.show_direct'
|
||||
defaultMessage='Show private mentions'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span className='column-settings__section'>
|
||||
<FormattedMessage
|
||||
id='home.column_settings.advanced'
|
||||
defaultMessage='Advanced'
|
||||
/>
|
||||
</span>
|
||||
|
||||
<div className='column-settings__row'>
|
||||
<SettingText
|
||||
prefix='home_timeline'
|
||||
settings={settings}
|
||||
settingPath={['regex', 'body']}
|
||||
onChange={onChange}
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='home.column_settings.filter_regex'
|
||||
defaultMessage='Filter out by regular expressions'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner';
|
||||
import background from 'mastodon/../images/friends-cropped.png';
|
||||
|
||||
|
||||
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 { DismissableBanner } from 'flavours/glitch/components/dismissable_banner';
|
||||
import background from 'mastodon/../images/friends-cropped.png';
|
||||
|
||||
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,23 +0,0 @@
|
|||
import { connect } from 'react-redux';
|
||||
|
||||
import { changeSetting, saveSettings } from 'flavours/glitch/actions/settings';
|
||||
|
||||
import ColumnSettings from '../components/column_settings';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
settings: state.getIn(['settings', 'home']),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
|
||||
onChange (path, checked) {
|
||||
dispatch(changeSetting(['home', ...path], 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 StatusListContainer from '../ui/containers/status_list_container';
|
||||
|
||||
import { ColumnSettings } from './components/column_settings';
|
||||
import { ExplorePrompt } from './components/explore_prompt';
|
||||
import ColumnSettingsContainer from './containers/column_settings_container';
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'column.home', defaultMessage: 'Home' },
|
||||
|
|
@ -192,7 +192,7 @@ class HomeTimeline extends PureComponent {
|
|||
extraButton={announcementsButton}
|
||||
appendContent={hasAnnouncements && showAnnouncements && <AnnouncementsContainer />}
|
||||
>
|
||||
<ColumnSettingsContainer />
|
||||
<ColumnSettings />
|
||||
</ColumnHeader>
|
||||
|
||||
{signedIn ? (
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export const ColumnSettings: React.FC = () => {
|
|||
(key: string, checked: boolean) => {
|
||||
void dispatch(changeSetting(['home', ...key], checked));
|
||||
},
|
||||
[dispatch]
|
||||
[dispatch],
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
|
|||
Loading…
Reference in a new issue