diff options
Diffstat (limited to 'app/javascript')
3 files changed, 85 insertions, 38 deletions
diff --git a/app/javascript/flavours/glitch/features/community_timeline/components/section_headline.js b/app/javascript/flavours/glitch/features/community_timeline/components/section_headline.js new file mode 100644 index 000000000..c7176d04b --- /dev/null +++ b/app/javascript/flavours/glitch/features/community_timeline/components/section_headline.js @@ -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> + ); + } + +} diff --git a/app/javascript/flavours/glitch/features/community_timeline/index.js b/app/javascript/flavours/glitch/features/community_timeline/index.js index 74afd26e9..1b972f729 100644 --- a/app/javascript/flavours/glitch/features/community_timeline/index.js +++ b/app/javascript/flavours/glitch/features/community_timeline/index.js @@ -1,7 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import { NavLink } from 'react-router-dom'; import PropTypes from 'prop-types'; import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container'; import Column from 'flavours/glitch/components/column'; @@ -9,6 +8,7 @@ import ColumnHeader from 'flavours/glitch/components/column_header'; import { expandCommunityTimeline } from 'flavours/glitch/actions/timelines'; import { addColumn, removeColumn, moveColumn, changeColumnParams } from 'flavours/glitch/actions/columns'; import ColumnSettingsContainer from './containers/column_settings_container'; +// import SectionHeadline from './components/section_headline'; import { connectCommunityStream } from 'flavours/glitch/actions/streaming'; const messages = defineMessages({ @@ -94,8 +94,6 @@ export default class CommunityTimeline extends React.PureComponent { } handleHeadlineLinkClick = e => { - e.preventDefault(); - const { columnId, dispatch } = this.props; const onlyMedia = /\/media$/.test(e.currentTarget.href); @@ -106,21 +104,17 @@ export default class CommunityTimeline extends React.PureComponent { const { intl, hasUnread, columnId, multiColumn, onlyMedia } = this.props; const pinned = !!columnId; - const headline = pinned ? ( - <div className='community-timeline__section-headline'> - <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'> - <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> - ); + // pending + // + // const headline = ( + // <SectionHeadline + // timelineId='community' + // to='/timelines/public/local' + // pinned={pinned} + // onlyMedia={onlyMedia} + // onClick={this.handleHeadlineLinkClick} + // /> + // ); return ( <Column ref={this.setRef} name='local' label={intl.formatMessage(messages.title)}> @@ -138,7 +132,7 @@ export default class CommunityTimeline extends React.PureComponent { </ColumnHeader> <StatusListContainer - prepend={headline} + // prepend={headline} trackScroll={!pinned} scrollKey={`community_timeline-${columnId}`} shouldUpdateScroll={this.shouldUpdateScroll} diff --git a/app/javascript/flavours/glitch/features/public_timeline/index.js b/app/javascript/flavours/glitch/features/public_timeline/index.js index e1561ae41..6b4c835e8 100644 --- a/app/javascript/flavours/glitch/features/public_timeline/index.js +++ b/app/javascript/flavours/glitch/features/public_timeline/index.js @@ -1,7 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import { NavLink } from 'react-router-dom'; import PropTypes from 'prop-types'; import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container'; import Column from 'flavours/glitch/components/column'; @@ -9,6 +8,7 @@ import ColumnHeader from 'flavours/glitch/components/column_header'; import { expandPublicTimeline } from 'flavours/glitch/actions/timelines'; import { addColumn, removeColumn, moveColumn, changeColumnParams } from 'flavours/glitch/actions/columns'; import ColumnSettingsContainer from './containers/column_settings_container'; +// import SectionHeadline from '../community_timeline/components/section_headline'; import { connectPublicStream } from 'flavours/glitch/actions/streaming'; const messages = defineMessages({ @@ -94,8 +94,6 @@ export default class PublicTimeline extends React.PureComponent { } handleHeadlineLinkClick = e => { - e.preventDefault(); - const { columnId, dispatch } = this.props; const onlyMedia = /\/media$/.test(e.currentTarget.href); @@ -106,21 +104,17 @@ export default class PublicTimeline extends React.PureComponent { const { intl, columnId, hasUnread, multiColumn, onlyMedia } = this.props; const pinned = !!columnId; - const headline = pinned ? ( - <div className='public-timeline__section-headline'> - <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'> - <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> - ); + // pending + // + // const headline = ( + // <SectionHeadline + // timelineId='public' + // to='/timelines/public' + // pinned={pinned} + // onlyMedia={onlyMedia} + // onClick={this.handleHeadlineLinkClick} + // /> + // ); return ( <Column ref={this.setRef} name='federated' label={intl.formatMessage(messages.title)}> @@ -138,7 +132,7 @@ export default class PublicTimeline extends React.PureComponent { </ColumnHeader> <StatusListContainer - prepend={headline} + // prepend={headline} timelineId={`public${onlyMedia ? ':media' : ''}`} onLoadMore={this.handleLoadMore} trackScroll={!pinned} |