dakingas · alexgallardo · Nov 16, 2018 · Nov 16, 2018 · Nov 16, 2018 · Nov 16, 2018
diff --git a/public/index.html b/public/index.html
@@ -1,17 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta name="theme-color" content="#000000">
-  <!--
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-  <!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -20,15 +22,14 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>React App</title>
-</head>
+    <title>React App</title>
+  </head>
 
-<body>
-  <noscript>
-    You need to enable JavaScript to run this app.
-  </noscript>
-  <div id="root"></div>
-  <!--
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+    <div id="notifications"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -38,6 +39,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
-</html>
+  </body>
+</html>
diff --git a/src/components/notification-view.tsx b/src/components/notification-view.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import styles from "./notifications.module.css";
+import Overlay from "./overlay";
+
+type NotificationType = "normal" | "warning" | "danger" | "informative";
+
+const getNotificationClass = (type: NotificationType) => {
+  switch (type) {
+    default:
+    case "normal":
+      return styles.colorNormal;
+    case "warning":
+      return styles.colorWarning;
+    case "danger":
+      return styles.colorDanger;
+    case "informative":
+      return styles.colorInformative;
+  }
+};
+
+type NotificationProps = {
+  type: NotificationType;
+  onClose?: () => void;
+};
+const Notification: React.SFC<NotificationProps> = ({
+  children,
+  type,
+  onClose
+}) => (
+  <div className={`${styles.notification} ${getNotificationClass(type)}`}>
+    {onClose && (
+      <div className={styles.notificationButton} onClick={onClose}>
+        X
+      </div>
+    )}
+    {children}
+  </div>
+);
+
+const NotificationView: React.FC<NotificationProps> = props => (
+  <Overlay>
+    <Notification {...props} />
+  </Overlay>
+);
+
+export default NotificationView;
diff --git a/src/components/notifications.module.css b/src/components/notifications.module.css
@@ -0,0 +1,48 @@
+.notification {
+  background-color: white;
+  color: black;
+  border-radius: 10px 10px 0 0;
+  min-width: 300px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  padding-left: 25px;
+  padding-right: 25px;
+
+  position: absolute;
+  bottom: 0;
+
+  display: flex;
+  justify-content: center;
+}
+
+.colorNormal {
+  background-color: lightgreen;
+}
+
+.colorWarning {
+  background-color: lightyellow;
+}
+
+.colorDanger {
+  background-color: lightcoral;
+}
+
+.colorInformative {
+  background-color: lightblue;
+}
+
+.notificationButton {
+  color: white;
+  background-color: rgba(0, 0, 0, 0.75);
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
diff --git a/src/components/overlay.module.css b/src/components/overlay.module.css
@@ -0,0 +1,13 @@
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  z-index: 100;
+}
diff --git a/src/components/overlay.tsx b/src/components/overlay.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import styles from "./overlay.module.css";
+
+type OverlayProps = {
+  backgroundColor?: string;
+  onClick?: () => void;
+};
+export const Overlay: React.SFC<OverlayProps> = ({
+  children,
+  backgroundColor,
+  ...props
+}) => (
+  <div
+    className={styles.overlay}
+    style={backgroundColor ? { backgroundColor } : {}}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export default Overlay;
diff --git a/src/index.tsx b/src/index.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./components/app";
+import NotificationView from "./components/notification-view";
 import * as serviceWorker from "./serviceWorker";
 
 const element = document.getElementById("root");
@@ -10,10 +11,39 @@ ReactDOM.render(<App />, element);
 // Learn more about service workers: http://bit.ly/CRA-PWA
 serviceWorker.register({
   onSuccess(serviceWorkerRegistration) {
-    // TODO: Warn about service worker installation and offline use
+    // Warn about service worker installation and offline use
+    const notificationsElement = document.getElementById("notifications");
+    if (notificationsElement) {
+      ReactDOM.render(
+        <NotificationView
+          type="informative"
+          onClose={() => {
+            ReactDOM.unmountComponentAtNode(notificationsElement);
+          }}
+        >
+          Content is cached for offline use.
+        </NotificationView>,
+        document.getElementById("notifications")
+      );
+    }
   },
   onUpdate(serviceWorkerRegistration) {
-    // TODO: Warn about new content received
+    // Warn about new content received
+    const notificationsElement = document.getElementById("notifications");
+    if (notificationsElement) {
+      ReactDOM.render(
+        <NotificationView
+          type="informative"
+          onClose={() => {
+            ReactDOM.unmountComponentAtNode(notificationsElement);
+          }}
+        >
+          New content is available and will be used when all tabs for this page
+          are closed.
+        </NotificationView>,
+        document.getElementById("notifications")
+      );
+    }
   }
 });
 

diff --git a/yarn.lock b/yarn.lock
@@ -1,4 +1,4 @@
-y# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1