feat: lazyload and put behind flag

distributeaid · Feb 1, 2020 · 5940f92 · 5940f92
1 parent 796c134
commit 5940f92
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 77 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
     "react": "^16.12.0",
     "react-apollo": "^3.1.3",
     "react-dom": "^16.12.0",
+    "react-feather": "^2.0.3",
     "styled-components": "^5.0.0",
     "uuid": "^3.4.0"
   },
@@ -80,6 +81,11 @@
               "path": "/home/runner/work/chat-ui/chat-ui/dist/main.js",
               "name": "distribute-aid-chat-ui.${nextRelease.gitTag}.js",
               "label": "Chat UI Bundle"
+            },
+            {
+              "path": "/home/runner/work/chat-ui/chat-ui/dist/chatbutton.js",
+              "name": "distribute-aid-chat-button.${nextRelease.gitTag}.js",
+              "label": "Chat Button"
             }
           ]
         }

diff --git a/src/chatbutton.ts b/src/chatbutton.ts
@@ -0,0 +1,35 @@
+const imageUrl =
+	'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLW1lc3NhZ2UtY2lyY2xlIj48cGF0aCBkPSJNMjEgMTEuNWE4LjM4IDguMzggMCAwIDEtLjkgMy44IDguNSA4LjUgMCAwIDEtNy42IDQuNyA4LjM4IDguMzggMCAwIDEtMy44LS45TDMgMjFsMS45LTUuN2E4LjM4IDguMzggMCAwIDEtLjktMy44IDguNSA4LjUgMCAwIDEgNC43LTcuNiA4LjM4IDguMzggMCAwIDEgMy44LS45aC41YTguNDggOC40OCAwIDAgMSA4IDh2LjV6Ij48L3BhdGg+PC9zdmc+' // base64 -w0 <feather icon chat bubble white>
+
+;(window as any).DAChatButton = (onClick: (remove: () => void) => void) => {
+	const button = document.createElement('button')
+	button.id = 'distribute-aid-chat-button'
+	const img = document.createElement('img')
+	img.src = imageUrl
+	button.appendChild(img)
+	button.title = 'Launch chat!'
+	button.onclick = () => {
+		button.disabled = true
+		onClick(() => {
+			button.remove()
+		})
+	}
+	document.documentElement.appendChild(button)
+	const style = document.createElement('style')
+	style.type = 'text/css'
+	style.textContent = `#distribute-aid-chat-button {
+        background-color: #3777ec;
+        position: absolute;
+        bottom: 1rem;
+        right: 1rem;
+        border-radius: 100%;
+        padding: 1rem 1rem 0.7rem 1rem;
+        box-shadow: 0px 0px 10px 0px #0000008f;
+        cursor: pointer;
+    }
+    #distribute-aid-chat-button:disabled {
+        background-color: #b7b7b7;
+    }
+    `
+	document.head.appendChild(style)
+}
diff --git a/src/types.d.ts b/src/types.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+	const content: string
+	export default content
+}
diff --git a/web/index.html b/web/index.html
@@ -1,84 +1,108 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Distribute Aid: Chat</title>
-    <meta name="chat:context" content="general" />
-    <meta name="chat:endpoint" content="{{GRAPHQL_API_ENDPOINT}}" />
-    <meta name="chat:apiKey" content="{{GRAPHQL_API_KEY}}" />
-    <link
-      rel="stylesheet"
-      href="https://rsms.me/inter/inter-ui.css"
-      integrity="sha256-cdb8LF5k6q+Mbl8Od9ARdnDUCjihJZocnLNXYUFtMmg="
-      crossorigin=""
-    />
-  </head>
 
-  <body>
-    <h1>Distribute Aid: Chat</h1>
+<head>
+  <meta charset="UTF-8" />
+  <title>Distribute Aid: Chat</title>
+  <meta name="chat:context" content="general" />
+  <meta name="chat:endpoint" content="{{GRAPHQL_API_ENDPOINT}}" />
+  <meta name="chat:apiKey" content="{{GRAPHQL_API_KEY}}" />
+  <link rel="stylesheet" href="https://rsms.me/inter/inter-ui.css"
+    integrity="sha256-cdb8LF5k6q+Mbl8Od9ARdnDUCjihJZocnLNXYUFtMmg=" crossorigin="" />
+</head>
 
-    <p>This is the demo page for the <em>Distribute Aid</em> in-app-chat.</p>
+<body>
+  <h1>Distribute Aid: Chat</h1>
 
-    <p>
-      It will be loaded from an external source, and will create it's DOM
-      element with an overlaying chat window.
-    </p>
+  <p>This is the demo page for the <em>Distribute Aid</em> in-app-chat.</p>
 
