ngrams without grouping

src/NgramsItem.purs

+module NgramsItem where
+
+import Prelude
+
+import Control.Monad.Eff.Console (CONSOLE)
+import DOM (DOM)
+import Data.Newtype (class Newtype)
+import Network.HTTP.Affjax (AJAX)
+import React (ReactElement)
+import React.DOM (input, span, td, text, tr)
+import React.DOM.Props (_type, checked, className, color, onChange, style, title)
+import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec)
+import Utils (getter, setter)
+
+newtype State = State
+  { term :: Term
+  }
+
+initialState :: State
+initialState = State {term : Term {id : 10, term : "hello", occurrence : 10, _type : None, children : []}}
+
+newtype Term = Term {id :: Int, term :: String, occurrence :: Int, _type :: TermType, children :: Array Term}
+
+derive instance newtypeTerm :: Newtype Term _
+
+data TermType = MapTerm | StopTerm | None
+
+derive instance eqTermType :: Eq TermType
+
+instance showTermType :: Show TermType where
+  show MapTerm = "MapTerm"
+  show StopTerm = "StopTerm"
+  show None = "None"
+
+data Action
+  = SetMap Boolean
+  | SetStop Boolean
+
+performAction :: forall eff props. PerformAction ( console :: CONSOLE , ajax    :: AJAX, dom     :: DOM | eff ) State props Action
+performAction (SetMap b)   _ _ = void do
+  modifyState \(State s) -> State s {term = setter (_{_type = (if b then MapTerm else None)}) s.term}
+
+performAction (SetStop b)   _ _ = void do
+    modifyState \(State s) -> State s {term = setter (_{_type = (if b then StopTerm else None)}) s.term}
+
+ngramsItemSpec :: forall props eff . Spec (console::CONSOLE, ajax::AJAX, dom::DOM | eff) State props Action
+ngramsItemSpec = simpleSpec performAction render
+  where
+    render :: Render State props Action
+    render dispatch _ (State state) _ =
+      [
+        tr []
+        [ td [] [ checkbox_map]
+        , td [] [ checkbox_stop]
+        , td [] [ dispTerm (getter _.term state.term)  (getter _._type state.term) ]
+        , td [] [ text $ show $ getter _.occurrence state.term]
+        ]
+      ]
+      where
+        checkbox_map =
+          input [ _type "checkbox"
+                , className "checkbox"
+                , checked $ getter _._type state.term == MapTerm
+                , title "Mark as completed"
+                , onChange $ dispatch <<< ( const $ SetMap $ not (getter _._type state.term == MapTerm))
+                ] []
+        checkbox_stop =
+          input
+          [ _type "checkbox"
+          , className "checkbox"
+          , checked $ getter _._type state.term == StopTerm
+          , title "Mark as completed"
+          , onChange $ dispatch <<< ( const $ SetStop $ not (getter _._type state.term == StopTerm))
+          ] []
+
+
+dispTerm :: String -> TermType -> ReactElement
+dispTerm term MapTerm = span [style {color :"green"}] [text $ term]
+dispTerm term StopTerm = span [style {color :"red", textDecoration : "line-through"}] [text $ term]
+dispTerm term None = span [style {color :"black"}] [text term]

src/NgramsTable.purs

 module NgramsTable where
 
-import Prelude
-
 import Control.Monad.Eff.Console (CONSOLE)
 import DOM (DOM)
+import Data.Array (fold, toUnfoldable)
+import Data.Either (Either(..))
+import Data.Lens (Lens', Prism', lens, over, prism)
+import Data.List (List(..))
+import Data.Tuple (Tuple(..), uncurry)
 import Network.HTTP.Affjax (AJAX)
-import React.DOM (input, table, tbody, td, text, th, thead, tr)
-import React.DOM.Props (_type, checked, className, onChange, scope, title)
-import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec)
-import Unsafe.Coerce (unsafeCoerce)
+import NgramsItem as NI
+import Prelude hiding (div)
+import React.DOM (div, table, tbody, text, th, thead, tr)
+import React.DOM.Props (className, scope)
+import Thermite (PerformAction, Spec, _render, focus, foreach, modifyState, withState)
 
