react router update

react-routing/README.md → react-context-router/README.md

@@ -1,12 +1,6 @@
-# React Routing
+# spago-react-scaffold
 
 Build the project
-
-Build and install all spago and npm packages
-``` sh
-make build-all
-```
-Build and install spago packages
 ``` sh
 make build
 ```

react-routing/spago.dhall → react-context-router/spago.dhall

@@ -7,6 +7,7 @@ You can edit this file as you like.
     [ "console"
     , "effect"
     , "exceptions"
+    , "generics-rep"
     , "psci-support"
     , "react-basic"
     , "react-basic-hooks"

react-context-router/src/Component/Router.purs

@@ -0,0 +1,66 @@
+module Component.Router where
+
+import Prelude
+import Data.Either ( hush )
+import Data.Maybe ( fromMaybe )
+-- Internal Page
+import Page.Home as Home
+import Page.About as About
+-- Internal Service
+import Service.Route
+import Service.Navigate
+-- Internal Component
+import Component.Store ( mkRouteStore )
+-- Effect
+import Effect ( Effect )
+-- Routing
+import Routing.Duplex ( parse )
+import Routing.Hash ( getHash )
+-- React
+import React.Basic.Hooks ( ReactComponent, ReactContext )
+import React.Basic.Hooks as React
+import React.Basic.DOM as RD
+import React.Basic.Events as RE
+
+mkComponent :: Effect ( ReactComponent {} )
+mkComponent = do
+  mInitialRoute <- hush <<< ( parse routeCodec ) <$> getHash
+  routeContext <- React.createContext ( fromMaybe Home mInitialRoute )
+  store <- mkRouteStore routeContext
+  router <- mkRouter routeContext
+  React.component "RouterContainer" \props -> do
+    pure $ React.element store { content: [ React.element router {} ]}
+
+mkRouter
+  :: ReactContext Route
+  -> Effect ( ReactComponent {} )
+mkRouter routeContext = do
+  home <- Home.mkComponent
+  about <- About.mkComponent
+  navbar <- mkNavbar
+  React.component "Router" \props -> React.do
+    route <- React.useContext routeContext
+    pure
+      $ React.fragment
+        [ React.element navbar {}
+        , case route of
+             Home -> React.element home {}
+             About -> React.element about {}
+        ]
+
+mkNavbar :: Effect ( ReactComponent {} )
+mkNavbar =
+  React.component "Navbar" $ const $ do
+    pure
+      $ RD.nav
+        { children:
+          [ RD.button
+            { children: [ RD.text "Home" ]
+            , onClick: RE.handler_ $ navigate Home
+            }
+          , RD.button
+            { children: [ RD.text "About" ]
+            , onClick: RE.handler_ $ navigate About
+            }
+          ]
+        }

react-context-router/src/Component/Store.purs

@@ -0,0 +1,24 @@
+module Component.Store where
+
+import Prelude
+import Data.Maybe ( Maybe(..) )
+-- Internal Service
+import Service.Route
+-- Effect
+import Effect ( Effect )
+-- Routing
+import Routing.Hash ( matchesWith )
+import Routing.Duplex ( parse )
+-- React
+import React.Basic.Hooks ( ReactComponent, ReactContext, (/\), JSX )
+import React.Basic.Hooks as React
+
+mkRouteStore :: ReactContext Route -> Effect ( ReactComponent { content :: Array JSX } )
+mkRouteStore context =
+  React.component "Store" \props -> React.do
+    r <- React.useContext context
+    route /\ setRoute <- React.useState r
+    React.useEffect route $ matchesWith ( parse routeCodec ) \mOld new -> do
+      when ( mOld /= Just new ) $ setRoute $ const new
+    pure
+      $ React.provider context route props.content

react-context-router/src/Main.purs

@@ -0,0 +1,26 @@
+module Main where
+
+import Prelude
+import Data.Maybe ( Maybe(..) )
+-- Web
+import Web.DOM.NonElementParentNode ( getElementById )
+import Web.HTML.HTMLDocument ( toNonElementParentNode )
+import Web.HTML.Window ( document )
+import Web.HTML ( window )
+-- Internal
+import Component.Router as Router
+-- Effect
+import Effect ( Effect )
+import Effect.Exception ( throw )
+-- React
+import React.Basic.Hooks ( element )
+import React.Basic.DOM as R
+
+main :: Effect Unit
+main = do
+  mApp <- getElementById "app" =<< ( map toNonElementParentNode $ document =<< window )
+  case mApp of
+    Nothing -> throw "App element not found."
+    Just app -> do
+      mainComponent <- Router.mkComponent
+      R.render ( element mainComponent {} ) app

react-context-router/src/Page/About.purs

@@ -0,0 +1,15 @@
+module Page.About where
+
+import Prelude
+
+-- Effect
+import Effect ( Effect )
+-- React
+import React.Basic.Hooks ( ReactComponent )
+import React.Basic.Hooks as React
+import React.Basic.DOM as RD
+
+mkComponent :: Effect ( ReactComponent {} )
+mkComponent =
+  React.component "About" $ const $ do
+    pure $ RD.h1 { children: [ RD.text "About" ] }

react-context-router/src/Page/Home.purs

@@ -0,0 +1,15 @@
+module Page.Home where
+
+import Prelude
+
+-- Effect
+import Effect ( Effect )
+-- React
+import React.Basic.Hooks ( ReactComponent )
+import React.Basic.Hooks as React
+import React.Basic.DOM as RD
+
+mkComponent :: Effect ( ReactComponent {} )
+mkComponent =
+  React.component "Home" $ const $ do
+    pure $ RD.h1 { children: [ RD.text "Home" ] }

react-routing/src/Service/Navigate.purs → react-context-router/src/Service/Navigate.purs

@@ -6,12 +6,11 @@ import Service.Route
 -- Effect
 import Effect ( Effect )
 -- Routing
-import Routing.Duplex
-import Routing.Hash
+import Routing.Hash ( setHash )
+import Routing.Duplex ( print )
 
 class Monad m <= Navigate m where
   navigate :: Route -> m Unit
 
 instance navigateEffect :: Navigate Effect where
-  navigate :: Route -> Effect Unit
   navigate = setHash <<< print routeCodec

react-routing/src/Service/Route.purs → react-context-router/src/Service/Route.purs

@@ -1,14 +1,13 @@
 module Service.Route where
 
-import Prelude hiding ((/))
-
+import Prelude hiding ( (/) )
 -- Generic
 import Data.Generic.Rep ( class Generic )
 import Data.Generic.Rep.Show ( genericShow )
 -- Routing
-import Routing.Duplex
-import Routing.Duplex.Generic
-import Routing.Duplex.Generic.Syntax ( (/) )
+import Routing.Duplex ( root, RouteDuplex' )
+import Routing.Duplex.Generic ( noArgs, sum )
+import Routing.Duplex.Generic.Syntax ((/))
 
 data Route
   = Home

react-routing/src/Component/Router.purs

@@ -1,57 +0,0 @@
-module Component.Router where
-
-import Prelude
-import Data.Maybe ( fromMaybe )
-import Data.Either ( hush )
-import Page.Home as Home
-import Page.About as About
-import Service.Route
-import Service.Navigate
-import Effect.Class ( class MonadEffect, liftEffect )
-import Routing.Duplex
-import Routing.Hash
-import React.Basic.Hooks ( ReactComponent, createContext, component, element )
-import React.Basic.Hooks as React
-import React.Basic.DOM as R
-import React.Basic.Events as RE
-import React.Basic.DOM.Events as RE
-
-mkRouter :: forall m. MonadEffect m => Navigate m => m ( ReactComponent { route :: Route } )
-mkRouter = liftEffect $ do
-  initialRoute <- hush <<< ( parse routeCodec ) <$> getHash
-  navigate $ fromMaybe Home initialRoute
-  home <- Home.mkPage
-  about <- About.mkPage
-  component "Router" $ \props -> React.do
-    pure
-      $ React.fragment
-        [ R.button
-          { children: [ R.text "Home" ]
-          , onClick: RE.handler
-            ( RE.preventDefault >>> RE.targetValue ) $ const $ navigate Home
-          , className: isActiveClass $ props.route == Home
-          }
-        , R.button
-          { children: [ R.text "About" ]
-          , onClick: RE.handler
-            ( RE.preventDefault >>> RE.targetValue ) $ const $ navigate About
-          , className: isActiveClass $ props.route == About
-          }
-          -- Matching route
-        , R.div
-          { children: pure $ case props.route of
-              Home -> element home {}
-              About -> element about {}
-          }
-        ]
-  where
-    isActiveClass :: Boolean -> String
-    isActiveClass con =
-      if con
-      then "is-active"
-      else ""

react-routing/src/Main.purs

@@ -1,38 +0,0 @@
-module Main where
-
-import Prelude
-import Data.Maybe ( Maybe(..) )
-import Service.Route
-import Service.Navigate ( navigate )
-import Component.Router as Router
-import Web.DOM.NonElementParentNode ( getElementById )
-import Web.HTML.HTMLDocument ( toNonElementParentNode )
-import Web.HTML.Window ( document )
-import Web.HTML ( window )
-import Effect ( Effect )
-import Effect.Exception ( throw )
-import Routing.Duplex ( parse )
-import Routing.Hash ( getHash, matchesWith )
-import React.Basic.Hooks ( element, ReactComponent, component )
-import React.Basic.DOM as R
-
-main :: Effect Unit
-main = do
-  mApp <- getElementById "app" =<< ( map toNonElementParentNode $ document =<< window )
-  case mApp of
-    Nothing -> throw "App element not found."
-    Just app -> do
-      -- Component is initialized
-      rootComponent <- Router.mkRouter
-      -- Watches for route change
-      void $ matchesWith ( parse routeCodec ) \mOld new ->
-        -- When it matches the old or previous route it will not do anything.
-        -- Therefore not wasting a re-render.
-        when ( mOld /= Just new  ) do
-          R.render ( element rootComponent { route: new } ) app

react-routing/src/Page/About.purs

@@ -1,16 +0,0 @@
-module Page.About where
-
-import Prelude
-
-import Effect ( Effect )
-import React.Basic.Hooks ( ReactComponent, component )
-import React.Basic.DOM as R
-
-mkPage :: Effect ( ReactComponent {} )
-mkPage = do
-  component "About" $ const $ React.do
-    pure
-      $ R.h1_
-      [ R.text "About" ]

react-routing/src/Page/Home.purs

@@ -1,15 +0,0 @@
-module Page.Home where
-
-import Prelude
-
-import Effect ( Effect )
-import React.Basic.Hooks ( ReactComponent, component )
-import React.Basic.DOM as R
-
-mkPage :: Effect ( ReactComponent {} )
-mkPage = do
-  component "Home" $ const $ React.do
-    pure
-      $ R.h1_ [ R.text "Home" ]