project section fixes

dashboard/src/main/home/Home.tsx

@@ -36,19 +36,6 @@ export default class Home extends Component<PropsType, StateType> {
     prevProjectId: null as number | null
   }
 
-  componentDidMount() {
-    let { user, currentCluster } = this.context;
-    api.getProjects('<token>', {}, { id: user.userId }, (err: any, res: any) => {
-      if (err) {
-        // console.log(err)
-      } else if (res.data) {
-        if (res.data.length === 0) {
-          this.context.setCurrentModal('CreateProjectModal', { keepOpen: true });
-        }
-      }
-    });
-  }
-
   componentDidUpdate(prevProps: PropsType) {
     if (prevProps !== this.props && this.context.currentProject) {
 

dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -23,34 +23,40 @@ export default class Dashboard extends Component<PropsType, StateType> {
 
   renderContents = () => {
     let { currentProject } = this.context;
-    return (
-      <div>
-        <TitleSection>
-          {this.renderDashboardIcon()}
-          <Title>{currentProject && currentProject.name}</Title>
-          <i
-            className="material-icons"
-            onClick={() => this.context.setCurrentModal('UpdateProjectModal', { currentProject: currentProject })}
-          >
-            more_vert
+    if (currentProject) {
+      return (
+        <div>
+          <TitleSection>
+            {this.renderDashboardIcon()}
+            <Title>{currentProject && currentProject.name}</Title>
+            <i
+              className="material-icons"
+              onClick={() => this.context.setCurrentModal('UpdateProjectModal', { currentProject: currentProject })}
+            >
+              more_vert
           </i>
-        </TitleSection>
+          </TitleSection>
 
-        <InfoSection>
-          <TopRow>
-            <InfoLabel>
-              <i className="material-icons">info</i> Info
+          <InfoSection>
+            <TopRow>
+              <InfoLabel>
+                <i className="material-icons">info</i> Info
             </InfoLabel>
-          </TopRow>
-          <Description>Project overview for {currentProject && currentProject.name}.</Description>
-        </InfoSection>
+            </TopRow>
+            <Description>Project overview for {currentProject && currentProject.name}.</Description>
+          </InfoSection>
 
-        <LineBreak />
+          <LineBreak />
 
-        <Placeholder>
-          🚀 Pipelines coming soon.
+          <Placeholder>
+            🚀 Pipelines coming soon.
         </Placeholder>
-      </div>
+        </div>
+      );
+    }
+
+    return (
+      <div />
     );
   }
 

dashboard/src/main/home/modals/UpdateProjectModal.tsx

@@ -26,6 +26,7 @@ export default class UpdateProjectModal extends Component<PropsType, StateType>
     showDeleteOverlay: false,
   };
   
+  // TODO: Handle update to unmounted component
   handleDelete = () => {
     let { currentProject } = this.context;
     this.setState({ status: 'loading' });
@@ -34,6 +35,8 @@ export default class UpdateProjectModal extends Component<PropsType, StateType>
         this.setState({ status: 'error' });
         // console.log(err)
       } else {
+        this.context.setCurrentModal(null, null);
+        this.context.setCurrentProject(null);
         this.setState({ status: 'successful', showDeleteOverlay: false });
       }
     });

dashboard/src/main/home/sidebar/ProjectSection.tsx

@@ -7,8 +7,7 @@ import { Context } from '../../../shared/Context';
 import { ProjectType } from '../../../shared/types';
 
 type PropsType = {
-  setWelcome?: (x: boolean) => void,
-  setCurrentView?: (x: string) => void,
+  currentProject: ProjectType
 };
 
 type StateType = {
@@ -16,13 +15,6 @@ type StateType = {
   expanded: boolean
 };
 
-const options = [
-  { label: 'Thunder', value: 'z' },
-  { label: 'Lightning', value: 'x' },
-  { label: 'Storm', value: 'qq' },
-  { label: 'Backlog', value: 'd' },
-]
-
 export default class ProjectSection extends Component<PropsType, StateType> {
   state = {
     projects: [] as ProjectType[],
@@ -38,6 +30,11 @@ export default class ProjectSection extends Component<PropsType, StateType> {
         this.setState({ projects: res.data });
         if (res.data.length > 0) {
           this.context.setCurrentProject(res.data[0]);
+        } else {
+          this.context.setCurrentModal('CreateProjectModal', {
+            keepOpen: true,
+            updateProjects: this.updateProjects
+          });
         }
       }
     });
@@ -46,6 +43,12 @@ export default class ProjectSection extends Component<PropsType, StateType> {
   componentDidMount() {
     this.updateProjects();
   }
+
+  componentDidUpdate(prevProps: PropsType) {
+    if (!this.props.currentProject && (this.props.currentProject !== prevProps.currentProject)) {
+      this.updateProjects();
+    }
+  }
   
   showProjectCreateModal = () => {
     this.context.setCurrentModal('CreateProjectModal', {
@@ -59,7 +62,7 @@ export default class ProjectSection extends Component<PropsType, StateType> {
       return (
         <Option
           key={i}
-          selected={project.name === this.context.currentProject}
+          selected={project.name === this.props.currentProject.name}
           onClick={() => this.context.setCurrentProject(project)}
         >
           <ProjectIcon>
@@ -94,7 +97,7 @@ export default class ProjectSection extends Component<PropsType, StateType> {
   }
 
   render() {
-    let { currentProject } = this.context;
+    let { currentProject } = this.props;
     if (currentProject) {
       return (
         <StyledProjectSection>
@@ -146,9 +149,9 @@ const InitializeButton = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: calc(100% - 10px);
+  width: calc(100% - 30px);
   height: 38px;
-  margin: 8px 5px;
+  margin: 8px 15px;
   font-size: 13px;
   font-weight: 500;
   border-radius: 3px;

dashboard/src/main/home/sidebar/ProjectSectionContainer.tsx

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+import { Context } from '../../../shared/Context';
+import ProjectSection from './ProjectSection';
+
+type PropsType = {
+};
+
+type StateType = {
+};
+
+// Props in context to project section to trigger update on context change
+export default class ProjectSectionContainer extends Component<PropsType, StateType> {
+  state = {
+  }
+
+  render() {
+    return (
+      <ProjectSection
+        currentProject={this.context.currentProject}
+      />
+    );
+  }
+}
+
+ProjectSectionContainer.contextType = Context;

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -10,7 +10,7 @@ import api from '../../../shared/api';
 import { Context } from '../../../shared/Context';
 
 import ClusterSection from './ClusterSection';
-import ProjectSection from './ProjectSection';
+import ProjectSectionContainer from './ProjectSectionContainer';
 
 type PropsType = {
   logOut: () => void,
@@ -166,7 +166,7 @@ export default class Sidebar extends Component<PropsType, StateType> {
             <i className="material-icons">double_arrow</i>
           </CollapseButton>
 
-          <ProjectSection />
+          <ProjectSectionContainer />
 
           <br />
 

dashboard/src/shared/baseApi.tsx

@@ -40,6 +40,14 @@ export const baseApi = <T extends {}, S = {}>(requestType: string, endpoint: ((p
       .catch(err => {
         callback && callback(err, null);
       });
+    } else if (requestType === 'DELETE') {
+      axios.delete(endpointString, params)
+      .then(res => {
+        callback && callback(null, res);
+      })
+      .catch(err => {
+        callback && callback(err, null);
+      })
     } else {
       axios.get(endpointString, {
         params,