Expand Aff example, adjust Tuple exports

Author: Madeline Trotter

.gitignore

@@ -7,3 +7,4 @@
 /.psc*
 /.purs*
 /.psa*
+/.vscode/

examples/aff/src/AffEx.purs

@@ -2,47 +2,103 @@ module AffEx where
 
 import Prelude
 
-import Data.Either (Either(..))
-import Data.Maybe (Maybe(..))
+import Data.Either (either)
+import Data.Maybe (Maybe(..), maybe)
 import Effect.Aff (Aff, Milliseconds(..), delay, error, message, throwError)
 import React.Basic.DOM as R
 import React.Basic.Events (handler_)
-import React.Basic.Hooks (CreateComponent, component, fragment, (/\))
+import React.Basic.Hooks (type (/\), CreateComponent, Hook, JSX, component, element, fragment, useState, (/\))
 import React.Basic.Hooks as React
 import React.Basic.Hooks.Aff (useAff)
-import React.Basic.Hooks.ResetToken (useResetToken)
 
 mkAffEx :: CreateComponent {}
 mkAffEx = do
+  -- A component for fetching and rendering a Cat entity.
+  catDetails <- mkCatDetails
+
   component "AffEx" \props -> React.do
-    let id = 0 -- pretend this is a prop
-    resetToken /\ reset <- useResetToken
-    r1 <- useAff (id /\ resetToken) delayedSuccess
-    r2 <- useAff (id /\ resetToken) delayedFailure
-
-    pure $ fragment
-      [ R.button
-          { onClick: handler_ reset
-          , children: [ R.text "Reset" ]
-          }
-      , showResult 1 r1
-      , showResult 2 r2
-      ]
+    catKey /\ catChooser <- useCatKeyChooser
+
+    pure $ R.div
+        { style: R.css { display: "flex", flexFlow: "column" }
+        , children:
+            [ R.h2_ [ R.text "Cat chooser" ]
+            , R.p_
+                [ R.text $
+                    "Select a key to fetch! If you get bored (how would you even!?) " <>
+                    "try holding your arrow keys to select really fast! The result " <>
+                    "always matches the chosen key."
+                ]
+            , catChooser
+            , R.p_
+                [ case catKey of
+                    Nothing -> mempty
+                    Just k -> element catDetails { catKey: k }
+                ]
+            ]
+        }
   where
-    showResult n r =
-      R.div_
-        [ R.text $ "Request " <> show n <> ": " <> case r of
-            Nothing -> "loading..."
-            Just (Left err) -> message err
-            Just (Right msg) -> msg
+    -- This hook packages up some interactive UI and the current
+    -- selection the user has made via that UI.
+    useCatKeyChooser :: Hook _ ((Maybe (Key Cat)) /\ JSX)
+    useCatKeyChooser = React.do
+      catKey /\ setCatKey <- useState Nothing
+      let
+        catChoice key =
+          R.label_
+            [ R.input
+                { type: "radio"
+                , name: "cat-key"
+                , checked: Just key == catKey
+                , onChange: handler_ do
+                    setCatKey \_ -> Just key
+                }
+            , R.text $ showCatKey key
+            ]
+
+        showCatKey :: Key Cat -> String
+        showCatKey (Key key) = "Cat " <> key
+
+      pure $ catKey /\ fragment
+        [ catChoice $ Key "abc"
+        , catChoice $ Key "def"
+        , catChoice $ Key "xyz"
         ]
 
-delayedSuccess :: Aff String
-delayedSuccess = do
-  delay $ Milliseconds 1000.0
-  pure "Success!"
+    -- Hooks can't be used conditionally but components can!
+    -- Not needing to deal with a `Maybe` key simplifies this
+    -- compoennt a bit.
+    mkCatDetails :: CreateComponent { catKey :: Key Cat }
+    mkCatDetails = do
+      component "CatDetails" \{ catKey } -> React.do
+        cat <- useAff catKey $ fetch catKey
+        pure $ R.text $
+          maybe "Loading..." (either message showCat) cat
+      where
+        showCat (Cat { name }) = "A cat named " <> name
+
+
+-- Typed keys are a great way to tie entity-specific behavior
+-- to an ID. We can use this phantom type to write a class
+-- for generic, type-safe data fetching.
+newtype Key entity = Key String
+derive instance eqKey :: Eq (Key entity)
+
+class Fetch entity where
+  fetch :: Key entity -> Aff entity
+
+
+-- An example entity
+newtype Cat = Cat { name :: String }
 
-delayedFailure :: Aff String
-delayedFailure = do
-  delay $ Milliseconds 2000.0
-  throwError $ error "Failure!"
+instance fetchCat :: Fetch Cat where
+  fetch = case _ of
+    Key "abc" -> do
+      delay $ Milliseconds 300.0
+      pure $ Cat { name: "Herb" }
+    Key "def" -> do
+      delay $ Milliseconds 600.0
+      pure $ Cat { name: "Maxi" }
+    _ -> do
+      delay $ Milliseconds 900.0
+      throwError $ error "Cat not found (intended example behavior 😅)"

examples/context/src/Context.purs

@@ -6,7 +6,7 @@ import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import React.Basic.DOM as R
 import React.Basic.Events (handler_)
-import React.Basic.Hooks (Context, CreateComponent, JSX, Tuple, component, contextProvider, createContext, element, fragment, useContext, useState, (/\))
+import React.Basic.Hooks (Context, CreateComponent, JSX, type (/\), component, contextProvider, createContext, element, fragment, useContext, useState, (/\))
 import React.Basic.Hooks as React
 
 mkContext :: CreateComponent {}
@@ -27,7 +27,7 @@ mkContext = do
       }
 
 mkStore
