From 240074fc97f7d44691cdc47400c6389362b8f2a1 Mon Sep 17 00:00:00 2001
From: Zev B Averbach <zev@Zevs-16-MBP.fritz.box>
Date: Fri, 18 Dec 2020 09:29:58 +0100
Subject: [PATCH] basic front end

---
 .gitignore       |  2 ++
 front/.gitignore |  1 +
 front/index.html | 43 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 front/.gitignore
 create mode 100644 front/index.html
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..2a1ad00
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+tags
+.DS_Store
diff --git a/front/.gitignore b/front/.gitignore
new file mode 100644
index 0000000..c2658d7
--- /dev/null
+++ b/front/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/front/index.html b/front/index.html
new file mode 100644
index 0000000..45f19ef
--- /dev/null
+++ b/front/index.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Twilio Sync Kanban</title>
+        <meta charset="utf-8">
+        <script src="https://media.twiliocdn.com/sdk/js/sync/v0.8/twilio-sync.min.js"></script>
+    </head>
+    <body>
+        <div id="list"></div>
+        <script>
+            let syncClient
+            let listItems = []
+
+            const setupTwilioClient = async () => {
+                try {
+                    const response = await fetch('http://localhost:5001/token')
+                    const responseJson = await response.json()
+                    const token = responseJson.token
+                    syncClient = new Twilio.Sync.Client(token, { logLevel: 'info' })
+                } catch (e) {
+                    console.log(e)
+                }
+                syncClient.on('connectionStateChanged', state => {
+                    if (state != 'connected') {
+                        console.log(`Sync is not live (websocket connection ${state})`)
+                    } else {
+                        console.log('Sync is live!')
+                    }
+                })
+                const getItems = async listName => {
+                    const list = await syncClient.list(listName)
+                    const items = await list.getItems()
+                    console.log(items)
+                    listItems = items.items.map(item => item.data)
+                }
+                getItems()
+                console.log(listItems)
+            }
+
+            window.onload = setupTwilioClient()
+        </script>
+    </body>
+</html>
