1 files changed, 52 insertions, 28 deletions
diff --git a/src/Page.purs b/src/Page.purs
index c0b641c..850875a 100644
--- a/src/Page.purs
+++ b/src/Page.purs
@@ -3,10 +3,14 @@ module Page
   , Query
   ) where
 
-import Data.Array ((:), sortBy)
+import Control.Monad.Aff (Aff)
+import Data.Array (sortBy, filter)
 import Data.Maybe (Maybe(..))
+import Data.String (contains, Pattern(..))
+import DOM (DOM)
 import Halogen as H
 import Halogen.HTML as HH
+import Halogen.HTML.Events as HE
 import Halogen.HTML.Properties as HP
 import Prelude
 
@@ -15,14 +19,18 @@ import Food as Food
 import Format as Format
 import Indicator as Indicator
 
-data Query a = NoOp a
-type State = Unit
+data Query a =
+  NoOp a
+  | UpdateSearch String a
+
+type State = String
+
 type Message = Unit
 
-component :: forall m . H.Component HH.HTML Query State Message m
+component :: forall eff. H.Component HH.HTML Query State Message (Aff (dom :: DOM | eff))
 component =
   H.component
-    { initialState: const unit
+    { initialState: const ""
     , render
     , eval
     , receiver: const Nothing
@@ -31,39 +39,55 @@ component =
     render :: State -> H.ComponentHTML Query
     render state =
       HH.div
-        []
-        [ HH.h1 [] [ HH.text "Glycémie" ]
-        , HH.ul
+        [ HP.class_ $ HH.ClassName "page" ]
+        [ renderHeader state
+        , HH.div
             [ HP.class_ $ HH.ClassName "aliments" ]
-            (renderTitle : (map renderAliment <<< sortBy (\a b -> Format.compare a.name b.name) $ Food.all))
+            ( Food.all
+                # filter (\a -> contains (Pattern $ Format.string state) (Format.string a.name))
+                # sortBy (\a b -> compare (Format.string a.name) (Format.string b.name))
+                # map renderAliment
+            )
         ]
 
-    eval :: Query ~> H.ComponentDSL State Query Message m
+    eval :: Query ~> H.ComponentDSL State Query Message (Aff (dom :: DOM | eff))
     eval = case _ of
       NoOp next -> pure next
+      UpdateSearch search next -> do
+        H.put search
+        pure next
 
-renderTitle :: H.ComponentHTML Query
-renderTitle =
-  HH.li
-    [ HP.class_ $ HH.ClassName "title" ]
+renderHeader :: String -> H.ComponentHTML Query
+renderHeader search =
+  HH.div
+    [ HP.class_ $ HH.ClassName "header" ]
     [ HH.div
-        []
-        [ HH.text "Aliment" ]
-    , HH.div
-        []
-        [ HH.text "Index glycémique" ]
-    , HH.div
-        []
-        [ HH.text "Glucides pour 100 g" ]
-    , HH.div
-        []
-        [ HH.text "Charge glycémique" ]
+        [ HP.class_ $ HH.ClassName "title line" ]
+        [ HH.div
+            []
+            [ HH.text "Aliment" ]
+        , HH.div
+            []
+            [ HH.text "Index glycémique" ]
+        , HH.div
+            []
+            [ HH.text "Glucides pour 100g" ]
+        , HH.div
+            []
+            [ HH.text "Charge glycémique" ]
+        ]
+    , HH.input
+        [ HP.class_ $ HH.ClassName "search line"
+        , HP.placeholder "Rechercher…"
+        , HE.onValueInput (HE.input UpdateSearch)
+        , HP.value search
+        ]
     ]
 
 renderAliment :: Aliment -> H.ComponentHTML Query
 renderAliment aliment =
-  HH.li
-    []
+  HH.div
+    [ HP.class_ $ HH.ClassName "aliment line" ]
     [ HH.div
         []
         [ HH.text aliment.name ]
@@ -75,6 +99,6 @@ renderAliment aliment =
         [ HH.text (show aliment.carbohydrates) ]
     , let glycemicLoad = Food.glycemicLoad aliment
       in  HH.div
-            [ HP.class_ $ HH.ClassName ("number " <> (show $ Indicator.fromGlycemicLoad glycemicLoad)) ]
+            [ HP.class_ $ HH.ClassName ("number " <> (Indicator.className $ Indicator.fromGlycemicLoad glycemicLoad)) ]
             [ HH.text (Format.number 2 glycemicLoad) ]
     ]