Get todomvc almost feature complete

Still missing the routing and localStorage stuff, and ability to cancel editing a todo
mcneissue · Jun 30, 2019 · 6af01d2 · 6af01d2
1 parent efee4c0
commit 6af01d2
Show file tree

Hide file tree

Showing 12 changed files with 366 additions and 200 deletions.
diff --git a/index.html b/index.html
@@ -1,13 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Document</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Template • TodoMVC</title>
+  <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
+  <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
 </head>
 <body>
+
   <div id="container"></div>
+
+  <footer class="info">
+    <p>Double-click to edit a todo</p>
+    <!-- Change this out with your name and url ↓ -->
+    <p>Created by <a href="https://github.com/masaeedu">Asad Saeeduddin</a></p>
+    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+  </footer>
+
+  <script src="node_modules/todomvc-common/base.js"></script>
   <script src="bundle/bundle.js"></script>
 </body>
-</html>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,9 @@
   },
   "dependencies": {
     "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.8.6",
+    "todomvc-app-css": "^2.2.0",
+    "todomvc-common": "^1.0.5"
   },
   "devDependencies": {
     "parcel-bundler": "^1.12.3",

diff --git a/packages.dhall b/packages.dhall
@@ -109,18 +109,18 @@ let additions =
 -}
 
 let mkPackage =
-      https://raw.githubusercontent.com/purescript/package-sets/psc-0.12.3-20190330/src/mkPackage.dhall sha256:0b197efa1d397ace6eb46b243ff2d73a3da5638d8d0ac8473e8e4a8fc528cf57
+      https://raw.githubusercontent.com/purescript/package-sets/psc-0.13.0-20190626/src/mkPackage.dhall sha256:0b197efa1d397ace6eb46b243ff2d73a3da5638d8d0ac8473e8e4a8fc528cf57
 
 let upstream =
