Close comments: WIP

.gitignore

@@ -5,6 +5,7 @@ dist
 dist/coral-admin/bundle.js
 .DS_Store
 *.iml
+dump.rdb
 .env
 gaba.cfg
 .idea/

client/coral-embed-stream/src/CommentStream.js

@@ -19,8 +19,9 @@ import LikeButton from '../../coral-plugin-likes/LikeButton';
 import PermalinkButton from '../../coral-plugin-permalinks/PermalinkButton';
 import SignInContainer from '../../coral-sign-in/containers/SignInContainer';
 import UserBox from '../../coral-sign-in/components/UserBox';
-import {TabBar, Tab, TabContent} from '../../coral-ui';
+import {TabBar, Tab, TabContent, Button} from '../../coral-ui';
 import SettingsContainer from '../../coral-settings/containers/SettingsContainer';
+import {Icon} from 'react-mdl';
 
 const {addItem, updateItem, postItem, getStream, postAction, deleteAction, appendItemArray} = itemActions;
 const {addNotification, clearNotification} = notificationActions;
@@ -57,10 +58,15 @@ class CommentStream extends Component {
     super(props);
 
     this.state = {
-      activeTab: 0
+      activeTab: 0,
+      closingComments: false
     };
 
     this.changeTab = this.changeTab.bind(this);
+    this.changeCommentMessage = this.changeCommentMessage.bind(this);
+    this.promptCloseComments = this.promptCloseComments.bind(this);
+    this.cancelClosingComments = this.cancelClosingComments.bind(this);
+    this.submitMessage = this.submitMessage.bind(this);
   }
 
   changeTab (tab) {
@@ -69,6 +75,26 @@ class CommentStream extends Component {
     });
   }
 
+  changeCommentMessage (str) {
+
+  }
+
+  submitMessage () {
+    
+  }
+
+  cancelClosingComments () {
+    this.setState({
+      closingComments: false
+    });
+  }
+
+  promptCloseComments () {
+    this.setState({
+      closingComments: true
+    });
+  }
+
   static propTypes = {
     items: PropTypes.object.isRequired,
     addItem: PropTypes.func.isRequired,
@@ -136,6 +162,7 @@ class CommentStream extends Component {
           <TabBar onChange={this.changeTab} activeTab={activeTab}>
             <Tab><Count id={rootItemId} items={this.props.items}/></Tab>
             <Tab>Settings</Tab>
+            <Tab>Configure Stream</Tab>
           </TabBar>
 
           <TabContent show={activeTab === 0}>
@@ -269,6 +296,17 @@ class CommentStream extends Component {
           <TabContent show={activeTab === 1}>
             <SettingsContainer/>
           </TabContent>
+          <TabContent show={activeTab === 2}>
+            <h3>Close Comment Stream</h3>
+            <CloseCommentsInfo onClick={this.promptCloseComments}
+              closing={this.state.closingComments} />
+            {this.state.closingComments ?
+              <CloseCommentsActions
+                message={"The comments for this article are now closed"}
+                onCancel={this.cancelClosingComments}
+                onSubmitMessage={this.submitMessage}
+                onChangeMessage={this.changeCommentMessage} /> : null}
+          </TabContent>
         </div>
         : 'Loading'
       }
@@ -276,4 +314,29 @@ class CommentStream extends Component {
   }
 }
 
+const CloseCommentsInfo = ({ closing, onClick }) => (
+  <div className="close-comments-intro-wrapper">
+    <p>
+      This comment stream is currently open. By closing this comment stream,
+      no new comments may be submitted and all previous comments will still
+      be displayed.
+    </p>
+    <Button onClick={onClick} disabled={closing}>Close Stream</Button>
+  </div>
+)
+
+const CloseCommentsActions = ({ onChangeMessage, message, onCancel, onSubmitMessage }) => (
+  <div>
+    <p className="close-comments-alert"><Icon name='warning'/> Are you sure you'd like to close this comment stream?</p>
+    <p>Write a message for readers to display</p>
+    <textarea className="close-comments-message"
+      value={message}
+      onChange={onChangeMessage}></textarea>
+    <div className="close-comments-confirm-wrapper">
+      <Button onClick={onCancel}>Cancel</Button>
+      <Button onClick={onSubmitMessage}>Yes, Close Stream</Button>
+    </div>
+  </div>
+)
+
 export default connect(mapStateToProps, mapDispatchToProps)(CommentStream);

client/coral-embed-stream/style/default.css

@@ -193,3 +193,42 @@ hr {
   float: right;
   margin: 8px;
 }
+
+/* Close comments */
+
+.close-comments-intro-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.close-comments-intro-wrapper button {
+  width: 300px;
+  margin-left: 20px;
+}
+
+.close-comments-intro-wrapper button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.close-comments-message {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100px;
+}
+
+.close-comments-confirm-wrapper {
+  float: right;
+}
+
+.close-comments-alert {
+  background-color: #d65344;
+  color: white;
+  font-size: 16px;
+  padding: 5px;
+}
+
+.close-comments-alert i.material-icons {
+  font-size: 16px !important;
+}