From 73bd8710e8a40c10010489fe37487cf05dbcedbe Mon Sep 17 00:00:00 2001
From: Daniel Vassallo <dvassallo83@gmail.com>
Date: Sat, 2 Nov 2019 01:03:27 -0700
Subject: [PATCH] Update the tutorial to use the latest SDK changes

---
 src/pages/docs.html | 56 +++++++++++++++++++--------------------------
 1 file changed, 23 insertions(+), 33 deletions(-)
diff --git a/src/pages/docs.html b/src/pages/docs.html
index 3916579..3c7ce9c 100644
--- a/src/pages/docs.html
+++ b/src/pages/docs.html
@@ -24,9 +24,7 @@
 
   <pre>
     <code class="language-markup"><!--
-    <script type="text/javascript"
-      src="https://userbase-public.s3-us-west-2.amazonaws.com/userbase-js/userbase.js">
-    </script>
+    <script type="text/javascript" src="https://sdk.userbase.dev/userbase-0.0.5.js"></script>
     --></code>
   </pre>
 
@@ -147,14 +145,12 @@
   We're going to load the Userbase SDK from a CDN with a <code class="language-markup">&lt;script&gt;</code> tag in the head of
   our page:
 
-  <pre data-line="4-6">
+  <pre data-line="4">
     <code class="language-markup"><!--
     <head>
       <meta charset="UTF-8">
       <title>Ugliest To-Do App</title>
-      <script type="text/javascript" 
-        src="https://userbase-public.s3-us-west-2.amazonaws.com/userbase-js/userbase.js">
-      </script>
+      <script type="text/javascript" src="https://sdk.userbase.dev/userbase-0.0.5.js"></script>
     </head>
     --></code>
   </pre>
@@ -459,7 +455,7 @@
   <pre data-line="6-7">
     <code class="language-markup"><!--
     <div id="todo-view">
-      <div id="username"></div>
+      <span id="username"></span>
 
       <h1>To-Do List</h1>
       <div id="todos"></div>
@@ -471,32 +467,29 @@
 
   <p>Then, we'll change <code class="language-javascript">showTodos</code> to open a new database with the Userbase service:</p>
 
-  <pre data-line="5,7-17,20-28">
+  <pre data-line="5,7-12,15-25">
     <code class="language-javascript">
     function showTodos(username) {
       document.getElementById('auth-view').style.display = 'none'
       document.getElementById('todo-view').style.display = 'block'
-        
+
       // reset the todos view
       document.getElementById('username').innerHTML = username
+      document.getElementById('todos').innerText = ''
       document.getElementById('db-loading').style.display = 'block'
       document.getElementById('db-error').innerText = ''
 
       userbase.openDatabase('todos', handleDatabaseChange)
-        .then(() => {
-          document.getElementById('db-loading').style.display = 'none'
-        })
-        .catch((e) => {
-          document.getElementById('db-loading').style.display = 'none'
-          document.getElementById('db-error').innerText = e
-        })
+        .catch((e) => document.getElementById('db-error').innerText = e)
     }
 
     function handleDatabaseChange(items) {
+      document.getElementById('db-loading').style.display = 'none'
+
       const todosList = document.getElementById('todos')
 
       if (items.length === 0) {
-        todosList.innerText = "Empty"
+        todosList.innerText = 'Empty'
       } else {
         // render to-dos, not yet implemented
       }
@@ -529,13 +522,15 @@
     Let's implement that case in <code class="language-javascript">handleDatabaseChange</code>:
   </p>
 
-  <pre data-line="7-22">
+  <pre data-line="9-24">
     <code class="language-javascript"><!--
     function handleDatabaseChange(items) {
+      document.getElementById('db-loading').style.display = 'none'
+
       const todosList = document.getElementById('todos')
 
       if (items.length === 0) {
-        todosList.innerText = "Empty"
+        todosList.innerText = 'Empty'
       } else {
         // clear the list
         todosList.innerHTML = ''
@@ -565,7 +560,7 @@
   <script type="text/plain" data-line="10-14" class="language-markup">
   <!-- To-dos View -->
   <div id="todo-view">
-    <div id="username"></div>
+    <span id="username"></span>
 
     <h1>To-Do List</h1>
     <div id="todos"></div>
@@ -582,7 +577,7 @@
 
   <p>Then, add code to handle the form submission:</p>
 
-  <pre data-line="5-13,18">
+  <pre data-line="5-13,17">
     <code class="language-markup">
     &lt;!-- application code --&gt;
     &lt;script type=&quot;text/javascript&quot;&gt;
@@ -600,8 +595,8 @@
 
       document.getElementById('login-form').addEventListener('submit', handleLogin)
       document.getElementById('signup-form').addEventListener('submit', handleSignUp)
-
       document.getElementById('add-todo-form').addEventListener('submit', addTodoHandler)
+
       document.getElementById('todo-view').style.display = 'none'
       
     &lt;/script&gt;
@@ -714,7 +709,7 @@
   <script type="text/plain" data-line="4-5" class="language-markup">
   <!-- To-dos View -->
   <div id="todo-view">
-    <div id="username"></div>
+    <span id="username"></span>
     <input type="button" value="Logout" id="logout-button">
     <div id="logout-error"></div>
 
@@ -766,6 +761,7 @@
       document.getElementById('signup-form').addEventListener('submit', handleSignUp)
       document.getElementById('add-todo-form').addEventListener('submit', addTodoHandler)
       document.getElementById('logout-button').addEventListener('click', handleLogout)
+
       document.getElementById('todo-view').style.display = 'none'
     &lt;/script&gt;
     </code>
@@ -797,7 +793,7 @@
 
   <p>In order to automatically resume a session if one is available, we add the following to our application code:</p>
 
-  <pre data-line="9,12, 14-23">
+  <pre data-line="12-17">
     <code class="language-markup">
     &#x3C;!-- application code --&#x3E;
     &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
@@ -813,15 +809,9 @@
       document.getElementById('auth-view').style.display = 'none'
 
       userbase.signInWithSession()
-        .then((session) => {
-          if (session.user) {
-            showTodos(session.user.username)
-          } else {
-            showAuth()
-            document.getElementById('loading-view').style.display = 'none')
-          }
-        })
+        .then((session) => session.user ? showTodos(session.user.username) : showAuth())
         .catch(() => showAuth())
+        .finally(() => document.getElementById('loading-view').style.display = 'none')
 
     &lt;/script&gt;
     </code>