-  :: Context (Tuple Int (Effect Unit))
+  :: Context (Int /\ (Effect Unit))
   -> CreateComponent { children :: Array JSX }
 mkStore context = do
   component "Store" \{ children } -> React.do
@@ -39,7 +39,7 @@ mkStore context = do
         (fragment children)
 
 mkCounter
-  :: Context (Tuple Int (Effect Unit))
+  :: Context (Int /\ (Effect Unit))
   -> CreateComponent {}
 mkCounter counterContext = do
   component "Counter" \props -> React.do

examples/refs/src/Refs.purs

@@ -7,7 +7,7 @@ import Data.Maybe (Maybe(..))
 import Data.Nullable (Nullable, null)
 import Math (pow, sqrt)
 import React.Basic.DOM as R
-import React.Basic.Hooks (CreateComponent, Ref, Tuple, UseEffect, UseRef, UseState, Hook, component, element, fragment, readRefMaybe, useEffect, useRef, useState, (/\))
+import React.Basic.Hooks (CreateComponent, Ref, UseEffect, UseRef, UseState, Hook, type (/\), component, element, fragment, readRefMaybe, useEffect, useRef, useState, (/\))
 import React.Basic.Hooks as React
 import Unsafe.Coerce (unsafeCoerce)
 import Web.DOM (Node)
@@ -46,7 +46,7 @@ mkRefs = do
 
 type UseNodeDistance hooks = UseEffect Unit (UseState Int (UseRef (Nullable Node) hooks))
 
-useNodeDistanceFromMouse :: Hook UseNodeDistance (Tuple Int (Ref (Nullable Node)))
+useNodeDistanceFromMouse :: Hook UseNodeDistance (Int /\ (Ref (Nullable Node)))
 useNodeDistanceFromMouse = React.do
   elementRef <- useRef null
   mouseDistance /\ setMouseDistance <- useState 0

src/React/Basic/Hooks.purs

@@ -50,11 +50,10 @@ module React.Basic.Hooks
   , discard
   , displayName
   , module React.Basic
-  , module Data.Tuple
   , module Data.Tuple.Nested
   ) where
 
-import Prelude hiding (bind, discard)
+import Prelude hiding (bind,discard)
 
 import Control.Applicative.Indexed (class IxApplicative)
 import Control.Apply.Indexed (class IxApply)
@@ -65,10 +64,11 @@ import Data.Maybe (Maybe)
 import Data.Newtype (class Newtype)
 import Data.Nullable (Nullable, toMaybe)
 import Data.Tuple (Tuple(..))
