fixes #376, fixes #457

Author: Parth Shah

src/api/messages.js

@@ -28,7 +28,8 @@ export function getTopicPosts(topicId, postIds) {
     .then( resp => {
       return {
         totalCount: _.get(resp.data, 'result.metadata.totalCount', 0),
-        posts: _.get(resp.data, 'result.content', [])
+        posts: _.get(resp.data, 'result.content', []),
+        topicId
       }
     })
 }

src/components/Feed/FeedComments.jsx

@@ -4,7 +4,7 @@ import Panel from '../Panel/Panel'
 import AddComment from '../ActionCard/AddComment'
 import Comment from '../ActionCard/Comment'
 import cn from 'classnames'
-import { THREAD_MESSAGES_PAGE_SIZE } from '../../config/constants'
+// import { THREAD_MESSAGES_PAGE_SIZE } from '../../config/constants'
 
 const getCommentCount = (totalComments) => {
   if (!totalComments) {
@@ -24,7 +24,7 @@ class FeedComments extends React.Component {
 
   render() {
     const {
-    comments, currentUser, totalComments, /*onLoadMoreComments,*/ isLoadingComments, hasMoreComments, onAdd,
+    comments, currentUser, totalComments, onLoadMoreComments, isLoadingComments, hasMoreComments, onAdd,
     onChange, content, avatarUrl, isAddingComment
   } = this.props
     let authorName = currentUser.firstName
@@ -35,17 +35,17 @@ class FeedComments extends React.Component {
       this.setState({showAll: true})
     // TODO - handle the case when a topic has more than 20 comments
     // since those will have to retrieved from the server
-    // if (!isLoadingComments) {
-    //   onLoadMoreComments()
-    // }
+      if (!isLoadingComments) {
+        onLoadMoreComments()
+      }
     }
 
-    let _comments = comments
-    let _hasMoreComments = hasMoreComments
-    if (!this.state.showAll && _comments.length > THREAD_MESSAGES_PAGE_SIZE) {
-      _comments = _comments.slice(-THREAD_MESSAGES_PAGE_SIZE)
-      _hasMoreComments = true
-    }
+    // let _comments = comments
+    // let _hasMoreComments = hasMoreComments
+    // if (!this.state.showAll && _comments.length > THREAD_MESSAGES_PAGE_SIZE) {
+    //   _comments = _comments.slice(-THREAD_MESSAGES_PAGE_SIZE)
+    //   _hasMoreComments = true
+    // }
 
     return (
     <div>
@@ -57,15 +57,15 @@ class FeedComments extends React.Component {
               {getCommentCount(totalComments)}
             </div>
             <hr className={cn({'no-margin': !comments.length})} />
-            {_hasMoreComments && <div className={cn('comment-collapse', {'loading-comments': isLoadingComments})}>
+            {hasMoreComments && <div className={cn('comment-collapse', {'loading-comments': isLoadingComments})}>
               <a href="javascript:" onClick={ handleLoadMoreClick } className="comment-collapse-button">
                 {isLoadingComments ? 'Loading...' : 'View older comments'}
               </a>
             </div>}
           </div>
         </div>
       </Panel.Body>
-      {_comments.map((item, idx) =>
+      {comments.map((item, idx) =>
         <Comment
           key={idx}
           avatarUrl={item.author.photoURL}

src/components/Feed/NewPost.jsx

@@ -58,6 +58,14 @@ class NewPost extends React.Component {
     document.removeEventListener('click', this.onClickOutside)
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (!(nextProps.isCreating || nextProps.hasError && !nextProps.isCreating)) {
+      this.setState({editorState: EditorState.createEmpty()})
+      this.refs.title.value = ''
+    }
+    this.onNewPostChange()
+  }
+
   onClickOutside(evt) {
     let currNode = evt.target
     let isEditor = false
@@ -150,8 +158,8 @@ class NewPost extends React.Component {
       const content = stateToMarkdown(editorState.getCurrentContent())
       if (title && content) {
         this.props.onPost({title, content})
-        this.setState({editorState: EditorState.createEmpty()})
-        this.refs.title.value = ''
+        // this.setState({editorState: EditorState.createEmpty()})
+        // this.refs.title.value = ''
       }
     }
 

src/components/MessageDetails/MessageDetails.jsx

@@ -36,6 +36,7 @@ class MessageDetails extends React.Component {
   isLoadingComments,
   currentUser,
   isAddingComment,
+  error,
   allowAddingComment} = this.props
     let authorName = currentUser.firstName
     if (authorName && currentUser.lastName) {
@@ -71,6 +72,7 @@ class MessageDetails extends React.Component {
         <AddComment
           className="messaging-comment-section"
           isAdding={isAddingComment}
+          hasError={error}
           avatarUrl={currentUser.photoURL}
           authorName={ authorName }
           onAdd={onAddNewMessage}

src/components/ProjectProgress/ProjectProgress.jsx

@@ -22,6 +22,7 @@ const ProjectProgress = ({title, type, percent, children }) => (
 ProjectProgress.defaultProps = {
   type: 'completed'
 }
+
 ProjectProgress.propTypes = {
   title: PropTypes.string.isRequired,
   type: PropTypes.oneOf(['working', 'error', 'completed']),

src/components/TopBar/TopBarContainer.js

@@ -8,11 +8,11 @@ import TopBar from './TopBar'
 import CreateView from '../../projects/create/components/CreateView'
 import { TCEmitter } from '../../helpers'
 import {
+  DOMAIN,
   ROLE_CONNECT_COPILOT,
   ROLE_CONNECT_MANAGER,
   ROLE_ADMINISTRATOR,
   EVENT_ROUTE_CHANGE,
-  ACCOUNTS_APP_LOGIN_URL,
   ACCOUNTS_APP_REGISTER_URL
 } from '../../config/constants'
 
@@ -97,7 +97,8 @@ class TopBarContainer extends React.Component {
     const {isCreatingProject, currentPath, isFilterVisible } = this.state
     const isProjectDetails = /projects\/\d+/.test(currentPath)
     const isHomePage = this.context.router.isActive('/', true)
-    const loginUrl = ACCOUNTS_APP_LOGIN_URL
+    // NOTE: hardcoding to connectv2, once connect v1
+    const loginUrl = `ACCOUNTS_APP_LOGIN_URL?retUrl=https://connectv2.${DOMAIN}/`
     const registerUrl = !isHomePage ? ACCOUNTS_APP_REGISTER_URL : null
     return (
       <div>

…ects/detail/containers/Specification.jsx …c/config/projectQuestions/topcoder.v1.jssrc/projects/detail/containers/Specification.jsx renamed to src/config/projectQuestions/topcoder.v1.js src/projects/detail/containers/Specification.jsx renamed to src/config/projectQuestions/topcoder.v1.js

@@ -1,20 +1,6 @@
-'use strict'
-
-import React, { Component, PropTypes } from 'react'
-import { connect } from 'react-redux'
 import _ from 'lodash'
-import Sticky from 'react-stickynode'
-
-import ProjectSpecSidebar from '../components/ProjectSpecSidebar'
-import FooterV2 from '../../../components/FooterV2/FooterV2'
-import EditProjectForm from '../components/EditProjectForm'
-import { updateProject } from '../../actions/project'
-import spinnerWhileLoading from '../../../components/LoadingSpinner'
 import { Icons } from 'appirio-tech-react-components'
 
-
-require('./Specification.scss')
-
 const isFileRequired = (project, subSections) => {
   const subSection = _.find(subSections, (s) => s.type === 'questions')
   const fields = _.filter(subSection.questions, q => q.type.indexOf('see-attached') > -1)
@@ -199,69 +185,4 @@ const sections = [
   }
 ]
 
-// This handles showing a spinner while the state is being loaded async
-const enhance = spinnerWhileLoading(props => !props.processing)
-const EnhancedEditProjectForm = enhance(EditProjectForm)
-
-class ProjectSpecification extends Component {
-  constructor(props) {
-    super(props)
-    this.saveProject = this.saveProject.bind(this)
-  }
-
-  saveProject(model) {
-    // compare old & new
-    this.props.updateProject(this.props.project.id, model)
-  }
-
-  render() {
-    const { project, currentMemberRole } = this.props
-
-    return (
-      <section className="two-col-content content">
-        <div className="container">
-          <div className="left-area">
-            <Sticky top={80}>
-              <ProjectSpecSidebar project={project} sections={sections} currentMemberRole={currentMemberRole} />
-              <FooterV2 />
-            </Sticky>
-          </div>
-
-          <div className="right-area">
-            <EnhancedEditProjectForm
-              project={project}
-              sections={sections}
-              isEdittable={!!currentMemberRole}
-              submitHandler={this.saveProject}
-            />
-          </div>
-
-        </div>
-      </section>
-    )
-  }
-}
-
-ProjectSpecification.propTypes = {
-  project: PropTypes.object.isRequired,
-  currentMemberRole: PropTypes.string,
-  processing: PropTypes.bool,
-  error: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.object
-  ])
-}
-
-const mapStateToProps = ({projectState, loadUser}) => {
-  return {
-    processing: projectState.processing,
-    error: projectState.error,
-    currentUserId: parseInt(loadUser.user.id)
-  }
-}
-
-const mapDispatchToProps = { updateProject }
-
-ProjectSpecification.sections = sections
-
-export default connect(mapStateToProps, mapDispatchToProps)(ProjectSpecification)
+export default sections

src/projects/actions/projectTopics.js

@@ -41,11 +41,40 @@ export function laodProjectMessages(projectId) {
 
 // ignore action param
 /*eslint-disable no-unused-vars */
+
+const getTopicsWithComments = (projectId, tag) => {
+  return getTopics({ reference : 'project', referenceId: projectId, tag })
+    .then(({topics, totalCount}) => {
+      const additionalPosts = []
+      // if a topic has more than 20 posts then to display the latest posts,
+      // we'll have to first retrieve them from the server
+      _.forEach(topics, (t) => {
+        if (t.postIds.length > 20) {
+          const postIds = t.postIds.slice(20).slice(-6)
+          additionalPosts.push(getTopicPosts(t.id, postIds))
+        }
+        t.posts = _.sortBy(t.posts, ['id'])
+      })
+      if (additionalPosts.length === 0) {
+        // we dont need to retrieve any additional posts
+        return { topics, totalCount }
+      }
+      return Promise.all(additionalPosts)
+        .then(posts => {
+          _.forEach(posts, (p) => {
+            const topic = _.find(topics, p.topicId)
+            topic.posts = _.sortBy(topic.posts.concat(p.posts), ['id'])
+          })
+          return { topics, totalCount }
+        })
+
+    })
+}
 const getProjectTopicsWithMember = (dispatch, projectId, tag) => {
   return new Promise((resolve, reject) => {
     return dispatch({
       type: LOAD_PROJECT_FEEDS,
-      payload: getTopics({ reference : 'project', referenceId: projectId, tag }),
+      payload: getTopicsWithComments(projectId, tag),
       meta: { tag, projectId }
     })
     .then(({ value, action }) => {

src/projects/detail/components/EditProjectForm.jsx

@@ -22,6 +22,7 @@ class EditProjectForm extends Component {
 
   componentWillMount() {
     this.setState({
+      isProjectDirty: false,
       isFeaturesDirty: false,
       project: Object.assign({}, this.props.project),
       canSubmit: false,
@@ -30,10 +31,14 @@ class EditProjectForm extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
+    let updatedProject = Object.assign({}, nextProps.project)
+    if (this.state.isFeaturesDirty && !this.state.isSaving) {
+      updatedProject = update(updatedProject, {details: { appDefinition: { features: { $set: this.state.project.details.appDefinition.features } } } })
+    }
     this.setState({
-      project: Object.assign({}, nextProps.project),
-      canSubmit: false,
-      isFeaturesDirty: false
+      project: updatedProject,
+      canSubmit: this.state.isFeaturesDirty,
+      isSaving: false
     })
   }
 
@@ -79,6 +84,7 @@ class EditProjectForm extends Component {
     if (this.state.isFeaturesDirty) {
       model.details.appDefinition.features = this.state.project.details.appDefinition.features
     }
+    this.setState({isSaving: true })
     this.props.submitHandler(model)
   }
 
@@ -134,6 +140,7 @@ class EditProjectForm extends Component {
 
 EditProjectForm.propTypes = {
   project: PropTypes.object.isRequired,
+  saving: PropTypes.bool.isRequired,
   sections: PropTypes.arrayOf(PropTypes.object).isRequired,
   isEdittable: PropTypes.bool.isRequired,
   submitHandler: PropTypes.func.isRequired

src/projects/detail/components/ProjectSpecSidebar.jsx

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import React, { PropTypes, Component } from 'react'
 import { connect } from 'react-redux'
+import update from 'react-addons-update'
 import SidebarNav from './SidebarNav'
 import { PROJECT_ROLE_OWNER, PROJECT_ROLE_CUSTOMER } from '../../../config/constants'
 import { updateProject } from '../../actions/project'
@@ -86,6 +87,7 @@ class ProjectSpecSidebar extends Component {
       _.indexOf([PROJECT_ROLE_OWNER, PROJECT_ROLE_CUSTOMER], currentMemberRole) > -1
     return (
       <div className="projectSpecSidebar">
+        <button onClick={() => this.props.updateProject(project.id, update(project, { details: { appDefinition: { goal: { value: { $apply: (x) => { return parseInt(x) + 1}}}}}}))} className="btn btn-primary">Test Save</button>
         <h4 className="titles gray-font">Specifications</h4>
         <div className="list-group">
           <SidebarNav items={navItems} />