Filter on read status

1 files changed, 48 insertions, 0 deletions

diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..7033690
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,48 @@
+import { h, withVar, mount } from 'lib/rx'
+
+interface Book {
+  title: string
+  authors: Array<string>
+  authorsSort: string
+  genres: Array<string>
+  date: string
+  read: boolean
+  cover: string
+}
+
+// @ts-ignore
+const sortedBooks: Array<Book> = (books as Array<Book>).sort((a, b) =>
+  a.authorsSort == b.authorsSort
+    ? a.date > b.date
+    : a.authorsSort > b.authorsSort)
+
+enum Filter {
+  All,
+  Read,
+  Unread
+}
+
+const view = withVar(Filter.All, (filter, updateFilter) => [
+  h('aside',
+    { className: 'g-Aside' },
+    h('select',
+      { name: 'filter',
+        id: 'filter',
+        onchange: (event: Event) => updateFilter(_ => (event.target as HTMLSelectElement).value as any)
+      },
+      h('option', { value: Filter.All }, 'Tous les livres'),
+      h('option', { value: Filter.Read }, 'Livres lus'),
+      h('option', { value: Filter.Unread }, 'Livres non lus')
+    )
+  ),
+  h('main',
+    { className: 'g-Main' },
+    filter.map(f =>
+      sortedBooks
+        .filter(b => f == Filter.All || b.read == (f == Filter.Read))
+        .map(book => h('img', { className: 'g-Book', src: book.cover }))
+    )
+  )
+])
+
+mount(view)