Notifications for duels

.gitignore

@@ -6,6 +6,7 @@ rapport-guacamole/
 .eslintcache
 server/logs/
 server/files/
-server/files-test/
 uploads/
-tmp/
+server/files-test/
+tmp/
+serviceAccountKey.json

client/package.json

@@ -15,6 +15,7 @@
     "dirty-chai": "^2.0.1",
     "dotenv": "^8.2.0",
     "find-config": "^1.0.0",
+    "firebase": "^8.2.9",
     "node-sass": "^4.14.1",
     "path": "^0.12.7",
     "prop-types": "^15.7.2",

client/src/App.js

@@ -1,11 +1,14 @@
-import { ReloadIcon } from "@modulz/radix-icons";
+import { ReloadIcon, BellIcon } from "@modulz/radix-icons";
 import axios from "axios";
 import React, { Component } from "react";
 import { QueryClientProvider } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
 import "./styles/styles.scss";
+import ButtonFullWidth from "./components/buttons/ButtonFullWidth";
+import FullScreenMessage from "./components/FullScreenMessage";
+import Notification from "./components/Notification";
 import ProtectedRoute from "./components/ProtectedRoute";
 import TopBar from "./components/system/TopBar";
 import About from "./pages/About";
@@ -21,6 +24,7 @@ import Train from "./pages/Train";
 import AuthService from "./services/auth.service";
 import * as serviceWorker from "./serviceWorker";
 import queryClient from "./utils/configuredQueryClient";
