Hide section headline for timelines in production (#7590)

* Hide section headline for timelines in production

* comment out
This commit is contained in:
Yamagishi Kazutoshi 2018-05-22 21:44:32 +09:00 committed by Eugen Rochko
parent 06252ec71e
commit 4eeda67727
3 changed files with 85 additions and 38 deletions

View File

@ -0,0 +1,59 @@
import PropTypes from 'prop-types';
import React, { Component, Fragment } from 'react';
import { FormattedMessage } from 'react-intl';
import { NavLink } from 'react-router-dom';
export default class SectionHeadline extends Component {
static propTypes = {
timelineId: PropTypes.string.isRequired,
to: PropTypes.string.isRequired,
pinned: PropTypes.bool.isRequired,
onlyMedia: PropTypes.bool.isRequired,
onClick: PropTypes.func,
};
shouldComponentUpdate (nextProps) {
return (
this.props.onlyMedia !== nextProps.onlyMedia ||
this.props.pinned !== nextProps.pinned ||
this.props.to !== nextProps.to ||
this.props.timelineId !== nextProps.timelineId
);
}
handleClick = e => {
const { onClick } = this.props;
if (typeof onClick === 'function') {
e.preventDefault();
onClick.call(this, e);
}
}
render () {
const { timelineId, to, pinned, onlyMedia } = this.props;
return (
<div className={`${timelineId}-timeline__section-headline`}>
{pinned ? (
<Fragment>
<a href={to} className={!onlyMedia ? 'active' : undefined} onClick={this.handleClick}>
<FormattedMessage id='timeline.posts' defaultMessage='Toots' />
</a>
<a href={`${to}/media`} className={onlyMedia ? 'active' : undefined} onClick={this.handleClick}>
<FormattedMessage id='timeline.media' defaultMessage='Media' />
</a>
</Fragment>
) : (
<Fragment>
<NavLink exact to={to} replace><FormattedMessage id='timeline.posts' defaultMessage='Toots' /></NavLink>
<NavLink exact to={`${to}/media`} replace><FormattedMessage id='timeline.media' defaultMessage='Media' /></NavLink>
</Fragment>
)}
</div>
);
}
}

View File

@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { NavLink } from 'react-router-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import StatusListContainer from '../ui/containers/status_list_container'; import StatusListContainer from '../ui/containers/status_list_container';
import Column from '../../components/column'; import Column from '../../components/column';
@ -9,6 +8,7 @@ import ColumnHeader from '../../components/column_header';
import { expandCommunityTimeline } from '../../actions/timelines'; import { expandCommunityTimeline } from '../../actions/timelines';
import { addColumn, removeColumn, moveColumn, changeColumnParams } from '../../actions/columns'; import { addColumn, removeColumn, moveColumn, changeColumnParams } from '../../actions/columns';
import ColumnSettingsContainer from './containers/column_settings_container'; import ColumnSettingsContainer from './containers/column_settings_container';
// import SectionHeadline from './components/section_headline';
import { connectCommunityStream } from '../../actions/streaming'; import { connectCommunityStream } from '../../actions/streaming';
const messages = defineMessages({ const messages = defineMessages({
@ -90,8 +90,6 @@ export default class CommunityTimeline extends React.PureComponent {
} }
handleHeadlineLinkClick = e => { handleHeadlineLinkClick = e => {
e.preventDefault();
const { columnId, dispatch } = this.props; const { columnId, dispatch } = this.props;
const onlyMedia = /\/media$/.test(e.currentTarget.href); const onlyMedia = /\/media$/.test(e.currentTarget.href);
@ -102,21 +100,17 @@ export default class CommunityTimeline extends React.PureComponent {
const { intl, hasUnread, columnId, multiColumn, onlyMedia } = this.props; const { intl, hasUnread, columnId, multiColumn, onlyMedia } = this.props;
const pinned = !!columnId; const pinned = !!columnId;
const headline = pinned ? ( // pending
<div className='community-timeline__section-headline'> //
<a href='/timelines/public/local' className={!onlyMedia ? 'active' : undefined} onClick={this.handleHeadlineLinkClick}> // const headline = (
<FormattedMessage id='timeline.posts' defaultMessage='Toots' /> // <SectionHeadline
</a> // timelineId='community'
<a href='/timelines/public/local/media' className={onlyMedia ? 'active' : undefined} onClick={this.handleHeadlineLinkClick}> // to='/timelines/public/local'
<FormattedMessage id='timeline.media' defaultMessage='Media' /> // pinned={pinned}
</a> // onlyMedia={onlyMedia}
</div> // onClick={this.handleHeadlineLinkClick}
) : ( // />
<div className='community-timeline__section-headline'> // );
<NavLink exact to='/timelines/public/local' replace><FormattedMessage id='timeline.posts' defaultMessage='Toots' /></NavLink>
<NavLink exact to='/timelines/public/local/media' replace><FormattedMessage id='timeline.media' defaultMessage='Media' /></NavLink>
</div>
);
return ( return (
<Column ref={this.setRef}> <Column ref={this.setRef}>
@ -134,7 +128,7 @@ export default class CommunityTimeline extends React.PureComponent {
</ColumnHeader> </ColumnHeader>
<StatusListContainer <StatusListContainer
prepend={headline} // prepend={headline}
trackScroll={!pinned} trackScroll={!pinned}
scrollKey={`community_timeline-${columnId}`} scrollKey={`community_timeline-${columnId}`}
timelineId={`community${onlyMedia ? ':media' : ''}`} timelineId={`community${onlyMedia ? ':media' : ''}`}

View File

@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { NavLink } from 'react-router-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import StatusListContainer from '../ui/containers/status_list_container'; import StatusListContainer from '../ui/containers/status_list_container';
import Column from '../../components/column'; import Column from '../../components/column';
@ -9,6 +8,7 @@ import ColumnHeader from '../../components/column_header';
import { expandPublicTimeline } from '../../actions/timelines'; import { expandPublicTimeline } from '../../actions/timelines';
import { addColumn, removeColumn, moveColumn, changeColumnParams } from '../../actions/columns'; import { addColumn, removeColumn, moveColumn, changeColumnParams } from '../../actions/columns';
import ColumnSettingsContainer from './containers/column_settings_container'; import ColumnSettingsContainer from './containers/column_settings_container';
// import SectionHeadline from '../community_timeline/components/section_headline';
import { connectPublicStream } from '../../actions/streaming'; import { connectPublicStream } from '../../actions/streaming';
const messages = defineMessages({ const messages = defineMessages({
@ -90,8 +90,6 @@ export default class PublicTimeline extends React.PureComponent {
} }
handleHeadlineLinkClick = e => { handleHeadlineLinkClick = e => {
e.preventDefault();
const { columnId, dispatch } = this.props; const { columnId, dispatch } = this.props;
const onlyMedia = /\/media$/.test(e.currentTarget.href); const onlyMedia = /\/media$/.test(e.currentTarget.href);
@ -102,21 +100,17 @@ export default class PublicTimeline extends React.PureComponent {
const { intl, columnId, hasUnread, multiColumn, onlyMedia } = this.props; const { intl, columnId, hasUnread, multiColumn, onlyMedia } = this.props;
const pinned = !!columnId; const pinned = !!columnId;
const headline = pinned ? ( // pending
<div className='public-timeline__section-headline'> //
<a href='/timelines/public' className={!onlyMedia ? 'active' : undefined} onClick={this.handleHeadlineLinkClick}> // const headline = (
<FormattedMessage id='timeline.posts' defaultMessage='Toots' /> // <SectionHeadline
</a> // timelineId='public'
<a href='/timelines/public/media' className={onlyMedia ? 'active' : undefined} onClick={this.handleHeadlineLinkClick}> // to='/timelines/public'
<FormattedMessage id='timeline.media' defaultMessage='Media' /> // pinned={pinned}
</a> // onlyMedia={onlyMedia}
</div> // onClick={this.handleHeadlineLinkClick}
) : ( // />
<div className='public-timeline__section-headline'> // );
<NavLink exact to='/timelines/public' replace><FormattedMessage id='timeline.posts' defaultMessage='Toots' /></NavLink>
<NavLink exact to='/timelines/public/media' replace><FormattedMessage id='timeline.media' defaultMessage='Media' /></NavLink>
</div>
);
return ( return (
<Column ref={this.setRef}> <Column ref={this.setRef}>
@ -134,7 +128,7 @@ export default class PublicTimeline extends React.PureComponent {
</ColumnHeader> </ColumnHeader>
<StatusListContainer <StatusListContainer
prepend={headline} // prepend={headline}
timelineId={`public${onlyMedia ? ':media' : ''}`} timelineId={`public${onlyMedia ? ':media' : ''}`}
onLoadMore={this.handleLoadMore} onLoadMore={this.handleLoadMore}
trackScroll={!pinned} trackScroll={!pinned}