diff --git a/app/javascript/gabsocial/features/groups/timeline/components/column_settings.js b/app/javascript/gabsocial/features/groups/timeline/components/column_settings.js new file mode 100644 index 00000000..d0ae58bc --- /dev/null +++ b/app/javascript/gabsocial/features/groups/timeline/components/column_settings.js @@ -0,0 +1,30 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { injectIntl, FormattedMessage } from 'react-intl'; +import SettingToggle from '../../../notifications/components/setting_toggle'; + +export default @injectIntl +class ColumnSettings extends React.PureComponent { + + static propTypes = { + settings: ImmutablePropTypes.map.isRequired, + onChange: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + }; + + render () { + const { settings, onChange } = this.props; + + return ( +
+ + +
+ } /> +
+
+ ); + } + +} diff --git a/app/javascript/gabsocial/features/groups/timeline/containers/column_settings_container.js b/app/javascript/gabsocial/features/groups/timeline/containers/column_settings_container.js new file mode 100644 index 00000000..d320b40e --- /dev/null +++ b/app/javascript/gabsocial/features/groups/timeline/containers/column_settings_container.js @@ -0,0 +1,21 @@ +import { connect } from 'react-redux'; +import ColumnSettings from '../components/column_settings'; +import { changeSetting, saveSettings } from '../../../../actions/settings'; + +const mapStateToProps = state => ({ + settings: state.getIn(['settings', 'group']), +}); + +const mapDispatchToProps = dispatch => ({ + + onChange (key, checked) { + dispatch(changeSetting(['group', ...key], checked)); + }, + + onSave () { + dispatch(saveSettings()); + }, + +}); + +export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings); diff --git a/app/javascript/gabsocial/features/groups/timeline/index.js b/app/javascript/gabsocial/features/groups/timeline/index.js index 2fd89166..fde6c2dc 100644 --- a/app/javascript/gabsocial/features/groups/timeline/index.js +++ b/app/javascript/gabsocial/features/groups/timeline/index.js @@ -14,9 +14,13 @@ import { me } from 'gabsocial/initial_state'; import Avatar from '../../../components/avatar'; import { Link } from 'react-router-dom'; import classNames from 'classnames'; +import ColumnSettingsContainer from "./containers/column_settings_container"; +import Icon from 'gabsocial/components/icon'; const messages = defineMessages({ tabLatest: { id: 'group.timeline.tab_latest', defaultMessage: 'Latest' }, + show: { id: 'group.timeline.show_settings', defaultMessage: 'Show settings' }, + hide: { id: 'group.timeline.hide_settings', defaultMessage: 'Hide settings' }, }); const mapStateToProps = (state, props) => ({ @@ -44,6 +48,10 @@ class GroupTimeline extends React.PureComponent { intl: PropTypes.object.isRequired, }; + state = { + collapsed: true, + } + componentDidMount () { const { dispatch } = this.props; const { id } = this.props.params; @@ -65,8 +73,14 @@ class GroupTimeline extends React.PureComponent { this.props.dispatch(expandGroupTimeline(id, { maxId })); } + handleToggleClick = (e) => { + e.stopPropagation(); + this.setState({ collapsed: !this.state.collapsed }); + } + render () { const { columnId, group, relationships, account, intl } = this.props; + const { collapsed } = this.state; const { id } = this.props.params; if (typeof group === 'undefined' || !relationships) { @@ -100,7 +114,24 @@ class GroupTimeline extends React.PureComponent { {intl.formatMessage(messages.tabLatest)} + +
+ +
+ {!collapsed &&
+
+
+ +
+
+
}