Add JS Notifications Test Page

Author: k.golikov

.env

@@ -1 +1,4 @@
 BROWSER=none
+HTTPS=true
+SSL_CRT_FILE=ssl/cert.pem
+SSL_KEY_FILE=ssl/key.pem

src/constants/router/menuItems.ts

@@ -58,6 +58,9 @@ const menuItems: MenuItem[] = [
             {
                 route: routes.userInfo
             },
+            {
+                route: routes.notificationsTest
+            },
             {
                 route: routes.templateTextGenerator,
                 isGray: true

src/constants/router/routes.tsx

@@ -20,8 +20,9 @@ import QrGeneratorPage from '../../pages/qrGeneratorPage/QrGeneratorPage';
 import SettingsPage from '../../pages/settingsPage/SettingsPage';
 import AboutPage from '../../pages/aboutPage/AboutPage';
 import CodeFormatterPage from '../../pages/codeFormatterPage/CodeFormatterPage';
-import DiffEditorPage from '../../pages/DiffEditorPage';
+import DiffEditorPage from '../../pages/diffEditorPage/DiffEditorPage';
 import JsonToTypeScriptPage from '../../pages/jsonToTypeScriptPage/JsonToTypeScriptPage';
+import NotificationsTestPage from '../../pages/notificationsTestPage/NotificationsTestPage';
 
 export interface AppRoute extends Omit<RouteProps, 'element'> {
     path: string;
@@ -47,6 +48,7 @@ type AppRoutesMap = Readonly<{
     diffEditor: AppRoute;
     codeFormatter: AppRoute;
     jsonToTypescript: AppRoute;
+    notificationsTest: AppRoute;
     settings: AppRoute;
     about: AppRoute;
 }>;
@@ -137,6 +139,11 @@ export const routes: AppRoutesMap = {
         component: JsonToTypeScriptPage,
         title: 'JSON to TypeScript'
     },
+    notificationsTest: {
+        path: '/tools/notifications-test',
+        component: NotificationsTestPage,
+        title: 'Notifications Test'
+    },
     settings: {
         path: '/settings',
         component: SettingsPage,

src/pages/DiffEditorPage.tsx renamed to src/pages/diffEditorPage/DiffEditorPage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import PageContainer from '../components/pageContainer/PageContainer';
+import PageContainer from '../../components/pageContainer/PageContainer';
 import { editor } from 'monaco-editor';
-import AppDiffEditor from '../components/appDiffEditor/AppDiffEditor';
+import AppDiffEditor from '../../components/appDiffEditor/AppDiffEditor';
 
 const options: editor.IDiffEditorConstructionOptions = {
     originalEditable: true

src/pages/notificationsTestPage/NotificationsTestPage.module.scss

@@ -0,0 +1,7 @@
+.container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+}

src/pages/notificationsTestPage/NotificationsTestPage.tsx

@@ -0,0 +1,92 @@
+import React, { FunctionComponent, useCallback, useState } from 'react';
+import PageContainer from '../../components/pageContainer/PageContainer';
+import { Button, Col, notification, Tooltip } from 'antd';
+import Text from 'antd/lib/typography/Text';
+import styles from './NotificationsTestPage.module.scss';
+import { ReloadOutlined } from '@ant-design/icons';
+import AppEditor from '../../components/appEditor/AppEditor';
+import { editor } from 'monaco-editor';
+import scopedEval from '../../utils/scopedEval';
+import { BaseType } from 'antd/lib/typography/Base';
+
+const editorOptions: editor.IStandaloneEditorConstructionOptions = {
+    minimap: { enabled: false },
+    fontFamily: 'JetBrains Mono'
+};
+
+const permissionColors: Readonly<Record<NotificationPermission, BaseType | undefined>> = {
+    default: undefined,
+    denied: 'danger',
+    granted: 'success'
+};
+
+const NotificationsTestPage: FunctionComponent = () => {
+    const [permission, setPermission] = useState<NotificationPermission>(Notification.permission);
+    const [notificationCreationJs, setNotificationCreationJs] = useState<string>("new Notification('Hello world')");
+
+    const permissionColor = permissionColors[permission];
+
+    const updateNotificationPermission = useCallback(() => {
+        setPermission(Notification.permission);
+    }, []);
+
+    const handleRequestPermission = useCallback(async () => {
+        const givenPermission = await Notification.requestPermission();
+        notification.info({
+            message: `Given permission: ${givenPermission}`
+        });
+        setPermission(givenPermission);
+    }, []);
+
+    const createNotification = useCallback(async () => {
+        const createdNotification = scopedEval(notificationCreationJs);
+        if (!(createdNotification instanceof Notification)) {
+            notification.error({
+                message: `Created object is not an instance of Notification, got ${
+                    createdNotification?.constructor?.name ?? typeof notification
+                }`
+            });
+            return;
+        }
+
+        console.log(createdNotification);
+    }, [notificationCreationJs]);
+
+    return (
+        <PageContainer title="JS Notifications Test">
+            <Col xs={23} md={20} lg={18} className={styles.container}>
+                <Text>
+                    <Tooltip title="Notification.permission" placement="bottom">
+                        <Text strong>Permission:</Text>
+                        <Text className="ms-1" type={permissionColor}>
+                            {permission}
+                        </Text>
+                    </Tooltip>
+                    <Button
+                        icon={<ReloadOutlined />}
+                        size="small"
+                        type="text"
+                        className="ms-1"
+                        onClick={updateNotificationPermission}
+                    />
+                </Text>
+                <Tooltip title="Notification.requestPermission" placement="bottom">
+                    <Button onClick={handleRequestPermission}>Request permission</Button>
+                </Tooltip>
+                <AppEditor
+                    language="javascript"
+                    width="100%"
+                    height={160}
+                    value={notificationCreationJs}
+                    onChange={setNotificationCreationJs}
+                    options={editorOptions}
+                />
+                <Button type="primary" onClick={createNotification}>
+                    Send notification
+                </Button>
+            </Col>
+        </PageContainer>
+    );
+};
+
+export default NotificationsTestPage;

src/styles/main.scss

@@ -49,6 +49,8 @@ $mediaXXL: 1600px;
     }
 }
 
+//---/--/---/--/---/--/---/--/---/--/---/--/---/--/---/--/---//
+
 $borderColorLight: #d9d9d9;
 $borderColorDark: #434343;
 

src/utils/scopedEval.ts

@@ -1,4 +1,4 @@
-const scopedEval = (expression: string, context: object) => {
+const scopedEval = (expression: string, context: object = {}) => {
     const evaluator = Function.apply(null, [
         ...Object.keys(context),
         'expression',

ssl/cert.pem

@@ -0,0 +1,21 @@
+-----BEGIN CERTIFICATE-----
+MIIDazCCAlOgAwIBAgIURIoftaQwmVNAX5TPdyVavQc5pI8wDQYJKoZIhvcNAQEL
+BQAwRTELMAkGA1UEBhMCUlUxEzARBgNVBAgMClNvbWUtU3RhdGUxITAfBgNVBAoM
+GEludGVybmV0IFdpZGdpdHMgUHR5IEx0ZDAeFw0yMjA1MDUxMzMwMzRaFw0yMzA1
+MDUxMzMwMzRaMEUxCzAJBgNVBAYTAlJVMRMwEQYDVQQIDApTb21lLVN0YXRlMSEw
+HwYDVQQKDBhJbnRlcm5ldCBXaWRnaXRzIFB0eSBMdGQwggEiMA0GCSqGSIb3DQEB
+AQUAA4IBDwAwggEKAoIBAQC9rb5QXrL0qswOGwXKSnLvn2zTiuO7JosIqLgI6EQn
+jS3odukfh6c7KG8T6kjydTLbh2GccxcnlQ31y3b70/507jF/9xxP+0/EbQTb7+m0
+YqndYQiTM1qfkL6HTdZY4htbC6vw7mZRMKPIBTTYg7sIbue2rMETxChJR0Z8oxuY
+gaDGCH7M2cU2RZFk6qdW+LX6WHewpFoukyAR9OLdS8gpl5WB5M4q6p3a5PGunysG
+tkLax1crh8DSMVnmHO/YZkoHUcFJ3ulMUAyqd6sbB0iXTE6qOUYMCpxIrFYMWk/l
+iT8swZeYG8QCFDa+VBlK2+niGCG3ieL8wVb7unGTfeIXAgMBAAGjUzBRMB0GA1Ud
+DgQWBBQXTPGdGSfH9lb9vCfhaSKIPH3BnTAfBgNVHSMEGDAWgBQXTPGdGSfH9lb9
+vCfhaSKIPH3BnTAPBgNVHRMBAf8EBTADAQH/MA0GCSqGSIb3DQEBCwUAA4IBAQBE
+IX3PUkIRArKmJXmRBy2gTp4IBDaS59xFAgs6b+xEsUGAhEtPpOhOXBOYk/9rodIm
+twKCjVoF0FAFuDLS0mGcmWyvTMu+q0sJzuexygK9R6hW+0onbTydXk0EGOXl3tvi
+icIwpxevXfG5DwneoiiBlHxq6FHu4YWlIk8aciNa04F5dJQDnYCI9yg5VkHPv3hN
+mE7c1i0QXJCU7yVIKpWIW57J8rG+c3JrcTi0wHyKmaS0nAPvynfAaW1/SiAcIFvd
+Kpehj16usW9N+LzwHdE5rzxjH2odQfn3TOzUUaLsvPt1WyJgUBgC6/RTqZRKo1bI
+vI4jpQWHvHPIfGQ+UPV0
+-----END CERTIFICATE-----

ssl/key.pem

@@ -0,0 +1,27 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIIEpQIBAAKCAQEAva2+UF6y9KrMDhsFykpy759s04rjuyaLCKi4COhEJ40t6Hbp
+H4enOyhvE+pI8nUy24dhnHMXJ5UN9ct2+9P+dO4xf/ccT/tPxG0E2+/ptGKp3WEI
+kzNan5C+h03WWOIbWwur8O5mUTCjyAU02IO7CG7ntqzBE8QoSUdGfKMbmIGgxgh+
+zNnFNkWRZOqnVvi1+lh3sKRaLpMgEfTi3UvIKZeVgeTOKuqd2uTxrp8rBrZC2sdX
+K4fA0jFZ5hzv2GZKB1HBSd7pTFAMqnerGwdIl0xOqjlGDAqcSKxWDFpP5Yk/LMGX
+mBvEAhQ2vlQZStvp4hght4ni/MFW+7pxk33iFwIDAQABAoIBACGa1Zvxmy0D0ZEy
+Mm1rkT9o9GPqOHyg0IMhOTHCzMhhF+AWqSi/5N3zRPK3UGM8Zl1EeAO61EBcBRQm
+DxeAsJVQ2g483pRBBxna4sCAmdwumr+xAE7sC0M35rmcDbzDmmsf/z95TUFXJ705
+RuqRNCLDW2Qe6ToyR5zr9s4AK9Rx3MLOnhqqXvdK89LQOxNR5yMSeSdvBNr8cDh8
+h6L/LtiWG8wbJKRUXTBEoxsZvVkmBzp7l9lNFV2GoextMBwSuB0jhNtx+MNM0njh
+LmGbKynkk5QjvFwsx3FtQRg0jhSlwWu13CVcjt3yv8qTGbNJaeJwTO0O/S25i3Ax
+RneyQEECgYEA5JKztQdaVnf15YO5LDNAfQ3JfJMK42AnbKJt2f9+ocH99RhQFMrr
+qV4DML6xHv6IHhoYt6rR3u39vDSR6SfS/8ApQw00AxSlirE3YsEVf3YSCC6xvkUn
+fZ9Q9X9Y2Vd8tLGx+kImTmXMdD9zowNYa9cs9aGuJNMDJkVGhGcp2DcCgYEA1HBJ
+JhSYgmVIb+Rd9FNYCeVmyEZczbKW7r8gYEwiQkzx664E+fF9rQQg5BwS0DIsal6B
+jK0SmhFElUUWEkgBU/AqJZUgzsY86W4A0pNHg3qHKyYyTbnxIPMz2wSDj/jJiQ8y
+GdYWLHdFJEstLua4XB0rnFL6OuUt+GhjETNHlSECgYEAgtkMcSx1ZZyksq/WeFwa
+pbwXxO20RPfNed3+PtaJGnagOAekCFMl1z4PW38+i/yv1XOhBLuQCyt4np4FjVCT
+9H5/4HeVd9IA9kV+7FSWRvJDXlXEwKR79+kVAoTVSw5PQG2c8iOeJDEYes+8Feyb
+WJjEjxTwSPpXCjiMJs2b4b8CgYEApsaIBqdAm43b8ku8HuWXRh2cNTpX/PxpVYEi
+b7cVZit1+Ooi6f3WBhApqisH8f6Rs+gBmGj/I4jO6MjV7QAuWrE+xUZv/STQCQnd
+B3OsPuHgX9WaxD5nuNB1M0o15r8PqNQPJw1VVw9Dbpy+GgXzUg1sgUr7O2VUU6HP
+tF8noUECgYEArHJpplCUoTmOhh2zxz192LGfRA8N+qRIgGrBNE/LzZsVq99uPdS6
+/8GncessIBCKopHtYdOsEUcIMeHxH/tuG/+H/z/Hm9la5gaEGxo90hIWgRLMeXoT
+/lly+K1f95Os0uqKPzCBeuNMLvmzU6PND+laZvIO7vz6bMAG7H+2TDw=
+-----END RSA PRIVATE KEY-----