Merge pull request #52 from AXeL-dev/feat/timer

Feat: Timer

Author: AXeL-dev

README.md

@@ -18,6 +18,7 @@ Distract Me Not is a lightweight website blocker with a user friendly interface.
 - Display your custom message on blocked pages.
 - Immediate closing of blocked tabs.
 - Schedule blocking time.
+- Timer mode.
 - Export/Import websites lists.
 - Protect your settings with a password.
 - Unblock websites using a password.

package-lock.json

@@ -16,6 +16,7 @@
     "omgopass": "^3.2.1",
     "query-string": "^7.1.1",
     "react": "^17.0.2",
+    "react-countdown-circle-timer": "^3.0.8",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
     "react-scripts": "^4.0.3",
@@ -25,7 +26,7 @@
   },
   "scripts": {
     "start": "craco start",
-    "build": "CI=false INLINE_RUNTIME_CHUNK=false GENERATE_SOURCEMAP=false craco build",
+    "build": "INLINE_RUNTIME_CHUNK=false GENERATE_SOURCEMAP=false craco build",
     "build:firefox": "npm run build",
     "build:chrome": "npm run build",
     "build:edge": "npm run build",
@@ -41,6 +42,7 @@
     "sign": "node ./scripts/sign-addon.js",
     "test": "craco test --verbose",
     "test:all": "npm test -- --watchAll --testMatch \"**/src/**/*.test.{js,jsx}\"",
+    "test:update": "npm run test:all -- -u",
     "eject": "react-scripts eject",
     "release:major": "release-it major",
     "release:minor": "release-it minor",

package.json

@@ -387,5 +387,41 @@
   },
   "openLogs": {
     "message": "Open logs"
+  },
+  "timer": {
+    "message": "Timer"
+  },
+  "enableTimer": {
+    "message": "Enable timer"
+  },
+  "enableTimerDescription": {
+    "message": "Displays a 'Timer' button on the main panel"
+  },
+  "defaultTimerValue": {
+    "message": "Default timer value"
+  },
+  "allowStoppingTimer": {
+    "message": "Allow stopping the timer before it ends"
+  },
+  "displayNotificationOnComplete": {
+    "message": "Display a notification when the timer ends"
+  },
+  "allowUsingTimerWithoutPassword": {
+    "message": "Allow using the timer without entering the password"
+  },
+  "mainPanel": {
+    "message": "Main panel"
+  },
+  "start": {
+    "message": "Start"
+  },
+  "stop": {
+    "message": "Stop"
+  },
+  "remainingTime": {
+    "message": "Remaining time"
+  },
+  "timerCompleted": {
+    "message": "Timer completed!"
   }
 }

public/_locales/en/messages.json

@@ -344,13 +344,13 @@
     "message": "Nombre de lignes à conserver dans la table des logs"
   },
   "hideReportIssueButton": {
-    "message": "Masquer le bouton \"signaler un problème\" sur le panneau principal"
+    "message": "Masquer le bouton 'signaler un problème' sur le panneau principal"
   },
   "showAddWebsitePrompt": {
     "message": "Afficher l'invite d'ajout de site web"
   },
   "showAddWebsitePromptTooltip": {
-    "message": "Affiche une invite de confirmation lors de l'ajout d'un site web à partir du button \"+\" sur le panneau principal"
+    "message": "Affiche une invite de confirmation lors de l'ajout d'un site web à partir du button '+' sur le panneau principal"
   },
   "urls": {
     "message": "Liens"
@@ -387,5 +387,41 @@
   },
   "openLogs": {
     "message": "Consulter les journaux"
+  },
+  "timer": {
+    "message": "Minuteur"
+  },
+  "enableTimer": {
+    "message": "Activer le minuteur"
+  },
+  "enableTimerDescription": {
+    "message": "Affiche un bouton 'Minuteur' sur le panneau principal"
+  },
+  "defaultTimerValue": {
+    "message": "Valeur par défaut du minuteur"
+  },
+  "allowStoppingTimer": {
+    "message": "Permettre l'arrêt manuel du minuteur avant qu'il ne se termine"
+  },
+  "displayNotificationOnComplete": {
+    "message": "Afficher une notification lorsque le minuteur se termine"
+  },
+  "allowUsingTimerWithoutPassword": {
+    "message": "Permettre l'accès au minuteur sans entrer le mot de passe"
+  },
+  "mainPanel": {
+    "message": "Panneau principal"
+  },
+  "start": {
+    "message": "Démarrer"
+  },
+  "stop": {
+    "message": "Arrêter"
+  },
+  "remainingTime": {
+    "message": "Temps restant"
+  },
+  "timerCompleted": {
+    "message": "Minuteur terminé!"
   }
 }

public/_locales/fr/messages.json

@@ -387,5 +387,41 @@
   },
   "openLogs": {
     "message": "Open logboek"
+  },
+  "timer": {
+    "message": "Tijdklok"
+  },
+  "enableTimer": {
+    "message": "Tijdklok inschakelen"
+  },
+  "enableTimerDescription": {
+    "message": "Toont een 'Tijdklok' knop op het hoofdpaneel"
+  },
+  "defaultTimerValue": {
+    "message": "Standaard timerwaarde"
+  },
+  "allowStoppingTimer": {
+    "message": "Laat toe de timer te stoppen voor hij afloopt"
+  },
+  "displayNotificationOnComplete": {
+    "message": "Geef een melding wanneer de timer afloopt"
+  },
+  "allowUsingTimerWithoutPassword": {
+    "message": "Gebruik van de timer toestaan zonder het wachtwoord in te voeren"
+  },
+  "mainPanel": {
+    "message": "Hoofdpaneel"
+  },
+  "start": {
+    "message": "Start"
+  },
+  "stop": {
+    "message": "Stop"
+  },
+  "remainingTime": {
+    "message": "Resterende tijd"
+  },
+  "timerCompleted": {
+    "message": "Timer voltooid!"
   }
 }

