Merge pull request #132 from flextremedev/pwa-package

Pwa package

Author: Pascal Wegner

.circleci/config.yml

@@ -18,11 +18,10 @@ jobs:
     steps:
       - checkout
       - run: yarn install
-      - run: yarn web-test-coverage
-      - run: yarn mobile-test-ci
+      - run: yarn pwa test --runInBand --coverage
       - run: yarn core-test-ci
       - codecov/upload:
-        file: packages/web/coverage/*.json
+        file: packages/pwa/coverage/*.json
 workflows:
   version: 2
   test:

packages/pwa/.eslintrc

@@ -1,3 +1,15 @@
 {
-  "extends": "@flextremedev/eslint-config-react-typescript"
+  "root": true,
+  "extends": "@flextremedev/eslint-config-react-typescript",
+  "rules": {
+    "@typescript-eslint/explicit-function-return-type": "warn"
+  },
+  "overrides": [
+    {
+      "files": ["src/pages/**/*.{ts,tsx}"],
+      "rules": {
+        "import/no-default-export": "off"
+      }
+    }
+  ]
 }

packages/pwa/package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "test": "jest"
+    "test": "jest",
+    "lint": "eslint --quiet ./src/**/*.{ts,tsx}"
   },
   "dependencies": {
     "@interval-timer/core": "*",
@@ -32,6 +33,7 @@
     "eslint": "^8.7.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",

packages/pwa/src/__tests__/index.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, screen } from '@testing-library/react';
+
 import { MockWorker } from '../__mocks__/Worker';
 import { expectCountDownFrom } from '../test-utils/expectCountDownFrom';
 import { makeAdvanceDateNowBy } from '../test-utils/makeAdvanceDateNowBy';

packages/pwa/src/components/Arc/Arc.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+type ArcProps = React.SVGProps<SVGSVGElement> & {
+  factor: number;
+};
+
+export function Arc({ factor, ...restProps }: ArcProps) {
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 282 282"
+      {...restProps}
+    >
+      <circle
+        cx={141}
+        cy={141}
+        r={139}
+        fill="#FBFCFE"
+        stroke="#CDD9EE"
+        strokeWidth={4}
+      />
+      <path
+        d="M280 141a138.998 138.998 0 01-237.288 98.288A139.01 139.01 0 012 141 138.997 138.997 0 01141 2a138.997 138.997 0 01139 139h0z"
+        stroke="#0057FF"
+        strokeWidth={4}
+        className="origin-center -rotate-90"
+        style={{ strokeDasharray: 877, strokeDashoffset: factor * 877 }}
+      />
+    </svg>
+  );
+}

packages/pwa/src/components/Counter/Counter.tsx

@@ -1,25 +1,40 @@
 import * as React from 'react';
 
 import { DurationInput } from '../DurationInput/DurationInput';
+import { Arc } from '../Arc/Arc';
+import { getMinutes, getSeconds } from 'date-fns';
 
 type CounterProps = {
   timeLeft: Date;
   roundsLeft: number;
   rounds: number;
+  timeTotal: Date;
 };
 
