1 files changed, 116 insertions, 0 deletions
diff --git a/library/client/view/books.ts b/library/client/view/books.ts
new file mode 100644
index 0000000..aba55c1
--- /dev/null
+++ b/library/client/view/books.ts
@@ -0,0 +1,116 @@
+import { h, withVar, mount, Html, Rx } from 'lib/rx'
+import * as Book from 'book'
+import * as Modal from 'view/components/modal'
+
+export function view(books: Rx<Array<Book.Book>>): Html {
+  return h('div',
+    { className: 'g-Books' },
+    withVar<Book.Book | undefined>(undefined, (focusBook, updateFocusBook) => [
+      books.map(bs => [
+        focusBook.map(book => {
+          if (book !== undefined) {
+            let onKeyup = keyupHandler({ 
+              books: bs, 
+              book,
+              onUpdate: (book: Book.Book) => updateFocusBook(_ => book)
+            })
+
+            return bookDetailModal({
+              book,
+              onClose: () => updateFocusBook(_ => undefined),
+              onmount: () => addEventListener('keyup', onKeyup),
+              onunmount: () => removeEventListener('keyup', onKeyup)
+            })
+          }
+        }),
+        bs.map(book => viewBook({
+          book,
+          onSelect: (book) => updateFocusBook(_ => book)
+        }))
+      ])
+    ])
+  )
+}
+
+interface KeyupHandlerParams {
+  books: Array<Book.Book>
+  book: Book.Book
+  onUpdate: (book: Book.Book) => void
+}
+
+function keyupHandler({ books, book, onUpdate }: KeyupHandlerParams): ((e: KeyboardEvent) => void) {
+  return (e: KeyboardEvent) => {
+    if (e.key === 'ArrowLeft') {
+      const indexedBooks = books.map((b, i) => ({ b, i }))
+      const focus = indexedBooks.find(({ b }) => b == book)
+      if (focus !== undefined && focus.i > 0) {
+        onUpdate(books[focus.i - 1])
+      }
+    } else if (e.key === 'ArrowRight') {
+      const indexedBooks = books.map((b, i) => ({ b, i }))
+      const focus = indexedBooks.find(({ b }) => b == book)
+      if (focus !== undefined && focus.i < books.length - 1) {
+        onUpdate(books[focus.i + 1])
+      }
+    }
+  }
+}
+
+interface ViewBookParams {
+  book: Book.Book
+  onSelect: (book: Book.Book) => void
+}
+
+function viewBook({ book, onSelect }: ViewBookParams): Html {
+  return h('button',
+    { className: 'g-Book' },
+    h('img',
+      { src: book.cover,
+        alt: book.title,
+        className: 'g-Book__Image',
+        onclick: () => onSelect(book)
+      }
+    )
+  )
+}
+
+interface BookDetailModalParams {
+  book: Book.Book
+  onClose: () => void
+  onmount: () => void
+  onunmount: () => void
+}
+
+function bookDetailModal({ book, onClose, onmount, onunmount }: BookDetailModalParams): Html {
+  return Modal.view({
+    header: h('div',
+      h('div', { className: 'g-BookDetail__Title' }, `${book.title}, ${book.date}`),
+      book.subtitle && h('div', { className: 'g-BookDetail__Subtitle' }, book.subtitle)
+    ),
+    body: h('div',
+      { className: 'g-BookDetail' },
+      h('img', { src: book.cover }),
+      h('div',
+        h('dl',
+          metadata('Auteur', book.authors),
+          metadata('Genre', book.genres)
+        ),
+        book.summary && book.summary
+          .split('\n')
+          .map(str => str.trim())
+          .filter(str => str != '')
+          .map(str => h('p', str))
+      )
+    ),
+    onClose,
+    onmount,
+    onunmount
+  })
+}
+
+function metadata(term: string, descriptions: Array<string>): Html {
+  return h('div',
+    h('dt', term, descriptions.length > 1 && 's', ' :'),
+    h('dd', ' ', descriptions.join(', '))
+  )
+}