Changed Refs api

src/Reactix/Hooks.purs

@@ -8,7 +8,7 @@ module Reactix.Hooks
   -- , useReducer, useReducer'
   -- , useContext
   -- , useMemo, useMemo1, useMemo2 --, useMemo3, useMemo4, useMemo5
-  , Ref, useRef
+  , Ref, useRef, readRef, setRef
   -- , useDebugValue, useDebugValue'
   -- , useImperativeHandle
   )
@@ -19,7 +19,7 @@ import Data.Function.Uncurried ( Fn2, mkFn2, runFn2 )
 import Data.Tuple ( Tuple(..) )
 import Effect ( Effect )
 import Effect.Uncurried ( EffectFn1, runEffectFn1, EffectFn2, runEffectFn2, EffectFn3, runEffectFn3, EffectFn4, runEffectFn4, EffectFn5, runEffectFn5, EffectFn6, runEffectFn6 )
-import FFI.Simple ( (...), delay, args2, args3, args4, args5 )
+import FFI.Simple ( (...), (..), delay, args2, args3, args4, args5, setProperty )
 import DOM.Simple.Console 
 
 import Reactix.React ( Hooks, react, unsafeHooksEffect )
@@ -34,7 +34,7 @@ type State state = Tuple state (state -> Effect Unit)
 
 -- | Given an Effect function returning an initial value, returns a State
 useState :: forall s. (Unit -> Effect s) -> Hooks (State s)
-useState s = hook $ \_ -> pure $ currySecond $ react ... "useState" $ [ delay s ]
+useState s = hook $ \_ -> pure $ currySecond $ tuple $ react ... "useState" $ [ delay s ]
 -- -- useReducer
 
 -- type Reducer state action = Tuple state (EffectFn1 action Unit)
@@ -142,10 +142,19 @@ useLayoutEffect5 a b c d f e = _useLayoutEffect e $ args5 a b c d f
 
 -- useRef
 
-type Ref state = Tuple state (state -> Effect Unit)
+foreign import data Ref :: Type -> Type
 
 useRef :: forall r. r -> Hooks (Ref r)
-useRef r = hook $ \_ -> pure $ currySecond $ tupleCurrent $ react ... "useRef" $ [ r ]
+useRef r = hook $ \_ -> pure $ react ... "useRef" $ [ r ]
+
+readRef :: forall r. Ref r -> r
+readRef r = r .. "current"
+
+setRef :: forall r. Ref r -> r -> Effect Unit
+setRef r v = delay $ \_ -> do
+   _ <- pure $ setProperty "current" r v
+   pure unit
+
 
 -- useContext
 

test/Reactix/React/Spec.purs

@@ -23,8 +23,7 @@ import DOM.Simple.Event as Event
 import Reactix as R
 import Reactix.Test as RT
 import Reactix.DOM.Raw ( button, div, i, text )
-import Reactix.Hooks ( useState, useEffect, useLayoutEffect )
-
+import DOM.Simple.Console
 staticTest :: Spec Unit
 staticTest =
   describe "Basic DOM rendering" $ do
@@ -49,9 +48,9 @@ counterCpt :: R.Component CounterProps
 counterCpt = R.hooksComponent "Counter" cpt
   where
     cpt {count} _ = do
-      y /\ setY <- useState $ \_ -> pure count
+      y /\ setY <- R.useState $ \_ -> pure count
       pure $ div { className: "counter" }
-        [ button { type: "button", onClick: onclick setY (y + 1) } [ text "++" ]
+        [ button { type: "button",  onClick: onclick setY (y + 1) } [ text "++" ]
         , div {} [ text (show y) ] ]
     onclick set to = mkEffectFn1 $ \e -> set to
 
@@ -98,7 +97,7 @@ type EffectorProps = ( stateRef :: Ref.Ref EffectorState )
 effectorCpt :: R.Component EffectorProps
 effectorCpt = R.hooksComponent "Effector" cpt
   where cpt {stateRef} _ = do
-          useEffect $ \_ -> do
+          R.useEffect $ \_ -> do
             Ref.write Initialised stateRef
             pure $ \_ -> Ref.write Done stateRef
           pure $ div {} []
@@ -126,7 +125,7 @@ effectorTest =
 layoutEffectorCpt :: R.Component EffectorProps
 layoutEffectorCpt = R.hooksComponent "LayoutEffector" cpt
   where cpt {stateRef} _ = do
-          useLayoutEffect $ \_ -> do
+          R.useLayoutEffect $ \_ -> do
             Ref.write Initialised stateRef
             pure $ \_ -> Ref.write Done stateRef
           pure $ div {} []
@@ -156,7 +155,7 @@ type ContextProps = ()
 -- contextualCpt :: R.Component ContextProps
 -- contextualCpt = R.hooksComponent "Contextual" cpt
 --   where cpt {stateRef} _ = do
---           useEffect $ \_ -> do
+--           R.useEffect $ \_ -> do
 --             Ref.write Initialised stateRef
 --             pure $ \_ -> Ref.write Done stateRef
 --           pure $ div {} []