COMMITLINT.md

@@ -1,76 +0,0 @@
-# Commit Messages Format
-
-This project uses the (conventional commit specification)[https://www.conventionalcommits.org/en/v1.0.0/#specification] for consistent commit messages.
-
-All commit messages should have the following form:
-
-```
-<type>: <description>
-```
-
-## Fix
-
-A fix (PATCH in semantic versioning) looks like this:
-
-```
-fix: correct minor typos in code
-```
-
-## Feature
-
-A new feature (MINOR in semantic versioning) looks like this:
-
-```
-feat: add catalan language
-```
-
-## Breaking Change
-
-Breaking changes can be indicated by either appending a "!" to the type:
-
-```
-refactor!: drop support for Node 6
-```
-
-Or adding "BREAKING CHANGE" to the commit message body text:
-
-```
-refactor!: drop support for Node 6
-
-BREAKING CHANGE: refactor to use JavaScript features not available in Node 6.
-```
-
-## Available Types
-
-In addition to "fix" and "feat" the following types are allowed:
-build:, chore:, ci:, docs:, style:, refactor:, perf:, test:
-
-Install commitlint:
-
-```
-npm install --save-dev @commitlint/{config-conventional,cli}
-```
-
-or via yarn:
-
-```
-yarn add @commitlint/{config-conventional,cli}
-```
-
-Create a commitlint.config.js file:
-
-```
-echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
-```
-
-Add husky to package.json:
-
-```
-{
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  }
-}
-```

LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 Nicola Zambello
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

@@ -1,56 +0,0 @@
-# Walk-up alarm
-
-![GitHub pages deploy](https://github.com/nzambello/walk-up-alarm/workflows/Test%20and%20deploy/badge.svg?branch=main)
-
-Alarm clock ringing until you walk out of the bed.
-
-<p>
-  See it in action:
-  <a href="https://nzambello.github.io/walk-up-alarm/" target="_blank" rel="noopener noreferrer">
-    nzambello.github.io/walk-up-alarm
-  </a>
-</p>
-<p>It's a <a href="https://en.wikipedia.org/wiki/Progressive_web_application" target="_blank" rel="noopener noreferrer">PWA</a>. Install it on your device!</p>
-<br />
-<a href="https://nzambello.github.io/walk-up-alarm/" target="_blank" rel="noopener noreferrer">
-  <img src="./public/walk-up-alarm.svg" width="200" alt="Walk-up logo" />
-</a>
-<br />
-
-## Screenshots
-
-<p float="left">
-  <img src="./screenshots/start.png" title="Start page" height="450" />
-  <img src="./screenshots/clock-alarm-set.png" title="Alarm set, show clock" height="450" />
-  <img src="./screenshots/alarm-playing.png" title="Alarm playing" height="450" />
-</p>
-<br />
-
-## Development
-
-```bash
-yarn install
-```
-
-### Run the app
-
-```bash
-yarn dev
-```
-
-### Build the app
-
-```bash
-yarn build
-yarn preview
-```
-
-### Run tests
-
-```bash
-yarn test
-```
-
-## Contributions
-
-Please follow our [convention](COMMITLINT.md) on commits format.

index.html

@@ -9,7 +9,7 @@
     <meta name="description" content="Alarm clock deactivating after walking">
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
     <link rel="mask-icon" href="/favicon.svg" color="#FFFFFF">
-    <meta name="theme-color" content="#3E3D42">
+    <meta name="theme-color" content="#2979FF">
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -18,7 +18,6 @@
     "geolib": "^3.3.3",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "react-helmet": "^6.1.0",
     "ui-neumorphism": "^1.1.3",
     "use-position": "^1.0.0",
     "use-stay-awake": "^0.1.7"
@@ -29,7 +28,6 @@
     "@release-it/conventional-changelog": "^3.3.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "@types/react-helmet": "^6.1.4",
     "@types/use-position": "^0.0.0",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

src/App.tsx

@@ -1,15 +1,7 @@
 import { useCallback, useState, useRef, useEffect } from "react";
 import { usePosition } from "use-position";
 import { getDistance } from "geolib";
-import {
+import { format, parse, differenceInMilliseconds, isMatch } from "date-fns";
-  format,
-  parse,
-  differenceInMilliseconds,
-  isMatch,
-  isPast,
-  add,
-} from "date-fns";
-import Helmet from "react-helmet";
 import useStayAwake from "use-stay-awake";
 
 import { TextField, Button, Dialog, Card } from "ui-neumorphism";
@@ -72,6 +64,7 @@ function App() {
       resetAlarm();
     } else if (alarmSet) {
       setHasWalked(false);
+      audioRef.current?.play();
     }
   }, [distance, alarmSet]);
 
