Add useAff and useResetToken

Madeline Trotter · Madeline Trotter · commit e8a708ef2ee3 · 2019-06-10T00:33:40.000-07:00
diff --git a/bower.json b/bower.json
@@ -17,7 +17,8 @@
     "purescript-effect": "^2.0.0",
     "purescript-react-basic": "^8.0.0 || ^9.0.0",
     "purescript-indexed-monad": "^1.0.0",
-    "purescript-unsafe-reference": "^3.0.1"
+    "purescript-unsafe-reference": "^3.0.1",
+    "purescript-aff": "^5.1.1"
   },
   "devDependencies": {
     "purescript-psci-support": "^4.0.0"
diff --git a/examples/aff/.gitignore b/examples/aff/.gitignore
@@ -0,0 +1,4 @@
+output
+html/index.js
+package-lock.json
+node_modules
diff --git a/examples/aff/Makefile b/examples/aff/Makefile
@@ -0,0 +1,8 @@
+all: node_modules
+	purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
+	purs bundle -m Main --main Main output/*/*.js > output/bundle.js
+	node_modules/.bin/browserify output/bundle.js -o html/index.js
+
+node_modules:
+	npm install
+
diff --git a/examples/aff/README.md b/examples/aff/README.md
@@ -0,0 +1,11 @@
+# Aff Example
+
+## Building
+
+```sh
+make
+```
+
+This will compile the PureScript source files, bundle them, and use Browserify to combine PureScript and NPM sources into a single bundle.
+
+Then open `html/index.html` in your browser.
diff --git a/examples/aff/html/index.html b/examples/aff/html/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>react-basic example</title>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/examples/aff/package.json b/examples/aff/package.json
@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "react": "16.8.6",
+    "react-dom": "16.8.6"
+  },
+  "devDependencies": {
+    "browserify": "16.2.3"
+  }
+}
diff --git a/examples/aff/src/AffEx.purs b/examples/aff/src/AffEx.purs
@@ -0,0 +1,47 @@
+module AffEx where
+
+import Prelude
+
+import Data.Either (Either(..))
+import Data.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 as React
+import React.Basic.Hooks.Aff (useAff)
+import React.Basic.Hooks.ResetToken (useResetToken)
+
+mkAffEx :: CreateComponent {}
+mkAffEx = do
+  component "AffEx" \props -> React.do
+    resetToken /\ reset <- useResetToken
+    r1 <- useAff resetToken delayedSuccess
+    r2 <- useAff resetToken delayedFailure
+
+    pure $ fragment
+      [ R.button
+          { onClick: handler_ reset
+          , children: [ R.text "Reset" ]
+          }
+      , showResult 1 r1
+      , showResult 2 r2
+      ]
+  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
+        ]
+
+delayedSuccess :: Aff String
+delayedSuccess = do
+  delay $ Milliseconds 1000.0
+  pure "Success!"
+
+delayedFailure :: Aff String
+delayedFailure = do
+  delay $ Milliseconds 2000.0
+  throwError $ error "Failure!"
diff --git a/examples/aff/src/Main.purs b/examples/aff/src/Main.purs
@@ -0,0 +1,24 @@
+module Main where
+
+import Prelude
+
+import AffEx (mkAffEx)
+import Data.Maybe (Maybe(..))
+import Effect (Effect)
+import Effect.Exception (throw)
+import React.Basic.Hooks(element)
+import React.Basic.DOM (render)
+import Web.DOM.NonElementParentNode (getElementById)
+import Web.HTML (window)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.Window (document)
+
+main :: Effect Unit
+main = do
+  container <- getElementById "container" =<< (map toNonElementParentNode $ document =<< window)
+  case container of
+    Nothing -> throw "Container element not found."
+    Just c  -> do
+      affEx <- mkAffEx
+      let app = element affEx {}
+      render app c
diff --git a/src/React/Basic/Hooks.purs b/src/React/Basic/Hooks.purs
@@ -177,24 +177,24 @@ foreign import createContext :: forall a. Effect (Context a)
 contextProvider :: forall a. Context a -> a -> JSX -> JSX
 contextProvider context a child = element (contextProvider_ context) { value: a, children: child }
 
-foreign import data UseMemo :: Type -> Type -> Type
+foreign import data UseMemo :: Type -> Type -> Type -> Type
 
 useMemo
   :: forall key a
    . Eq key
   => key
   -> (Unit -> a)
-  -> Hook (UseMemo a) a
+  -> Hook (UseMemo key a) a
 useMemo key computeA = Render (runEffectFn3 useMemo_ (mkFn2 eq) key computeA)
 
-foreign import data UseCallback :: Type -> Type -> Type
+foreign import data UseCallback :: Type -> Type -> Type -> Type
 
 useCallback
   :: forall key a
    . Eq key
   => key
   -> a
-  -> Hook (UseCallback a) a
+  -> Hook (UseCallback key a) a
 useCallback key computeA = Render (runEffectFn3 useCallback_ (mkFn2 eq) key computeA)
 
 foreign import data UseEqCache :: Type -> Type -> Type
@@ -203,7 +203,7 @@ useEqCache
   :: forall a
    . Eq a
   => a
-  -> Hook (UseCallback a) a
+  -> Hook (UseCallback a a) a
 useEqCache a = Render (runEffectFn2 useEqCache_ (mkFn2 eq) a)
 
 newtype UnsafeReference a = UnsafeReference a
diff --git a/src/React/Basic/Hooks/Aff.purs b/src/React/Basic/Hooks/Aff.purs
@@ -0,0 +1,29 @@
+module React.Basic.Hooks.Aff where
+
+import Prelude
+
+import Data.Either (Either)
+import Data.Maybe (Maybe(..))
+import Effect.Aff (Aff, error, killFiber, launchAff_, runAff)
+import Effect.Exception (Error)
+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)
+
+useAff
+  :: forall key a
+   . Eq key
+  => key
+  -> Aff a
+  -> Hook (UseAff key a) (Maybe (Either Error a))
+useAff key aff = React.do
+  result /\ setResult <- useState Nothing
+  useEffect key do
+    setResult (const Nothing)
+    fiber <- runAff (setResult <<< const <<< Just) aff
+    pure do
+      launchAff_ do
+        killFiber (error "Effect hook discarded.") fiber
+  pure result
diff --git a/src/React/Basic/Hooks/ResetToken.purs b/src/React/Basic/Hooks/ResetToken.purs
@@ -0,0 +1,36 @@
+module React.Basic.Hooks.ResetToken
+  ( UseResetToken
+  , ResetToken
+  , useResetToken
+  ) where
+
+import Prelude
+
+import Effect (Effect)
+import Effect.Unsafe (unsafePerformEffect)
+import React.Basic.Hooks (Hook, Tuple, UseState, 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))
+useResetToken = React.do
+  resetToken /\ setResetToken <- useState initialResetToken
+  let
+    reset = do
+      resetToken' <- createResetToken
+      setResetToken \_ -> resetToken'
+  pure (resetToken /\ reset)
+
+foreign import data ResetToken :: Type
+
+instance eqResetToken :: Eq ResetToken where
+  eq = unsafeRefEq
+
+createResetToken :: Effect ResetToken
+createResetToken = unsafeCoerce \_ -> {}
+
+initialResetToken :: ResetToken
+initialResetToken = unsafePerformEffect createResetToken
