diff --git a/src/Website.tsx b/src/Website.tsx index d824cc4..af3d8bf 100644 --- a/src/Website.tsx +++ b/src/Website.tsx @@ -1,4 +1,4 @@ -import React from "react" +import React, { Component, ReactNode } from "react" import Header from "./components/Header" import Navbar from "./components/Navbar" @@ -6,8 +6,8 @@ import Routes from "./routes" import "./Website.css" -export default class Website extends React.Component { - public render() { +export default class Website extends Component { + public render(): ReactNode { return (
diff --git a/src/components/ClearButton/index.tsx b/src/components/ClearButton/index.tsx index e03713c..5e9775c 100644 --- a/src/components/ClearButton/index.tsx +++ b/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 { - public render() { +export default class ClearButton extends PureComponent { + public render(): ReactNode { return ( {this.props.children} diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index a590320..4acb11b 100644 --- a/src/components/Header/index.tsx +++ b/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 (

Mitchell J. F. Simon

diff --git a/src/components/Job/index.tsx b/src/components/Job/index.tsx index a878110..af315cf 100644 --- a/src/components/Job/index.tsx +++ b/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 { - public render() { +export default class Experience extends PureComponent { + public render(): ReactNode { return (
{this.props.title}
@@ -22,8 +22,8 @@ export default class Experience extends React.PureComponent { ) } - private renderBullets() { - return this.props.bullets.map((bullet, index) => ( + private renderBullets(): ReactNode[] { + return this.props.bullets.map((bullet: string, index: number) => (
  • {bullet}
  • )) } diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 0c8cd97..34e467f 100644 --- a/src/components/Navbar/index.tsx +++ b/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 (
    {this.menuButton()} @@ -32,7 +32,7 @@ class Navbar extends React.Component<{}, State> { ) } - private menuButton() { + private menuButton(): ReactNode { if (this.isMobile()) { return (
    { 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) => ( { )) } - private closeMenu() { + private closeMenu(): void { window.scrollTo(0, 0) if (this.isMobile()) { this.setState({ showMenu: false }) } } } - -export default Navbar diff --git a/src/components/Project/index.tsx b/src/components/Project/index.tsx index 902fa13..6a84fa1 100644 --- a/src/components/Project/index.tsx +++ b/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 { - public render() { +export default class Project extends PureComponent { + public render(): ReactNode { return (

    {this.props.title}

    @@ -29,8 +29,8 @@ export default class Project extends React.PureComponent { ) } - private renderBadges(badges: Badge[]) { - return this.props.badges.map((badge, index) => ( + private renderBadges(badges: Badge[]): ReactNode[] { + return badges.map((badge: Badge, index: number) => (
    {badge.alt} diff --git a/src/components/SmallText/index.tsx b/src/components/SmallText/index.tsx index c554474..4df604f 100644 --- a/src/components/SmallText/index.tsx +++ b/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
    {this.props.children}
    } } diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js index 07ab286..88be07a 100644 --- a/src/registerServiceWorker.js +++ b/src/registerServiceWorker.js @@ -9,17 +9,17 @@ // This link also includes instructions on opting out of this behavior. const isLocalhost = Boolean( - window.location.hostname === 'localhost' || + window.location.hostname === "localhost" || // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || + window.location.hostname === "[::1]" || // 127.0.0.1/8 is considered localhost for IPv4. window.location.hostname.match( /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ ) ) -export default function register () { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { +export default function register() { + if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) { // The URL constructor is available in all browsers that support SW. const publicUrl = new URL(process.env.PUBLIC_URL, window.location) // eslint-disable-line no-undef if (publicUrl.origin !== window.location.origin) { @@ -29,7 +29,7 @@ export default function register () { return } - window.addEventListener('load', () => { + window.addEventListener("load", () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js` if (isLocalhost) { @@ -40,8 +40,8 @@ export default function register () { // service worker/PWA documentation. navigator.serviceWorker.ready.then(() => { console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://goo.gl/SC7cgQ' + "This web app is being served cache-first by a service " + + "worker. To learn more, visit https://goo.gl/SC7cgQ" ) }) } else { @@ -52,43 +52,43 @@ export default function register () { } } -function registerValidSW (swUrl) { +function registerValidSW(swUrl) { navigator.serviceWorker .register(swUrl) .then(registration => { registration.onupdatefound = () => { const installingWorker = registration.installing installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { + if (installingWorker.state === "installed") { if (navigator.serviceWorker.controller) { // At this point, the old content will have been purged and // the fresh content will have been added to the cache. // It's the perfect time to display a "New content is // available; please refresh." message in your web app. - console.log('New content is available; please refresh.') + console.log("New content is available; please refresh.") } else { // At this point, everything has been precached. // It's the perfect time to display a // "Content is cached for offline use." message. - console.log('Content is cached for offline use.') + console.log("Content is cached for offline use.") } } } } }) .catch(error => { - console.error('Error during service worker registration:', error) + console.error("Error during service worker registration:", error) }) } -function checkValidServiceWorker (swUrl) { +function checkValidServiceWorker(swUrl) { // Check if the service worker can be found. If it can't reload the page. fetch(swUrl) // eslint-disable-line no-undef .then(response => { // Ensure service worker exists, and that we really are getting a JS file. if ( response.status === 404 || - response.headers.get('content-type').indexOf('javascript') === -1 + response.headers.get("content-type").indexOf("javascript") === -1 ) { // No service worker found. Probably a different app. Reload the page. navigator.serviceWorker.ready.then(registration => { @@ -103,13 +103,13 @@ function checkValidServiceWorker (swUrl) { }) .catch(() => { console.log( - 'No internet connection found. App is running in offline mode.' + "No internet connection found. App is running in offline mode." ) }) } -export function unregister () { - if ('serviceWorker' in navigator) { +export function unregister() { + if ("serviceWorker" in navigator) { navigator.serviceWorker.ready.then(registration => { registration.unregister() }) diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 039f602..2962dcd 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,10 +1,10 @@ -import React from "react" -import { Route, Switch } from "react-router-dom" +import React, { Component, ReactNode } from "react" +import { Route as RouteComponent, Switch } from "react-router-dom" -import { redirects, routes } from "./routes" +import { Redirect, redirects, Route, routes } from "./routes" -export default class Routes extends React.Component { - public render() { +export default class Routes extends Component { + public render(): ReactNode { return ( {this.renderRoutes()} @@ -13,9 +13,9 @@ export default class Routes extends React.Component { ) } - private renderRoutes() { - return routes.map(route => ( - ( + ( - + private renderRedirects(): ReactNode[] { + return redirects.map((route: Redirect) => ( + )) } } diff --git a/src/routes/routes.tsx b/src/routes/routes.tsx index 2cc49ed..8e73c68 100644 --- a/src/routes/routes.tsx +++ b/src/routes/routes.tsx @@ -1,7 +1,20 @@ +import { ComponentClass, ReactNode } from "react" import Contact from "../screens/Contact" import Home from "../screens/Home" import Projects from "../screens/Projects" +export type Route = { + component: ComponentClass + exact: boolean + name: string + path: string +} + +export type Redirect = { + func: () => ReactNode + path: string +} + export const routes = [ { component: Home, @@ -25,7 +38,7 @@ export const routes = [ export const redirects = [ { - func: () => { + func: (): ReactNode => { window.location.replace("https://linkedin.com/in/mitchelljfsimon") return null }, diff --git a/src/screens/Contact/index.tsx b/src/screens/Contact/index.tsx index 356419d..fb5cfed 100644 --- a/src/screens/Contact/index.tsx +++ b/src/screens/Contact/index.tsx @@ -1,10 +1,10 @@ -import React from "react" +import React, { PureComponent, ReactNode } from "react" import linkedIn from "../../images/In-2C-128px-TM.png" import "./index.css" -export default class Contact extends React.PureComponent { - public render() { +export default class Contact extends PureComponent { + public render(): ReactNode { return (

    m@mjfs.us

    diff --git a/src/screens/Experience/index.tsx b/src/screens/Experience/index.tsx index 02869f6..06ffb5d 100644 --- a/src/screens/Experience/index.tsx +++ b/src/screens/Experience/index.tsx @@ -1,4 +1,4 @@ -import * as React from "react" +import React, { PureComponent, ReactNode } from "react" import Job from "../../components/Job" import jobsData from "../../data/jobs.json" @@ -11,15 +11,15 @@ type JobData = { bullets: string[] } -export default class Experience extends React.PureComponent { - public render() { +export default class Experience extends PureComponent { + public render(): ReactNode { return (
    {this.renderJobs(jobsData)}
    ) } - private renderJobs(jobs: JobData[]) { - return jobs.map(job => ( + private renderJobs(jobs: JobData[]): ReactNode[] { + return jobs.map((job: JobData) => ( Profile diff --git a/src/screens/Projects/index.tsx b/src/screens/Projects/index.tsx index dc66f31..9b147ec 100644 --- a/src/screens/Projects/index.tsx +++ b/src/screens/Projects/index.tsx @@ -1,5 +1,4 @@ -// @flow -import * as React from "react" +import React, { PureComponent, ReactNode } from "react" import Project from "../../components/Project" @@ -20,8 +19,8 @@ type ProjectData = { description: string } -export default class Projects extends React.PureComponent { - public render() { +export default class Projects extends PureComponent { + public render(): ReactNode { return (
    {this.renderProjects(projectsData)} @@ -29,8 +28,8 @@ export default class Projects extends React.PureComponent { ) } - private renderProjects(projects: ProjectData[]) { - return projects.map(project => ( + private renderProjects(projects: ProjectData[]): ReactNode[] { + return projects.map((project: ProjectData) => (