AkkomaGang/masto-fe
2
2
Fork 0
Code Issues 3 Pull requests Projects Releases Wiki Activity

Change column params on pinned timeline (#7581)

Browse source
This commit is contained in:
Yamagishi Kazutoshi 2018-05-22 20:26:06 +09:00 committed by Eugen Rochko
parent 92b09d90c8
commit 06252ec71e
4 changed files with 84 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/javascript/mastodon/actions/columns.js
View file

@ -1,8 +1,9 @@
import { saveSettings } from './settings';
export const COLUMN_ADD = 'COLUMN_ADD';
export const COLUMN_REMOVE = 'COLUMN_REMOVE';
export const COLUMN_MOVE = 'COLUMN_MOVE';
export const COLUMN_ADD = 'COLUMN_ADD';
export const COLUMN_REMOVE = 'COLUMN_REMOVE';
export const COLUMN_MOVE = 'COLUMN_MOVE';
export const COLUMN_PARAMS_CHANGE = 'COLUMN_PARAMS_CHANGE';
export function addColumn(id, params) {
return dispatch => {
@ -38,3 +39,15 @@ export function moveColumn(uuid, direction) {
dispatch(saveSettings());
};
};
export function changeColumnParams(uuid, params) {
return dispatch => {
dispatch({
type: COLUMN_PARAMS_CHANGE,
uuid,
params,
});
dispatch(saveSettings());
};
}

31
app/javascript/mastodon/features/community_timeline/index.js
View file

@ -1,13 +1,13 @@
import React from 'react';
import { connect } from 'react-redux';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { NavLink, Link } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import PropTypes from 'prop-types';
import StatusListContainer from '../ui/containers/status_list_container';
import Column from '../../components/column';
import ColumnHeader from '../../components/column_header';
import { expandCommunityTimeline } from '../../actions/timelines';
import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
import { addColumn, removeColumn, moveColumn, changeColumnParams } from '../../actions/columns';
import ColumnSettingsContainer from './containers/column_settings_container';
import { connectCommunityStream } from '../../actions/streaming';
@ -62,6 +62,16 @@ export default class CommunityTimeline extends React.PureComponent {
this.disconnect = dispatch(connectCommunityStream({ onlyMedia }));
}
componentDidUpdate (prevProps) {
if (prevProps.onlyMedia !== this.props.onlyMedia) {
const { dispatch, onlyMedia } = this.props;
this.disconnect();
dispatch(expandCommunityTimeline({ onlyMedia }));
this.disconnect = dispatch(connectCommunityStream({ onlyMedia }));
}
}
componentWillUnmount () {
if (this.disconnect) {
this.disconnect();
@ -79,14 +89,27 @@ export default class CommunityTimeline extends React.PureComponent {
dispatch(expandCommunityTimeline({ maxId, onlyMedia }));
}
handleHeadlineLinkClick = e => {
e.preventDefault();
const { columnId, dispatch } = this.props;
const onlyMedia = /\/media$/.test(e.currentTarget.href);
dispatch(changeColumnParams(columnId, { other: { onlyMedia } }));
}
render () {
const { intl, hasUnread, columnId, multiColumn, onlyMedia } = this.props;
const pinned = !!columnId;
const headline = pinned ? (
<div className='community-timeline__section-headline'>
<Link to='/timelines/public/local' replace className={!onlyMedia ? 'active' : undefined}><FormattedMessage id='timeline.posts' defaultMessage='Toots' /></Link>
<Link to='/timelines/public/local/media' replace className={onlyMedia ? 'active' : undefined}><FormattedMessage id='timeline.media' defaultMessage='Media' /></Link>
<a href='/timelines/public/local' className={!onlyMedia ? 'active' : undefined} onClick={this.handleHeadlineLinkClick}>
<FormattedMessage id='timeline.posts' defaultMessage='Toots' />
</a>
<a href='/timelines/public/local/media' className={onlyMedia ? 'active' : undefined} onClick={this.handleHeadlineLinkClick}>
<FormattedMessage id='timeline.media' defaultMessage='Media' />
</a>
</div>
) : (
<div className='community-timeline__section-headline'>

31
app/javascript/mastodon/features/public_timeline/index.js
View file

@ -1,13 +1,13 @@
import React from 'react';
import { connect } from 'react-redux';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { NavLink, Link } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import PropTypes from 'prop-types';
import StatusListContainer from '../ui/containers/status_list_container';
import Column from '../../components/column';
import ColumnHeader from '../../components/column_header';
import { expandPublicTimeline } from '../../actions/timelines';
import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
import { addColumn, removeColumn, moveColumn, changeColumnParams } from '../../actions/columns';
import ColumnSettingsContainer from './containers/column_settings_container';
import { connectPublicStream } from '../../actions/streaming';
@ -62,6 +62,16 @@ export default class PublicTimeline extends React.PureComponent {
this.disconnect = dispatch(connectPublicStream({ onlyMedia }));
}
componentDidUpdate (prevProps) {
if (prevProps.onlyMedia !== this.props.onlyMedia) {
const { dispatch, onlyMedia } = this.props;
this.disconnect();
dispatch(expandPublicTimeline({ onlyMedia }));
this.disconnect = dispatch(connectPublicStream({ onlyMedia }));
}
}
componentWillUnmount () {
if (this.disconnect) {
this.disconnect();
@ -79,14 +89,27 @@ export default class PublicTimeline extends React.PureComponent {
dispatch(expandPublicTimeline({ maxId, onlyMedia }));
}
handleHeadlineLinkClick = e => {
e.preventDefault();
const { columnId, dispatch } = this.props;
const onlyMedia = /\/media$/.test(e.currentTarget.href);
dispatch(changeColumnParams(columnId, { other: { onlyMedia } }));
}
render () {
const { intl, columnId, hasUnread, multiColumn, onlyMedia } = this.props;
const pinned = !!columnId;
const headline = pinned ? (
<div className='public-timeline__section-headline'>
<Link to='/timelines/public' replace className={!onlyMedia ? 'active' : undefined}><FormattedMessage id='timeline.posts' defaultMessage='Toots' /></Link>
<Link to='/timelines/public/media' replace className={onlyMedia ? 'active' : undefined}><FormattedMessage id='timeline.media' defaultMessage='Media' /></Link>
<a href='/timelines/public' className={!onlyMedia ? 'active' : undefined} onClick={this.handleHeadlineLinkClick}>
<FormattedMessage id='timeline.posts' defaultMessage='Toots' />
</a>
<a href='/timelines/public/media' className={onlyMedia ? 'active' : undefined} onClick={this.handleHeadlineLinkClick}>
<FormattedMessage id='timeline.media' defaultMessage='Media' />
</a>
</div>
) : (
<div className='public-timeline__section-headline'>

15
app/javascript/mastodon/reducers/settings.js
View file

@ -1,5 +1,5 @@
import { SETTING_CHANGE, SETTING_SAVE } from '../actions/settings';
import { COLUMN_ADD, COLUMN_REMOVE, COLUMN_MOVE } from '../actions/columns';
import { COLUMN_ADD, COLUMN_REMOVE, COLUMN_MOVE, COLUMN_PARAMS_CHANGE } from '../actions/columns';
import { STORE_HYDRATE } from '../actions/store';
import { EMOJI_USE } from '../actions/emojis';
import { LIST_DELETE_SUCCESS, LIST_FETCH_FAIL } from '../actions/lists';
@ -89,6 +89,17 @@ const moveColumn = (state, uuid, direction) => {
.set('saved', false);
};
const changeColumnParams = (state, uuid, params) => {
const columns = state.get('columns');
const index = columns.findIndex(item => item.get('uuid') === uuid);
const newColumns = columns.update(index, column => column.update('params', () => fromJS(params)));
return state
.set('columns', newColumns)
.set('saved', false);
};
const updateFrequentEmojis = (state, emoji) => state.update('frequentlyUsedEmojis', ImmutableMap(), map => map.update(emoji.id, 0, count => count + 1)).set('saved', false);
const filterDeadListColumns = (state, listId) => state.update('columns', columns => columns.filterNot(column => column.get('id') === 'LIST' && column.get('params').get('id') === listId));
@ -111,6 +122,8 @@ export default function settings(state = initialState, action) {
.set('saved', false);
case COLUMN_MOVE:
return moveColumn(state, action.uuid, action.direction);
case COLUMN_PARAMS_CHANGE:
return changeColumnParams(state, action.uuid, action.params);
case EMOJI_USE:
return updateFrequentEmojis(state, action.emoji);
case SETTING_SAVE: