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 && }