-import Data.Tuple.Nested (tuple2, (/\))
+import Data.Tuple.Nested (type (/\), (/\))
 import Effect (Effect)
 import Effect.Uncurried (EffectFn1, EffectFn2, EffectFn3, mkEffectFn1, runEffectFn1, runEffectFn2, runEffectFn3)
 import Prelude (bind) as Prelude
+import Prim.Row (class Lacks)
 import React.Basic (JSX, ReactComponent, empty, keyed, fragment, element, elementKeyed)
 import Type.Equality (class TypeEquals)
 import Unsafe.Coerce (unsafeCoerce)
@@ -84,7 +84,9 @@ type CreateComponent props = Effect (ReactComponent props)
 -- | lifecycles or render functions.
 component
   :: forall hooks props
-   . String
+   . Lacks "key" props
+  => Lacks "ref" props
+  => String
   -> ({ | props } -> Render Unit hooks JSX)
   -> CreateComponent { | props }
 component name renderFn =
@@ -105,7 +107,7 @@ foreign import data UseState :: Type -> Type -> Type
 useState
   :: forall state
    . state
-  -> Hook (UseState state) (Tuple state ((state -> state) -> Effect Unit))
+  -> Hook (UseState state) (state /\ ((state -> state) -> Effect Unit))
 useState initialState = Render do
   runEffectFn2 useState_ (mkFn2 Tuple) initialState
 
@@ -135,7 +137,7 @@ useReducer
   :: forall state action
    . state
   -> (state -> action -> state)
-  -> Hook (UseReducer state action) (Tuple state (action -> Effect Unit))
+  -> Hook (UseReducer state action) (state /\ (action -> Effect Unit))
 useReducer initialState reducer = Render do
   runEffectFn3 useReducer_
     (mkFn2 Tuple)
@@ -286,9 +288,9 @@ foreign import unsafeSetDisplayName
 foreign import useState_
   :: forall state
    . EffectFn2
-       (forall a b. Fn2 a b (Tuple a b))
+       (forall a b. Fn2 a b (a /\ b))
        state
-       (Tuple state ((state -> state) -> Effect Unit))
+       (state /\ ((state -> state) -> Effect Unit))
 
 foreign import useEffect_
   :: forall key
@@ -309,10 +311,10 @@ foreign import useLayoutEffect_
 foreign import useReducer_
   :: forall state action
    . EffectFn3
-       (forall a b. Fn2 a b (Tuple a b))
+       (forall a b. Fn2 a b (a /\ b))
        (Fn2 state action state)
        state
-       (Tuple state (action -> Effect Unit))
+       (state /\ (action -> Effect Unit))
 
 foreign import readRef_
   :: forall a

src/React/Basic/Hooks/Aff.purs

@@ -10,14 +10,16 @@ import React.Basic.Hooks (Hook, UseEffect, UseState, useEffect, useState, (/\))
 import React.Basic.Hooks as React
 
 type UseAff key a hooks =
-  UseEffect key (UseState (Maybe (Either Error a)) hooks)
+  UseEffect key (UseState (Result a) hooks)
+
+type Result a = Maybe (Either Error a)
 
 useAff
   :: forall key a
    . Eq key
   => key
   -> Aff a
-  -> Hook (UseAff key a) (Maybe (Either Error a))
+  -> Hook (UseAff key a) (Result a)
 useAff key aff = React.do
   result /\ setResult <- useState Nothing
   useEffect key do

src/React/Basic/Hooks/ResetToken.purs

@@ -8,14 +8,16 @@ import Prelude
 
 import Effect (Effect)
 import Effect.Unsafe (unsafePerformEffect)
-import React.Basic.Hooks (Hook, Tuple, UseState, useState, (/\))
+import React.Basic.Hooks (Hook, UseState, type (/\), useState, (/\))
 import React.Basic.Hooks as React
 import Unsafe.Coerce (unsafeCoerce)
 import Unsafe.Reference (unsafeRefEq)
 
 type UseResetToken = UseState ResetToken
 
-useResetToken :: Hook UseResetToken (Tuple ResetToken (Effect Unit))
+-- Useful for resetting effects or component state in place of a
+-- real key, i.e. a "reset" or "force rerender" button.
+useResetToken :: Hook UseResetToken (ResetToken /\ (Effect Unit))
 useResetToken = React.do
   resetToken /\ setResetToken <- useState initialResetToken
   let