Add basic UI to set list replies setting in glitch-soc

1 files changed, 20 insertions, 2 deletions

diff --git a/app/javascript/flavours/glitch/features/list_timeline/index.js b/app/javascript/flavours/glitch/features/list_timeline/index.js
index 2e77ba235..edefc2006 100644
--- a/app/javascript/flavours/glitch/features/list_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/list_timeline/index.js
@@ -9,7 +9,7 @@ import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/col
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { connectListStream } from 'flavours/glitch/actions/streaming';
 import { expandListTimeline } from 'flavours/glitch/actions/timelines';
-import { fetchList, deleteList } from 'flavours/glitch/actions/lists';
+import { fetchList, deleteList, updateList } from 'flavours/glitch/actions/lists';
 import { openModal } from 'flavours/glitch/actions/modal';
 import MissingIndicator from 'flavours/glitch/components/missing_indicator';
 import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
@@ -17,6 +17,9 @@ import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
 const messages = defineMessages({
   deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
   deleteConfirm: { id: 'confirmations.delete_list.confirm', defaultMessage: 'Delete' },
+  all_replies:   { id: 'lists.replies_policy.all_replies', defaultMessage: 'to any followed user' },
+  no_replies:    { id: 'lists.replies_policy.no_replies', defaultMessage: 'none' },
+  list_replies:  { id: 'lists.replies_policy.list_replies', defaultMessage: 'only to list' },
 });
 
 const mapStateToProps = (state, props) => ({
@@ -111,11 +114,19 @@ export default class ListTimeline extends React.PureComponent {
     }));
   }
 
+  handleRepliesPolicyClick = () => {
+    const { dispatch, list } = this.props;
+    const { id } = this.props.params;
+    const replies_policy = {'all_replies': 'no_replies', 'no_replies': 'list_replies', 'list_replies': 'all_replies'}[list.get('replies_policy')];
+    this.props.dispatch(updateList(id, undefined, false, replies_policy));
+  }
+
   render () {
-    const { hasUnread, columnId, multiColumn, list } = this.props;
+    const { hasUnread, columnId, multiColumn, list, intl } = this.props;
     const { id } = this.props.params;
     const pinned = !!columnId;
     const title  = list ? list.get('title') : id;
+    const replies_policy = list ? list.get('replies_policy') : undefined;
 
     if (typeof list === 'undefined') {
       return (
@@ -155,6 +166,13 @@ export default class ListTimeline extends React.PureComponent {
             <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleDeleteClick}>
               <i className='fa fa-trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' />
             </button>
+
+            { replies_policy !== undefined && (
+              <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleRepliesPolicyClick}>
+                <i className='fa fa-reply' /> <FormattedMessage id='lists.replies_policy.title' defaultMessage='Show replies: {policy}' values={{ policy: intl.formatMessage(messages[replies_policy]) }} />
+              </button>
+             )
+            }
           </div>
 
           <hr />