zev/userbase-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update the tutorial to use the latest SDK changes

Browse Source
This commit is contained in:
Daniel Vassallo
2019-11-02 01:03:27 -07:00
parent 16531a03db
commit 73bd8710e8
1 changed files with 23 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/pages/docs.html
View File

@@ -24,9 +24,7 @@
<pre> <pre>
<code class="language-markup"><!-- <code class="language-markup"><!--
<script type="text/javascript" <script type="text/javascript" src="https://sdk.userbase.dev/userbase-0.0.5.js"></script>
src="https://userbase-public.s3-us-west-2.amazonaws.com/userbase-js/userbase.js">
</script>
--></code> --></code>
</pre> </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 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: our page:
<pre data-line="4-6"> <pre data-line="4">
<code class="language-markup"><!-- <code class="language-markup"><!--
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Ugliest To-Do App</title> <title>Ugliest To-Do App</title>
<script type="text/javascript" <script type="text/javascript" src="https://sdk.userbase.dev/userbase-0.0.5.js"></script>
src="https://userbase-public.s3-us-west-2.amazonaws.com/userbase-js/userbase.js">
</script>
</head> </head>
--></code> --></code>
</pre> </pre>
@@ -459,7 +455,7 @@
<pre data-line="6-7"> <pre data-line="6-7">
<code class="language-markup"><!-- <code class="language-markup"><!--
<div id="todo-view"> <div id="todo-view">
<div id="username"></div> <span id="username"></span>
<h1>To-Do List</h1> <h1>To-Do List</h1>
<div id="todos"></div> <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> <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"> <code class="language-javascript">
function showTodos(username) { function showTodos(username) {
document.getElementById('auth-view').style.display = 'none' document.getElementById('auth-view').style.display = 'none'
document.getElementById('todo-view').style.display = 'block' document.getElementById('todo-view').style.display = 'block'
// reset the todos view // reset the todos view
document.getElementById('username').innerHTML = username document.getElementById('username').innerHTML = username
document.getElementById('todos').innerText = ''
document.getElementById('db-loading').style.display = 'block' document.getElementById('db-loading').style.display = 'block'
document.getElementById('db-error').innerText = '' document.getElementById('db-error').innerText = ''
userbase.openDatabase('todos', handleDatabaseChange) userbase.openDatabase('todos', handleDatabaseChange)
.then(() => { .catch((e) => document.getElementById('db-error').innerText = e)
document.getElementById('db-loading').style.display = 'none'
})
.catch((e) => {
document.getElementById('db-loading').style.display = 'none'
document.getElementById('db-error').innerText = e
})
} }
function handleDatabaseChange(items) { function handleDatabaseChange(items) {
document.getElementById('db-loading').style.display = 'none'
const todosList = document.getElementById('todos') const todosList = document.getElementById('todos')
if (items.length === 0) { if (items.length === 0) {
todosList.innerText = "Empty" todosList.innerText = 'Empty'
} else { } else {
// render to-dos, not yet implemented // render to-dos, not yet implemented
} }
@@ -529,13 +522,15 @@
Let's implement that case in <code class="language-javascript">handleDatabaseChange</code>: Let's implement that case in <code class="language-javascript">handleDatabaseChange</code>:
</p> </p>
<pre data-line="7-22"> <pre data-line="9-24">
<code class="language-javascript"><!-- <code class="language-javascript"><!--
function handleDatabaseChange(items) { function handleDatabaseChange(items) {
document.getElementById('db-loading').style.display = 'none'
const todosList = document.getElementById('todos') const todosList = document.getElementById('todos')
if (items.length === 0) { if (items.length === 0) {
todosList.innerText = "Empty" todosList.innerText = 'Empty'
} else { } else {
// clear the list // clear the list
todosList.innerHTML = '' todosList.innerHTML = ''
@@ -565,7 +560,7 @@
<script type="text/plain" data-line="10-14" class="language-markup"> <script type="text/plain" data-line="10-14" class="language-markup">
<!-- To-dos View --> <!-- To-dos View -->
<div id="todo-view"> <div id="todo-view">
<div id="username"></div> <span id="username"></span>
<h1>To-Do List</h1> <h1>To-Do List</h1>
<div id="todos"></div> <div id="todos"></div>
@@ -582,7 +577,7 @@
<p>Then, add code to handle the form submission:</p> <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"> <code class="language-markup">
&lt;!-- application code --&gt; &lt;!-- application code --&gt;
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
@@ -600,8 +595,8 @@
document.getElementById('login-form').addEventListener('submit', handleLogin) document.getElementById('login-form').addEventListener('submit', handleLogin)
document.getElementById('signup-form').addEventListener('submit', handleSignUp) document.getElementById('signup-form').addEventListener('submit', handleSignUp)
document.getElementById('add-todo-form').addEventListener('submit', addTodoHandler) document.getElementById('add-todo-form').addEventListener('submit', addTodoHandler)
document.getElementById('todo-view').style.display = 'none' document.getElementById('todo-view').style.display = 'none'
&lt;/script&gt; &lt;/script&gt;
@@ -714,7 +709,7 @@
<script type="text/plain" data-line="4-5" class="language-markup"> <script type="text/plain" data-line="4-5" class="language-markup">
<!-- To-dos View --> <!-- To-dos View -->
<div id="todo-view"> <div id="todo-view">
<div id="username"></div> <span id="username"></span>
<input type="button" value="Logout" id="logout-button"> <input type="button" value="Logout" id="logout-button">
<div id="logout-error"></div> <div id="logout-error"></div>
@@ -766,6 +761,7 @@
document.getElementById('signup-form').addEventListener('submit', handleSignUp) document.getElementById('signup-form').addEventListener('submit', handleSignUp)
document.getElementById('add-todo-form').addEventListener('submit', addTodoHandler) document.getElementById('add-todo-form').addEventListener('submit', addTodoHandler)
document.getElementById('logout-button').addEventListener('click', handleLogout) document.getElementById('logout-button').addEventListener('click', handleLogout)
document.getElementById('todo-view').style.display = 'none' document.getElementById('todo-view').style.display = 'none'
&lt;/script&gt; &lt;/script&gt;
</code> </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> <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"> <code class="language-markup">
&#x3C;!-- application code --&#x3E; &#x3C;!-- application code --&#x3E;
&#x3C;script type=&#x22;text/javascript&#x22;&#x3E; &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
@@ -813,15 +809,9 @@
document.getElementById('auth-view').style.display = 'none' document.getElementById('auth-view').style.display = 'none'
userbase.signInWithSession() userbase.signInWithSession()
.then((session) => { .then((session) => session.user ? showTodos(session.user.username) : showAuth())
if (session.user) {
showTodos(session.user.username)
} else {
showAuth()
document.getElementById('loading-view').style.display = 'none')
}
})
.catch(() => showAuth()) .catch(() => showAuth())
.finally(() => document.getElementById('loading-view').style.display = 'none')
&lt;/script&gt; &lt;/script&gt;
</code> </code>