Initial hook up on boolean buttons

hifiwi-fi · Jun 10, 2022 · 1abcfaa · 1abcfaa
1 parent 9068747
commit 1abcfaa
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 14 deletions.
diff --git a/web/components/bookmark/bookmark-list.js b/web/components/bookmark/bookmark-list.js
@@ -46,7 +46,58 @@ export const bookmarkList = Component(({ bookmark, reload }) => {
     console.log({ json: await response.json(), foo: 'bar' })
     setDeleted(true)
     reload()
-  }, [state.apiUrl, bookmark, setDeleted, reload])
+  }, [state.apiUrl, bookmark.id, setDeleted, reload])
+
+  const handleToggleToRead = useCallback(async (ev) => {
+    const endpoint = `${state.apiUrl}/bookmarks/${bookmark.id}`
+    await fetch(endpoint, {
+      method: 'put',
+      headers: {
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({
+        toread: !bookmark.toread
+      }),
+      credentials: 'include'
+    })
+
+    // TODO: optimistic updates without full reload
+    reload()
+  }, [])
+
+  const handleToggleStarred = useCallback(async (ev) => {
+    const endpoint = `${state.apiUrl}/bookmarks/${bookmark.id}`
+    await fetch(endpoint, {
+      method: 'put',
+      headers: {
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({
+        starred: !bookmark.starred
+      }),
+      credentials: 'include'
+    })
+
+    // TODO: optimistic updates without full reload
+    reload()
+  }, [])
+
+  const handleToggleSensitive = useCallback(async (ev) => {
+    const endpoint = `${state.apiUrl}/bookmarks/${bookmark.id}`
+    await fetch(endpoint, {
+      method: 'put',
+      headers: {
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({
+        sensitive: !bookmark.sensitive
+      }),
+      credentials: 'include'
+    })
+
+    // TODO: optimistic updates without full reload
+    reload()
+  }, [])
 
   return html`
   <div class="bc-bookmark">
@@ -60,7 +111,13 @@ export const bookmarkList = Component(({ bookmark, reload }) => {
             onCancelEdit: handleCancelEdit,
             legend: html`edit: <code>${bookmark?.id}</code>`
           })
-        : bookmarkView({ bookmark, handleEdit })
+        : bookmarkView({
+            bookmark,
+            onEdit: handleEdit,
+            onToggleToread: handleToggleToRead,
+            onToggleStarred: handleToggleStarred,
+            onToggleSensitive: handleToggleSensitive
+          })
     }
   </div>`
 })
diff --git a/web/components/bookmark/bookmark-view.js b/web/components/bookmark/bookmark-view.js
@@ -6,15 +6,34 @@ import { sensitive } from '../sensitive/index.js'
 
 export const bookmarkView = Component(({
   bookmark: b,
-  handleEdit = () => {}
+  onEdit = () => {},
+  onToggleToread = () => {},
+  onToggleStarred = () => {},
+  onToggleSensitive = () => {}
 } = {}) => {
   return html`
     <div class="bc-bookmark-view">
       <div>
-        ${toread({ toread: b.toread })}
-        ${star({ starred: b.starred })}
-        ${sensitive({ sensitive: b.sensitive })}
-        <a class="${b.toread ? 'bc-bookmark-title-toread' : null}" href="${b.url}" target="_blank">${b.title}</a>
+        ${toread({
+          toread: b.toread,
+          onclick: onToggleToread
+        })}
+        ${star({
+          starred: b.starred,
+          onclick: onToggleStarred
+        })}
+        ${sensitive({
+          sensitive: b.sensitive,
+          onclick: onToggleSensitive
+        })}
+        <a class="${b.toread
+            ? 'bc-bookmark-title-toread'
+            : null}"
+           href="${b.url}"
+           target="_blank"
+        >
+          ${b.title}
+        </a>
       </div>
       <div class="bc-bookmark-url-display"><a href="${b.url}">${b.url}</a></div>
       ${b.note ? html`<div>${b.note}</div>` : null}
@@ -35,7 +54,7 @@ export const bookmarkView = Component(({
         </a>
       </div>
       <div>
-        <button onClick=${handleEdit}>edit</button>
+        <button onClick=${onEdit}>edit</button>
       </div>
     </div>`
 })
diff --git a/web/components/sensitive/index.js b/web/components/sensitive/index.js
@@ -2,10 +2,10 @@ import { Component, html } from 'uland-isomorphic'
 
 export const sensitive = Component(({
   sensitive = false,
-  onClick = () => {}
+  onclick = () => {}
 }) => {
   return html`
-    <span onClick=${onClick} class="${sensitive ? 'bc-sensitive' : 'bc-unsensitive'}" onClick=${onClick}>
+    <span class="${sensitive ? 'bc-sensitive' : 'bc-unsensitive'}" onclick=${onclick}>
       ${sensitive
         ? '🤫'
         : '🫥'

diff --git a/web/components/star/index.js b/web/components/star/index.js
@@ -2,10 +2,10 @@ import { Component, html } from 'uland-isomorphic'
 
 export const star = Component(({
   starred = false,
-  onClick = () => {}
+  onclick = () => {}
 }) => {
   return html`
-    <span onClick=${onClick} class="${starred ? 'bc-starred' : 'bc-unstarred'}" onClick=${onClick}>
+    <span class="${starred ? 'bc-starred' : 'bc-unstarred'}" onclick=${onclick}>
       ${starred
         ? '★'
         : '☆'

diff --git a/web/components/toread/index.js b/web/components/toread/index.js
@@ -2,10 +2,10 @@ import { Component, svg, html } from 'uland-isomorphic'
 
 export const toread = Component(({
   toread = false,
-  onClick = () => {}
+  onclick = () => {}
 }) => {
   return html`
-    <span class="${toread ? 'bc-unread' : 'bc-read'}" onClick=${onClick}>
+    <span class="${toread ? 'bc-unread' : 'bc-read'}" onclick=${onclick}>
       ${toread
         ? svg`
           <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"