issue #2302 - Warnings in developer console (except of Warning: Formsy: isMounted is deprecated)

Author: maxceem

src/components/Grid/GridView.jsx

@@ -18,7 +18,7 @@ const GridView = props => {
   const headerProps = { columns, sortHandler, currentSortField }
 
   const renderItem = (item, index) => {
-    return item.isPlaceholder ? <Placeholder columns={columns} /> : <ListComponent columns={columns} item={item} key={index}/>
+    return item.isPlaceholder ? <Placeholder columns={columns} key={`placeholder-${index}`} /> : <ListComponent columns={columns} item={item} key={item.id}/>
   }
 
   const handleLoadMore = () => {

src/projects/detail/components/SpecSection.jsx

@@ -196,15 +196,15 @@ const SpecSection = props => {
     }
     case 'project-name': {
       const refCodeFieldName = 'details.utm.code'
-      const refCode = _.get(project, refCodeFieldName, undefined)
+      const refCode = _.get(project, refCodeFieldName, '')
       const queryParamRefCode = qs.parse(window.location.search).refCode
       return (
         <div className="project-name-section">
           <div className="editable-project-name">
             <TCFormFields.TextInput
               name="name"
               placeholder="Project Name"
-              value={_.get(project, 'name', undefined)}
+              value={_.get(project, 'name', '')}
               wrapperClass="project-name"
               maxLength={ PROJECT_NAME_MAX_LENGTH }
               required={props.required}
@@ -265,9 +265,9 @@ SpecSection.propTypes = {
   sectionNumber: PropTypes.number.isRequired,
   showHidden: PropTypes.bool,
   isCreation: PropTypes.bool,
-  addAttachment: PropTypes.func.isRequired,
-  updateAttachment: PropTypes.func.isRequired,
-  removeAttachment: PropTypes.func.isRequired,
+  addAttachment: PropTypes.func,
+  updateAttachment: PropTypes.func,
+  removeAttachment: PropTypes.func,
 }
 
 export default scrollToAnchors(SpecSection)

src/projects/reducers/project.js

@@ -171,6 +171,7 @@ export const projectState = function (state=initialState, action) {
   case CLEAR_LOADED_PROJECT:
   case GET_PROJECTS_SUCCESS:
     return Object.assign({}, state, {
+      isLoading: true, // this is excpected to be default value when there is not project loaded
       project: {},
       projectNonDirty: {},
       phases: null,

src/projects/reducers/projectDashboard.js

@@ -2,7 +2,9 @@
 import {
   LOAD_PROJECT_DASHBOARD_PENDING,
   LOAD_PROJECT_DASHBOARD_SUCCESS,
-  LOAD_PROJECT_DASHBOARD_FAILURE
+  LOAD_PROJECT_DASHBOARD_FAILURE,
+  CLEAR_LOADED_PROJECT,
+  GET_PROJECTS_SUCCESS,
 } from '../../config/constants'
 
 const initialState = {
@@ -30,6 +32,14 @@ export const projectDashboard = function (state=initialState, action) {
       error: true
     })
 
+  // when we clear the project we have to put dashboard state to the initial state
+  // because the code relies on the initial state
+  // for example spinnerWhileLoading in ProjectDerail.jsx expects `isLoading` to be true
+  // to prevent components which require dashboard data from rendering
+  case CLEAR_LOADED_PROJECT:
+  case GET_PROJECTS_SUCCESS:
+    return Object.assign({}, state, initialState)
+
   default:
     return state
   }