@@ -141,30 +134,10 @@ function App() {
     return () => clearInterval(interval);
   });
 
-  const getThemeColor = (appState: string) => {
-    switch (appState) {
-      case "alarm-playing":
-        return "coral";
-      case "alarm-set":
-        return "#000";
-      case "has-walked":
-        return "teal";
-      default:
-        return "#3E3D42";
-    }
-  };
-
   const [showResetModal, setResetModal] = useState(false);
 
   return (
     <div className={`App theme--dark ${appState}`}>
-      <Helmet>
-        <meta name="theme-color" content={getThemeColor(appState)} />
-        <meta
-          name="msapplication-TileColor"
-          content={getThemeColor(appState)}
-        />
-      </Helmet>
       <div className="App-header">
         {alarmSet && alarm ? (
           <p>
@@ -177,6 +150,22 @@ function App() {
             <h1>Walk-up alarm</h1>
             <div className="input-wrapper">
               <label htmlFor="alarm-time">Set time for the alarm</label>
+              {/* <TimeField
+                input={
+                  <TextField
+                    dark
+                    rounded
+                    id="alarm-time"
+                    className="time-picker"
+                    placeholder="08:00"
+                    uncontrolled
+                  />
+                }
+                value={alarm ? format(alarm, "HH:mm") : undefined}
+                onChange={(e) => {
+                  setAlarm(parse(e.target.value, "HH:mm", new Date()));
+                }}
+              /> */}
               <TextField
                 dark
                 rounded
@@ -185,11 +174,9 @@ function App() {
                 placeholder="08:00"
                 value={alarm ? format(alarm, "HH:mm") : undefined}
                 onChange={({ value }: { value: string }) => {
+                  console.log(value);
                   if (isMatch(value, "HH:mm") || isMatch(value, "H:mm")) {
-                    const parsedValue = parse(value, "HH:mm", new Date());
+                    setAlarm(parse(value, "HH:mm", new Date()));
-                    if (isPast(parsedValue))
-                      setAlarm(add(parsedValue, { days: 1 }));
-                    else setAlarm(parsedValue);
                   }
                 }}
               />

vite.config.ts

@@ -1,42 +1,14 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import { VitePWA, VitePWAOptions } from "vite-plugin-pwa";
+import { VitePWA } from "vite-plugin-pwa";
-
-const pwaOptions: Partial<VitePWAOptions> = {
-  registerType: "autoUpdate",
-  includeAssets: [
-    "favicon.svg",
-    "favicon.ico",
-    "robots.txt",
-    "apple-touch-icon.png",
-  ],
-  manifest: {
-    name: "Walk-up alarm",
-    short_name: "Walk-up",
-    theme_color: "#3E3D42",
-    icons: [
-      {
-        src: "pwa-192x192.png",
-        sizes: "192x192",
-        type: "image/png",
-      },
-      {
-        src: "pwa-512x512.png",
-        sizes: "512x512",
-        type: "image/png",
-      },
-      {
-        src: "pwa-512x512.png",
-        sizes: "512x512",
-        type: "image/png",
-        purpose: "any maskable",
-      },
-    ],
-  },
-};
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: "/walk-up-alarm/",
-  plugins: [react(), VitePWA(pwaOptions)],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: "autoUpdate",
+    }),
+  ],
 });

yarn.lock

@@ -1413,13 +1413,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-helmet@^6.1.4":
-  version "6.1.4"
-  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.4.tgz#3e54a3eb37ba7fb34ffafc64f425be4e68df03b9"
-  integrity sha512-jyx50RNZXVaTGHY3MsoRPNpeiVk8b0XTPgD/O6KHF6COTDnG/+lRjPYvTK5nfWtR3xDOux0w6bHLAsaHo2ZLTA==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react@*", "@types/react@^17.0.0":
   version "17.0.37"
   resolved "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz"
@@ -4673,21 +4666,6 @@ react-dom@^17.0.0:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
-react-fast-compare@^3.1.1:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
-  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
-
-react-helmet@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
-  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
-  dependencies:
-    object-assign "^4.1.1"
-    prop-types "^15.7.2"
-    react-fast-compare "^3.1.1"
-    react-side-effect "^2.1.0"
-
 react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -4698,11 +4676,6 @@ react-refresh@^0.11.0:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
-react-side-effect@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
-  integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
-
 react-transition-group@^4.4.1:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"