-    <p>
-      Every chat has a <em>context</em>, which needs to be provided. In this
-      example we use the <code>general</code> context, which is a public chat
-      room that is available for all authenticated users.
-    </p>
+  <p>
+    It will be loaded from an external source, and will create it's DOM
+    element with an overlaying chat window.
+  </p>
 
-    <p>
-      The API endpoint of the integration for this instance is
-      <code>{{GRAPHQL_API_ENDPOINT}}</code>.
-    </p>
+  <p>
+    Every chat has a <em>context</em>, which needs to be provided. In this
+    example we use the <code>general</code> context, which is a public chat
+    room that is available for all authenticated users.
+  </p>
 
-    <div id="tokenform"></div>
+  <p>
+    The API endpoint of the integration for this instance is
+    <code>{{GRAPHQL_API_ENDPOINT}}</code>.
+  </p>
 
-    <script
-      src="https://unpkg.com/react@16/umd/react.development.js"
-      defer
-    ></script>
-    <script
-      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
-      defer
-    ></script>
-    <script
-      src="https://media.twiliocdn.com/sdk/js/chat/v3.3/twilio-chat.min.js"
-      defer
-    ></script>
-    <script
-      src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js"
-      crossorigin="anonymous"
-      defer
-    ></script>
-    <script src="./main.js" defer></script>
-    <script src="./demo.js" defer></script>
-    <script type="text/javascript">
-      const launchChat = token =>
-        DAChat({
-          context: document
-            .querySelector("meta[name='chat:context']")
-            .getAttribute("content"),
-          apiKey: document
-            .querySelector("meta[name='chat:apiKey']")
-            .getAttribute("content"),
-          apiEndpoint: document
-            .querySelector("meta[name='chat:endpoint']")
-            .getAttribute("content"),
-          token
-        });
+  <p><strong>Preview mode:</strong> Note that the chat will only load if the <code>DAChat:enabled</code> is set in
+    localStorage. Run this command in the console to enable it:
+    <code>window.localStorage.setItem('DAChat:enabled', '1')</code></p>
 
-      window.onload = () => {
-        ReactDOM.render(
-          React.createElement(TokenForm, {
-            onToken: token => launchChat(token)
-          }),
-          document.querySelector("#tokenform")
-        );
-      };
-    </script>
-  </body>
-</html>
+  <div id="tokenform"></div>
+
+  <script src="https://cdn.rawgit.com/muicss/loadjs/4.2.0/dist/loadjs.min.js" defer></script>
+  <script type="text/javascript">
+    const launchChat = token =>
+      DAChat({
+        context: document
+          .querySelector("meta[name='chat:context']")
+          .getAttribute("content"),
+        apiKey: document
+          .querySelector("meta[name='chat:apiKey']")
+          .getAttribute("content"),
+        apiEndpoint: document
+          .querySelector("meta[name='chat:endpoint']")
+          .getAttribute("content"),
+        token
+      });
+
+    const loadJsAsync = deps => loadjs(deps, {
+      async: true,
+      returnPromise: true
+    })
+
+    const loadChat = () => {
+      loadJsAsync([
+        'https://unpkg.com/react@16/umd/react.development.js',
+        'https://unpkg.com/react-dom@16/umd/react-dom.development.js',
+        'https://media.twiliocdn.com/sdk/js/chat/v3.3/twilio-chat.min.js',
+        'https://twemoji.maxcdn.com/v/latest/twemoji.min.js',
+
+      ])
+        .then(() => loadJsAsync([
+          './main.js',
+          './demo.js',
+        ]))
+        .then(() => {
+          ReactDOM.render(
+            React.createElement(TokenForm, {
+              onToken: token => launchChat(token)
+            }),
+            document.querySelector("#tokenform")
+          );
+        })
+    };
+
+    window.onload = () => {
+      if (window.localStorage.getItem('DAChat:enabled') === '1') {
+        if (document.cookie.split(';').filter((item) => item.trim().startsWith('DAChatopen=')).length) {
+          loadChat()
+        } else {
+          console.log('not open')
+          loadJsAsync([
+            './chatbutton.js'
+          ])
+            .then(() => {
+              DAChatButton((removeButton) => {
+                document.cookie = 'DAChatopen=1'
+                loadChat()
+                  .then(() => {
+                    removeButton()
+                  })
+              })
+            })
+        }
+      }
+    }
+  </script>
+</body>
+
+</html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -5,6 +5,7 @@ const Handlebars = require('handlebars')
 const cfg = {
 	entry: {
 		main: './src/index.tsx',
+		chatbutton: './src/chatbutton.ts',
 		demo: './src/demo.tsx',
 	},
 	resolve: {
@@ -31,9 +32,6 @@ const cfg = {
 	},
 }
 
-const replaceEnv = html =>
-	Object.entries(process.env).reduce((html, [k, v]) => html.replace(``), html)
-
 module.exports = [
 	{
 		...cfg,