-export function Counter({ timeLeft, roundsLeft, rounds }: CounterProps) {
+export function Counter({
+  timeTotal,
+  timeLeft,
+  roundsLeft,
+  rounds,
+}: CounterProps) {
+  const factor =
+    1 -
+    (getSeconds(timeLeft) + getMinutes(timeLeft)) /
+      (getSeconds(timeTotal) + getMinutes(timeTotal));
+
   return (
-    <div className="flex flex-col items-center">
-      <div className="flex flex-col items-center mb-20">
+    <div>
+      <div className="flex flex-col items-center mb-20 z-[1]">
         <span className="text-blue-600 text-lg font-bold">ROUND</span>
         <span className="text-4xl" data-testid={'round'}>{`${
           rounds - roundsLeft
         }/${rounds}`}</span>
       </div>
-      <div className="">
-        <div className=""></div>
-        <DurationInput value={timeLeft} readOnly dataTestId={'time-left'} />
+      <div className="flex flex-col justify-center items-center relative w-72 h-72">
+        <Arc className="absolute origin-center" factor={factor} />
+        <div className="z-[1]">
+          <DurationInput value={timeLeft} readOnly dataTestId={'time-left'} />
+        </div>
       </div>
     </div>
   );

packages/pwa/src/hooks/useAudio.ts

@@ -1,6 +1,6 @@
 export const useAudio = (url: string) => {
   /* istanbul ignore next */
-  if (typeof window === undefined) {
+  if (typeof window === 'undefined') {
     return { audio: undefined };
   }
 

packages/pwa/src/pages/index.tsx

@@ -1,10 +1,34 @@
-import { FormFields } from '../components/FormFields/FormFields';
 import { timerMachine, timerStates } from '@interval-timer/core';
 import { useMachine } from '@xstate/react';
 import * as React from 'react';
+import { StateValue } from 'xstate';
+
 import { Counter } from '../components/Counter/Counter';
+import { FormFields } from '../components/FormFields/FormFields';
 import { useBeep } from '../hooks/useBeep';
 
+const getActiveTimeTotal = ({
+  breakInterval,
+  prepareTime,
+  value,
+  workInterval,
+}: {
+  value: StateValue;
+  breakInterval: Date;
+  workInterval: Date;
+  prepareTime: Date;
+}) => {
+  if (value === timerStates.WORK) {
+    return workInterval;
+  }
+
+  if (value === timerStates.BREAK) {
+    return breakInterval;
+  }
+
+  return prepareTime;
+};
+
 export default function Home() {
   const { beepBreak, beepBreakLong, beepWork, beepWorkLong } = useBeep();
   const [state, send, service] = useMachine(timerMachine, {
@@ -72,15 +96,21 @@ export default function Home() {
     });
   };
 
-  const { breakInterval, rounds, workInterval, timeLeft, roundsLeft } =
-    state.context;
+  const {
+    breakInterval,
+    rounds,
+    workInterval,
+    timeLeft,
+    roundsLeft,
+    prepareTime,
+  } = state.context;
 
   return (
     <>
       <header />
       <main className="flex-1">
         <div className="h-full flex flex-col items-stretch bg-blue-600">
-          <div className="flex flex-col justify-center flex-1 bg-white rounded-b-3xl">
+          <div className="flex flex-col justify-center items-center flex-1 bg-white rounded-b-3xl">
             {state.value === timerStates.STOPPED ? (
               <FormFields
                 rounds={rounds}
@@ -92,6 +122,12 @@ export default function Home() {
               ></FormFields>
             ) : (
               <Counter
+                timeTotal={getActiveTimeTotal({
+                  breakInterval,
+                  prepareTime,
+                  value: state.value,
+                  workInterval,
+                })}
                 timeLeft={timeLeft}
                 roundsLeft={roundsLeft}
                 rounds={rounds}

packages/pwa/src/test-utils/expectCountDownFrom.ts

@@ -29,7 +29,7 @@ export const expectCountDownFrom = ({
     minutesLeft >= 1 || (firstRound && minutesLeft <= 0);
 
   for (let minutesLeft = minutes; minutesLeft >= toMinutes; minutesLeft--) {
-    let secondsToCountInMinute = shouldDisplayInitialSeconds(minutesLeft)
+    const secondsToCountInMinute = shouldDisplayInitialSeconds(minutesLeft)
       ? seconds
       : 59;
 

packages/pwa/src/test-utils/renderApp.tsx

@@ -1,6 +1,6 @@
+import { render, screen } from '@testing-library/react';
 import * as React from 'react';
 
-import { render, screen } from '@testing-library/react';
 import Home from '../pages/index';
 
 export const renderApp = () => {