-type State =
-  {
-    completed :: Boolean
+newtype State = State
+  { items :: List NI.State
   }
 
 initialState :: State
-initialState =
-  {
-    completed : true
-  }
+initialState = State { items : toUnfoldable [NI.initialState]}
 
 data Action
   = NoOp
-  | ChangeCompleted Boolean
+  | ItemAction Int NI.Action
 
+_itemsList :: Lens' State (List NI.State)
+_itemsList = lens (\(State s) -> s.items) (\(State s) v -> State s { items = v })
+
+_ItemAction :: Prism' Action (Tuple Int NI.Action)
+_ItemAction = prism (uncurry ItemAction) \ta ->
+  case ta of
+    ItemAction i a -> Right (Tuple i a)
+    _ -> Left ta
 
 performAction :: forall eff props. PerformAction ( console :: CONSOLE , ajax    :: AJAX, dom     :: DOM | eff ) State props Action
-performAction NoOp _ _ = void do
+performAction _ _ _ = void do
   modifyState id
 
-performAction (ChangeCompleted b)   _ _ = void $ modifyState $ _ { completed = b }
-
-
-ngramsTableSpec :: forall props eff . Spec (console::CONSOLE, ajax::AJAX, dom::DOM | eff) State props Action
-ngramsTableSpec = simpleSpec performAction render
-  where
-    render :: Render State props Action
-    render dispatch _ state _ =
-      [table [ className "table able table-bordered"]
+tableSpec :: forall eff props .Spec eff State props Action -> Spec eff State props Action
+tableSpec = over _render \render dispatch p s c ->
+  [table [ className "table able table-bordered"]
                   [ thead [ className "tableHeader table-bordered"]
                     [ tr []
                       [ th [ scope "col"] [ text "Map" ]
                       , th [ scope "col"] [ text "Stop"]
                       , th [ scope "col"] [ text "Terms"]
-                      , th [ scope "col"] [ text "Occurences(nb)" ]
+                      , th [ scope "col"] [ text "Occurences (nb)" ]
                       ]
                     ]
-                  , tbody []
+                  , tbody [] $  render dispatch p s c
+               ]
+  ]
 
-                    [ tr [] [
-                         td [] [ input_checkbox]
-                         , td [][ input_checkbox]
-                         , td [] [ text "India"]
-                         , td [] [ text "807"]
-                         ]
-                    , tr [] [ td [][  input_checkbox]
-                            , td [] [ input_checkbox]
-                            , td [] [ text "Tobacco use"]
-                            , td [] [ text "351"]
-                            ]
-                    , tr [] [ td [][  input_checkbox]
-                            , td [][ input_checkbox]
-                            , td [] [ text "tobacco"]
-                            , td [] [ text "336"]
-                            ]
-                    ,tr [] [ td [][  input_checkbox]
-                           , td [][ input_checkbox]
-                           , td [] [ text "studies"]
-                           , td [] [ text "282"]
-                           ]
-                    , tr [] [ td [][  input_checkbox]
-                            , td [][ input_checkbox]
-                            , td [] [ text "prevalence"]
-                            , td [] [ text "217"]
-                            ]
+ngramsTableSpec :: forall props eff . Spec (console::CONSOLE, ajax::AJAX, dom::DOM | eff) State props Action
+ngramsTableSpec =  container $ fold
+    [  tableSpec $ withState \st ->
+        focus _itemsList _ItemAction $
+          foreach \_ -> NI.ngramsItemSpec
+   ]
 
-                    , tr [] [ td [][  input_checkbox]
-                            , td [][ input_checkbox]
-                            , td [] [ text "smoking"]
-                            , td [] [ text "169"]
-                            ]
-                    ]
-                  ]
-      ]
-      where
-        input_checkbox = input [ _type "checkbox"
-                                    , className "checkbox"
-                                    , checked state.completed
-                                    , title "Mark as completed"
-                                    , onChange \e -> dispatch (ChangeCompleted (unsafeCoerce e).target.checked)
-                                    ] []
+container :: forall eff state props action. Spec eff state props action -> Spec eff state props action
+container = over _render \render d p s c ->
+  [ div [ className "container" ] $
+    (render d p s c)
+  ]

src/Utils.purs

+module Utils where
+
+import Prelude
+
+import Data.Newtype (class Newtype, unwrap, wrap)
+
+setterv :: forall nt record field. Newtype nt record => (record -> field -> record) -> field -> nt -> nt
+setterv fn v t = (setter (flip fn v) t)
+
+setter :: forall nt record. Newtype nt record => (record -> record) -> nt -> nt
+setter fn = wrap <<< fn <<< unwrap
+
+getter :: forall record field nt. Newtype nt record => (record -> field) -> nt -> field
+getter fn = fn <<< unwrap