6 files changed, 190 insertions, 0 deletions
diff --git a/src/main/scala/reading/component/index/Books.scala b/src/main/scala/reading/component/index/Books.scala
new file mode 100644
index 0000000..6ce1b2b
--- /dev/null
+++ b/src/main/scala/reading/component/index/Books.scala
@@ -0,0 +1,33 @@
+package reading.component.index
+
+import rx._
+
+import scalatags.JsDom.all._
+import scalacss.Defaults._
+import scalacss.ScalatagsCss._
+
+import reading.component.index.style.{Books => BooksStyle}
+import reading.models.Book
+import reading.utils.RxTag
+
+object Books {
+  def apply(books: Rx[Seq[Book]]): Frag =
+    div(
+      BooksStyle.render,
+      BooksStyle.books,
+
+      RxTag { implicit context =>
+        div(
+          books().sortBy(_.title).map { book =>
+            div(
+              BooksStyle.book,
+              div(BooksStyle.title, book.title),
+              div(BooksStyle.author, book.author),
+              div(BooksStyle.genres, book.genres.mkString(", ")),
+              div(BooksStyle.themes, book.themes.mkString(", "))
+            )
+          }
+        )
+      }
+    )
+}
diff --git a/src/main/scala/reading/component/index/Filters.scala b/src/main/scala/reading/component/index/Filters.scala
new file mode 100644
index 0000000..1d9cc93
--- /dev/null
+++ b/src/main/scala/reading/component/index/Filters.scala
@@ -0,0 +1,33 @@
+package reading.component.index
+
+import rx._
+import Ctx.Owner.Unsafe._
+
+import scalatags.JsDom.all._
+import scalacss.Defaults._
+import scalacss.ScalatagsCss._
+
+import reading.component.index.style.{Filters => FiltersStyle}
+import reading.models.Filter
+import reading.utils.{RxTag, RxAttr}
+
+object Filters {
+  def apply(filters: Var[Seq[Filter]]): Frag =
+    RxTag { implicit context =>
+      if(filters().isEmpty)
+        span("")
+      else
+        div(
+          FiltersStyle.render,
+          FiltersStyle.filters,
+
+          filters().sortBy(_.name).map { filter =>
+            button(
+              FiltersStyle.filter,
+              RxAttr(onclick, Rx(() => filters() = filters().filter(!Filter.equals(_, filter)))),
+              filter.name
+            )
+          }
+        )
+    }
+}
diff --git a/src/main/scala/reading/component/index/FiltersMenu.scala b/src/main/scala/reading/component/index/FiltersMenu.scala
new file mode 100644
index 0000000..880c3e7
--- /dev/null
+++ b/src/main/scala/reading/component/index/FiltersMenu.scala
@@ -0,0 +1,48 @@
+package reading.component.index
+
+import rx._
+import Ctx.Owner.Unsafe._
+
+import scalatags.JsDom.all._
+import scalacss.Defaults._
+import scalacss.ScalatagsCss._
+
+import reading.component.index.style.{FiltersMenu => FiltersMenuStyle}
+import reading.models.{Book, Filter, Genre, Theme, FilterFactory}
+import reading.utils.{RxTag, RxAttr}
+
+object FiltersMenu {
+  def apply(books: Rx[Seq[Book]], filters: Var[Seq[Filter]]): Frag =
+    div(
+      FiltersMenuStyle.render,
+      group(books, filters, "Genre", Genre.values),
+      group(books, filters, "Theme", Theme.values)
+    )
+
+  def group[T: FilterFactory](books: Rx[Seq[Book]], filters: Var[Seq[Filter]], name: String, groupFilters: Seq[T]): Frag = {
+    val filtersWithCount = Rx {
+      groupFilters
+        .filter(filter => !Filter.contains(filters(), Filter(filter)))
+        .map(filter => (filter, Book.filter(books(), Filter(filter) +: filters()).length))
+        .filter(_._2 > 0)
+    }
+
+    div(
+      FiltersMenuStyle.group,
+
+      div(FiltersMenuStyle.groupTitle, name),
+
+      RxTag { implicit context =>
+        div(
+          filtersWithCount().map { case (filter, count) =>
+            button(
+              FiltersMenuStyle.filter,
+              RxAttr(onclick, Rx(() => filters() = Filter(filter) +: filters())),
+              span(s"${filter.toString} ($count)")
+            )
+          }
+        )
+      }
+    )
+  }
+}
diff --git a/src/main/scala/reading/component/index/style/Books.scala b/src/main/scala/reading/component/index/style/Books.scala
new file mode 100644
index 0000000..2c0dfc0
--- /dev/null
+++ b/src/main/scala/reading/component/index/style/Books.scala
@@ -0,0 +1,31 @@
+package reading.component.index.style
+
+import scalacss.Defaults._
+
+import reading.component.style.Col
+
+object Books extends StyleSheet.Inline {
+  import dsl._
+
+  val books = style(
+  )
+
+  val book = style(
+    marginBottom(30.px)
+  )
+
+  val title = style(
+    fontWeight.bold,
+    marginBottom(10.px),
+    color(Col.congoBrown)
+  )
+
+  val author = style(
+  )
+
+  val genres = style(
+  )
+
+  val themes = style(
+  )
+}
diff --git a/src/main/scala/reading/component/index/style/Filters.scala b/src/main/scala/reading/component/index/style/Filters.scala
new file mode 100644
index 0000000..c2d0aaf
--- /dev/null
+++ b/src/main/scala/reading/component/index/style/Filters.scala
@@ -0,0 +1,21 @@
+package reading.component.index.style
+
+import scalacss.Defaults._
+
+import reading.component.style.Col
+
+object Filters extends StyleSheet.Inline {
+  import dsl._
+
+  val filters = style(
+    marginBottom(30.px),
+    display.flex
+  )
+
+  val filter = style(
+    backgroundColor(Col.gray),
+    color(Col.white),
+    padding(5.px, 10.px),
+    marginRight(10.px)
+  )
+}
diff --git a/src/main/scala/reading/component/index/style/FiltersMenu.scala b/src/main/scala/reading/component/index/style/FiltersMenu.scala
new file mode 100644
index 0000000..9fd50f0
--- /dev/null
+++ b/src/main/scala/reading/component/index/style/FiltersMenu.scala
@@ -0,0 +1,24 @@
+package reading.component.index.style
+
+import scalacss.Defaults._
+
+import reading.component.style.Col
+
+object FiltersMenu extends StyleSheet.Inline {
+  import dsl._
+
+  val group = style(
+    marginBottom(30.px)
+  )
+
+  val groupTitle = style(
+    color(Col.congoBrown),
+    fontWeight.bold,
+    textTransform.uppercase,
+    padding(10.px, 30.px, 15.px)
+  )
+
+  val filter = style(
+    padding(10.px, 30.px)
+  )
+}