Skip to content

Commit

Permalink
Break out parts of bookmark component into pieces
Browse files Browse the repository at this point in the history 
This wasn't working before, just a checkpoint to a point while it is still working.
  • Loading branch information
@bcomnes
bcomnes committed May 27, 2022
1 parent f720144 commit efdfc38
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 93 deletions.
2 changes: 1 addition & 1 deletion web/bookmarks/client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export function bookmarksPage () {

return html`
<div>
<a href="./add">add +</a>
🔖 <a href="./add">add +</a>
</div>
${bookmarksLoading ? html`<div>Loading...</div>` : null}
${bookmarksError ? html`<div>${bookmarksError.message}</div>` : null}
Expand Down
2 changes: 1 addition & 1 deletion web/components/bookmark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,5 +58,5 @@ input[type="week"] {
}

.bc-tags-display a {
margin-right: 4px;
margin-right: 5px;
}
213 changes: 122 additions & 91 deletions web/components/bookmark.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,115 @@ import { useLSP } from '../hooks/useLSP.js'
import { unreadIcon } from './unread.js'
import { star } from './star.js'

export function bookmarkEdit ({
bookmark: b,
handleSave = () => {},
deleteConfirm = false,
formRef,
saving = false,
cancelDelete = () => {},
deleteBookmark = () => {},
initiateDelete = () => {},
handleCancelEdit = () => {}
} = {}) {
return html`
<div>
<form ref="${formRef}" class="add-bookmark-form" id="add-bookmark-form" onsubmit=${handleSave}>
<fieldset ?disabled=${saving}>
<legend class="bc-bookmark-legend">edit: <code>${b.id}</code></legend>
<div>
<label class='block'>
url:
<input class='block bc-bookmark-url-edit' type="url" name="url" value="${b.url}"/>
</label>
</div>
<div>
<label class="block">
Title:
<input class="block" type="text" name="title" value="${b.title}">
</label>
</div>
<div>
<label class="block">
note:
<textarea class="bc-bookmark-note" rows="6" name="note">${b.note}</textarea>
</label>
</div>
<div>
<label class="block">
tags:
<input class="block" type="text" name="tags" value="${b.tags?.join(' ')}">
</label>
</div>
<div>
<label>
to read:
<input type="checkbox" name="toread" ?checked="${b.toread}">
</label>
<label>
starred:
<input type="checkbox" name="starred" ?checked="${b.starred}">
</label>
<label>
sensitive:
<input type="checkbox" name="toread" ?checked="${b.sensitive}">
</label>
</div>
<div>
${
deleteConfirm
? html`
<button onClick=${cancelDelete}>cancel</button>
<button onClick=${deleteBookmark}>destroy</button>`
: html`<button onClick=${initiateDelete}>delete</button>`
}
</div>
<div class="button-cluster">
<button onClick=${handleCancelEdit}>cancel</button>
<input name="submit-button" type="submit">
</div>
<div class="error-box"></div>
</fieldset>
</form>
</div>`
}

export function bookmarkView ({
bookmark: b,
handleEdit = () => {}
} = {}) {
return html`
<div class="bc-bookmark-display">
<div>
${unreadIcon(b.toread)}
${star(b.starred)}
<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}
<div>
${b.tags?.length > 0
? html`
<div class="bc-tags-display">
🏷
${b.tags.map(tag => html`<a href=${`/tags/t/?tag=${tag}`}>${tag}</a> `)}
</div>`
: null
}
<div class="bc-date">
<a href="${`./b/?id=${b.id}`}">
<time datetime="${b.created_at}">
${(new Date(b.created_at)).toLocaleString()}
</time>
</a>
</div>
${b.sensitive ? html`<div>'🤫'</div>` : null}
<div>
<button onClick=${handleEdit}>edit</button>
</div>
</div>`
}

export function bookmark ({ bookmark: b }) {
const [editing, setEditing] = useState(false)
const state = useLSP()
Expand Down Expand Up @@ -55,97 +164,19 @@ export function bookmark ({ bookmark: b }) {
? null
: html`
${editing
? html`
<div>
<form ref="${formRef}" class="add-bookmark-form" id="add-bookmark-form" onsubmit=${handleSave}>
<fieldset ?disabled=${saving}>
<legend class="bc-bookmark-legend">edit: <code>${b.id}</code></legend>
<div>
<label class='block'>
url:
<input class='block bc-bookmark-url-edit' type="url" name="url" value="${b.url}"/>
</label>
</div>
<div>
<label class="block">
Title:
<input class="block" type="text" name="title" value="${b.title}">
</label>
</div>
<div>
<label class="block">
note:
<textarea class="bc-bookmark-note" rows="6" name="note">${b.note}</textarea>
</label>
</div>
<div>
<label class="block">
tags:
<input class="block" type="text" name="tags" value="${b.tags?.join(' ')}">
</label>
</div>
<div>
<label>
to read:
<input type="checkbox" name="toread" ?checked="${b.toread}">
</label>
<label>
starred:
<input type="checkbox" name="starred" ?checked="${b.starred}">
</label>
<label>
sensitive:
<input type="checkbox" name="toread" ?checked="${b.sensitive}">
</label>
</div>
<div>
${
deleteConfirm
? html`
<button onClick=${cancelDelete}>cancel</button>
<button onClick=${deleteBookmark}>destroy</button>`
: html`<button onClick=${initiateDelete}>delete</button>`
}
</div>
<div class="button-cluster">
<button onClick=${handleCancelEdit}>cancel</button>
<input name="submit-button" type="submit">
</div>
<div class="error-box"></div>
</fieldset>
</form>
</div>`
: html`
<div class="bc-bookmark-display">
<div>
${unreadIcon(b.toread)}
${star(b.starred)}
<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}
<div>
${b.tags?.length > 0
? html`
<div class="bc-tags-display">
${b.tags.map(tag => html`<a href=${`/tags/t/?tag=${tag}`}>${tag}</a> `)}
</div>`
: null
}
<div class="bc-date">
<a href="${`./b/?id=${b.id}`}">
<time datetime="${b.created_at}">
${(new Date(b.created_at)).toLocaleString()}
</time>
</a>
</div>
${b.sensitive ? html`<div>'🤫'</div>` : null}
<div>
<button onClick=${handleEdit}>edit</button>
</div>
</div>`
? bookmarkEdit({
bookmark: b,
handleSave,
deleteConfirm,
formRef,
saving,
cancelDelete,
deleteBookmark,
initiateDelete,
handleCancelEdit
})
: bookmarkView({ bookmark: b, handleEdit })
}
</div>
`
</div>`
}`
}

0 comments on commit efdfc38

Please sign in to comment.