Stricten TS rules; format registerServiceWorker.js

src/components/ClearButton/index.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { PureComponent, ReactNode } from "react"
 
 import "./index.css"
 
@@ -7,8 +7,8 @@ type Props = {
   children: string
 }
 
-export default class ClearButton extends React.PureComponent<Props> {
-  public render() {
+export default class ClearButton extends PureComponent<Props> {
+  public render(): ReactNode {
     return (
       <a className="clear-button" href={this.props.href}>
         {this.props.children}

src/components/Header/index.tsx

@@ -1,11 +1,11 @@
-import React from "react"
+import React, { PureComponent, ReactNode } from "react"
 
 import SmallText from "../SmallText"
 
 import "./index.css"
 
-export default class Header extends React.PureComponent {
-  public render() {
+export default class Header extends PureComponent {
+  public render(): ReactNode {
     return (
       <div className="header-container">
         <h2>Mitchell J. F. Simon</h2>

src/components/Job/index.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import React, { PureComponent, ReactNode } from "react"
 
 import SmallText from "../../components/SmallText"
 import "./index.css"
@@ -10,8 +10,8 @@ type Props = {
   bullets: string[]
 }
 
-export default class Experience extends React.PureComponent<Props> {
-  public render() {
+export default class Experience extends PureComponent<Props> {
+  public render(): ReactNode {
     return (
       <div className="job-container">
         <div className="job-title">{this.props.title}</div>
@@ -22,8 +22,8 @@ export default class Experience extends React.PureComponent<Props> {
     )
   }
 
-  private renderBullets() {
-    return this.props.bullets.map((bullet, index) => (
+  private renderBullets(): ReactNode[] {
+    return this.props.bullets.map((bullet: string, index: number) => (
       <li key={index}>{bullet}</li>
     ))
   }

src/components/Navbar/index.tsx

@@ -1,16 +1,16 @@
 import { faBars } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import * as React from "react"
+import React, { Component, ReactNode } from "react"
 import { NavLink } from "react-router-dom"
 
-import { routes } from "../../routes/routes"
+import { Route, routes } from "../../routes/routes"
 import "./index.css"
 
 type State = {
   showMenu: boolean
 }
 
-class Navbar extends React.Component<{}, State> {
+export default class Navbar extends Component<{}, State> {
   constructor(props: {}) {
     super(props)
     this.state = { showMenu: !this.isMobile() }
@@ -21,7 +21,7 @@ class Navbar extends React.Component<{}, State> {
     this.menuButton = this.menuButton.bind(this)
   }
 
-  public render() {
+  public render(): ReactNode {
     return (
       <div className="navbar">
         {this.menuButton()}
@@ -32,7 +32,7 @@ class Navbar extends React.Component<{}, State> {
     )
   }
 
-  private menuButton() {
+  private menuButton(): ReactNode {
     if (this.isMobile()) {
       return (
         <div
@@ -51,19 +51,19 @@ class Navbar extends React.Component<{}, State> {
     return null
   }
 
-  private isMobile() {
+  private isMobile(): boolean {
     const mobileMenuMaximum = 800
     return window.innerWidth <= mobileMenuMaximum
   }
 
-  private toggleMenu() {
+  private toggleMenu(): void {
     if (this.isMobile() || !this.state.showMenu) {
-      this.setState(prev => ({ showMenu: !prev.showMenu }))
+      this.setState((prev: State) => ({ showMenu: !prev.showMenu }))
     }
   }
 
-  private renderButtons() {
-    return routes.map(route => (
+  private renderButtons(): ReactNode {
+    return routes.map((route: Route) => (
       <NavLink
         key={route.name}
         className="navbar-menu-button"
@@ -77,12 +77,10 @@ class Navbar extends React.Component<{}, State> {
     ))
   }
 
-  private closeMenu() {
+  private closeMenu(): void {
     window.scrollTo(0, 0)
     if (this.isMobile()) {
       this.setState({ showMenu: false })
     }
   }
 }
-
-export default Navbar

src/components/Project/index.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import React, { PureComponent, ReactNode } from "react"
 
 import ClearButton from "../../components/ClearButton"
 
@@ -17,8 +17,8 @@ type Props = {
   badges: Badge[]
 }
 
-export default class Project extends React.PureComponent<Props> {
-  public render() {
+export default class Project extends PureComponent<Props> {
+  public render(): ReactNode {
     return (
       <div className="project-container">
         <h4>{this.props.title}</h4>
@@ -29,8 +29,8 @@ export default class Project extends React.PureComponent<Props> {
     )
   }
 
-  private renderBadges(badges: Badge[]) {
-    return this.props.badges.map((badge, index) => (
+  private renderBadges(badges: Badge[]): ReactNode[] {
+    return badges.map((badge: Badge, index: number) => (
       <a className="project-badge" href={badge.linkUrl} key={index}>
         <img src={badge.imgUrl} alt={badge.alt} />
       </a>

src/components/SmallText/index.tsx

@@ -1,10 +1,9 @@
-// @flow
-import React from "react"
+import React, { PureComponent, ReactNode } from "react"
 
 import "./index.css"
 
-export default class SmallText extends React.PureComponent {
-  public render() {
+export default class SmallText extends PureComponent {
+  public render(): ReactNode {
     return <div className="small-text">{this.props.children}</div>
   }
 }