fully typed boilerplate

dashboard/src/App.tsx

@@ -20,7 +20,7 @@ export default class App extends Component<PropsType, StateType> {
     isLoading: false,
     isLoggedIn: false,
     uninitialized: true,
-  }
+  };
 
   renderContents = (): JSX.Element => {
     if (this.state.isLoading) {
@@ -31,7 +31,7 @@ export default class App extends Component<PropsType, StateType> {
       return <Register authenticate={() => this.setState({ isLoggedIn: true })} />
     }
     return <Login authenticate={() => this.setState({ isLoggedIn: true })} />
-  }
+  };
 
   render() {
     return (

dashboard/src/main/Login.tsx

@@ -7,7 +7,10 @@ type PropsType = {
   authenticate: () => void
 };
 
-export default class Login extends Component<PropsType> {
+type StateType = {
+};
+
+export default class Login extends Component<PropsType, StateType> {
   render() {
     return (
       <StyledLogin>
@@ -74,10 +77,7 @@ const Prompt = styled.div`
 const Logo = styled.img`
   width: 150px;
   margin-top: 63px;
-<<<<<<< HEAD
   user-select: none;
-=======
->>>>>>> 00bdb9028faac5bb0c17eabe2b90abe0400be933
 `;
 
 const FormWrapper = styled.div`

dashboard/src/main/Register.tsx

@@ -7,12 +7,15 @@ type PropsType = {
   authenticate: () => void
 };
 
-export default class Register extends Component<PropsType> {
-  handleRegister = () => {
+type StateType = {
+};
+
+export default class Register extends Component<PropsType, StateType> {
+  handleRegister = (): void => {
     // TODO: Register user
 
     this.props.authenticate();
-  }
+  };
 
   render() {
     return (

dashboard/src/main/home/Home.tsx

@@ -13,7 +13,7 @@ type PropsType = {
 type StateType = {
 };
 
-export default class Home extends Component<PropsType> {
+export default class Home extends Component<PropsType, StateType> {
   render() {
     return (
       <StyledHome>

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

@@ -29,25 +29,25 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
   state = {
     currentTab: 'kubeconfig',
     clusters: new Array<ClusterOption>(),
-  }
+  };
 
   componentDidMount() {
     this.setState({ clusters: dummyClusters });
   }
 
-  renderLine = (tab: string) => {
+  renderLine = (tab: string): JSX.Element | undefined => {
     if (this.state.currentTab == tab) {
       return <Highlight />
     }
-  }
+  };
 
-  toggleCluster = (i: number) => {
+  toggleCluster = (i: number): void => {
     let newClusters = this.state.clusters;
     newClusters[i].selected = !this.state.clusters[i].selected;
     this.setState({ clusters: newClusters });
-  }
+  };
 
-  renderClusterList = () => {
+  renderClusterList = (): JSX.Element[] | JSX.Element => {
     if (this.state.clusters.length > 0) {
       return this.state.clusters.map((cluster: ClusterOption, i) => {
         return (
@@ -70,9 +70,9 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
         first
       </Placeholder>
     );
-  }
+  };
   
-  renderTabContents = () => {
+  renderTabContents = (): JSX.Element => {
     if (this.state.currentTab === 'kubeconfig') {
       return (
         <div>
@@ -92,7 +92,7 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
         <Button disabled={true}>Save Selected</Button>
       </div>
     )
-  }
+  };
 
   render() {
     return (

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

@@ -11,6 +11,9 @@ type PropsType = {
 };
 
 type StateType = {
+  configExists: boolean,
+  showDrawer: boolean,
+  initializedDrawer: boolean
 };
 
 export default class ClusterSection extends Component<PropsType, StateType> {
@@ -20,7 +23,7 @@ export default class ClusterSection extends Component<PropsType, StateType> {
     configExists: true,
     showDrawer: false,
     initializedDrawer: false,
-  }
+  };
 
   // Need to override showDrawer when the sidebar is closed
   componentDidUpdate(prevProps: PropsType) {
@@ -32,14 +35,14 @@ export default class ClusterSection extends Component<PropsType, StateType> {
     }
   }
   
-  toggleDrawer = () => {
+  toggleDrawer = (): void => {
     if (!this.state.initializedDrawer) {
       this.setState({ initializedDrawer: true });
     }
     this.setState({ showDrawer: !this.state.showDrawer });
-  }
+  };
 
-  renderDrawer = () => {
+  renderDrawer = (): JSX.Element | undefined => {
     if (this.state.initializedDrawer) {
       return (
         <Drawer
@@ -48,9 +51,9 @@ export default class ClusterSection extends Component<PropsType, StateType> {
         />
       );
     }
-  }
+  };
 
-  renderContents = () => {
+  renderContents = (): JSX.Element => {
     if (this.state.configExists) {
       return (
         <ClusterSelector showDrawer={this.state.showDrawer}>
@@ -73,7 +76,7 @@ export default class ClusterSection extends Component<PropsType, StateType> {
         <Plus>+</Plus> Add a Cluster
       </InitializeButton>
     )
-  }
+  };
 
   render() {
     return (

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

@@ -9,9 +9,12 @@ type PropsType = {
   toggleDrawer: () => void
 };
 
+type StateType = {
+};
+
 type ClusterOption = {
   name: string
-}
+};
 
 const dummyClusters: ClusterOption[]  = [
   { name: 'happy-lil-trees' },
@@ -19,9 +22,9 @@ const dummyClusters: ClusterOption[]  = [
   { name: 'friendly-small-bush' }
 ];
 
-export default class Drawer extends Component<PropsType> {
+export default class Drawer extends Component<PropsType, StateType> {
 
-  renderClusterList = () => {
+  renderClusterList = (): JSX.Element[] => {
     return dummyClusters.map((cluster, i) => {
       /*
       let active = this.context.activeProject &&
@@ -35,15 +38,15 @@ export default class Drawer extends Component<PropsType> {
         </ClusterOption>
       );
     });
-  }
+  };
 
-  renderCloseOverlay = () => {
+  renderCloseOverlay = (): JSX.Element | undefined => {
     if (this.props.showDrawer) {
       return (
         <CloseOverlay onClick={this.props.toggleDrawer} />
       );
     }
-  }
+  };
 
   render() {
     return (

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

@@ -8,7 +8,15 @@ type PropsType = {
   logOut: () => void
 };
 
-export default class Sidebar extends Component<PropsType> {
+type StateType = {
+  showSidebar: boolean,
+  initializedSidebar: boolean,
+  pressingCtrl: boolean,
+  showTooltip: boolean,
+  forceCloseDrawer: boolean
+};
+
+export default class Sidebar extends Component<PropsType, StateType> {
 
   // Need closeDrawer to hide drawer on sidebar close
   state = {
@@ -17,7 +25,7 @@ export default class Sidebar extends Component<PropsType> {
     pressingCtrl: false,
     showTooltip: false,
     forceCloseDrawer: false,
-  }
+  };
 
   componentDidMount() {
     document.addEventListener('keydown', this.handleKeyDown);
@@ -29,23 +37,23 @@ export default class Sidebar extends Component<PropsType> {
     document.removeEventListener('keyup', this.handleKeyUp);
   }
 
-  handleKeyDown = (e: any): void => {
-    if (e.keyCode === 17 || e.keyCode === 91 || e.keyCode === 93) {
+  handleKeyDown = (e: KeyboardEvent): void => {
+    if (e.key === 'Meta' || e.key === 'Control') {
       this.setState({ pressingCtrl: true });
     } else if (e.keyCode === 220 && this.state.pressingCtrl) {
       this.toggleSidebar();
     }
-  }
+  };
 
-  handleKeyUp = (e: any): void => {
-    if (e.keyCode === 17 || e.keyCode === 91 || e.keyCode === 93) {
+  handleKeyUp = (e: KeyboardEvent): void => {
+    if (e.key === 'Meta' || e.key === 'Control') {
       this.setState({ pressingCtrl: false });
     }
-  }
+  };
 
   toggleSidebar = (): void => {
     this.setState({ showSidebar: !this.state.showSidebar, forceCloseDrawer: true });
-  }
+  };
 
   renderPullTab = (): JSX.Element | undefined => {
     if (!this.state.showSidebar) {
@@ -55,7 +63,7 @@ export default class Sidebar extends Component<PropsType> {
         </PullTab>
       );
     }
-  }
+  };
 
   renderTooltip = (): JSX.Element | undefined => {
     if (this.state.showTooltip) {
@@ -63,7 +71,7 @@ export default class Sidebar extends Component<PropsType> {
         <Tooltip>⌘/CTRL + \</Tooltip>
       );
     }
-  }
+  };
 
   // SidebarBg is separate to cover retracted drawer
   render() {