Change column params on pinned timeline (#7581)
This commit is contained in:
		
							parent
							
								
									92b09d90c8
								
							
						
					
					
						commit
						06252ec71e
					
				
					 4 changed files with 84 additions and 12 deletions
				
			
		| 
						 | 
				
			
			@ -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());
 | 
			
		||||
  };
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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'>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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'>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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:
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		
		Reference in a new issue