public/_locales/nl/messages.json

@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import { HashRouter as Router, Switch, Route } from 'react-router-dom';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { storage } from './helpers/webext';
-import { isDevEnv } from './helpers/debug';
-import { Panel, Settings, Logs, Background, Blocked, PasswordPrompt, AddWebsitePrompt } from './components';
+import { isDevEnv, isTestEnv } from './helpers/debug';
+import { Main, Panel, Settings, Timer, Logs, Background, Blocked, PasswordPrompt, AddWebsitePrompt } from './components';
 import { PasswordProtectedRoute } from './routes';
 
 export default class App extends Component {
@@ -16,6 +16,9 @@ export default class App extends Component {
   }
 
   componentDidMount() {
+    if (isTestEnv) {
+      return;
+    }
     storage.get({
       password: {
         isEnabled: false
@@ -31,25 +34,30 @@ export default class App extends Component {
     return (
       <Router>
         <Route render={({ location }) => (
-          <TransitionGroup className="page">
-            <CSSTransition
-              key={location.pathname}
-              classNames="fade"
-              timeout={300}
-            >
-              <Switch location={location}>
-                <PasswordProtectedRoute exact path="/" component={Panel} accessAllowed={this.state.accessAllowed} showPromptHeader={true} showPromptFooter={true} />
-                <PasswordProtectedRoute path="/settings" component={Settings} accessAllowed={this.state.accessAllowed} />
-                <PasswordProtectedRoute path="/logs" component={Logs} accessAllowed={this.state.accessAllowed} />
-                <Route path="/background" component={Background} />
-                <Route path="/blocked" component={Blocked} />
-                <Route path="/addWebsitePrompt" component={AddWebsitePrompt} />
-                {isDevEnv || !this.state.accessAllowed ? (
-                  <Route path="/pwd" component={PasswordPrompt} />
-                ) : null}
-              </Switch>
-            </CSSTransition>
-          </TransitionGroup>
+          <>
+            {/* Routes that only does redirecting should be outside of the transition group */}
+            <Route exact path="/" component={Main} />
+            <TransitionGroup className="page">
+              <CSSTransition
+                key={location.pathname}
+                classNames="fade"
+                timeout={300}
+              >
+                <Switch location={location}>
+                  <PasswordProtectedRoute path="/panel" component={Panel} accessAllowed={this.state.accessAllowed} showPromptHeader={true} showPromptFooter={true} />
+                  <PasswordProtectedRoute path="/timer" component={Timer} accessAllowed={this.state.accessAllowed} showPromptHeader={true} showPromptFooter={true} />
+                  <PasswordProtectedRoute path="/settings" component={Settings} accessAllowed={this.state.accessAllowed} />
+                  <PasswordProtectedRoute path="/logs" component={Logs} accessAllowed={this.state.accessAllowed} />
+                  <Route path="/background" component={Background} />
+                  <Route path="/blocked" component={Blocked} />
+                  <Route path="/addWebsitePrompt" component={AddWebsitePrompt} />
+                  {isDevEnv || !this.state.accessAllowed ? (
+                    <Route path="/pwd" component={PasswordPrompt} />
+                  ) : null}
+                </Switch>
+              </CSSTransition>
+            </TransitionGroup>
+          </>
         )} />
       </Router>
     );

src/App.jsx

@@ -2,6 +2,11 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from '../App';
 
+it('renders nothing when accessAllowed prop is not defined', () => {
+  const { container } = render(<App />);
+  expect(container.firstChild).toBeEmptyDOMElement();
+});
+
 it('renders appName header when access is allowed', () => {
   render(<App accessAllowed={true} />);
   const headerElement = screen.getByText(/appName/i);
@@ -13,8 +18,3 @@ it('renders password prompt when access is not allowed', () => {
   const passwordInput = screen.getByPlaceholderText('password');
   expect(passwordInput).toBeInTheDocument();
 });
-
-it('renders nothing when accessAllowed prop is not defined', () => {
-  const { container } = render(<App />);
-  expect(container).toBeEmptyDOMElement();
-});

src/__tests__/App.test.js

@@ -9,12 +9,12 @@ exports[`renders correctly 1`] = `
       class="ub-dspl_inline-flex ub-box-szg_border-box"
     >
       <svg
-        class="css-c4d79v ub-w_22px ub-h_22px ub-box-szg_border-box"
+        class="css-c4d79v ub-w_18px ub-h_18px ub-box-szg_border-box"
         data-icon="cross"
-        viewBox="0 0 20 20"
+        viewBox="0 0 16 16"
       >
         <path
-          d="M11.41 10l4.29-4.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-4.29-4.3a1.003 1.003 0 00-1.42 1.42L8.59 10 4.3 14.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4.29-4.3 4.29 4.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z"
+          d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
           fill-rule="evenodd"
         />
       </svg>

src/__tests__/__snapshots__/AnimatedIconButton.test.js.snap

@@ -9,7 +9,7 @@ exports[`renders correctly 1`] = `
       class="ub-dspl_inline-flex ub-box-szg_border-box"
     >
       <svg
-        class="css-c4d79v ub-w_16px ub-h_16px ub-box-szg_border-box"
+        class="css-c4d79v ub-w_18px ub-h_18px ub-box-szg_border-box"
         data-icon="cross"
         viewBox="0 0 16 16"
       >