From 65cfdbf4a50e271dca6d624811a3fbc34de69a7d Mon Sep 17 00:00:00 2001
From: Mohammed <gsft22221@gmail.com>
Date: Thu, 4 Nov 2021 13:51:32 +0200
Subject: [PATCH] Upload Notifications API Demo

---
 README.md                              |  1 +
 src/modules/apis/data.ts               | 20 ++++++++
 src/pages/demos/notifications/index.js | 67 ++++++++++++++++++++++++++
 src/utils/data/demos.js                | 13 +++++
 src/web-apis/notifications/index.js    | 23 +++++++++
 5 files changed, 124 insertions(+)
 create mode 100644 src/pages/demos/notifications/index.js
 create mode 100644 src/web-apis/notifications/index.js

diff --git a/README.md b/README.md
index 462560f..99211b2 100644
--- a/README.md
+++ b/README.md
@@ -73,6 +73,7 @@ So far, it includes the following examples:
 1. 📡 Broadcast
 1. 📷 Image Capture
 1. 📶 Network Info
+1. 🔔 Notifications
 1. 🧐 Resize Observer
 1. 💳 Payment Request
 1. 📳 Vibration API
diff --git a/src/modules/apis/data.ts b/src/modules/apis/data.ts
index 943cb27..485696a 100644
--- a/src/modules/apis/data.ts
+++ b/src/modules/apis/data.ts
@@ -322,5 +322,25 @@ export const data: Array<Demo> = [
         'https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API',
       canIUseURL: 'font-loading',
     },
+  },
+  {
+    id: 'notifications',
+    emoji: '🔔',
+    title: 'Notifications API',
+    description:
+      'The Notifications API allows web pages to control the display of system notifications to the end user',
+    meta: {
+      author: {
+        name: 'Mohammed Taha',
+        social: {
+          email: 'gsft22221@gmail.com',
+          github: 'JustE3saR',
+          twitter: 'JustE3saR',
+        },
+      },
+      apiDocURL:
+        'https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API',
+      canIUseURL: 'https://caniuse.com/notifications',
+    },
   }, //replace item here
 ];
diff --git a/src/pages/demos/notifications/index.js b/src/pages/demos/notifications/index.js
new file mode 100644
index 0000000..4890db5
--- /dev/null
+++ b/src/pages/demos/notifications/index.js
@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react';
+
+// demo and form components
+import {
+  DemoInfo,
+  DemoSEO,
+  NotSupported,
+  InputFieldWrapper,
+  InputFieldButton,
+  InputField,
+} from 'components';
+
+// apis
+import { isSupported, run } from 'web-apis/notifications';
+
+// demo info by id
+import { getDemoById } from 'utils/data/data-access';
+
+// Component that Renders the Demo UI
+const ToRender = () => {
+  return (
+    <div className="tw-flex tw-flex-col tw-items-center tw-justify-center">
+      <InputFieldWrapper>
+        <InputField
+          id="text-input"
+          type="text"
+          name="text"
+          placeholder="Write Notification Text..."
+        />
+        <InputFieldButton onClick={run}>Push</InputFieldButton>
+      </InputFieldWrapper>
+    </div>
+  );
+};
+
+const Notifications = () => {
+  const [loaded, setLoaded] = useState(false);
+  const [demoInfo, setDemoInfo] = useState();
+
+  // Get the demo id
+  const id = '_notifications_';
+
+  useEffect(() => {
+    // find the demo details
+    const thisDemo = getDemoById(id);
+    setDemoInfo(thisDemo);
+    setLoaded(true);
+  }, [id]);
+
+  return (
+    <>
+      {loaded && (
+        <div className="tw-flex tw-flex-col tw-items-center tw-justify-center">
+          <DemoSEO title={demoInfo.title} description={demoInfo.desc} />
+          <DemoInfo info={demoInfo} />
+          {isSupported() ? (
+            <ToRender />
+          ) : (
+            <NotSupported canIUseURL={demoInfo.canIUseURL} />
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Notifications;
diff --git a/src/utils/data/demos.js b/src/utils/data/demos.js
index a3afd36..3bc9961 100644
--- a/src/utils/data/demos.js
+++ b/src/utils/data/demos.js
@@ -219,6 +219,19 @@ const data = [
       email: 'emitdutcher@gmail.com',
     },
   }, //replace item here
+  {
+    id: '_notifications_',
+    title: 'Notifications API',
+    emoji: '🔔',
+    desc: 'The Notifications API allows web pages to control the display of system notifications to the end user',
+    path: 'notifications',
+    canIUseURL: 'https://caniuse.com/notifications',
+    creator: {
+      name: 'Mohammed Taha',
+      twitter: 'JustE3saR',
+      email: 'gsft22221@gmail.com',
+    },
+  },
 ];
 
 export default data;
diff --git a/src/web-apis/notifications/index.js b/src/web-apis/notifications/index.js
new file mode 100644
index 0000000..efde1a5
--- /dev/null
+++ b/src/web-apis/notifications/index.js
@@ -0,0 +1,23 @@
+export const isSupported = () => {
+  /**
+   * Check if the `API` is supported
+   */
+
+  return 'Notification' in window;
+};
+
+export const run = () => {
+  // Request for the permission
+  Notification.requestPermission().then(function (result) {
+    if (result === 'granted') {
+      var input = document.getElementById('text-input');
+
+      // Push notification
+      new Notification('🎉 Web APIs Playground', {
+        icon: 'http://localhost:3000/icons/icon-192x192.png',
+        body: input.value || 'The best website ever!',
+        silent: true,
+      });
+    }
+  });
+};