[refactor] Try out some client-side UI librariesHEADmain

1 files changed, 65 insertions, 121 deletions

diff --git a/app/public/main.js b/app/public/main.js
index 2a30c45..a9119b4 100644
--- a/app/public/main.js
+++ b/app/public/main.js
@@ -1,4 +1,7 @@
-document.addEventListener("DOMContentLoaded", async () => { "use strict";
+import { getNote, getList, saveNote, newNote, getUserData, getUserSessions,
+  signIn, changePassword, changeUsername, signOut, signOutEverywhere } from "./api.js";
+
+document.addEventListener("DOMContentLoaded", async () => {
 
 const $ = (s,c) => (c||document).querySelector(s);
 function $$(x,y,z,a){a=(z||document).querySelectorAll(x);if(typeof y=="function")[].forEach.call(a,y);return a}
@@ -27,79 +30,37 @@ function debounce(fn, delay) {
 //    .then(() => console.log("Service worker registered"));
 //}
 
-function drawNote(note) {
-  const el = m(`<div class="card-shadow"><div class="card">
-    <!--h3>${note.id}</h3-->
-    <textarea>${note.content.trim()}</textarea>
-  </div></div>`);
-
-  const ta = $("textarea", el)
-
-  ta.addEventListener("input",
-    debounce(() => { saveNote(note.id, ta.value); }, 500));
-
-  function resizeTextarea() { // TODO simplify
-    el.style.height = (el.scrollHeight) + "px";
-    ta.style.height = ""; ta.style.height = (ta.scrollHeight) + "px";
-    el.style.height = "";
-  }
-  ta.addEventListener("input", resizeTextarea);
-  ta.addEventListener("focus", resizeTextarea);
-  window.addEventListener("resize", resizeTextarea);
-  setTimeout(resizeTextarea);
+//console.log("outside", $("note-card").textContent);
+//$("note-card").addEventListener("edit", () => console.log("edit event fired"));
 
+function drawNote(note) {
+  //const el = m(`<div class="card-shadow"><div class="card">
+  //  <!--h3>${note.id}</h3-->
+  //  <textarea>${note.content.trim()}</textarea>
+  //</div></div>`);
+
+  //const ta = $("textarea", el)
+
+  //ta.addEventListener("input",
+  //  debounce(() => { saveNote(note.id, ta.value); }, 500));
+
+  //function resizeTextarea() { // TODO simplify
+  //  el.style.height = (el.scrollHeight) + "px";
+  //  ta.style.height = ""; ta.style.height = (ta.scrollHeight) + "px";
+  //  el.style.height = "";
+  //}
+  //ta.addEventListener("input", resizeTextarea);
+  //ta.addEventListener("focus", resizeTextarea);
+  //window.addEventListener("resize", resizeTextarea);
+  //setTimeout(resizeTextarea);
+
+  const el = m(`<note-card data-id="${note.id}">${note.content.trim()}</note-card>`);
   $("#notes").appendChild(el);
 }
 
-async function getNote(id) {
-  const res = await fetch(`${id}`);
-  const note = await res.json();
-  console.log(note);
-  drawNote(note);
-}
-
-async function getList() {
-  const res = await fetch("/list");
-  const list = await res.json();
-  console.log(list);
-
-  return Promise.all(list.map(id => getNote(id)));
-}
-
-async function saveNote(id, content) {
-  const res = await fetch("/"+id, {
-    method: "POST",
-    body: JSON.stringify({id, content}),
-  });
-
-  const note = await res.json();
-  console.log(note);
-}
-
-async function newNote() {
-  const res = await fetch("/new", {
-    method: "POST",
-  });
-
-  const note = await res.json();
-  console.log(note);
-
-  drawNote(note);
-}
-
-$("#add-btn").addEventListener("click", newNote);
-
-async function getUserData() {
-  const res = await fetch(`/user`);
-  const user = await res.json();
-  console.log(user);
-}
-
-async function getUserSessions() {
-  const res = await fetch(`/session-list`);
-  const sessions = await res.json();
-  console.log(sessions);
-}
+$("#add-btn").addEventListener("click", async () => {
+  drawNote(await newNote());
+});
 
 function showSignIn() {
   const hash = location.hash.slice(2).replace(/^sign-in(\/to\/)?/,"");
@@ -131,32 +92,27 @@ $("#sign-in-basic-go").addEventListener("click", async e => {
   inputs.forEach(e => e.disabled = true);
   $("#sign-in-form").classList.add("loading");
 
-  const res = await fetch("/login", {
-    method: "POST",
-    headers: {"Content-Type": "application/json"},
-    body: JSON.stringify({
-      username: $("#sign-in-username").value,
-      password: $("#sign-in-password").value,
-      keepSession: $("#sign-in-keep-session").checked,
-    })
+  const res = await signIn({
+    username: $("#sign-in-username").value,
+    password: $("#sign-in-password").value,
+    keepSession: $("#sign-in-keep-session").checked,
   });
 
   inputs.forEach(e => e.disabled = false);
   $("#sign-in-form").classList.remove("loading");
-  if (!res.ok) {
-    $("#sign-in-error").textContent = res.status+" "+res.statusText;
+  if (res.error) {
+    $("#sign-in-error").textContent = res.code+" "+res.error;
     return;
   }
 
-  const json = await res.json();
-  console.log(json);
+  console.log(res);
 
-  if (!json.success) {
-    $("#sign-in-error").textContent = json.msg;
+  if (!res.success) {
+    $("#sign-in-error").textContent = res.msg;
     return;
   }
 
-  if (json.mustChangePassword) {
+  if (res.mustChangePassword) {
     alert("Must change password (TODO)");
     // TODO
     return;
@@ -167,66 +123,54 @@ $("#sign-in-basic-go").addEventListener("click", async e => {
   // TODO load location
 
   getUserData();
-  getList();
+  const noteList = await getList();
+  for (const note of noteList) drawNote(note);
 
   $("#sign-in-dialog").close();
 });
 
 $("#change-password").addEventListener("click", async () => {
-  const res = await fetch("/change-password", {
-    method: "POST",
-    headers: {"Content-Type": "application/json"},
-    body: JSON.stringify({
-      username: $("#username").value, // TODO
-      password: $("#password").value, // TODO
-      newPassword: $("#new-password").value,
-      keepSession: $("#keep-session").checked,
-    })
+  const res = await changePassword({
+    username: $("#username").value, // TODO
+    password: $("#password").value, // TODO
+    newPassword: $("#new-password").value,
+    keepSession: $("#keep-session").checked,
   });
 
-  const json = await res.json();
-  console.log(json);
+  console.log(res);
 
   getUserData();
 });
 
 $("#change-username").addEventListener("click", async () => {
-  const res = await fetch("/change-username", {
-    method: "POST",
-    headers: {"Content-Type": "application/json"},
-    body: JSON.stringify({
-      newUsername: $("#new-username").value,
-      password: $("#password").value, // TODO
-    })
+  const res = await changeUsername({
+    newUsername: $("#new-username").value,
+    password: $("#password").value, // TODO
   });
 
-  const json = await res.json();
-  console.log(json);
+  console.log(res);
 
   getUserData();
 });
 
-$("#log-out").addEventListener("click", async () => {
-  const res = await fetch("/logout", {
-    method: "POST",
-  });
-
-  //const json = await res.json();
-  //console.log(json);
-  console.log("Logged out");
+$("#sign-out").addEventListener("click", async () => {
+  await signOut();
+  console.log("Signed out");
   $("#sign-in-dialog").showModal();
 });
 
-$("#log-out-everywhere").addEventListener("click", async () => {
-  const res = await fetch("/deauth-all", {
-    method: "POST",
-  });
-
-  console.log("Logged out everywhere");
+$("#sign-out-everywhere").addEventListener("click", async () => {
+  signOutEverywhere();
+  console.log("Signed out everywhere");
   showSignIn();
 });
 
-try { await getUserData(); await getList(); await getUserSessions(); } catch(e) { showSignIn(); }
+try {
+  await getUserData();
+  const noteList = await getList();
+  for (const note of noteList) drawNote(note);
+  await getUserSessions();
+} catch(e) { showSignIn(); }
 
 (() => {
   let prevScroll = 0;