dariuscox · dariuscox · Nov 11, 2020 · Nov 11, 2020 · Nov 11, 2020 · Nov 15, 2020
diff --git a/react-intervaler/package.json b/react-intervaler/package.json
@@ -1,21 +1,43 @@
 {
   "name": "react-intervaler",
+  "homepage": "http://dariuscox.github.io/intervaler",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@types/react-router-dom": "^5.1.6",
+    "bootstrap-styled": "^2.7.2",
     "react": "^17.0.1",
+    "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "web-vitals": "^0.2.4"
   },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.8.0",
+    "@typescript-eslint/parser": "^4.8.0",
+    "bootstrap": "^4.5.3",
+    "eslint": "^7.13.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "gh-pages": "^3.1.0",
+    "node-sass": "4.14.1",
+    "typescript": "^4.0.5"
+  },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "react-scripts build && cp build/index.html build/404.html",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
     "extends": [

diff --git a/react-intervaler/public/favicon.ico b/react-intervaler/public/favicon.ico
diff --git a/react-intervaler/public/index.html b/react-intervaler/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="A workout timer app for interval training and more!"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Intervaler</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/react-intervaler/src/App.css b/react-intervaler/src/App.css
diff --git a/react-intervaler/src/App.js b/react-intervaler/src/App.js
diff --git a/react-intervaler/src/App.scss b/react-intervaler/src/App.scss
@@ -0,0 +1,86 @@
+// .App {
+//   text-align: center;
+// }
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.app {
+  text-align: center;
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.time {
+  font-size: 3rem;
+  padding: 2rem;
+}
+
+.button {
+  padding: 0.6rem 1.5rem;
+  margin: 0.4rem;
+  border-radius: 3px;
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 0.8rem;
+  border-style: groove;
+}
+
+.button:focus {
+  outline-width: 0;
+}
+
+.button-primary:hover {
+  background-color: #2641d4;
+  border: 1px solid #1b1f2b;
+}
+
+.button-primary-active {
+  background-color: #3151ff;
+  border: 1px solid #152684;
+  color: white;
+}
+
+.button-primary-inactive {
+  background-color: #3151ff;
+  border: 1px solid #152684;
+  color: white;
+}
diff --git a/react-intervaler/src/App.tsx b/react-intervaler/src/App.tsx
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import 'App.scss';
+import 'stylesheets/index.scss';
+import Stopwatch from 'components/Stopwatch';
+import About from 'components/About';
+import Timer from 'components/Timer';
+import Error from 'components/Error';
+import Navigation from 'components/Navigation';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+const App = () => (
+  <BrowserRouter basename={process.env.PUBLIC_URL}>
+    <Navigation />
+    <Switch>
+      <Route path="/" component={Stopwatch} exact />
+      <Route path="/timer" component={Timer} exact />
+      <Route path="/about" component={About} exact />
+      <Route component={Error} />
+    </Switch>
+  </BrowserRouter>
+);
+
+export default App;
diff --git a/react-intervaler/src/components/About.tsx b/react-intervaler/src/components/About.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const About = () => (
+  <div>
+    <h1>About</h1>
+    <p>About</p>
+  </div>
+);
+
+export default About;
diff --git a/react-intervaler/src/components/Error.tsx b/react-intervaler/src/components/Error.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Error = () => (
+  <div>
+    <p>Error: Page does not exist!</p>
+  </div>
+);
+
+export default Error;
diff --git a/react-intervaler/src/components/Navigation.tsx b/react-intervaler/src/components/Navigation.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import Navbar from 'react-bootstrap/Navbar';
+import Nav from 'react-bootstrap/Nav';
+import Form from 'react-bootstrap/Form';
+import Button from 'react-bootstrap/Button';
+import FormControl from 'react-bootstrap/FormControl';
+
+function onKeyUp(e: { charCode: number }) {
+  if (e.charCode === 13) {
+    window.open('https://www.youtube.com/watch?v=15bLDWs0Q4Q');
+  }
+}
+
+const Navigation = () => (
+  <Navbar bg="dark" variant="dark" expand="lg">
+    <Navbar.Brand href="/intervaler/">Intervaler</Navbar.Brand>
+    <Navbar.Toggle aria-controls="basic-navbar-nav" />
+    <Navbar.Collapse id="basic-navbar-nav">
+      <Nav className="mr-auto">
+        <Nav.Link className="navlinks" href="/intervaler/timer">
+          Timer
+        </Nav.Link>
+      </Nav>
+      <Form inline>
+        <FormControl
+          type="text"
+          placeholder="Search"
+          className="mr-sm-2"
+          onKeyPress={onKeyUp}
+        />
+        <a
+          target="_blank"
+          rel="noreferrer"
+          href="https://www.youtube.com/watch?v=9Deg7VrpHbM"
+        >
+          <Button variant="outline-success">Search</Button>
+        </a>
+      </Form>
+    </Navbar.Collapse>
+  </Navbar>
+);
+
+export default Navigation;
diff --git a/react-intervaler/src/components/Stopwatch.tsx b/react-intervaler/src/components/Stopwatch.tsx
@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+
+const Stopwatch = () => {
+  const [seconds, setSeconds] = useState(0);
+  const [minutes, setMinutes] = useState(0);
+  const [isActive, setIsActive] = useState(false);
+  const [secondsDisplayed, setSecondsDisplayed] = useState(0);
+
+  function toggle() {
+    setIsActive(!isActive);
+  }
+
+  function reset() {
+    setSeconds(0);
+    setSecondsDisplayed(0);
+    setMinutes(0);
+    setIsActive(false);
+  }
+
+  useEffect(() => {
+    let interval = setInterval(() => {
+      console.log('set_interval');
+    }, 1000);
+    if (isActive) {
+      interval = setInterval(() => {
+        setSeconds((seconds) => seconds + 1);
+        const newMinutes = Math.floor(seconds / 60);
+        setMinutes((minutes) => newMinutes);
+        setSecondsDisplayed((secondsDisplayed) => seconds - newMinutes * 60);
+      }, 1000);
+    } else if (!isActive && seconds !== 0) {
+      clearInterval(interval);
+    }
+    return () => clearInterval(interval);
+  }, [isActive, minutes, seconds, secondsDisplayed]);
+
+  return (
+    <div className="app">
+      <div className="time">
+        {minutes}m{secondsDisplayed}s
+      </div>
+      <div className="row">
+        <button
+          type="button"
+          className={`button button-primary button-primary-${
+            isActive ? 'active' : 'inactive'
+          }`}
+          onClick={toggle}
+        >
+          {isActive ? 'Pause' : 'Start'}
+        </button>
+        <button type="button" className="button" onClick={reset}>
+          Reset
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Stopwatch;