1 files changed, 67 insertions, 27 deletions
diff --git a/src/main/scala/reading/component/index/Books.scala b/src/main/scala/reading/component/index/Books.scala
index c22639f..b5e172b 100644
--- a/src/main/scala/reading/component/index/Books.scala
+++ b/src/main/scala/reading/component/index/Books.scala
@@ -1,49 +1,89 @@
 package reading.component.index
 
-import rx._
+import scala.util.Random
 
-import scalatags.JsDom.all._
+import rx._
 import scalacss.Defaults._
 import scalacss.ScalatagsCss._
+import scalatags.JsDom.all._
 
 import reading.component.index.style.{ Books => BooksStyle }
-import reading.component.widget.Modal
-import reading.models.{ Book }
+import reading.component.widget.AnimateMethod
+import reading.models.{ Book, Filter }
+import reading.Route
 import reading.utils.RxUtils._
 
 object Books {
-  def apply(books: Rx[Seq[Book]])(implicit ctx: Ctx.Owner): Frag = {
-    val focus: Var[Option[Book]] = Var(None)
+  val componentId = s"books${Random.nextInt}"
+
+  def apply(
+    books: Rx[Seq[Book]],
+    filters: Var[Seq[Filter]],
+    detail: Var[Option[Book]],
+    search: Var[String],
+    showFiltersMenu: Var[Boolean]
+  )(
+    implicit
+    ctx: Ctx.Owner
+  ): Frag = {
+    val searchedBooks: Rx[Seq[Book]] = Rx(Book.filter(books(), search()))
+
+    if (detail.now.isEmpty) AnimateMethod.fadeIn(id = componentId)
 
     div(
-      BooksStyle.render,
+      BooksStyle.booksParent,
+
+      div(
+        id := componentId,
+        BooksStyle.render,
+        BooksStyle.books,
+
+        Header(searchedBooks, filters, detail, search, showFiltersMenu),
 
-      Rx {
         div(
-          div(
-            BooksStyle.books,
-
-            books().sorted.map { book =>
-              div(
-                BooksStyle.book,
-                img(
-                  BooksStyle.cover,
-                  src := s"cover/${book.title}.jpg",
-                  alt := s"${book.title}, ${book.author}",
-                  onclick := (() => focus() = Some(book))
-                )
-              )
-            }
-          ),
+          BooksStyle.listParent,
 
           Rx {
-            focus() match {
-              case Some(book) => Modal(onClose = focus() = None)(BookDetail(book))
-              case None => span("")
-            }
+            div(
+              BooksStyle.list,
+
+              searchedBooks().sorted.map { book =>
+                div(
+                  BooksStyle.book,
+                  img(
+                    BooksStyle.cover,
+                    src := s"cover/${book.title}.jpg",
+                    alt := s"${book.title}, ${book.author}",
+                    onclick := (() => {
+                      Route.push(Route.Books(filters.now, Some(book)))
+                      AnimateMethod.fadeOut(
+                        id = componentId,
+                        onEnd = detail() = Some(book)
+                      )
+                    })
+                  )
+                )
+              }
+            )
           }
         )
+      ),
+
+      Rx {
+        detail() match {
+          case Some(book) =>
+            BookDetail(book, componentId, onClose = closeDetail(filters, detail))
+          case None =>
+            span("")
+        }
       }
     )
   }
+
+  def closeDetail(filters: Var[Seq[Filter]], detail: Var[Option[Book]]): Unit =
+    AnimateMethod.fadeOut(BookDetail.componentId, onEnd = {
+      detail() = None
+      Route.push(Route.Books(filters.now, None))
+      AnimateMethod.fadeIn(componentId)
+    })
 }