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,4 +1,4 @@
-import { ReloadIcon } from "@modulz/radix-icons";
+import { ReloadIcon, BellIcon } from "@modulz/radix-icons";
 import axios from "axios";
 import PropTypes from "prop-types";
 import React, { lazy, Suspense, Component } from "react";
@@ -7,6 +7,9 @@ import { ReactQueryDevtools } from "react-query/devtools";
 import { BrowserRouter as Router, Route, Switch, useLocation } from "react-router-dom";
 
 import "./styles/styles.scss";
+import ButtonFullWidth from "./components/buttons/ButtonFullWidth";
+import FullScreenMessage from "./components/FullScreenMessage";
+import NotificationForeground from "./components/NotificationForeground";
 import ProtectedRoute from "./components/ProtectedRoute";
 import Loading from "./components/status/Loading";
 import TopBar from "./components/system/TopBar";
@@ -16,6 +19,7 @@ import Menu from "./pages/Menu";
 import AuthService from "./services/auth.service";
 import * as serviceWorker from "./serviceWorker";
 import queryClient from "./utils/configuredQueryClient";
+import { getToken, checkAndRemoveToken, onMessage } from "./utils/messaging";
 
 const About = lazy(() => import("./pages/About"));
 const Admin = lazy(() => import("./pages/Admin"));
@@ -89,6 +93,8 @@ export default class App extends Component {
       waitingServiceWorker: null,
       isUpdateAvailable: false,
       installPromptEvent: null,
+      requireNotificationPermission: false,
+      foregroundNotification: null,
       user: pseudo || null,
     };
   }
@@ -117,8 +123,40 @@ export default class App extends Component {
         installPromptEvent: event,
       });
     });
+
+    /*
+     * Request permission for notifications and subscribe to push
+     *
+     * The user must be logged in. We obtain his push registration
+     * token which must then be registered in the database and in localStorage.
+     */
+    if (this.state.user) {
+      getToken(this.state.user)
+        .then((token) => console.log(token))
+        .catch((err) => console.error("Error: can't retrieve token", err));
+    } else {
+      // If the user is not logged in, check if there is a token in the localstorage and delete it
+      checkAndRemoveToken().catch((err) => console.error("Error: can't remove token", err));
+    }
+
+    // Listen for notifications (in foreground)
+    // Function given by the Firebase API
+    onMessage().then((payload) => {
+      // A notification must have a title
+      if (!payload.data.title) {
+        console.error("Can't display notification without title");
+        return;
+      }
+
+      // Add the notification to the state
+      const { title, body } = payload.data;
+      this.setState({ foregroundNotification: { title: title, body: body } });
+    });
   }
 
+  /**
+   * Send a message to the service-worker to request the new version
+   */
   updateServiceWorker = () => {
     this.setState({ updateRequired: true });
 
@@ -127,7 +165,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}>
@@ -137,6 +182,34 @@ export default class App extends Component {
             <UpdateButton updateSW={this.updateServiceWorker} updateRequired={updateRequired} />
           )}
 
+          {/* Display a screen to ask the user permission for notifications */}
+          {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>
+          )}
+
+          {/* If there is a notification in foreground, display it */}
+          {foregroundNotification !== null && (
+            <NotificationForeground
+              title={foregroundNotification.title}
+              text={foregroundNotification.body}
+              closeNotification={() => this.setState({ foregroundNotification: null })}
+            />
+          )}
+
           <Suspense fallback={<Loading />}>
             <Switch>
               <Route path="/" exact>

client/src/components/FullScreenMessage.js

@@ -0,0 +1,15 @@
+import { PropTypes } from "prop-types";
+import React from "react";
+
+const FullScreenMessage = ({ id, children }) => (
+  <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/NotificationForeground.js

@@ -0,0 +1,40 @@
+import { Cross1Icon } from "@modulz/radix-icons";
+import { PropTypes } from "prop-types";
+import React, { useState, useEffect } from "react";
+
+const NotificationForeground = ({ 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>
+  );
+};
+
+NotificationForeground.propTypes = {
+  title: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  closeNotification: PropTypes.func.isRequired,
+};
+
+export default NotificationForeground;

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}>

client/src/service-worker.js

@@ -1,12 +1,30 @@
 /* eslint-disable no-restricted-globals */
 
+// Import Firebase scripts
+import firebase from "firebase";
+
+// Import firebase scripts
+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";
   }
 });
 
+// Initialize app with firebase data
+// You can create a project and get these data here: https://firebase.google.com/
+firebase.initializeApp({
+  apiKey: "YOUR_KEY",
+  authDomain: "YOUR_AUTH_DOMAIN",
+  projectId: "YOUR_PROJECT_ID",
+  storageBucket: "YOUR_STORAGE_BUCKET",
+  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
+  appId: "YOUR_APP_ID",
+});
+
 /**
  * Install the service worker
  * JavaScript files and assets (e.g. images) are cached
@@ -65,16 +83,66 @@ 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)
+ * Use functions from firebase API
+ */
+const messaging = firebase.messaging();
+messaging.onBackgroundMessage((payload) => {
+  // A notification must have a title
+  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,
+  };
+
+  // Show notification
+  self.registration
+    .showNotification(title, options)
+    .catch((err) => console.error("Can't send notification: ", err));
+});
+
+/**
+ * Handle user click on a notification
+ * Display the duel page id linked to the 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;