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

Compare commits

merge into: zev:master
Branches Tags
zev:master zev:docs-sdk-update zev:live-prep
...
pull from: zev:docs-sdk-update
Branches Tags
zev:master zev:docs-sdk-update zev:live-prep

1 Commits
master ... docs-sdk-u

Author SHA1 Message Date
Daniel Vassallo
73bd8710e8 Update the tutorial to use the latest SDK changes 2019-11-02 01:03:27 -07:00
1 changed files with 23 additions and 33 deletions
Expand all files Collapse all files

56
src/pages/docs.html
View File

@@ -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>