+import MessagingHandler from "./utils/messaging";
 
 /**
  * Set up the authorization header in all request if the user is logged in
@@ -46,7 +50,9 @@ export default class App extends Component {
       waitingServiceWorker: null,
       isUpdateAvailable: false,
       installPromptEvent: null,
+      requireNotificationPermission: false,
       user: user,
+      foregroundNotification: null,
     };
   }
 
@@ -74,8 +80,52 @@ export default class App extends Component {
         installPromptEvent: event,
       });
     });
+
+    // Request permission for notifications and subscribe to push
+    const messaging = new MessagingHandler();
+    if (
+      "Notification" in window &&
+      navigator.serviceWorker &&
+      Notification.permission !== "denied"
+    ) {
+      if (this.state.user) {
+        if (Notification.permission === "default") {
+          this.setState({ requireNotificationPermission: true });
+        } else {
+          messaging.saveToken();
+        }
+      } else {
+        messaging.removeToken();
+      }
+    }
+
+    // Listen for notifications (in foreground)
+    messaging.getMessaging().onMessage((payload) => {
+      if (!payload.data.title) {
+        console.error("Can't display notification without title");
+        return;
+      }
+
+      const { title, body } = payload.data;
+      this.setState({ foregroundNotification: { title: title, body: body } });
+    });
   }
 
+  /**
+   * Display the notification authorization request
+   */
+  displayBrowserNotificationPermission = () => {
+    Notification.requestPermission()
+      .then(() => {
+        this.setState({ requireNotificationPermission: false });
+        new MessagingHandler().saveToken();
+      })
+      .catch((err) => console.error("Can't request permission", err));
+  };
+
+  /**
+   * Send a message to the service-worker to request the new version
+   */
   updateServiceWorker = () => {
     this.setState({ updateRequired: true });
 
@@ -84,7 +134,14 @@ export default class App extends Component {
   };
 
   render() {
-    const { user, isUpdateAvailable, installPromptEvent, updateRequired } = this.state;
+    const {
+      user,
+      isUpdateAvailable,
+      installPromptEvent,
+      updateRequired,
+      requireNotificationPermission,
+      foregroundNotification,
+    } = this.state;
 
     return (
       <QueryClientProvider client={queryClient}>
@@ -101,6 +158,32 @@ export default class App extends Component {
             </button>
           )}
 
+          {requireNotificationPermission && (
+            <FullScreenMessage id="authorization-notification">
+              <BellIcon />
+
+              <h1>Notifications</h1>
+
+              <p>
+                Nous aimerions vous envoyer des notifications pour vous prévenir lorsque de nouveaux
+                duels sont disponibles.
+              </p>
+
+              <ButtonFullWidth onClick={this.displayBrowserNotificationPermission}>
+                Autoriser les notifications
+              </ButtonFullWidth>
+              <button onClick={this.displayBrowserNotificationPermission}>Ne pas autoriser</button>
+            </FullScreenMessage>
+          )}
+
+          {foregroundNotification !== null && (
+            <Notification
+              title={foregroundNotification.title}
+              text={foregroundNotification.body}
+              closeNotification={() => this.setState({ foregroundNotification: null })}
+            />
+          )}
+
           <Switch>
             <Route path="/" exact Menu>
               <Menu user={this.state.user} installPromptEvent={installPromptEvent} />

client/src/components/FullScreenMessage.js

@@ -0,0 +1,17 @@
+import { PropTypes } from "prop-types";
+import React from "react";
+
+const FullScreenMessage = ({ id, children }) => {
+  return (
+    <section className="fullscreen-message" id={id}>
+      <div>{children}</div>
+    </section>
+  );
+};
+
+FullScreenMessage.propTypes = {
+  id: PropTypes.string.isRequired,
+  children: PropTypes.array.isRequired,
+};
+
+export default FullScreenMessage;

client/src/components/Notification.js

@@ -0,0 +1,40 @@
+import { Cross1Icon } from "@modulz/radix-icons";
+import { PropTypes } from "prop-types";
+import React, { useState, useEffect } from "react";
+
+const Notification = ({ title, text, closeNotification }) => {
+  const [timer, setTimer] = useState(10);
+
+  useEffect(() => {
+    let interval = setTimeout(() => {
+      setTimer(timer - 0.05);
+    }, 50);
+
+    if (timer <= 0) {
+      closeNotification();
+    }
+
+    return () => clearInterval(interval);
+  });
+
+  return (
+    <div className="notification">
+      <div id="indicator" style={{ width: `${timer * 10}%` }}></div>
+
+      <div id="close" onClick={closeNotification}>
+        <Cross1Icon />
+      </div>
+
+      <h2>{title}</h2>
+      <p>{text}</p>
+    </div>
+  );
+};
+
+Notification.propTypes = {
+  title: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  closeNotification: PropTypes.func.isRequired,
+};
+
+export default Notification;

client/src/pages/Train.js

@@ -116,7 +116,7 @@ class PlayView extends Component {
         <Question numero={questionNum} text={question.wording} />
 
         {inProgress ? (
-          <Timer inProgress={inProgress} duration={timer} updateParent={this.updateTimer} />
+          <Timer inProgress={inProgress} duration={timer ?? 0} updateParent={this.updateTimer} />
         ) : (
           <div id="next-btn">
             <ButtonCircle onClick={this.nextQuestion}>
@@ -143,7 +143,6 @@ PlayView.propTypes = {
   getNewQuestion: PropTypes.func.isRequired,
   addUserAnswer: PropTypes.func.isRequired,
   displaySummury: PropTypes.func.isRequired,
-  timer: PropTypes.number.isRequired,
   questionNum: PropTypes.number.isRequired,
 };
 

client/src/service-worker.js

@@ -1,12 +1,27 @@
 /* eslint-disable no-restricted-globals */
 
+// Import Firebase scripts
+import firebase from "firebase";
+
+self.importScripts("https://www.gstatic.com/firebasejs/8.2.9/firebase-app.js");
+self.importScripts("https://www.gstatic.com/firebasejs/8.2.9/firebase-messaging.js");
+
 let cacheName = "guacamolePWA-v1";
 caches.has(cacheName).then((res) => {
   if (res) {
     cacheName = "guacamolePWA-v2";
   }
 });
 
+firebase.initializeApp({
+  apiKey: "AIzaSyCtGrFY1_UOzWAFn1xt1CRPNGZ40JZcaJw",
+  authDomain: "guacamole-31ba0.firebaseapp.com",
+  projectId: "guacamole-31ba0",
+  storageBucket: "guacamole-31ba0.appspot.com",
+  messagingSenderId: "46062321146",
+  appId: "1:46062321146:web:bcd9f8b8caf30c2aacf843",
+});
+
 /**
  * Install the service worker
  * JavaScript files and assets (e.g. images) are cached
@@ -65,16 +80,64 @@ self.addEventListener("fetch", (e) => {
         const newResource = r.clone();
         caches.open(cacheName).then((cache) => {
           console.info(`[Service Worker] Caching new resource: ${e.request.url}`);
-          cache.put(e.request, newResource);
+          cache.put(e.request, newResource).catch(() => console.error("Can't cache new resource"));
         });
         return r;
       });
     })
   );
 });
 
+/**
+ * Message sent from the client to the service-worker
+ */
 self.addEventListener("message", (e) => {
+  // User wants to use the new sw
   if (e.data.type && e.data.type === "SKIP_WAITING") {
-    self.skipWaiting();
+    self.skipWaiting().catch(() => console.error("Can't skip waiting"));
+  }
+});
+
+/**
+ * Push message handling (app on background)
+ */
+const messaging = firebase.messaging();
+messaging.onBackgroundMessage((payload) => {
+  if (!payload.data.title) {
+    console.error("Can't display notification without title");
+    return;
+  }
+
+  const { title } = payload.data;
+  const options = {
+    body: payload.data.body,
+    icon: payload.data.image,
+    data: payload.data,
+  };
+
+  console.log(payload);
+
+  self.registration
+    .showNotification(title, options)
+    .catch((err) => console.error("Can't send notification: ", err));
+});
+
+/**
+ * Handle user click on a notification
+ */
+self.addEventListener("notificationclick", (e) => {
+  const { notification, action } = e;
+  if (action === "close") {
+    notification.close();
+    return;
+  }
+
+  const { data } = notification;
+  if (data.type === "duel" && data.duelId) {
+    // eslint-disable-next-line no-undef
+    clients
+      .openWindow(`/duel/${data.duelId}`)
+      .catch(() => console.error("Can't open window after the user clicks on a notification"));
+    notification.close();
   }
 });

client/src/setupTests.js

@@ -13,3 +13,20 @@ import sinonChai from "sinon-chai";
 
 chai.use(dirtyChai).use(createChaiJestDiff()).use(createChaiEnzyme()).use(sinonChai);
 configureEnzyme({ adapter: new Adapter() });
+
+/* Mock global variables */
+
+const Notification = {
+  permission: "granted",
+};
+
+const serviceWorker = {
+  getRegistration() {
+    return new Promise((resolve) => {
+      resolve(undefined);
+    });
+  },
+};
+
+global.Notification = Notification;
+global.navigator.serviceWorker = serviceWorker;

client/src/styles/base/_App.scss

@@ -17,7 +17,7 @@ main {
   box-sizing: border-box;
 }
 
-@media only screen and (min-device-width: $screen-desktop) {
+@media only screen and (min-width: $screen-desktop) {
   body {
     display: flex;
     justify-content: center;

client/src/styles/base/_variables.module.scss

@@ -34,12 +34,14 @@ $color-red-error: #e23737;
 
 /* ---------- Avatar ---------- */
 /** These should match the number of possibilities in images/avatar/files.png */
+
 $number-choices-eyes: 5;
 $number-choices-hands: 5;
 $number-choices-hats: 5;
 $number-choices-mouthes: 5;
 
 /* ---------- Make variables accessible from JS files ---------- */
+
 :export {
   numberChoicesEyes: $number-choices-eyes;
   numberChoicesHands: $number-choices-hands;