From 7bdbaad03d9b44918c3b08be41a4ada4abf74855 Mon Sep 17 00:00:00 2001
From: Vikas Agarwal <vikas.agarwal@topcoder.com>
Date: Thu, 15 Dec 2016 12:13:06 +0530
Subject: [PATCH 1/8] Github issue #372, [Pagination] - keep fixed pagination
 option displaying 5 pages. -- Updated the paginator to show maximum 5 pages
 in the list -- Found a bug with Tooltip component which is preventing the
 tooltip from being visible

---
 src/components/Grid/GridView.scss     |  7 ++++
 src/components/Grid/PaginationBar.jsx | 54 +++++++++++++++++++++++++--
 2 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/src/components/Grid/GridView.scss b/src/components/Grid/GridView.scss
index 001d5bf38..94cb78c0e 100644
--- a/src/components/Grid/GridView.scss
+++ b/src/components/Grid/GridView.scss
@@ -490,6 +490,13 @@
                     }
                 }
             }
+
+            &.go-to-page-pill {
+                .tooltip-target {
+                    min-width: 27px;
+                    height: 28px;
+                }
+            }
         }
         a {
             @include roboto;
diff --git a/src/components/Grid/PaginationBar.jsx b/src/components/Grid/PaginationBar.jsx
index 1d59c1f0e..9a0d680f1 100644
--- a/src/components/Grid/PaginationBar.jsx
+++ b/src/components/Grid/PaginationBar.jsx
@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import cn from 'classnames'
 import _ from 'lodash'
 import { branch, renderComponent } from 'recompose'
+import { Tooltip } from 'appirio-tech-react-components'
 
 const noop = () => <noscript />
 /**
@@ -26,6 +27,22 @@ const PagePill = ({pageNum, onPageClick, currentPageNum}) => {
   )
 }
 
+const GoToPagePill = ({minPage, maxPage, changePage}) => {
+  const handleChange = (evt) => {
+    console.log(evt.target)
+  }
+  return (
+    <li className="go-to-page-pill">
+      <Tooltip popMethod="click">
+        <div className="tooltip-target"><span>...</span></div>
+        <div className="tooltip-body">
+          <div>Go To: <input type="text" onChange={handleChange} /></div>
+        </div>
+      </Tooltip>
+    </li>
+  )
+}
+
 /**
  * Pagingation bar
  */
@@ -42,14 +59,45 @@ const PaginationBar = enhance(({onPageChange, currentPageNum, totalCount, pageSi
 
   // calculate number of pages to show
   const pages = Math.ceil(totalCount / pageSize)
+  const pagePills = []
+  const pagesBeforeCurrent = currentPageNum - 1 - 1
+  const pagesAfterCurrent = pages - currentPageNum - 1
+  if (currentPageNum > 1) {
+    pagePills.push(<PagePill key={1} pageNum={ 1 } onPageClick={handlePageSelection} currentPageNum={currentPageNum} />)
+  }
+  
+  pagePills.push(<PagePill key={currentPageNum} pageNum={ currentPageNum } onPageClick={handlePageSelection} currentPageNum={currentPageNum} />)
+  
+  if (currentPageNum < pages) {
+    pagePills.push(<PagePill key={pages} pageNum={ pages } onPageClick={handlePageSelection} currentPageNum={currentPageNum} />)
+  }
+  const remainingPillsLeft = Math.ceil((5 - pagePills.length) / 2)
+  
+  if (pagesBeforeCurrent > 0) {
+    for(let i=1; i <= remainingPillsLeft && i <= pagesBeforeCurrent; i++) {
+      pagePills.splice(1, 0, <PagePill key={ currentPageNum - i } pageNum={ currentPageNum - i } onPageClick={handlePageSelection} currentPageNum={currentPageNum} />)
+    }
+  }
+
+  const remainingPillsRight = 5 - pagePills.length
+  
+  if (pagesAfterCurrent > 0) {
+    for(let i=1; i <= remainingPillsRight && i <= pagesAfterCurrent; i++) {
+      pagePills.splice(pagePills.length - 1, 0, <PagePill key={ currentPageNum + i } pageNum={ currentPageNum + i } onPageClick={handlePageSelection} currentPageNum={currentPageNum} />)
+    }
+  }
+  if (pagesBeforeCurrent - remainingPillsLeft > 0) {
+    pagePills.splice(1, 0, <GoToPagePill />)
+  }
+  if (pagesAfterCurrent - remainingPillsRight > 0) {
+    pagePills.splice(pagePills.length - 1, 0, <GoToPagePill />)
+  }
   return (
     <div className="pages">
       <nav className="right-page">
         { currentPageNum > 1 && <a href="javascript:" onClick={handlePageSelection} className="btn-prev">Prev</a> }
         <ul>
-          { _.range(pages).map(idx =>
-            <PagePill key={idx} pageNum={idx+1} onPageClick={handlePageSelection} currentPageNum={currentPageNum} />
-          )}
+          { pagePills.map(pagePill => pagePill)}
         </ul>
         { currentPageNum < pages && <a href="javascript:" onClick={handlePageSelection} className="btn-next">Next</a> }
       </nav>

From 83cde5221c94abf57370014066b46537419a2369 Mon Sep 17 00:00:00 2001
From: Vikas Agarwal <vikas.agarwal@topcoder.com>
Date: Thu, 22 Dec 2016 12:37:31 +0530
Subject: [PATCH 2/8] Github issue #372, [Pagination] - keep fixed pagination
 option displaying 5 pages. -- Implemented the required behaviour. Needs more
 user testing before going live.

---
 src/components/Grid/GridView.scss     | 271 ++++++++++++++------------
 src/components/Grid/PaginationBar.jsx | 134 +++++++++----
 2 files changed, 242 insertions(+), 163 deletions(-)

diff --git a/src/components/Grid/GridView.scss b/src/components/Grid/GridView.scss
index 94cb78c0e..ce37a3fcb 100644
--- a/src/components/Grid/GridView.scss
+++ b/src/components/Grid/GridView.scss
@@ -410,140 +410,157 @@
 
 /* .pages */
 .pages {
-    background: $tc-gray-neutral-light;
-    min-height: 70px;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    .right-page {
+  background: $tc-gray-neutral-light;
+  min-height: 70px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  .right-page {
+    background: $tc-white;
+    border: 1px solid $tc-gray-30;
+    border-radius: 2px;
+    height: 30px;
+    margin: 20px 20px 0 0;
+    float: right;
+    display: flex;
+    ul {
+      display: flex;
+    }
+    ul,
+    li,
+    .btn-prev,
+    .btn-next {
+      text-align: center;
+      // float: left;
+    }
+    li {
+      border-right: 1px solid $tc-gray-30;
+      position: relative;
+      &.active a {
+        background: $tc-gray-20;
+        box-shadow: inset -1px 1px 2px 0px rgba(71,71,79,0.20);
+      }
+      .down-layer {
         background: $tc-white;
-        border: 1px solid $tc-gray-30;
-        border-radius: 2px;
-        height: 30px;
-        margin: 20px 20px 0 0;
-        float: right;
-        ul,
-        li,
-        .btn-prev,
-        .btn-next {
-            text-align: center;
-            float: left;
+        border-radius: 5px;
+        text-align: left;
+        min-width: 140px;
+        min-height: 55px;
+        margin-bottom: 15px;
+        position: absolute;
+        top: 40px;
+        left: 50%;
+        margin-left: -70px;
+        box-shadow: 0 0 10px rgba(10, 10, 10, 0.2);
+        z-index: 99;
+        &::before {
+          font-size: 0;
+          line-height: 0;
+          width: 0;
+          height: 0;
+          border-left: 7px solid transparent;
+          border-right: 7px solid transparent;
+          border-bottom: 7px solid #fff;
+          content: "";
+          display: block;
+          position: absolute;
+          top: -7px;
+          left: 50%;
+          margin-left: -7px;
         }
-        li {
-            border-right: 1px solid $tc-gray-30;
-            position: relative;
-            &.active a {
-                background: $tc-gray-20;
-                box-shadow: inset -1px 1px 2px 0px rgba(71,71,79,0.20);
-            }
-            .down-layer {
-                background: $tc-white;
-                border-radius: 5px;
-                text-align: left;
-                min-width: 140px;
-                min-height: 55px;
-                margin-bottom: 15px;
-                position: absolute;
-                top: 40px;
-                left: 50%;
-                margin-left: -70px;
-                box-shadow: 0 0 10px rgba(10, 10, 10, 0.2);
-                z-index: 99;
-                &::before {
-                    font-size: 0;
-                    line-height: 0;
-                    width: 0;
-                    height: 0;
-                    border-left: 7px solid transparent;
-                    border-right: 7px solid transparent;
-                    border-bottom: 7px solid #fff;
-                    content: "";
-                    display: block;
-                    position: absolute;
-                    top: -7px;
-                    left: 50%;
-                    margin-left: -7px;
-                }
-                .txt {
-                    @include roboto;
-                    font-size: $tc-label-md;
-                    color: #394146;
-                    line-height: $base-unit * 6;
-                    padding: 13px 0 0 13px;
-                    display: block;
-                    float: left;
-                }
-                .inputs {
-                    width: 34px;
-                    height: 30px;
-                    display: block;
-                    margin: 13px 0 0 90px;
-                    input {
-                        @include roboto;
-                        font-size: $tc-label-md;
-                        color: #394146;
-                        background: $tc-gray-neutral-light;
-                        line-height: $base-unit * 4;
-                        text-align: center;
-                        height: 30px;
-                        padding: 2px 0 0 0;
-                        margin: 0;
-                    }
-                }
-            }
-
-            &.go-to-page-pill {
-                .tooltip-target {
-                    min-width: 27px;
-                    height: 28px;
-                }
-            }
+        .txt {
+          @include roboto;
+          font-size: $tc-label-md;
+          color: #394146;
+          line-height: $base-unit * 6;
+          padding: 13px 0 0 13px;
+          display: block;
+          float: left;
         }
-        a {
+        .inputs {
+          width: 34px;
+          height: 30px;
+          display: block;
+          margin: 13px 0 0 90px;
+          input {
             @include roboto;
             font-size: $tc-label-md;
-            color: $tc-gray-80;
-            height: 28px;
-            min-width: 27px;
-            padding: 1px 8px;
-            line-height: $base-unit + 23;
-            display: block;
-            &.btn-prev {
-                border-right: 1px solid $tc-gray-30;
-                min-width: 70px;
-                padding-left: 24px;
-                position: relative;
-                &:before {
-                    font-size: 0;
-                    line-height: 0;
-                    background: url("./images/arrow-left.svg") no-repeat 0 0;
-                    width: 12px;
-                    height: 12px;
-                    content: "";
-                    display: block;
-                    position: absolute;
-                    top: 9px;
-                    left: 12px;
-                }
-            }
-            &.btn-next {
-                min-width: 70px;
-                padding-right: 24px;
-                position: relative;
-                &:after {
-                    font-size: 0;
-                    line-height: 0;
-                    background: url("./images/arrow-right.svg") no-repeat 0 0;
-                    width: 12px;
-                    height: 12px;
-                    content: "";
-                    display: block;
-                    position: absolute;
-                    top: 9px;
-                    right: 12px;
-                }
-            }
+            color: #394146;
+            background: $tc-gray-neutral-light;
+            line-height: $base-unit * 4;
+            text-align: center;
+            height: 30px;
+            padding: 2px 0 0 0;
+            margin: 0;
+          }
+        }
+      }
+
+      &.go-to-page-pill {
+        // position: inherit;
+        .tooltip-target {
+          min-width: 27px;
+          height: 28px;
+        }
+
+        .go-to-page-tooltip {
+          display: flex;
+          align-items: center;
+
+          input[type="number"] {
+            width: 50px;
+            height: 30px;
+            margin-bottom: 0px;
+            margin-left: $base-unit * 2;
+          }
         }
+      }
+    }
+    a {
+      @include roboto;
+      font-size: $tc-label-md;
+      color: $tc-gray-80;
+      height: 28px;
+      min-width: 27px;
+      padding: 1px 8px;
+      line-height: $base-unit + 23;
+      display: block;
+      &.btn-prev {
+        border-right: 1px solid $tc-gray-30;
+        min-width: 70px;
+        padding-left: 24px;
+        position: relative;
+        &:before {
+          font-size: 0;
+          line-height: 0;
+          background: url("./images/arrow-left.svg") no-repeat 0 0;
+          width: 12px;
+          height: 12px;
+          content: "";
+          display: block;
+          position: absolute;
+          top: 9px;
+          left: 12px;
+        }
+      }
+      &.btn-next {
+        min-width: 70px;
+        padding-right: 24px;
+        position: relative;
+        &:after {
+          font-size: 0;
+          line-height: 0;
+          background: url("./images/arrow-right.svg") no-repeat 0 0;
+          width: 12px;
+          height: 12px;
+          content: "";
+          display: block;
+          position: absolute;
+          top: 9px;
+          right: 12px;
+        }
+      }
     }
+  }
 }
 
 
diff --git a/src/components/Grid/PaginationBar.jsx b/src/components/Grid/PaginationBar.jsx
index 9a0d680f1..633c69415 100644
--- a/src/components/Grid/PaginationBar.jsx
+++ b/src/components/Grid/PaginationBar.jsx
@@ -4,6 +4,8 @@ import _ from 'lodash'
 import { branch, renderComponent } from 'recompose'
 import { Tooltip } from 'appirio-tech-react-components'
 
+const NUMBER_OF_PILLS = 5
+
 const noop = () => <noscript />
 /**
  * HOC to help determine if pagination should be shown or not
@@ -27,16 +29,18 @@ const PagePill = ({pageNum, onPageClick, currentPageNum}) => {
   )
 }
 
-const GoToPagePill = ({minPage, maxPage, changePage}) => {
+const GoToPagePill = ({minPage, maxPage, onPageClick}) => {
   const handleChange = (evt) => {
-    console.log(evt.target)
+    if (evt.keyCode === 13) {// return key
+      onPageClick(parseInt(evt.target.value))
+    }
   }
   return (
     <li className="go-to-page-pill">
       <Tooltip popMethod="click">
         <div className="tooltip-target"><span>...</span></div>
         <div className="tooltip-body">
-          <div>Go To: <input type="text" onChange={handleChange} /></div>
+          <div className="go-to-page-tooltip">Go to page: <input type="number" min={minPage} max={maxPage} onKeyUp={handleChange} /></div>
         </div>
       </Tooltip>
     </li>
@@ -49,49 +53,107 @@ const GoToPagePill = ({minPage, maxPage, changePage}) => {
 const PaginationBar = enhance(({onPageChange, currentPageNum, totalCount, pageSize}) => {
   const handlePageSelection = val => {
     // if it's a number then call handler
-    if (currentPageNum !== val && _.isNumber(val)) onPageChange(val)
+    if (currentPageNum !== val && _.isNumber(val)) return onPageChange(val)
     // val must be an event-  handle prev / next
     val = val.target.innerText.toLowerCase()
     if (val === 'prev') onPageChange(currentPageNum-1)
     if (val === 'next') onPageChange(currentPageNum+1)
   }
 
-
-  // calculate number of pages to show
-  const pages = Math.ceil(totalCount / pageSize)
-  const pagePills = []
-  const pagesBeforeCurrent = currentPageNum - 1 - 1
-  const pagesAfterCurrent = pages - currentPageNum - 1
-  if (currentPageNum > 1) {
-    pagePills.push(<PagePill key={1} pageNum={ 1 } onPageClick={handlePageSelection} currentPageNum={currentPageNum} />)
-  }
-  
-  pagePills.push(<PagePill key={currentPageNum} pageNum={ currentPageNum } onPageClick={handlePageSelection} currentPageNum={currentPageNum} />)
-  
-  if (currentPageNum < pages) {
-    pagePills.push(<PagePill key={pages} pageNum={ pages } onPageClick={handlePageSelection} currentPageNum={currentPageNum} />)
-  }
-  const remainingPillsLeft = Math.ceil((5 - pagePills.length) / 2)
-  
-  if (pagesBeforeCurrent > 0) {
-    for(let i=1; i <= remainingPillsLeft && i <= pagesBeforeCurrent; i++) {
-      pagePills.splice(1, 0, <PagePill key={ currentPageNum - i } pageNum={ currentPageNum - i } onPageClick={handlePageSelection} currentPageNum={currentPageNum} />)
-    }
+  const renderPill = (pageNum) => {
+    return (
+      <PagePill
+        key={pageNum}
+        pageNum={ pageNum }
+        onPageClick={handlePageSelection}
+        currentPageNum={currentPageNum}
+      />
+    )
   }
 
-  const remainingPillsRight = 5 - pagePills.length
-  
-  if (pagesAfterCurrent > 0) {
-    for(let i=1; i <= remainingPillsRight && i <= pagesAfterCurrent; i++) {
-      pagePills.splice(pagePills.length - 1, 0, <PagePill key={ currentPageNum + i } pageNum={ currentPageNum + i } onPageClick={handlePageSelection} currentPageNum={currentPageNum} />)
+  const populatePills = (pages) => {
+    const pagePills = []
+
+    if (pages <= NUMBER_OF_PILLS) {
+      for(let p=1; p <= pages; p++) {
+        pagePills.push(renderPill(p))
+      }
+      return pagePills
     }
+    // number of pages available to show pills before current page (assuming 1st pill is always there)
+    const pagesBeforeCurrent = currentPageNum - 1 - 1
+    // number of pages available to show pills after current page (assuming last pill is always there)
+    const pagesAfterCurrent = pages - currentPageNum - 1
+    // render first page pill
+    if (currentPageNum > 1) {
+      pagePills.push(renderPill(1))
+    }
+    // render current page pill
+    pagePills.push(renderPill(currentPageNum))
+    
+    // render last page pill
+    if (currentPageNum < pages) {
+      pagePills.push(renderPill(pages))
+    }
+    // array to store the pills to be rendered on the left side of the current page
+    const leftPagePills = []
+    // initially assumes equal partition between left and right side of the current page
+    let remainingPillsLeft = Math.ceil((NUMBER_OF_PILLS - pagePills.length) / 2)
+    
+    // if pills avialable to render before current page, add pills determined by remainingPillsLeft
+    if (pagesBeforeCurrent > 0) {
+      for(let i=1; i <= remainingPillsLeft && i <= pagesBeforeCurrent; i++) {
+        leftPagePills.splice(0, 0, renderPill(currentPageNum - i))
+      }
+    }
+    // add the left side pills to the main pills array
+    pagePills.splice(1, 0, ...leftPagePills)
+    // calculates the pills to render on the right side of the current page, it may be greater than the left side pills
+    const remainingPillsRight = NUMBER_OF_PILLS - pagePills.length
+    
+    // if pills available to render after the current page, add pills determined by remainingPillsRight
+    if (pagesAfterCurrent > 0) {
+      for(let i=1; i <= remainingPillsRight && i <= pagesAfterCurrent; i++) {
+        pagePills.splice(pagePills.length - 1, 0, renderPill(currentPageNum + i))
+      }
+    }
+    // Now, checks if we still need to render any pill to show fix number of pills
+    remainingPillsLeft = NUMBER_OF_PILLS - pagePills.length
+    // adds more pills towards left of the current page
+    if(pagesBeforeCurrent - leftPagePills.length - remainingPillsLeft > 0) {
+      for(let i=1; i <= remainingPillsLeft; i++) {
+        pagePills.splice(1, 0, renderPill(currentPageNum - leftPagePills.length - i))
+      }
+    }
+    // adds go to page pill if there are missing pills between first and current page pill
+    if (pagesBeforeCurrent - leftPagePills.length - remainingPillsLeft > 0) {
+      pagePills.splice(1,
+        0,
+        <GoToPagePill
+          onPageClick={ handlePageSelection }
+          minPage={currentPageNum - pagesBeforeCurrent + remainingPillsLeft }
+          maxPage={currentPageNum}
+        />
+      )
+    }
+    // adds go to page pill if there are missing pills between current page and last pill
+    if (pagesAfterCurrent - remainingPillsRight > 0) {
+      pagePills.splice(pagePills.length - 1,
+        0, 
+        <GoToPagePill
+          onPageClick={ handlePageSelection }
+          minPage={currentPageNum}
+          maxPage={ currentPageNum + pagesAfterCurrent - remainingPillsRight}
+        />
+      )
+    }
+    return pagePills
   }
-  if (pagesBeforeCurrent - remainingPillsLeft > 0) {
-    pagePills.splice(1, 0, <GoToPagePill />)
-  }
-  if (pagesAfterCurrent - remainingPillsRight > 0) {
-    pagePills.splice(pagePills.length - 1, 0, <GoToPagePill />)
-  }
+
+
+  // calculate number of pages to show
+  const pages = Math.ceil(totalCount / pageSize)
+  const pagePills = populatePills(pages)
   return (
     <div className="pages">
       <nav className="right-page">

From 702ac00b850620815f5f74b677ade50b44db800d Mon Sep 17 00:00:00 2001
From: Vikas Agarwal <vikas.agarwal@topcoder.com>
Date: Thu, 22 Dec 2016 16:30:25 +0530
Subject: [PATCH 3/8] Github issue #593, Increase timeout when posting topics /
 comments to message service -- Done. But not tested yet. Not sure how to
 validate that axios is actually respecting the new timeout. There are few
 issues mentioned in web community about axios not respecting the timeout
 settings in some cases.

---
 src/api/messages.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/api/messages.js b/src/api/messages.js
index 7e0aff8e0..c4149a07d 100644
--- a/src/api/messages.js
+++ b/src/api/messages.js
@@ -45,7 +45,7 @@ export function getTopicPosts(topicId, postIds) {
 }
 
 export function createTopic(topicProps) {
-  return axios.post(`${TC_API_URL}/v4/topics/`, topicProps)
+  return axios.post(`${TC_API_URL}/v4/topics/`, topicProps, { timeout: 1.5 * 60 * 1000 })
     .then( resp => {
       return _.get(resp.data, 'result.content', {})
     })
@@ -54,7 +54,7 @@ export function createTopic(topicProps) {
 // 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 } )
+  return axios.post(`${TC_API_URL}/v4/topics/${topicId}/posts`, { post: post.content }, { timeout: 1.5 * 60 * 1000 } )
     .then( resp => {
       return {
         topicId,

From 03e64029e3e29c52be5c66894c55e6349a45a1da Mon Sep 17 00:00:00 2001
From: Vikas Agarwal <vikas.agarwal@topcoder.com>
Date: Mon, 26 Dec 2016 12:47:30 +0530
Subject: [PATCH 4/8] Github issue #596, Status update: a comment post remains
 in the composer window after being posted -- Fixed

---
 src/projects/detail/containers/FeedContainer.js    | 13 ++++++++++---
 .../detail/containers/MessagesContainer.js         | 14 +++++++++++---
 src/projects/reducers/projectTopics.js             |  2 +-
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/projects/detail/containers/FeedContainer.js b/src/projects/detail/containers/FeedContainer.js
index f621ca219..44be02ded 100644
--- a/src/projects/detail/containers/FeedContainer.js
+++ b/src/projects/detail/containers/FeedContainer.js
@@ -54,7 +54,7 @@ class FeedView extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.init(nextProps)
+    this.init(nextProps, this.props)
   }
 
   componentWillUnmount() {
@@ -128,11 +128,18 @@ class FeedView extends React.Component {
     return item
   }
 
-  init(props) {
+  init(props, prevProps) {
     const { feeds } = props
     this.setState({
       feeds: feeds.map((feed) => {
-        return this.mapFeed(feed, this.state.showAll.indexOf(feed.id) > -1)
+        // finds the same feed from previous props, if exists
+        let prevFeed
+        if (prevProps && prevProps.feeds) {
+          prevFeed = _.find(prevProps.feeds, f => feed.id === f.id)
+        }
+        // reset new comment if we were adding comment and there is no error in doing so
+        const resetNewComment = prevFeed && prevFeed.isAddingComment && !feed.isAddingComment && !feed.error
+        return this.mapFeed(feed, this.state.showAll.indexOf(feed.id) > -1, resetNewComment)
       }).filter(item => item)
     })
   }
diff --git a/src/projects/detail/containers/MessagesContainer.js b/src/projects/detail/containers/MessagesContainer.js
index 6b3455a84..34cbec399 100644
--- a/src/projects/detail/containers/MessagesContainer.js
+++ b/src/projects/detail/containers/MessagesContainer.js
@@ -63,7 +63,7 @@ class MessagesView extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.init(nextProps)
+    this.init(nextProps, this.props)
   }
 
   componentWillUnmount() {
@@ -138,7 +138,7 @@ class MessagesView extends React.Component {
     return item
   }
 
-  init(props) {
+  init(props, prevProps) {
     const { activeThreadId } = this.state
     const propsThreadId = _.get(props, 'location.state.threadId', null)
     const threadId = activeThreadId ? activeThreadId : propsThreadId
@@ -149,9 +149,17 @@ class MessagesView extends React.Component {
     this.setState({
       scrollPosition: activeThreadIndex * 71,
       threads: props.threads.map((thread, idx) => {
+        // finds the same thread from previous props, if exists
+        let prevThread
+        if (prevProps && prevProps.threads) {
+          prevThread = _.find(prevProps.threads, t => thread.id === t.id)
+        }
+        // reset new message if we were adding message and there is no error in doing so
+        const resetNewMessage = prevThread && prevThread.isAddingComment && !thread.isAddingComment && !thread.error
         return this.mapFeed(thread,
           idx === activeThreadIndex,
-          this.state.showAll.indexOf(thread.id) > -1)
+          this.state.showAll.indexOf(thread.id) > -1,
+          resetNewMessage)
       }).filter(item => item)
     })
   }
diff --git a/src/projects/reducers/projectTopics.js b/src/projects/reducers/projectTopics.js
index c3fa25651..01c2c16dd 100644
--- a/src/projects/reducers/projectTopics.js
+++ b/src/projects/reducers/projectTopics.js
@@ -243,7 +243,7 @@ export const projectTopics = function (state=initialState, action) {
       const feed = state.feeds[tag].topics[feedIndex]
       const updatedFeed = update (feed, {
         isAddingComment : { $set : false },
-        error: { $set: false }
+        error: { $set: true }
       })
       const feedUpdateQuery = {}
       feedUpdateQuery[tag] = { topics: { $splice: [[feedIndex, 1, updatedFeed]] } }

From 17b97aa10aa606c08f525876eaf6436b8bad89fe Mon Sep 17 00:00:00 2001
From: Vikas Agarwal <vikas.agarwal@topcoder.com>
Date: Tue, 27 Dec 2016 15:35:50 +0530
Subject: [PATCH 5/8] Github issue #372, [Pagination] - keep fixed pagination
 option displaying 5 pages. -- Fixed issue for the case when incorrect results
 were being shown when user hits browser back button after navigating the list
 pages via paginator -- CSS fix as suggested in Github -- Applied light theme
 for the tooltip

---
 src/components/Grid/GridView.scss             |  1 -
 src/components/Grid/PaginationBar.jsx         |  6 ++++--
 .../list/components/Projects/Projects.jsx     | 20 ++++++++++++++++---
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/Grid/GridView.scss b/src/components/Grid/GridView.scss
index ce37a3fcb..219e736ed 100644
--- a/src/components/Grid/GridView.scss
+++ b/src/components/Grid/GridView.scss
@@ -496,7 +496,6 @@
       }
 
       &.go-to-page-pill {
-        // position: inherit;
         .tooltip-target {
           min-width: 27px;
           height: 28px;
diff --git a/src/components/Grid/PaginationBar.jsx b/src/components/Grid/PaginationBar.jsx
index 633c69415..b25face23 100644
--- a/src/components/Grid/PaginationBar.jsx
+++ b/src/components/Grid/PaginationBar.jsx
@@ -37,8 +37,8 @@ const GoToPagePill = ({minPage, maxPage, onPageClick}) => {
   }
   return (
     <li className="go-to-page-pill">
-      <Tooltip popMethod="click">
-        <div className="tooltip-target"><span>...</span></div>
+      <Tooltip popMethod="click" theme="light">
+        <div className="tooltip-target"><a href="javascript:">...</a></div>
         <div className="tooltip-body">
           <div className="go-to-page-tooltip">Go to page: <input type="number" min={minPage} max={maxPage} onKeyUp={handleChange} /></div>
         </div>
@@ -130,6 +130,7 @@ const PaginationBar = enhance(({onPageChange, currentPageNum, totalCount, pageSi
       pagePills.splice(1,
         0,
         <GoToPagePill
+          key="goToPagePill-1"
           onPageClick={ handlePageSelection }
           minPage={currentPageNum - pagesBeforeCurrent + remainingPillsLeft }
           maxPage={currentPageNum}
@@ -141,6 +142,7 @@ const PaginationBar = enhance(({onPageChange, currentPageNum, totalCount, pageSi
       pagePills.splice(pagePills.length - 1,
         0, 
         <GoToPagePill
+          key="goToPagePill-2"
           onPageClick={ handlePageSelection }
           minPage={currentPageNum}
           maxPage={ currentPageNum + pagesAfterCurrent - remainingPillsRight}
diff --git a/src/projects/list/components/Projects/Projects.jsx b/src/projects/list/components/Projects/Projects.jsx
index a3555cd21..5c473e73d 100755
--- a/src/projects/list/components/Projects/Projects.jsx
+++ b/src/projects/list/components/Projects/Projects.jsx
@@ -12,6 +12,7 @@ class Projects extends Component {
     this.sortHandler = this.sortHandler.bind(this)
     this.onPageChange = this.onPageChange.bind(this)
     this.applyFilters = this.applyFilters.bind(this)
+    this.init = this.init.bind(this)
   }
 
   componentDidUpdate() {
@@ -23,13 +24,26 @@ class Projects extends Component {
     window.sessionStorage.setItem('projectsPageScrollTop', scrollingElement.scrollTop)
   }
 
+  componentWillReceiveProps(nextProps) {
+    console.log(nextProps)
+    const prevQueryParams = _.get(this.props, 'location.query', null)
+    const queryParams = _.get(nextProps, 'location.query', null)
+    if (!_.isEqual(prevQueryParams, queryParams)) {
+      this.init(nextProps)
+    }
+  }
+
   componentWillMount() {
+    this.init(this.props)
+  }
+
+  init(props) {
     document.title = 'Projects - Topcoder'
     // this.searchTermFromQuery = this.props.location.query.q || ''
-    const {criteria, loadProjects} = this.props
-    let pageNum = this.props.pageNum
+    const {criteria, loadProjects} = props
+    let pageNum = props.pageNum
     // check for criteria specified in URL.
-    const queryParams = _.get(this.props, 'location.query', null)
+    const queryParams = _.get(props, 'location.query', null)
     if (!_.isEmpty(queryParams)) {
       const initialCriteria = {}
       if (queryParams.sort) initialCriteria.sort = queryParams.sort

From 652884ceebe2a6b46c928210611100d385e4478b Mon Sep 17 00:00:00 2001
From: Vikas Agarwal <vikas.agarwal@topcoder.com>
Date: Wed, 28 Dec 2016 15:23:57 +0530
Subject: [PATCH 6/8] Github issue #596, Status update: a comment post remains
 in the composer window after being posted -- Fixed issue with new post being
 sticky after successful creation of the new post.

---
 src/projects/detail/containers/FeedContainer.js     | 5 +++++
 src/projects/detail/containers/MessagesContainer.js | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/projects/detail/containers/FeedContainer.js b/src/projects/detail/containers/FeedContainer.js
index 44be02ded..f2b60bd31 100644
--- a/src/projects/detail/containers/FeedContainer.js
+++ b/src/projects/detail/containers/FeedContainer.js
@@ -130,7 +130,12 @@ class FeedView extends React.Component {
 
   init(props, prevProps) {
     const { feeds } = props
+    let resetNewPost = false
+    if (prevProps) {
+      resetNewPost = prevProps.isCreatingFeed && !props.isCreatingFeed && !props.error
+    }
     this.setState({
+      newPost: resetNewPost ? {} : this.state.newPost,
       feeds: feeds.map((feed) => {
         // finds the same feed from previous props, if exists
         let prevFeed
diff --git a/src/projects/detail/containers/MessagesContainer.js b/src/projects/detail/containers/MessagesContainer.js
index 34cbec399..44fdc238a 100644
--- a/src/projects/detail/containers/MessagesContainer.js
+++ b/src/projects/detail/containers/MessagesContainer.js
@@ -145,8 +145,12 @@ class MessagesView extends React.Component {
     const activeThreadIndex = threadId
       ? _.findIndex(props.threads, (thread) => thread.id === threadId )
       : 0
-
+    let resetNewPost = false
+    if (prevProps) {
+      resetNewPost = prevProps.isCreatingFeed && !props.isCreatingFeed && !props.error
+    }
     this.setState({
+      newPost: resetNewPost ? {} : this.state.newPost,
       scrollPosition: activeThreadIndex * 71,
       threads: props.threads.map((thread, idx) => {
         // finds the same thread from previous props, if exists

From 7c9b0696a3da72f3799e965ebb832d03876065c4 Mon Sep 17 00:00:00 2001
From: Vikas Agarwal <vikas.agarwal@topcoder.com>
Date: Wed, 28 Dec 2016 15:42:14 +0530
Subject: [PATCH 7/8] Github issue #372, [Pagination] - keep fixed pagination
 option displaying 5 pages. -- Fixed font styles for the tooltip

---
 src/components/Grid/GridView.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Grid/GridView.scss b/src/components/Grid/GridView.scss
index 219e736ed..64e64a1d1 100644
--- a/src/components/Grid/GridView.scss
+++ b/src/components/Grid/GridView.scss
@@ -504,10 +504,12 @@
         .go-to-page-tooltip {
           display: flex;
           align-items: center;
+          @include tc-label-md;
+          line-height: $base-unit * 6;
 
           input[type="number"] {
             width: 50px;
-            height: 30px;
+            height: $base-unit * 6;
             margin-bottom: 0px;
             margin-left: $base-unit * 2;
           }

From f05e166bce4176ffce613f9618b01d6a7c5709a1 Mon Sep 17 00:00:00 2001
From: Victor George <vgeorge@appirio.com>
Date: Wed, 28 Dec 2016 16:18:24 -0800
Subject: [PATCH 8/8] link color classes; fixes #599

---
 src/components/ActionCard/ActionCard.scss | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/ActionCard/ActionCard.scss b/src/components/ActionCard/ActionCard.scss
index e5cff5a8a..6b8a57410 100644
--- a/src/components/ActionCard/ActionCard.scss
+++ b/src/components/ActionCard/ActionCard.scss
@@ -352,8 +352,18 @@
     border-radius: $corner-radius;
   }
 
-  a {
+
+  // Link colors
+  a:link,
+  a:visited {
+    color: $tc-dark-blue;
+    text-decoration: none;
+  }
+
+  a:hover,
+  a:active {
     color: $tc-dark-blue-70;
+    text-decoration: underline;
   }
 
   input {