-      https://raw.githubusercontent.com/purescript/package-sets/psc-0.12.3-20190330/src/packages.dhall sha256:cb0cdde5926cfdff5bd17bb2508a85b5eee794088f253f59f884766828ba722c
+      https://raw.githubusercontent.com/purescript/package-sets/psc-0.13.0-20190626/src/packages.dhall sha256:9905f07c9c3bd62fb3205e2108515811a89d55cff24f4341652f61ddacfcf148
 
 let overrides = {=}
 
 let additions =
       { record-optics-extra =
           let manifest =
-                https://raw.githubusercontent.com/masaeedu/purescript-record-optics-extra/master/spago.dhall sha256:cbffbd747560d338124c5d41e2df6e9efcffce1cfef787474ffddfa78b1ca3b8
-
+                https://raw.githubusercontent.com/masaeedu/purescript-record-optics-extra/master/spago.dhall sha256:bba75d2ecde08251b3ae35c647d316bc51bb0aa98a04bd8d58573e77ea55977d
+          
           in  mkPackage
               manifest.dependencies
               "https://github.com/masaeedu/purescript-record-optics-extra.git"

diff --git a/spago.dhall b/spago.dhall
@@ -5,7 +5,7 @@ You can edit this file as you like.
 { name =
     "my-project"
 , dependencies =
-    [ "effect", "console", "profunctor-lenses", "react", "react-basic", "avar", "variant", "typelevel-prelude", "heterogeneous", "const", "record", "record-optics-extra", "filterable" ]
+    [ "effect", "console", "profunctor-lenses", "react", "react-basic", "avar", "variant", "typelevel-prelude", "heterogeneous", "const", "record", "record-optics-extra", "filterable", "debug" ]
 , packages =
     ./packages.dhall
 }
diff --git a/src/Data/Profunctor/Optics.purs b/src/Data/Profunctor/Optics.purs
@@ -3,11 +3,14 @@ module Data.Profunctor.Optics where
 import Prelude
 
 import Control.Monad.State (evalState, get, put)
+import Data.Array (zipWith)
 import Data.Bifoldable (bifoldMap)
 import Data.Bifunctor (bimap, lmap) as B
 import Data.Either (Either(..), either)
-import Data.Foldable (class Foldable, and)
-import Data.Lens (Lens, Lens', Optic', first, left, lens)
+import Data.Filterable (class Filterable, filter)
+import Data.Foldable (class Foldable, and, length)
+import Data.Lens (Lens, Lens', Optic', first, left, lens, set, view)
+import Data.List (List(..), catMaybes)
 import Data.List as L
 import Data.Maybe (Maybe(..))
 import Data.Profunctor (class Profunctor, dimap, lcmap, rmap)
@@ -248,13 +251,21 @@ pt2lt :: forall s t a b. PTraversal s t a b -> LTraversal s t a b
 pt2lt f = runLTraversal' $ f $ LTraversal' single
   where
   -- Ideally we'd have type information that witnesses `pure` produces a one element list but whatever
-  single = { contents: pure, fill: (const <<< unsafeHead) }
+  single =
+    { contents: pure
+    , fill: const <<< unsafeHead
+    }
 
 -- Again we repeat all the bullshit to get the reverse direction for 2...
 pmt2lmt :: forall s a. PMonoTraversal s a -> LMonoTraversal s a
 pmt2lmt f = runLTraversal' $ f $ LTraversal' single
   where
-  single = { contents: pure, fill: (const <<< unsafeHead) }
+  single =
+    { contents: pure
+    , fill: case _ of
+            Nil -> identity
+            Cons x _ -> const x
+    }
 
 -- Et voila! Now we can write a little traversal in concrete form, transform it to a profunctor traversal,
 -- and apply it straight to a component!
@@ -294,15 +305,15 @@ overwriteWitherable l = flip evalState l <<< wither step
       L.Nil        -> pure Nothing
       L.Cons x xs' -> Just x <$ put xs'
 
-withered :: forall t a b. Witherable t => PTraversal (t a) (t b) a b
-withered = lt2pt
+iterated :: forall t a b. Witherable t => PTraversal (t a) (t b) a b
+iterated = lt2pt
   { contents: L.fromFoldable
   , fill: overwriteWitherable
   }
 
 
-withered' :: forall t a. Witherable t => PMonoTraversal (t a) a
-withered' = lmt2pmt
+iterated' :: forall t a. Witherable t => PMonoTraversal (t a) a
+iterated' = lmt2pmt
   { contents: L.fromFoldable
   , fill: overwriteWitherable
   }
@@ -317,8 +328,28 @@ partsOf' t = lens contents (flip fill)
   where
   { contents, fill } = pmt2lmt t
 
+withered :: forall t a b. Witherable t => PTraversal (t a) (t b) a (Maybe b)
+withered = lt2pt { contents, fill }
+  where
+  contents = L.fromFoldable
+  fill = catMaybes >>> overwriteWitherable
+
+withered' :: forall t a. Witherable t => PMonoTraversal (t a) (Maybe a)
+withered' = lmt2pmt { contents, fill }
+  where
+  contents = L.fromFoldable <<< map Just
+  fill = catMaybes >>> overwriteWitherable
+
 by :: forall p a. Profunctor p => (a -> Boolean) -> Optic' p a (Either a a)
 by f = dimap (\v -> if f v then Left v else Right v) (either identity identity)
 
 all :: forall t a. Functor t => Foldable t => HeytingAlgebra a => Eq a => Lens' (t a) a
 all = lens and (\s b -> if and s == b then s else b <$ s)
+
+overArray :: forall s t a b. Lens s t a b -> Lens (Array s) (Array t) (Array a) (Array b)
+overArray l = lens (map $ view l) (zipWith $ flip (set l))
+
+type Getter s a = forall p x. Profunctor p => p a x -> p s x
+
+countBy :: forall f x. Filterable f => Foldable f => (x -> Boolean) -> Getter (f x) Int
+countBy p = lcmap (filter p >>> length)
diff --git a/src/Main.purs b/src/Main.purs
@@ -2,7 +2,6 @@ module Main where
 
 import Prelude
 
-import Data.Array (replicate)
 import Data.Maybe (maybe)
 import Effect (Effect)
 import Effect.Aff (error, launchAff_)
@@ -13,23 +12,13 @@ import Effect.Ref as Ref
 import Snap (snap)
 import Snap.React (reactTarget, refSnapper)
 import Snap.SYTC.Component (contraHoist)
-import TodoMVC (App, app)
+import TodoMVC (app, initialState)
 import Web.DOM (Element)
 import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
 import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
--- Initial application state consists of three components
-state :: App
-state = replicate 3 s
-  where
-  s = { done: true
-      , hovered: false
-      , editing: false
-      , value: "Test value pls ignore"
-      }
-
 -- Finding the DOM element we're going to render everything onto
 element :: Effect Element
 element = do
@@ -40,7 +29,7 @@ main :: Effect Unit
 main = do
   -- Find the DOM element and create an Ref to hold the application state
   e <- element
-  ref <- liftEffect $ Ref.new state
+  ref <- liftEffect $ Ref.new initialState
   launchAff_ $ do
     av  <- AVar.empty
     -- Create the state manager and target from the resources above

diff --git a/src/Snap/Component.purs b/src/Snap/Component.purs
@@ -87,12 +87,12 @@ instance monoidalMonoComponent :: Monoid v => MonoidalMono (PComponent m v) wher
 focus :: forall m v s u x y. Newtype x y => (PComponent m v s u -> x) -> Cmp m v s u -> y
 focus = under ρ
 
-infixl 8 focus as $!
+infixl 1 focus as $!
 
 flippedFocus :: forall m v s u x y. Newtype x y => Cmp m v s u -> (PComponent m v s u -> x) -> y
 flippedFocus = flip focus
 
-infixr 8 flippedFocus as #!
+infixl 1 flippedFocus as #!
 
 -- Monad wrapper
 newtype MComponent s u m v

diff --git a/src/Snap/React/Component.js b/src/Snap/React/Component.js