Merge pull request #972 from appirio-tech/feature/messageEditDelete

Feature/message edit delete

Author: gondzo

.gitignore

@@ -5,3 +5,4 @@ bower_components
 build
 dist
 npm-debug.log
+.history

docs/dependency-notes.txt

@@ -0,0 +1,4 @@
+
+This document outlines the dependency concerns faced during the development of the application.
+
+1. We have overridden the version to 1.1.2 of to-ico library which is used indirectly by "favicon-webpack-plugin" which in turn is used for generating the favicons for different devices and browser combinations. This was required because with versions above 1.1.2 to-ico library is using some features from node v5.10+.

package.json

@@ -18,6 +18,8 @@
     "deep-freeze-node": "^1.1.2",
     "eslint": "^2.2.0",
     "eslint-plugin-react": "^4.1.0",
+    "favicons-webpack-plugin": "0.0.7",
+    "to-ico": "1.1.2",
     "ignore-styles": "^1.2.0",
     "mocha": "^2.4.5",
     "mocha-jsdom": "^1.1.0",
@@ -34,8 +36,9 @@
     "axios": "^0.13.1",
     "classnames": "^2.2.3",
     "draft-js": "^0.7.0",
-    "draft-js-export-html": "^0.4.0",
+    "draft-js-export-html": "^0.5.0",
     "draft-js-export-markdown": "^0.2.1",
+    "draft-js-import-html": "^0.3.2",
     "fbemitter": "^2.1.1",
     "filepicker-js": "^2.4.17",
     "filesize": "^3.3.0",

src/api/messages.js

@@ -1,6 +1,8 @@
 import _ from 'lodash'
 import { axiosInstance as axios } from './requestInterceptor'
