Skip to content

Commit

Permalink
Move components into folder
Browse files Browse the repository at this point in the history
  • Loading branch information
bcomnes committed May 28, 2022
1 parent 31a94a3 commit 74300c0
Show file tree
Hide file tree
Showing 15 changed files with 165 additions and 156 deletions.
2 changes: 1 addition & 1 deletion web/bookmarks/client.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useUser } from '../hooks/useUser.js'
import { fetch } from 'fetch-undici'
import { useLSP } from '../hooks/useLSP.js'
import { useWindow } from '../hooks/useWindow.js'
import { bookmark } from '../components/bookmark.js'
import { bookmark } from '../components/bookmark/bookmark-list.js'

export const page = Component(() => {
const state = useLSP()
Expand Down
2 changes: 1 addition & 1 deletion web/bookmarks/style.css
Original file line number Diff line number Diff line change
@@ -1 +1 @@
@import '../components/bookmark.css'
@import '../components/bookmark/bookmark-list.css'
62 changes: 0 additions & 62 deletions web/components/bookmark.css

This file was deleted.

29 changes: 29 additions & 0 deletions web/components/bookmark/bookmark-edit.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
.bc-bookmark-edit
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
width: 100%;
}

.bc-bookmark-note {
display: block;
width: 100%;
resize: vertical;
}

.bc-bookmark-legend {
font-size: var(--small-font-size);
}

.bc-bookmark-url-edit {
font-family: var(--font-code);
}
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
/* eslint-env browser */
import { Component, html, useState, useRef } from 'uland-isomorphic'
import { useLSP } from '../hooks/useLSP.js'
import { unreadIcon } from './unread.js'
import { star } from './star.js'

export const bookmarkEdit = Component(({
bookmark: b,
Expand Down Expand Up @@ -50,7 +47,7 @@ export const bookmarkEdit = Component(({
}

return html`
<div>
<div class='bc-bookmark-edit'>
<form ref="${formRef}" class="add-bookmark-form" id="add-bookmark-form" onsubmit=${handleSave}>
<fieldset ?disabled=${disabled}>
<legend class="bc-bookmark-legend">edit: <code>${b.id}</code></legend>
Expand Down Expand Up @@ -110,91 +107,3 @@ export const bookmarkEdit = Component(({
</form>
</div>`
})

export const bookmarkView = Component(({
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 const bookmark = Component(({ bookmark }) => {
const state = useLSP()
const [editing, setEditing] = useState(false)
const [deleted, setDeleted] = useState(false)
const formRef = useRef()

function handleEdit () {
setEditing(true)
}

function handleCancelEdit () {
setEditing(false)
}

async function handleSave () {
// handle save here
setEditing(false)
}

async function handleDeleteBookmark (ev) {
const controller = new AbortController()
const response = await fetch(`${state.apiUrl}/bookmarks/${bookmark.id}`, {
method: 'delete',
headers: {
'accept-encoding': 'application/json'
},
signal: controller.signal,
credentials: 'include'
})
console.log(await response.json())
setDeleted(true)
}

return html`
<div class="bc-bookmark">
${deleted
? null
: html`
${editing
? bookmarkEdit({
bookmark,
handleSave,
formRef,
onDeleteBookmark: handleDeleteBookmark,
onCancelEdit: handleCancelEdit
})
: bookmarkView({ bookmark, handleEdit })
}
</div>`
}`
})
2 changes: 2 additions & 0 deletions web/components/bookmark/bookmark-list.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@import './bookmark-view.css';
@import './bookmark-edit.css';
57 changes: 57 additions & 0 deletions web/components/bookmark/bookmark-list.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/* eslint-env browser */
import { Component, html, useState, useRef } from 'uland-isomorphic'
import { useLSP } from '../../hooks/useLSP.js'
import { bookmarkEdit } from './bookmark-edit.js'
import { bookmarkView } from './bookmark-view.js'

export const bookmark = Component(({ bookmark }) => {
const state = useLSP()
const [editing, setEditing] = useState(false)
const [deleted, setDeleted] = useState(false)
const formRef = useRef()

function handleEdit () {
setEditing(true)
}

function handleCancelEdit () {
setEditing(false)
}

async function handleSave () {
// handle save here
setEditing(false)
}

async function handleDeleteBookmark (ev) {
const controller = new AbortController()
const response = await fetch(`${state.apiUrl}/bookmarks/${bookmark.id}`, {
method: 'delete',
headers: {
'accept-encoding': 'application/json'
},
signal: controller.signal,
credentials: 'include'
})
console.log(await response.json())
setDeleted(true)
}

return html`
<div class="bc-bookmark">
${deleted
? null
: html`
${editing
? bookmarkEdit({
bookmark,
handleSave,
formRef,
onDeleteBookmark: handleDeleteBookmark,
onCancelEdit: handleCancelEdit
})
: bookmarkView({ bookmark, handleEdit })
}
</div>`
}`
})
33 changes: 33 additions & 0 deletions web/components/bookmark/bookmark-view.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
@import '../unread';
@import '../star';

.bc-bookmark-view {
padding-bottom: 4px;
margin-bottom: 4px;
border-bottom: 1px solid var(--accent-background);
}

.bc-bookmark-title-toread {
font-weight: bold;
}

.bc-bookmark-url-display {
margin-top: -0.5em;
margin-bottom: 5px;
}

.bc-tags-display,
.bc-date,
.bc-bookmark-url-display {
font-size: 0.8em;
}

.bc-tags-display a,
.bc-date a,
.bc-bookmark-url-display a {
color: var(--accent-foreground);
}

.bc-tags-display a {
margin-right: 5px;
}
40 changes: 40 additions & 0 deletions web/components/bookmark/bookmark-view.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/* eslint-env browser */
import { Component, html } from 'uland-isomorphic'
import { unreadIcon } from '../unread/index.js'
import { star } from '../star/index.js'

export const bookmarkView = Component(({
bookmark: b,
handleEdit = () => {}
} = {}) => {
return html`
<div class="bc-bookmark-view">
<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>`
})
Empty file added web/components/header/index.css
Empty file.
1 change: 1 addition & 0 deletions web/components/header/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
index.js
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.

0 comments on commit 74300c0

Please sign in to comment.