Merge pull request #29 from masaeedu/refactoring2

Refactoring

examples/todomvc/src/TodoMVC/State.purs

@@ -61,7 +61,7 @@ className :: Filter -> Todo -> String
 className f t =
      (if isJust t.modification then " editing "   else "")
   <> (if t.done                then " completed " else "")
-  <> (if (shouldHide f t)    then " hidden "    else "")
+  <> (if (shouldHide f t)      then " hidden "    else "")
 
 type App =
   { newTodo :: InputState

examples/todomvc/src/TodoMVC/UI.purs

@@ -3,9 +3,6 @@ module Examples.TodoMVC.UI where
 import Prelude hiding (map,apply)
 
 import Data.Array (filter, snoc) as A
-import Data.Array (mapWithIndex)
-import Data.Compactable (compact)
-import Data.FoldableWithIndex (foldMapWithIndex)
 import Data.Lens (_Just, traversed)
 import Data.Lens as L
 import Data.Maybe (Maybe(..))
@@ -19,7 +16,7 @@ import Examples.TodoMVC.State (_dirty, _done, _filter, _hovered, _newTodo, _stat
 import React.Basic (JSX)
 import React.Basic.DOM (a, div, footer, h1, header, label, li, section, span, strong, text, ul, input) as R
 import Snap.Component (PComponent(..), (#!))
-import Snap.Component.SYTC (Cmp, Cmp', (<$>!), (<*>!))
+import Snap.Component.SYTC (Cmp, Cmp', (<$>!), (<*>!), withered)
 import Snap.Component.SYTC as C
 import Snap.React.Component ((|-), (|<), (|=), (|~))
 import Snap.React.Component as S
@@ -30,31 +27,33 @@ import Snap.React.Component as S
 -- The editor for todo items
 editor :: Cmp' Effect JSX Todo
 editor = C.ado
-  t     <- S.transacted
-           { change: S.edited
-           , save  : S.enterPressed
-           , revert: S.escapePressed
-           } #! T._state
-  focus <- S.focused #! T._dirty
-  in R.input |~ t.change |~ t.save |~ t.revert |~ focus $ { className: "edit" }
+  t <- modificatons #! T._state
+  f <- S.focused    #! T._dirty
+  in R.input |~ t.change |~ t.save |~ t.revert |~ f $ { className: "edit" }
+  where
+  modificatons = S.transacted
+    { change: S.edited
+    , save  : S.enterPressed
+    , revert: S.escapePressed
+    }
 
 -- The renderer for todo items when they're not being edited
 -- Accepts some conditionally rendered content that will be
 -- shown when hovering the todo
 viewer :: Cmp' Effect (JSX -> JSX) Todo
 viewer = C.ado
-  checkbox  <- S.checkbox    #! T._done
-  text      <- S.text        #! T._value
-  veil      <- S.conditional #! T._hovered
-  clickable <- S.clicked     #! P.rmap (const true) >>> T._dirty
-  hoverable <- S.hovering    #! T._hovered
+  chck <- S.checkbox    #! T._done
+  text <- S.text        #! T._value
+  veil <- S.conditional #! T._hovered
+  ckbl <- S.clicked     #! P.rmap (const true) >>> T._dirty
+  hvbl <- S.hovering    #! T._hovered
   in
   \extra ->
     R.div
-    |~ hoverable
+    |~ hvbl
     |= { className: "view" }
-    |< [ checkbox { className: "toggle" }
-       , R.label |~ clickable |- text
+    |< [ chck { className: "toggle" }
+       , R.label |~ ckbl |- text
        , veil extra
        ]
 
@@ -77,13 +76,6 @@ listItem f = li
   li _ Nothing  _ = mempty
   li _ (Just t) v = R.li |= { className: T.className f t } |- v
 
--- Given a component focusing on whether a component is visible
-withered :: forall m v x. Monoid v => Cmp' m v (Maybe x) -> Cmp' m v (Array x)
-withered cmp u s = foldMapWithIndex (\k mt -> cmp (go k) mt) (Just <$> s)
-  where
-  go k Nothing  = u $ compact $ mapWithIndex (\i x -> if k == i then Nothing else Just x) s
-  go k (Just t) = u $ mapWithIndex (\i x -> if k == i then t else x) s
-
 -- A list of todos, which can delete themselves from the list
 todos :: Cmp' Effect JSX App
 todos = C.do

src/Snap.purs

@@ -10,7 +10,7 @@ import Snap.Component.SYTC (Cmp)
 import Snap.Snapper (Snapper(..))
 import Snap.Target (Target(..))
 
-encapsulate :: forall m v s u x y. Monad m => Snapper m u s -> Cmp m v s u -> Cmp m (m v) x y
+encapsulate :: forall m v s u x y. Functor m => Snapper m u s -> Cmp m v s u -> Cmp m (m v) x y
 encapsulate (Snapper { get, put }) cmp _ _ = get <#> cmp put
 
 snap :: forall m v x

src/Snap/Component/SYTC.purs

@@ -3,7 +3,11 @@ module Snap.Component.SYTC where
 import Control.Applicative (class Applicative)
 import Control.Apply (lift2) as A
 import Control.Category (class Category, class Semigroupoid, (<<<), (>>>))
+import Data.Array (mapWithIndex)
+import Data.Compactable (compact)
 import Data.Either (Either(..), either)
+import Data.Eq ((==))
+import Data.FoldableWithIndex (foldMapWithIndex)
 import Data.Functor.Compose (Compose(..))
 import Data.Maybe (Maybe(..))
 import Data.Newtype (un)
@@ -158,3 +162,11 @@ when f c set = c set'
 
 echo :: forall m s u. Cmp m s s u
 echo _ s = s
+
+-- Given a component that can display a possible value, create a component that can
+-- display a list of values
+withered :: forall m v x. Monoid v => Cmp' m v (Maybe x) -> Cmp' m v (Array x)
+withered cmp u s = foldMapWithIndex (\k mt -> cmp (go k) mt) (Just P.<$> s)
+  where
+  go k Nothing  = u $ compact $ mapWithIndex (\i x -> if k == i then Nothing else Just x) s
+  go k (Just t) = u $ mapWithIndex (\i x -> if k == i then t else x) s

src/Snap/React/Component.purs

@@ -157,7 +157,9 @@ tabPressed = keypressed # C.when ((==) "Tab")
 transacted :: forall vr vs vc s m.
   { revert :: Cmp m vr s _
   , save   :: Cmp m vs s _
-  , change :: Cmp' m vc s | _ } ->
+  , change :: Cmp' m vc s
+  | _
+  } ->
   Cmp' m { revert :: vr, save :: vs, change :: vc } (Transactional s)
 transacted { change, save, revert } = atomically $! C.ado
   c <- change #! P.rmap Change

src/Snap/React/Target.purs

@@ -22,4 +22,4 @@ reactTargetM e sync = Target go
     v' <- v
     liftEffect $ R.render v' e
     _ <- liftAff $ AVar.take sync
-    pure (Target go)
+    pure $ Target go