-import { TC_API_URL } from '../config/constants'
+import { CONNECT_MESSAGE_API_URL } from '../config/constants'
+
+const timeout = 1.5 * 60 * 1000
 
 export function getTopics(criteria) {
   const params = {}
@@ -12,7 +14,7 @@ export function getTopics(criteria) {
     params.filter = filterStr.join('&')
   }
 
-  return axios.get(`${TC_API_URL}/v4/topics/`, { params })
+  return axios.get(`${CONNECT_MESSAGE_API_URL}/v4/topics/`, { params })
     .then( resp => {
       return {
         totalCount: _.get(resp.data, 'result.metadata.totalCount', 0),
@@ -22,7 +24,7 @@ export function getTopics(criteria) {
 }
 
 export function getTopic(topicId) {
-  return axios.get(`${TC_API_URL}/v4/topics/${topicId}`)
+  return axios.get(`${CONNECT_MESSAGE_API_URL}/v4/topics/${topicId}`)
     .then( resp => {
       return {
         totalCount: _.get(resp.data, 'result.metadata.totalCount', 0),
@@ -34,7 +36,7 @@ export function getTopic(topicId) {
 
 export function getTopicPosts(topicId, postIds) {
   const params = { postIds : postIds.join(',') }
-  return axios.get(`${TC_API_URL}/v4/topics/${topicId}/posts`, { params })
+  return axios.get(`${CONNECT_MESSAGE_API_URL}/v4/topics/${topicId}/posts`, { params })
     .then( resp => {
       return {
         totalCount: _.get(resp.data, 'result.metadata.totalCount', 0),
@@ -45,16 +47,32 @@ export function getTopicPosts(topicId, postIds) {
 }
 
 export function createTopic(topicProps) {
-  return axios.post(`${TC_API_URL}/v4/topics/`, topicProps, { timeout: 1.5 * 60 * 1000 })
+  return axios.post(`${CONNECT_MESSAGE_API_URL}/v4/topics/`, topicProps, { timeout })
     .then( resp => {
       return _.get(resp.data, 'result.content', {})
     })
 }
 
+export function saveTopic(topicId, topicProps) {
+  return axios.post(`${CONNECT_MESSAGE_API_URL}/v4/topics/${topicId}/edit`, topicProps, { timeout })
+    .then( resp => {
+      return _.get(resp.data, 'result.content', {})
+    })
+}
+
+export function deleteTopic(topicId) {
+  return axios.delete(`${CONNECT_MESSAGE_API_URL}/v4/topics/${topicId}`, null, { timeout } )
+    .then( resp => {
+      return {
+        result : _.get(resp.data, 'result.content', {})
+      }
+    })
+}
+
 // ignore resp
 /*eslint-disable no-unused-vars */
 export function addTopicPost(topicId, post) {
-  return axios.post(`${TC_API_URL}/v4/topics/${topicId}/posts`, { post: post.content }, { timeout: 1.5 * 60 * 1000 } )
+  return axios.post(`${CONNECT_MESSAGE_API_URL}/v4/topics/${topicId}/posts`, { post: post.content }, { timeout } )
     .then( resp => {
       return {
         topicId,
@@ -63,3 +81,22 @@ export function addTopicPost(topicId, post) {
     })
 }
 /*eslint-enable*/
+
+export function saveTopicPost(topicId, post) {
+  return axios.post(`${CONNECT_MESSAGE_API_URL}/v4/topics/${topicId}/posts/${post.id}/edit`, { post: post.content }, { timeout } )
+    .then( resp => {
+      return {
+        topicId,
+        comment : _.get(resp.data, 'result.content', {})
+      }
+    })
+}
+
+export function deleteTopicPost(topicId, postId) {
+  return axios.delete(`${CONNECT_MESSAGE_API_URL}/v4/topics/${topicId}/posts/${postId}`, null, { timeout } )
+    .then( resp => {
+      return {
+        result : _.get(resp.data, 'result.content', {})
+      }
+    })
+}

src/assets/images/arrows-16px-3_small-down.svg

@@ -2,6 +2,8 @@ import React, {PropTypes} from 'react'
 import './ActionCard.scss'
 import Panel from '../Panel/Panel'
 import cn from 'classnames'
+import CommentEditToggle from './CommentEditToggle'
+import RichTextArea from '../RichTextArea/RichTextArea'
 
 const ActionCard = ({children, className}) => (
   <Panel className={cn('action-card', className)}>
@@ -14,25 +16,96 @@ ActionCard.propTypes = {
   className: PropTypes.string
 }
 
-const Header = ({children, title}) => (
-  <div className="panel-body">
-    <div className="portrait">
-      &nbsp;
-    </div>
-    <div className="object">
-      <div className="card-header">
-        <div className="card-title">
-          {title}
+class Header extends React.Component{
+  constructor(props) {
+    super(props)
+    this.state = {editTopicMode: false}
+    this.onEditTopic = this.onEditTopic.bind(this)
+    this.cancelEditTopic = this.cancelEditTopic.bind(this)
+    this.onTopicChange = this.onTopicChange.bind(this)
+    this.onSaveTopic = this.onSaveTopic.bind(this)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({editTopicMode: nextProps.editTopicMode})
+  }
+
+  onEditTopic() {
+    this.setState({editTopicMode: true})
+    this.props.onTopicChange(this.props.topicMessage.id, null, null, true)
+  }
+  cancelEditTopic() {
+    this.setState({editTopicMode: false})
+    this.props.onTopicChange(this.props.topicMessage.id, null, null, false)
+  }
+  onTopicChange(title, content) {
+    this.props.onTopicChange(this.props.topicMessage.id, title, content, true)
+  }
+  onSaveTopic({title, content}) {
+    this.props.onSaveTopic(this.props.topicMessage.id, title, content)
+  }
+
+  render() {
+    if (this.state.editTopicMode) {
+      const { topicMessage } = this.props
+      const title = this.props.newTitle === null || this.props.newTitle === undefined ? this.props.title : this.props.newTitle
+      const content = topicMessage.newContent === null || topicMessage.newContent === undefined ? topicMessage.content : topicMessage.newContent
+      return (
+        <RichTextArea
+            editMode
+            title={title}
+            content={content}
+            oldTitle={this.props.title}
+            oldContent={topicMessage.content}
+            onPost={this.onSaveTopic}
+            onPostChange={this.onTopicChange}
+            isCreating={this.props.isSavingTopic}
+            hasError={this.props.error}
+            avatarUrl={this.props.avatarUrl}
+            authorName={this.props.authorName}
+            cancelEdit={this.cancelEditTopic}
+        />
+      )
+    }
+
+    return (
+      <div className="panel-body">
+        <div className="portrait">
+          &nbsp;
+        </div>
+        <div className="object">
+          <div className="card-header">
+            <div className="card-title">
+              <div>{this.props.title}</div>
+              {this.props.self && (
+                <CommentEditToggle
+                  forTopic
+                  hideDelete={this.props.hideDelete}
+                  onEdit={this.onEditTopic}
+                  onDelete={this.props.onDeleteTopic}
+                />
+              )}
+            </div>
+          </div>
+          {this.props.children}
         </div>
       </div>
-      {children}
-    </div>
-  </div>
-)
+    )
+  }
+}
 
 Header.propTypes = {
   children: PropTypes.any.isRequired,
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  authorName: PropTypes.string.isRequired,
+  avatarUrl: PropTypes.string,
+  onTopicChange: PropTypes.func.isRequired,
+  onSaveTopic: PropTypes.func.isRequired,
+  onDeleteTopic: PropTypes.func.isRequired,
+  hideDelete: PropTypes.bool,
+  self: PropTypes.bool,
+  isSavingTopic: PropTypes.bool,
+  error: PropTypes.bool
 }
 
 ActionCard.Header = Header