fix: issue about pagination and gap line

Author: yoution

src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx

@@ -192,26 +192,27 @@ class ManageMilestones extends React.Component {
     // no challenges
     if (!challengeIds.length) {
       return [
-        <MilestoneChallengeHeader isUpdatable={isUpdatable}/>,
-        <MilestoneChallengeRow isEmpty isUpdatable={isUpdatable}/>
+        <MilestoneChallengeHeader key="header" isUpdatable={isUpdatable}/>,
+        <MilestoneChallengeRow isEmpty key="row" isUpdatable={isUpdatable}/>
       ]
     }
 
     // loading challenges
     if (milestone.isLoadingChallenges) {
       return [
-        <MilestoneChallengeHeader isUpdatable={isUpdatable}/>,
-        <MilestoneChallengeRow isLoading isUpdatable={isUpdatable}/>
+        <MilestoneChallengeHeader key="header" isUpdatable={isUpdatable}/>,
+        <MilestoneChallengeRow isLoading key="row" isUpdatable={isUpdatable}/>,
+        <MilestoneChallengeFooter isLoading key="footer" onLoadChallengesByPage={this.onLoadChallengesByPage} isUpdatable={isUpdatable}/>
       ]
     }
 
     const rows = _.map(milestone.challenges, (c) => {
-      return <MilestoneChallengeRow challenge={c} isUpdatable={isUpdatable}/>
+      return <MilestoneChallengeRow key={c.id} challenge={c} isUpdatable={isUpdatable}/>
     })
     return [
-      <MilestoneChallengeHeader isUpdatable={isUpdatable}/>,
+      <MilestoneChallengeHeader key="header" isUpdatable={isUpdatable}/>,
       ...rows,
-      <MilestoneChallengeFooter milestone={milestone} onLoadChallengesByPage={this.onLoadChallengesByPage} isUpdatable={isUpdatable}/>
+      <MilestoneChallengeFooter milestone={milestone} key="footer" onLoadChallengesByPage={this.onLoadChallengesByPage} isUpdatable={isUpdatable}/>
     ]
   }
   getSelectCount() {
@@ -262,6 +263,7 @@ class ManageMilestones extends React.Component {
           {canEdit ? <div styleName="unselect-bottom" onClick={this.onUnselectAll}>
             <IconUnselect /> {this.getSelectCount()} PROJECTS SELECTED
           </div>: null }
+          {canEdit ? <div styleName="line"/>: null}
           { canEdit ? <div styleName="delete-button">
             <MilestoneDeleteButton onDelete={this.onDeleteAll}/>
           </div>: null }

src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss

@@ -17,14 +17,20 @@
     font-size: 12px;
     padding: 0 5px;
     cursor: pointer;
-        
     svg {
       margin-right: 4px;
       height: 13px;
       width: 13px;
     }
     margin-right: 20px;
   }
+  .line {
+    width: 1px;
+    height: 20px;
+    display: inline-block;
+    border: 1px solid #C4C4C4;
+    margin-right: 10px;
+  }
   .delete-button {
     cursor: pointer;
     margin: 0 10px;

src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx

@@ -29,7 +29,7 @@ class MilestoneChallengeFooter extends React.Component {
     if (this.state.curPage === page) {
       return
     }
-    this.state.curPage = page
+    this.setState({curPage: page})
     onLoadChallengesByPage(page, milestone)
   }
   renderPagination() {
@@ -60,10 +60,15 @@ class MilestoneChallengeFooter extends React.Component {
   render() {
     const {
       isUpdatable,
-      milestone
+      milestone,
+      isLoading,
     } = this.props
-    const url = `${WORK_MANAGER_APP}/${milestone.projectId}/challenges`
 
+    if (isLoading) {
+      return null
+    }
+
+    const url = `${WORK_MANAGER_APP}/${milestone.projectId}/challenges`
 
     return (
       <tr styleName="challenge-table-row-wrap">
@@ -88,7 +93,8 @@ class MilestoneChallengeFooter extends React.Component {
 MilestoneChallengeFooter.propTypes = {
   onLoadChallengesByPage: PT.func,
   milestone: PT.shape(),
-  isUpdatable: PT.bool
+  isUpdatable: PT.bool,
+  isLoading: PT.bool
 }
 
 export default MilestoneChallengeFooter

src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss

@@ -34,6 +34,7 @@
       &.Registration { background-color: $tc-orange-100; }
       &.Appeals { background-color: $tc-orange-100; }
       &.AppealsResponse { background-color: $tc-orange-100; }
+      &.Post-Mortem { background-color: $tc-orange-100; }
       &.Draft { background-color: $tc-gray-20; }
       &.Stalled { background-color: $tc-gray-20; }
       &.Completed { background-color: $tc-green-100; }