D app/javascript/mastodon/features/home_timeline/components/column_settings.jsx => app/javascript/mastodon/features/home_timeline/components/column_settings.jsx +0 -38
@@ 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);
A app/javascript/mastodon/features/home_timeline/components/column_settings.tsx => app/javascript/mastodon/features/home_timeline/components/column_settings.tsx +66 -0
@@ 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>
+ );
+};
D app/javascript/mastodon/features/home_timeline/components/explore_prompt.jsx => app/javascript/mastodon/features/home_timeline/components/explore_prompt.jsx +0 -25
@@ 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>
-);
A app/javascript/mastodon/features/home_timeline/components/explore_prompt.tsx => app/javascript/mastodon/features/home_timeline/components/explore_prompt.tsx +46 -0
@@ 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>
+);
D app/javascript/mastodon/features/home_timeline/containers/column_settings_container.js => app/javascript/mastodon/features/home_timeline/containers/column_settings_container.js +0 -22
@@ 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);
M app/javascript/mastodon/features/home_timeline/index.jsx => app/javascript/mastodon/features/home_timeline/index.jsx +2 -2
@@ 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' },
@@ 191,7 191,7 @@ class HomeTimeline extends PureComponent {
extraButton={announcementsButton}
appendContent={hasAnnouncements && showAnnouncements && <AnnouncementsContainer />}
>
- <ColumnSettingsContainer />
+ <ColumnSettings />
</ColumnHeader>
{signedIn ? (