Merge branch 'feature/toestand-global-state' of...

Merge branch 'feature/toestand-global-state' of ssh://gitlab.iscpif.fr:20022/gargantext/purescript-gargantext into dev-merge

REACTIX.md

@@ -401,15 +401,324 @@ And with that, we've covered the entire lifecycle:
 
 And all of that controlled by just a render function!
 
-### Reconciliation with reality
+## Handling state with Toestand
 
-So far, we've largely glossed over the part that links the virtual DOM
-with the real DOM. This is react's [reconciliation algorithm.](https://reactjs.org/docs/reconciliation.html).
+Dealing with state storage in React can seem a bit daunting at
+first. There are too many options and it's not always obvious which
+you need. On top of that, if you change later, you have to rewrite a
+lot of code.
+
+Toestand is a new purescript library built on top of Reactix. It aims
+to provide one extremely flexible state type, `Toestand.Box a` that is
+suitable for the majority of usecases.
+
+Passed as a property, a `Box` is like a Reactix Ref - irrelevant for
+prop diffing purposes. Changing the value stored in the box does not
+cause a rerender by itself.
+
+With the `Toestand.useLive` hook, a component can opt in to rerender
+when the value changes (like a `State`, but sharing the same
+type!). While most of the time you will want to check equality, you
+can provide a custom predicate and only rerender when you want to.
+
+### My first box
+
+Let's pick up our counter from earlier and rewrite it to use
+Toestand. Not much code actually changes, it's pretty similar to
+before:
+
+```purescript
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Toestand as T
+
+counterCpt :: R.Component Counter
+counterCpt = R.hooksComponent "counter" cpt where
+  cpt { initialCount } _children = do
+    -- Create the box with the initial value
+    box <- T.useBox initialCount
+    -- Subscribe to a live count when it changes
+    count <- T.useLive T.unequal box
+    pure $ H.div {}
+      [ button { box }
+      , clicks { clicks: count } ]
+
+-- The button now takes a box instead of a setter function.
+type Button = ( setter :: T.Box Int )
+
+buttonCpt :: R.Component Button
+buttonCpt = R.hooksComponent "button" cpt where
+  cpt { box } _children =
+    pure $ H.button { on: { click } } [ H.text "Don't click me" ] where
+      -- Increment the value in the box
+      click _event = T.modify_ (_ + 1) } box
+
+-- Everything else is identical and here for completeness.
+
+helloCounter :: R.Element
+helloCounter = counter { initialCount: 1 }
+
+type Counter = ( initialCount :: Int )
+
+counter :: Record Counter -> R.Element
+counter props = R.createElement counterCpt props []
+
+button :: Record Button -> R.Element
+button props = R.createElement buttonCpt props []
+
+type Clicks = ( clicks :: Int )
+
+clicks :: Record Clicks -> R.Element
+clicks props = R.createElement clicksCpt props []
+
+clicksCpt :: R.Component Clicks
+clicksCpt = R.hooksComponent "clicks" cpt where
+  cpt { clicks } _children =
+    pure $ H.text $ "Clicked " <> show clicks <> " times"
+```
+
+### Core Toestand API: a closer look
+
+`useBox` has a fairly straightforward type signature:
+
+```purescript
+-- Creates a new Box inside a component from an initial value
+useBox :: forall b. b -> R.Hooks (Box b)
+```
+
+`modify_` is slightly more complicated. `ReadWrite` is a typeclass
+that `Box` implements. This constraint is basically saying a `v` can
+be read from and written to a `box`. So given a function that takes
+and returns a value and a box, modify the value by applying that
+function to the current value of the box:
+
+```purescript
+modify_ :: forall box v. ReadWrite box v => (v -> v) -> box -> Effect Unit
+```
+
+As you might have guessed, `modify` exists too, and returns the newly set value:
+
+```purescript
+modify :: forall c v. ReadWrite c v => (v -> v) -> c -> Effect v
+```
+
+The `ReadWrite` class is actually methodless, it is a shorthand way of
+referring to both the `Read` and `Write` classes:
+
+```purescript
+class (Read box val, Write box val) <= ReadWrite box val | box -> val
+
+instance readWrite :: (Read box val, Write box val) => ReadWrite box val
+```
+
+When you don't care about the current value, you can use `write`, the
+singular method of the `Write` typeclass. Its effective type is
+similar to `modify` but simpler, reflecting our lack of need to read
+from it:
+
+```purescript
+write :: forall box v. Write box v => v -> box -> Effect v
+```
+
+There is also the corresponding `write_` for when you want a Unit return:
+
+
+```purescript
+write_ :: forall box v. Write box v => v -> box -> Effect Unit
+```
+
+`read` is the most important method of the `Read` typeclass. Its effective type is:
+
+```purescript
+read :: forall box v m. Read box v => MonadDelay m => box -> m v
+```
 
+`MonadDelay` is implemented by two types we already know:
 
+* `Effect`
+* `Hooks`
 
+This means reading can be done in either monad.
 
-### Advanced reactix
+### Live updates
+
+The astute reader may notice that `useLive` was used in our first
+example but not covered in our last section. Explaining it will take a
+little longer...
+
+Boxes have another functionality: a hook to call a function when the
+value is written. Registering one of these is the purpose of the other
+function in the `Read` typeclass, `listen`, which has the following
+effective type:
+
+```purescript
+listen :: forall box v. Read box v => Listener v -> box -> Effect (Effect Unit)
+```
+
+We'll take that in two bites, first, the `Listener`:
+
+```purescript
+forall box v. Read box v => Listener v
+```
+
+Here's how `Listener` (and the `Change` that it mentions) are defined:
+
+
+```purescript
+-- | A summary of a change in value
+type Change c = { new :: c, old :: c }
+
+-- | An Effect function which is provided the new and old values.
+type Listener c = Change c -> Effect Unit
+```
+
+So to listen, we provide an effectful `Listener`, which receives the
+new and old values. Whenever someone calls `write` (or a function that
+wraps it) on a `Box`, our callback will be executed.
+
+The type of `listen` ends thus:
+
+```purescript
+Effect (Effect Unit)
+```
+
+Remember that an `Effect` is internally a 0-arity function used to delay the execution of some code.
+
+The inner `Effect Unit` is a means of cancelling the subscription we
+established. The outer `Effect` is used to return it without executing
+it.
+
+So, you provide a listener (which can execute effects) and you get
+back a means of cancelling when you no longer need to listen. Neat!
+
+Now we just need one more type before we can look at `useLive`:
+
+```purescript
+-- | An effect function which determines whether notifications should be sent.
+type ShouldReload c = Change c -> Effect Boolean
+```
+
+Toestand ships with just one function of this type, `unequal`, which
+does what you'd expect (i.e. it's `Prelude.notEq`, but in Effect):
+
+```purescript
+unequal :: forall v. Eq v => Change v -> Effect Boolean
+```
+
+And finally, we're ready to study `useLive`:
+
+```purescript
+useLive :: forall box b. Read box b => ShouldReload b -> box -> R.Hooks b
+```
+
+Wondering how it works?
+
+* It uses `useState` to create a counter. 
+* It registers a listener with `listen` to hear when writes are performed.
+* When a write is performed, the `ShouldReload` callback is executed.
+* If it returns true, the counter is incremented.
+
+Once you know how it works, it's not actually so mysterious :)
+
+The nice thing about `useState` is it pushes the choice about whether
+to refresh to the component that uses it. Because it even allows you
+to customise the logic, it is incredibly flexible.
+
+### Focused boxes and the single source of truth
+
+By now, we hope you think Toestand is as cool as we do. But it's not done yet!
+
+Sometimes, you'd like to have a box containing a data structure of
+state (say a record, for example) and only pass a part of it on to a
+child component, as another Box.
+
+That was a bit of a mouthful, let's look at an example:
+
+```purescript
+use Reactix as R
+use Toestand as T
+
+type Bigger = ( count :: Int, start :: Int )
+
+useCountBox :: Box (Record Bigger) -> R.Hooks (T.Box Int)
+useCountBox box = R.useFocused reader writer box where
+  reader :: Record Bigger -> Int
+  reader {count} = count
+  writer :: Int -> Record Bigger -> Record Bigger
+  writer count old = old { count = count }
+```
+
+We have overannotated the types to be clearer here. `reader` is a
+function that can look up `count` in a `Bigger` record and return
+it. `write` is a function that can set a new `count` in a `Bigger`.
+
+The `Box` that `useCountBox` takes is linked to the new `Box` it
+returns. When the value inside the original `Box` changes, the value
+inside the focused box may also appear to be changed, depending on the
+read function. You can even write to the returned Box and have it
+update the original, you just have to pass the right writer function!
+
+If you are a haskell programmer, you may recognise the reader and
+writer together as being a van Laarhoven-style lens, as used by most
+of the haskell lens libraries. Indeed it is, but this is as complex as
+ours get - no prisms or anything fancy.
+
+The particular case of turning a `Box (Record a)` into `focused field
+boxes` is in fact so common that we ship it in Toestand as
+`useFocusedFields`:
+
+```purescript
+import Toestand as T
+
+type Bigger = ( count :: Int, start :: Int )
+type Smaller = ( count :: T.Box Int, start :: T.Box Int )
+
+useSmaller :: T.Box (Record Bigger) -> R.Hooks (Record Smaller)
+useSmaller box = T.useFocusedFields box {}
+```
+
+The final argument, {} is the base record to add the cursors to.
+
+## Advanced Reactix
+
+<!-- ### Reactix is a bad purescript library -->
+
+<!-- Reactix is one of those libraries that was written because we needed -->
+<!-- it and that would be great if it got all the time and attention other -->
+<!-- things get. -->
+
+<!-- This isn't to say Reactix sucks, on the contrary we're generally quite -->
+<!-- fond of it, but using it effectively means understanding its -->
+<!-- limitations and figuring out how to make peace with its requirements -->
+<!-- of you. -->
+
+<!-- Firstly, it's not finished. It was hastily written and we've really -->
+<!-- only maintained it as much as we need to and no more. -->
+
+<!-- In attempting to be a lightweight wrapper over modern React, Reactix -->
+<!-- does not always behave the way you might expect a purescript library -->
+<!-- to. In -->
+
+
+<!-- ### Limitations of Reactix -->
+
+<!-- Reactix is meant to be a relatively barebones binding to modern -->
+<!-- React. Where purescript and react differ, react wins. -->
+
+<!-- What do I mean by this? The `Hooks` monad is literally a newtype over -->
+<!-- `Effect`. We take a very liberal view of this - when you are writing -->
+<!-- code in `Hooks`, you are choosing to invert control to React and its -->
+<!-- way of doing things. -->
+
+<!-- It's not necessarily against the rules of purescript to do this, but -->
+<!-- it does mean that some of the properties we often take for granted in -->
+<!-- writing purescript code do not necessarily apply. -->
+
+
+### Reconciliation and the rules of hooks
+
+So far, we've largely glossed over the part that links the virtual DOM
+with the real DOM. This is react's [reconciliation algorithm.](https://reactjs.org/docs/reconciliation.html).
 
 This is probably a good time to mention one of the major current
 limitations of Reactix: the properties provided to html constructor

src/Gargantext/Components/Annotation/AnnotatedField.purs

@@ -17,12 +17,13 @@ import Data.Maybe ( Maybe(..), maybe )
 import Data.String.Common ( joinWith )
 import Data.Tuple (Tuple(..), snd)
 import Data.Tuple.Nested ( (/\) )
---import DOM.Simple.Console (log2)
+-- import DOM.Simple.Console (log2)
 import DOM.Simple.Event as DE
 import Effect (Effect)
 import Reactix as R
 import Reactix.DOM.HTML as HTML
 import Reactix.SyntheticEvent as E
+import Toestand as T
 
 import Gargantext.Prelude
 
@@ -53,15 +54,16 @@ annotatedField = R.createElement annotatedFieldComponent
 annotatedFieldComponent :: R.Component Props
 annotatedFieldComponent = here.component "annotatedField" cpt
   where
-    cpt {ngrams, setTermList, text: fieldText} _ = do
-      (_ /\ setRedrawMenu) <- R.useState' false
+    cpt { ngrams, setTermList, text: fieldText } _ = do
+      redrawMenu <- T.useBox false
+      redrawMenu' <- T.useLive T.unequal redrawMenu
 
       menuRef <- R.useRef (Nothing :: Maybe AnnotationMenu)
 
       let wrapperProps = { className: "annotated-field-wrapper" }
 
           wrap (text /\ list) = { list
-                               , onSelect: onAnnotationSelect { menuRef, ngrams, setRedrawMenu, setTermList }
+                               , onSelect: onAnnotationSelect { menuRef, ngrams, redrawMenu, setTermList }
                                , text }
 
       pure $ HTML.div wrapperProps
@@ -75,57 +77,69 @@ compile ngrams = maybe [] (highlightNgrams CTabTerms ngrams)
 
 -- Runs
 
-onAnnotationSelect { menuRef, ngrams, setRedrawMenu, setTermList } Nothing event = do
+onAnnotationSelect :: forall e. DE.IsMouseEvent e => { menuRef :: R.Ref (Maybe AnnotationMenu)
+                                              , ngrams :: NgramsTable
+                                              , redrawMenu :: T.Box Boolean
+                                              , setTermList :: NgramsTerm -> Maybe TermList -> TermList -> Effect Unit }
+                      -> Maybe (Tuple NgramsTerm TermList) -> E.SyntheticEvent e -> Effect Unit
+onAnnotationSelect { menuRef, ngrams, redrawMenu, setTermList } Nothing event = do
   s <- Sel.getSelection
   case s of
     Just sel -> do
       case Sel.selectionToString sel of
-        "" -> hideMenu { menuRef, setRedrawMenu }
+        "" -> hideMenu { menuRef, redrawMenu }
         sel' -> do
           showMenu { event
                    , getList: findNgramTermList ngrams
                    , menuRef
                    , menuType: NewNgram
                    , ngram: normNgram CTabTerms sel'
-                   , setRedrawMenu
+                   , redrawMenu
                    , setTermList }
-    Nothing -> hideMenu { menuRef, setRedrawMenu }
-onAnnotationSelect { menuRef, ngrams, setRedrawMenu, setTermList } (Just (Tuple ngram list)) event =
+    Nothing -> hideMenu { menuRef, redrawMenu }
+onAnnotationSelect { menuRef, ngrams, redrawMenu, setTermList } (Just (Tuple ngram list)) event = do
   showMenu { event
            , getList: const (Just list)
            , menuRef
            , menuType: SetTermListItem
            , ngram
-           , setRedrawMenu
+           , redrawMenu
            , setTermList }
 
-showMenu { event, getList, menuRef, menuType, ngram, setRedrawMenu, setTermList } = do
+-- showMenu :: forall p e. DE.IsMouseEvent e => { event :: E.SyntheticEvent e | p } -> Effect Unit
+showMenu :: forall e. DE.IsMouseEvent e => { event :: E.SyntheticEvent e
+                                    , getList :: NgramsTerm -> Maybe TermList
+                                    , menuRef :: R.Ref (Maybe AnnotationMenu)
+                                    , menuType :: MenuType
+                                    , ngram :: NgramsTerm
+                                    , redrawMenu :: T.Box Boolean
+                                    , setTermList :: NgramsTerm -> Maybe TermList -> TermList -> Effect Unit }
+            -> Effect Unit
+showMenu { event, getList, menuRef, menuType, ngram, redrawMenu, setTermList } = do
   let x = E.clientX event
       y = E.clientY event
       -- n = normNgram CTabTerms text
       list = getList ngram
-      redrawMenu = setRedrawMenu not
+      -- redrawMenu = T.modify not redrawMenu
       setList t = do
         setTermList ngram list t
-        hideMenu { menuRef, setRedrawMenu }
+        hideMenu { menuRef, redrawMenu }
   E.preventDefault event
   --range <- Sel.getRange sel 0
   --log2 "[showMenu] selection range" $ Sel.rangeToTuple range
   let menu = Just
-        { x
-        , y
-        , list
+        { list
+        , onClose: hideMenu { menuRef, redrawMenu }
         , menuType
-        , onClose: hideMenu { menuRef, setRedrawMenu }
         , setList
-        }
+        , x
+        , y }
   R.setRef menuRef menu
-  redrawMenu
+  T.modify_ not redrawMenu
 
-hideMenu { menuRef, setRedrawMenu } = do
-  let redrawMenu = setRedrawMenu not
+hideMenu { menuRef, redrawMenu } = do
   R.setRef menuRef Nothing
-  redrawMenu
+  T.modify_ not redrawMenu
 
 type Run =
   ( list :: List (Tuple NgramsTerm TermList)

src/Gargantext/Components/App.purs

@@ -25,12 +25,12 @@ appCpt = here.component "app" cpt where
   cpt _ _ = do
     box    <- T.useBox emptyApp             -- global data
     boxes <- T.useFocusedFields box {}      -- read-write access for children
-    tasks   <- T.useBox Nothing             -- storage for asynchronous tasks reductor
+    -- tasks   <- T.useBox Nothing             -- storage for asynchronous tasks reductor
     R.useEffectOnce' $ do
       void $ Sessions.load boxes.sessions
-    tasksReductor <- GAT.useTasks boxes.reloadRoot boxes.reloadForest
-    R.useEffectOnce' $ do
-      T.write (Just tasksReductor) tasks
+    tasks <- GAT.useTasks boxes.reloadRoot boxes.reloadForest
+    -- R.useEffectOnce' $ do
+    --   T.write (Just tasksReductor) tasks
     R.useEffectOnce' $ do
       R2.loadLocalStorageState R2.openNodesKey boxes.forestOpen
       T.listen (R2.listenLocalStorageState R2.openNodesKey) boxes.forestOpen

src/Gargantext/Components/ContextMenu/ContextMenu.purs

@@ -2,7 +2,6 @@
 module Gargantext.Components.ContextMenu.ContextMenu where
   -- (MenuProps, Action(..), separator) where
 
-import Prelude hiding (div)
 import Data.Maybe ( Maybe(..) )
 import Data.Nullable ( Nullable, null, toMaybe )
 import Data.Tuple.Nested ( (/\) )
@@ -18,6 +17,9 @@ import Effect (Effect)
 import FFI.Simple ((..))
 import Reactix as R
 import Reactix.DOM.HTML as HTML
+import Toestand as T
+
+import Gargantext.Prelude
 
 import Gargantext.Utils.Reactix as R2
 
@@ -25,9 +27,9 @@ here :: R2.Here
 here = R2.here "Gargantext.Components.ContextMenu.ContextMenu"
 
 type Props t = (
-    x :: Number
+    onClose :: Effect Unit
+  , x :: Number
   , y :: Number
-  , onClose :: Effect Unit
   )
 
 contextMenu :: forall t. R2.Component (Props t)
@@ -39,10 +41,12 @@ contextMenuCpt = here.component "contextMenu" cpt
     cpt menu@{ x, y, onClose } children = do
       host <- R2.getPortalHost
       root <- R.useRef null
-      rect /\ setRect <- R.useState $ \_ -> Nothing
+      rect <- T.useBox Nothing
+      rect' <- T.useLive T.unequal rect
+
       R.useLayoutEffect1 (R.readRef root) $ do
         traverse_
-          (\r -> setRect (\_ -> Just (Element.boundingRect r)))
+          (\r -> T.write_ (Just (Element.boundingRect r)) rect)
           (toMaybe $ R.readRef root)
         pure $ pure unit
       R.useLayoutEffect2 root rect (contextMenuEffect onClose root)
@@ -54,7 +58,7 @@ contextMenuCpt = here.component "contextMenu" cpt
               ]
             ]
       ]
-      pure $ R.createPortal [ elems root menu rect $ cs ] host
+      pure $ R.createPortal [ elems root menu rect' $ cs ] host
     elems ref menu (Just rect) = HTML.div
         { ref
         , key: "context-menu"

src/Gargantext/Components/Forest.purs

@@ -33,11 +33,12 @@ here = R2.here "Gargantext.Components.Forest"
 
 -- Shared by components here with Tree
 type Common = 
-  ( frontends    :: Frontends
-  , handed       :: T.Box Handed
-  , reloadRoot   :: T.Box T2.Reload
-  , route        :: T.Box AppRoute
-  , tasks        :: T.Box (Maybe GAT.Reductor)
+  ( frontends     :: Frontends
+  , handed        :: T.Box Handed
+  , reloadRoot    :: T.Box T2.Reload
+  , route         :: T.Box AppRoute
+  -- , tasks      :: T.Box (Maybe GAT.Reductor)
+  , tasks         :: GAT.Reductor
   )
 
 type Props =
@@ -69,29 +70,32 @@ forestCpt = here.component "forest" cpt where
             , sessions
             , showLogin
             , tasks } _ = do
-    tasks'        <- GAT.useTasks reloadRoot reloadForest
-    R.useEffect' $ T.write_ (Just tasks') tasks
+    -- TODO Fix this. I think tasks shouldn't be a Box but only a Reductor
+    -- tasks'        <- GAT.useTasks reloadRoot reloadForest
+    -- R.useEffect' $ do
+    --   T.write_ (Just tasks') tasks
     handed'       <- T.useLive T.unequal handed
     reloadForest' <- T.useLive T.unequal reloadForest
     reloadRoot'   <- T.useLive T.unequal reloadRoot
     route'        <- T.useLive T.unequal route
     forestOpen'   <- T.useLive T.unequal forestOpen
     sessions'     <- T.useLive T.unequal sessions
+
     -- TODO If `reloadForest` is set, `reload` state should be updated
     -- TODO fix tasks ref
     -- R.useEffect' $ do
       -- R.setRef tasks $ Just tasks'
     R2.useCache
       ( frontends /\ route' /\ sessions' /\ handed' /\ forestOpen'
-        /\ reloadForest' /\ reloadRoot' /\ (fst tasks').storage )
-      (cp handed' sessions' tasks')
+        /\ reloadForest' /\ reloadRoot' /\ (fst tasks).storage )
+      (cp handed' sessions')
         where
           common = RX.pick props :: Record Common
-          cp handed' sessions' tasks' _ =
+          cp handed' sessions' _ =
             pure $ H.div { className: "forest" }
-              (A.cons (plus handed' showLogin backend) (trees handed' sessions' tasks'))
-          trees handed' sessions' tasks' = (tree handed' tasks') <$> unSessions sessions'
-          tree handed' tasks' s@(Session {treeId}) =
+              (A.cons (plus handed' showLogin backend) (trees handed' sessions'))
+          trees handed' sessions' = (tree handed') <$> unSessions sessions'
+          tree handed' s@(Session {treeId}) =
             treeLoader { forestOpen
                        , frontends
                        , handed: handed'
@@ -193,7 +197,7 @@ mainPage = R.createElement mainPageCpt
 
 -- mainPageCpt :: R.Memo ()
 -- mainPageCpt = R.memo (here.component "mainPage" cpt) where
-mainPageCpt :: R.Component()
+mainPageCpt :: R.Component ()
 mainPageCpt = here.component "mainPage" cpt
   where
     cpt _ children = do

src/Gargantext/Components/Forest/Tree.purs

@@ -48,7 +48,8 @@ here = R2.here "Gargantext.Components.Forest.Tree"
 -- Shared by every component here + performAction + nodeSpan
 type Universal =
   ( reloadRoot :: T.Box T2.Reload
-  , tasks      :: T.Box (Maybe GAT.Reductor) )
+  -- , tasks      :: T.Box (Maybe GAT.Reductor) )
+  , tasks :: GAT.Reductor )
 
 -- Shared by every component here + nodeSpan
 type Global =
@@ -178,19 +179,13 @@ performAction (DeleteNode nt) p@{ forestOpen
   performAction RefreshTree p
 performAction (DoSearch task) p@{ tasks
                                 , tree: (NTree (LNode {id}) _) } = liftEffect $ do
-  mT <- T.read tasks
-  case mT of
-    Just t -> snd t $ GAT.Insert id task
-    Nothing -> pure unit
+  snd tasks $ GAT.Insert id task
   log2 "[performAction] DoSearch task:" task
 performAction (UpdateNode params) p@{ tasks
                                     , tree: (NTree (LNode {id}) _) } = do
   task <- updateRequest params p.session id
   liftEffect $ do
-    mT <- T.read tasks
-    case mT of
-      Just t -> snd t $ GAT.Insert id task
-      Nothing -> pure unit
+    snd tasks $ GAT.Insert id task
     log2 "[performAction] UpdateNode task:" task
 performAction (RenameNode name) p@{ tree: (NTree (LNode {id}) _) } = do
   void $ rename p.session id $ RenameValue { text: name }
@@ -213,19 +208,13 @@ performAction (UploadFile nodeType fileType mName blob) p@{ tasks
                                                           , tree: (NTree (LNode { id }) _) } = do
   task <- uploadFile p.session nodeType id fileType {mName, blob}
   liftEffect $ do
-    mT <- T.read tasks
-    case mT of
-      Just t -> snd t $ GAT.Insert id task
-      Nothing -> pure unit
+    snd tasks $ GAT.Insert id task
     log2 "[performAction] UploadFile, uploaded, task:" task
 performAction (UploadArbitraryFile mName blob) p@{ tasks
                                                  , tree: (NTree (LNode { id }) _) } = do
   task <- uploadArbitraryFile p.session id { blob, mName }
   liftEffect $ do
-    mT <- T.read tasks
-    case mT of
-      Just t -> snd t $ GAT.Insert id task
-      Nothing -> pure unit
+    snd tasks $ GAT.Insert id task
     log2 "[performAction] UploadArbitraryFile, uploaded, task:" task
 performAction DownloadNode _ = liftEffect $ log "[performAction] DownloadNode"
 performAction (MoveNode {params}) p@{ forestOpen

src/Gargantext/Components/Forest/Tree/Node.purs

@@ -5,7 +5,7 @@ import Gargantext.Prelude
 import Data.Maybe (Maybe(..))
 import Data.Nullable (null)
 import Data.Symbol (SProxy(..))
-import Data.Tuple (snd)
+import Data.Tuple (fst, snd)
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Effect.Aff (Aff, launchAff)
@@ -54,7 +54,7 @@ type NodeMainSpanProps =
   , reloadRoot    :: T.Box T2.Reload
   , route         :: T.Box Routes.AppRoute
   , setPopoverRef :: R.Ref (Maybe (Boolean -> Effect Unit))
-  , tasks         :: T.Box (Maybe GAT.Reductor)
+  , tasks         :: GAT.Reductor
   | CommonProps
   )
 
@@ -91,16 +91,19 @@ nodeMainSpanCpt = here.component "nodeMainSpan" cpt
               } _ = do
       route' <- T.useLive T.unequal route
       -- only 1 popup at a time is allowed to be opened
-      droppedFile   <- R.useState' (Nothing :: Maybe DroppedFile)
-      isDragOver    <- R.useState' false
+      droppedFile   <- T.useBox (Nothing :: Maybe DroppedFile)
+      droppedFile'  <- T.useLive T.unequal droppedFile
+      isDragOver    <- T.useBox false
+      isDragOver'   <- T.useLive T.unequal isDragOver
       popoverRef    <- R.useRef null
+
       R.useEffect' $ do
         R.setRef setPopoverRef $ Just $ Popover.setOpen popoverRef
       let isSelected = Just route' == Routes.nodeTypeAppRoute nodeType (sessionId session) id
 
-      tasks' <- T.read tasks
+      -- tasks' <- T.read tasks
 
-      pure $ H.span (dropProps droppedFile isDragOver)
+      pure $ H.span (dropProps droppedFile droppedFile' isDragOver isDragOver')
         $ reverseHanded handed
         [ folderIcon  { folderOpen, nodeType } []
         , chevronIcon { folderOpen, handed, isLeaf, nodeType } []
@@ -114,7 +117,7 @@ nodeMainSpanCpt = here.component "nodeMainSpan" cpt
                                                        , onFinish: onTaskFinish id t
                                                        , session
                                                        }
-                                ) $ GAT.getTasksMaybe tasks' id
+                                ) $ GAT.getTasks (fst tasks) id
                            )
                 , if nodeType == GT.NodeUser
                         then GV.versionView {session}
@@ -139,10 +142,11 @@ nodeMainSpanCpt = here.component "nodeMainSpan" cpt
                 ]
         where
           onTaskFinish id' t _ = do
-            mT <- T.read tasks
-            case mT of
-              Just t' -> snd t' $ GAT.Finish id' t
-              Nothing -> pure unit
+            snd tasks $ GAT.Finish id' t
+            -- mT <- T.read tasks
+            -- case mT of
+            --   Just t' -> snd t' $ GAT.Finish id' t
+            --   Nothing -> pure unit
             T2.reload reloadRoot
 
           SettingsBox {show: showBox} = settingsBox nodeType
@@ -158,37 +162,37 @@ nodeMainSpanCpt = here.component "nodeMainSpan" cpt
       H.a { className: "settings fa fa-cog" 
           , title : "Each node of the Tree can perform some actions.\n"
             <> "Click here to execute one of them." } []
-    dropProps droppedFile isDragOver =
-      { className: "leaf " <> (dropClass droppedFile isDragOver)
+    dropProps droppedFile droppedFile' isDragOver isDragOver' =
+      { className: "leaf " <> (dropClass droppedFile' isDragOver')
       , on: { drop: dropHandler droppedFile
             , dragOver: onDragOverHandler isDragOver
             , dragLeave: onDragLeave isDragOver }
       }
       where
-        dropClass   (Just _  /\ _)        _          = "file-dropped"
-        dropClass    _                   (true /\ _) = "file-dropped"
-        dropClass   (Nothing /\ _)        _          = ""
-        dropHandler (_ /\ setDroppedFile) e          = do
+        dropClass (Just _) _    = "file-dropped"
+        dropClass _        true = "file-dropped"
+        dropClass Nothing  _    = ""
+
+        dropHandler droppedFile e          = do
           -- prevent redirection when file is dropped
           E.preventDefault e
           E.stopPropagation e
           blob <- R2.dataTransferFileBlob e
           void $ launchAff do
             --contents <- readAsText blob
-            liftEffect $ setDroppedFile
-                       $ const
-                       $ Just
-                       $ DroppedFile { blob: (UploadFileBlob blob)
-                                     , fileType: Just CSV
-                                     , lang    : EN
-                                     }
-    onDragOverHandler (_ /\ setIsDragOver) e = do
+            liftEffect $ T.write_
+                        (Just
+                        $ DroppedFile { blob: (UploadFileBlob blob)
+                                      , fileType: Just CSV
+                                      , lang    : EN
+                                      }) droppedFile
+    onDragOverHandler isDragOver e = do
       -- prevent redirection when file is dropped
       -- https://stackoverflow.com/a/6756680/941471
       E.preventDefault e
       E.stopPropagation e
-      setIsDragOver $ const true
-    onDragLeave (_ /\ setIsDragOver) _ = setIsDragOver $ const false
+      T.write_ true isDragOver
+    onDragLeave isDragOver _ = T.write_ false isDragOver
 
 type FolderIconProps = (
     folderOpen :: T.Box Boolean

src/Gargantext/Components/Forest/Tree/Node/Action/Upload.purs

 module Gargantext.Components.Forest.Tree.Node.Action.Upload where
 
 import Data.Either (fromRight)
+import Data.Generic.Rep (class Generic)
+import Data.Generic.Rep.Eq (genericEq)
 import Data.Maybe (Maybe(..), fromJust, fromMaybe)
 import Data.Newtype (class Newtype)
 import Data.String.Regex as DSR
@@ -15,6 +17,7 @@ import Partial.Unsafe (unsafePartial)
 import React.SyntheticEvent     as E
 import Reactix                  as R
 import Reactix.DOM.HTML         as H
+import Toestand as T
 import URI.Extra.QueryPairs     as QP
 -- import Web.File.Blob (Blob)
 import Web.File.FileReader.Aff (readAsDataURL, readAsText)
@@ -55,16 +58,19 @@ actionUpload _ _ _ _ =
 
 -- file upload types
 data DroppedFile =
-  DroppedFile { blob :: UploadFileBlob
+  DroppedFile { blob     :: UploadFileBlob
               , fileType :: Maybe FileType
               , lang     :: Lang
               }
+derive instance genericDroppedFile :: Generic DroppedFile _
+instance eqDroppedFile :: Eq DroppedFile where
+  eq = genericEq
 
 type FileHash = String
 
 
 type UploadFile = 
-  { blob :: UploadFileBlob
+  { blob     :: UploadFileBlob
   , name     :: String
   }
 
@@ -192,9 +198,9 @@ uploadButtonCpt = here.component "uploadButton" cpt
 -- START File Type View
 type FileTypeProps =
   ( dispatch    :: Action -> Aff Unit
-  , droppedFile :: R.State (Maybe DroppedFile)
+  , droppedFile :: T.Box (Maybe DroppedFile)
   , id          :: ID
-  , isDragOver  :: R.State Boolean
+  , isDragOver  :: T.Box Boolean
   , nodeType    :: GT.NodeType
   )
 
@@ -205,16 +211,21 @@ fileTypeViewCpt :: R.Component FileTypeProps
 fileTypeViewCpt = here.component "fileTypeView" cpt
   where
     cpt { dispatch
-        , droppedFile: Just (DroppedFile {blob, fileType}) /\ setDroppedFile
-        , isDragOver: (_ /\ setIsDragOver)
+        , droppedFile
+        , isDragOver
         , nodeType
-        } _ = pure
-            $ H.div tooltipProps [ H.div { className: "card"}
-                                         [ panelHeading
-                                         , panelBody
-                                         , panelFooter
-                                         ]
-                                 ]
+        } _ = do
+      droppedFile' <- T.useLive T.unequal droppedFile
+
+      case droppedFile' of
+        Nothing -> pure $ H.div {} []
+        Just df@(DroppedFile { blob, fileType }) ->
+          pure $ H.div tooltipProps [ H.div { className: "card"}
+                                      [ panelHeading
+                                      , panelBody df
+                                      , panelFooter df
+                                      ]
+                                    ]
       where
         tooltipProps = { className: ""
                        , id       : "file-type-tooltip"
@@ -231,30 +242,30 @@ fileTypeViewCpt = here.component "fileTypeView" cpt
             , H.div {className: "col-md-2"}
               [ H.a {className: "btn glyphitem fa fa-remove-circle"
                     , on: {click: \_ -> do
-                              setDroppedFile $ const Nothing
-                              setIsDragOver  $ const false
+                              T.write_ Nothing droppedFile
+                              T.write_ false isDragOver
                           }
                     , title: "Close"} []
               ]
             ]
           ]
 
-        panelBody =
+        panelBody (DroppedFile { blob }) =
           H.div {className: "card-body"}
           [ R2.select {className: "col-md-12 form-control"
-                      , on: {change: onChange}
+                      , on: {change: onChange blob}
                       }
                       (map renderOption [CSV, CSV_HAL, WOS])
           ]
           where
-            onChange e l =
-              setDroppedFile $ const $ Just $ DroppedFile $ { blob
-                                                            , fileType: read $ R.unsafeEventValue e
-                                                            , lang    : fromMaybe EN $ read $ R.unsafeEventValue l
-                                                            }
+            onChange blob e l =
+              T.write_ (Just $ DroppedFile $ { blob
+                                             , fileType: read $ R.unsafeEventValue e
+                                             , lang    : fromMaybe EN $ read $ R.unsafeEventValue l
+                                             }) droppedFile
             renderOption opt = H.option {} [ H.text $ show opt ]
 
-        panelFooter =
+        panelFooter (DroppedFile { blob, fileType }) =
           H.div {className: "card-footer"}
           [
             case fileType of
@@ -262,7 +273,7 @@ fileTypeViewCpt = here.component "fileTypeView" cpt
                 H.button {className: "btn btn-success"
                          , type: "button"
                          , on: {click: \_ -> do
-                                   setDroppedFile $ const Nothing
+                                   T.write_ Nothing droppedFile
                                    launchAff $ dispatch $ UploadFile nodeType ft Nothing blob
                                }
                          } [H.text "Upload"]
@@ -272,9 +283,6 @@ fileTypeViewCpt = here.component "fileTypeView" cpt
                          } [H.text "Upload"]
           ]
 
-    cpt {droppedFile: (Nothing /\ _)} _ = do
-      pure $ H.div {} []
-
 
 newtype FileUploadQuery = FileUploadQuery {
     fileType :: FileType

src/Gargantext/Components/Forest/Tree/Node/Action/Upload/Types.purs

@@ -4,9 +4,9 @@ import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Eq (genericEq)
 import Data.Generic.Rep.Show (genericShow)
 import Data.Maybe (Maybe(..))
-import Web.File.Blob (Blob)
+import Web.File.Blob (Blob, size)
 
-import Gargantext.Prelude (class Read, class Show, class Eq)
+import Gargantext.Prelude
 
 
 data FileType = CSV | CSV_HAL | WOS | PresseRIS | Arbitrary
@@ -27,3 +27,6 @@ instance readFileType :: Read FileType where
 
 
 newtype UploadFileBlob = UploadFileBlob Blob
+derive instance genericUploadFileBlob :: Generic UploadFileBlob _
+instance eqUploadFileBlob :: Eq UploadFileBlob where
+  eq (UploadFileBlob b1) (UploadFileBlob b2) = eq (size b1) (size b2)

src/Gargantext/Components/Forest/Tree/Node/Box.purs

@@ -2,7 +2,6 @@ module Gargantext.Components.Forest.Tree.Node.Box where
 
 import Data.Array as A
 import Data.Maybe (Maybe(..))
-import Data.Tuple.Nested ((/\))
 import Effect.Aff (Aff)
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -16,7 +15,6 @@ import Gargantext.Components.Forest.Tree.Node.Action.Documentation (actionDoc)
 import Gargantext.Components.Forest.Tree.Node.Action.Download (actionDownload)
 import Gargantext.Components.Forest.Tree.Node.Action.Rename (renameAction)
 import Gargantext.Components.Forest.Tree.Node.Action.Search (actionSearch)
-import Gargantext.Components.Forest.Tree.Node.Action.Search.SearchField (defaultSearch)
 import Gargantext.Components.Forest.Tree.Node.Action.Share   as Share
 import Gargantext.Components.Forest.Tree.Node.Action.Contact as Contact
 import Gargantext.Components.Forest.Tree.Node.Action.Update (update)
@@ -51,7 +49,7 @@ nodePopupCpt = here.component "nodePopupView" cpt where
     nodePopup <- T.useBox { action: Nothing, id, name, nodeType }
     action <- T.useFocused (_.action) (\a b -> b { action = a }) nodePopup
     nodePopup' <- T.useLive T.unequal nodePopup
-    search  <- R.useState' $ defaultSearch { node_id = Just p.id }
+
     pure $ H.div tooltipProps
       [ H.div { className: "popup-container" }
         [ H.div { className: "card" }

src/Gargantext/Components/GraphExplorer.purs

@@ -53,7 +53,7 @@ type BaseProps =
   , route         :: T.Box AppRoute
   , sessions      :: T.Box Sessions
   , showLogin     :: T.Box Boolean
-  , tasks         :: T.Box (Maybe GAT.Reductor)
+  , tasks         :: GAT.Reductor
   )
 
 type LayoutLoaderProps = ( session :: R.Context Session | BaseProps )
@@ -277,7 +277,7 @@ type TreeProps = (
   , sessions     :: T.Box Sessions
   , show         :: Boolean
   , showLogin    :: T.Box Boolean
-  , tasks        :: T.Box (Maybe GAT.Reductor)
+  , tasks        :: GAT.Reductor
   )
 
 type MSidebarProps =

src/Gargantext/Components/Loader.purs

-module Gargantext.Components.Loader where
-
-import Prelude
-import Data.Maybe (Maybe(..), maybe')
-import Data.Tuple.Nested ((/\))
-import Effect.Aff (Aff)
-import Effect.Class (liftEffect)
-import Reactix as R
-
-import Gargantext.Components.LoadingSpinner (loadingSpinner)
-import Gargantext.Utils.Reactix as R2
-
-here :: R2.Here
-here = R2.here "Gargantext.Components.Loader"
-
-type Props path loaded =
-  ( path  :: path
-  , load  :: path -> Aff loaded
-  , paint :: loaded -> R.Element )
-
-loader :: forall path loaded. path
-                            -> (path -> Aff loaded)
-                            -> (loaded -> R.Element)
-                            -> R.Element
-loader path load paint =
-  R.createElement loaderCpt {path,load,paint} []
-
-loaderCpt :: forall path loaded. R.Component (Props path loaded)
-loaderCpt = here.component "loader" cpt where
-  cpt {path, load, paint} _ = do
-    (loaded /\ setLoaded) <- R.useState' Nothing
-    R.useEffect3 path load paint $ do
-      R2.affEffect "G.H.Loader.useAff" $
-        load path >>= (liftEffect <<< setLoaded <<< const <<< Just)
-    pure $ maybe' (\_ -> loadingSpinner {}) paint loaded

src/Gargantext/Components/NgramsTable.purs

@@ -263,7 +263,7 @@ type CommonProps = (
   , reloadRoot        :: T.Box T2.Reload
   , sidePanelTriggers :: Record NT.SidePanelTriggers
   , tabNgramType      :: CTabNgramType
-  , tasks             :: T.Box (Maybe GAT.Reductor)
+  , tasks             :: GAT.Reductor
   , withAutoUpdate    :: Boolean
   )
 

src/Gargantext/Components/NgramsTable/Core.purs

@@ -1184,7 +1184,7 @@ chartsAfterSync :: forall props discard.
   , tabType :: TabType
   | props
   }
-  -> T.Box (Maybe GAT.Reductor)
+  -> GAT.Reductor
   -> T.Box T2.Reload
   -> discard
   -> Aff Unit
@@ -1192,12 +1192,8 @@ chartsAfterSync path'@{ nodeId } tasks reloadForest _ = do
   task <- postNgramsChartsAsync path'
   liftEffect $ do
     log2 "[chartsAfterSync] Synchronize task" task
-    mT <- T.read tasks
-    case mT of
-      Nothing -> log "[chartsAfterSync] tasks is Nothing"
-      Just tasks' -> do
-        snd tasks' (GAT.Insert nodeId task) -- *> T2.reload reloadForest
-        T2.reload reloadForest
+    snd tasks $ GAT.Insert nodeId task
+    T2.reload reloadForest
 
 postNgramsChartsAsync :: forall s. CoreParams s -> Aff AsyncTaskWithType
 postNgramsChartsAsync { listIds, nodeId, session, tabType } = do

src/Gargantext/Components/Nodes/Annuaire/Tabs.purs

@@ -59,7 +59,7 @@ type TabsProps =
   , reloadRoot        :: T.Box T2.Reload
   , session           :: Session
   , sidePanelTriggers :: Record LTypes.SidePanelTriggers
-  , tasks             :: T.Box (Maybe GAT.Reductor)
+  , tasks             :: GAT.Reductor
   )
 
 tabs :: R2.Leaf TabsProps
@@ -136,5 +136,5 @@ type NTCommon =
   , reloadRoot        :: T.Box T2.Reload
   , session           :: Session
   , sidePanelTriggers :: Record LTypes.SidePanelTriggers
-  , tasks             :: T.Box (Maybe GAT.Reductor)
+  , tasks             :: GAT.Reductor
   )

src/Gargantext/Components/Nodes/Annuaire/User.purs

@@ -155,7 +155,7 @@ type LayoutNoSessionProps =
   , nodeId       :: Int
   , reloadForest :: T.Box T2.Reload
   , reloadRoot   :: T.Box T2.Reload
-  , tasks        :: T.Box (Maybe GAT.Reductor)
+  , tasks        :: GAT.Reductor
   )
 
 type LayoutProps = WithSession LayoutNoSessionProps

src/Gargantext/Components/Nodes/Annuaire/User/Contact.purs

@@ -141,7 +141,7 @@ listElement = H.li { className: "list-group-item justify-content-between" }
 type BasicProps =
   ( frontends :: Frontends
   , nodeId    :: Int
-  , tasks     :: T.Box (Maybe GAT.Reductor)
+  , tasks     :: GAT.Reductor
   )
 
 type ReloadProps =

src/Gargantext/Components/Nodes/Annuaire/User/Contacts/Tabs.purs

@@ -57,7 +57,7 @@ type TabsProps = (
   , reloadRoot        :: T.Box T2.Reload
   , session           :: Session
   , sidePanelTriggers :: Record LTypes.SidePanelTriggers
-  , tasks             :: T.Box (Maybe GAT.Reductor)
+  , tasks             :: GAT.Reductor
   )
 
 tabs :: Record TabsProps -> R.Element
@@ -139,7 +139,7 @@ type NgramsViewTabsProps = (
   , reloadRoot        :: T.Box T2.Reload
   , session           :: Session
   , sidePanelTriggers :: Record LTypes.SidePanelTriggers
-  , tasks             :: T.Box (Maybe GAT.Reductor)
+  , tasks             :: GAT.Reductor
   )
 
 ngramsView :: R2.Component NgramsViewTabsProps

src/Gargantext/Components/Nodes/Lists.purs

@@ -98,7 +98,7 @@ type CommonPropsNoSession =
   , reloadForest  :: T.Box T2.Reload
   , reloadRoot    :: T.Box T2.Reload
   , sessionUpdate :: Session -> Effect Unit
-  , tasks         :: T.Box (Maybe GAT.Reductor)
+  , tasks         :: GAT.Reductor
   )
 
 type CommonProps = WithSession CommonPropsNoSession

src/Gargantext/Components/Nodes/Lists/Tabs.purs

@@ -41,7 +41,7 @@ type Props = (
   , reloadRoot        :: T.Box T2.Reload
   , session           :: Session
   , sidePanelTriggers :: Record SidePanelTriggers
-  , tasks             :: T.Box (Maybe GAT.Reductor)
+  , tasks             :: GAT.Reductor
   )
 
 type PropsWithKey = ( key :: String | Props )

src/Gargantext/Components/Nodes/Texts.purs

@@ -18,7 +18,7 @@ import Toestand as T
 
 import Gargantext.Components.DocsTable as DT
 import Gargantext.Components.Forest as Forest
-import Gargantext.Components.Loader (loader)
+import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Components.NgramsTable.Loader (clearCache)
 import Gargantext.Components.Node (NodePoly(..))
 import Gargantext.Components.Nodes.Corpus (loadCorpusWithChild)
@@ -148,7 +148,7 @@ textsLayoutWithKeyCpt = here.component "textsLayoutWithKey" cpt
       R.useEffectOnce' $ do
         T.listen (\{ new } -> afterCacheStateChange new) cacheState
 
-      pure $ loader { nodeId, session } loadCorpusWithChild $
+      useLoader { nodeId, session } loadCorpusWithChild $
         \corpusData@{ corpusId, corpusNode, defaultListId } -> do
           let NodePoly { date, hyperdata: Hyperdata h, name } = corpusNode
               CorpusInfo { authors, desc, query } = getCorpusInfo h.fields

src/Gargantext/Components/RangeSlider.purs

@@ -6,12 +6,12 @@
 -- | epsilon (smallest difference)
 module Gargantext.Components.RangeSlider where
 
-import Prelude
+import Data.Generic.Rep (class Generic)
+import Data.Generic.Rep.Eq (genericEq)
 import Data.Int (fromNumber)
 import Data.Maybe (Maybe(..), fromMaybe)
 import Data.Nullable (Nullable, null)
 import Data.Traversable (traverse_)
-import Data.Tuple.Nested ((/\))
 import DOM.Simple as DOM
 import DOM.Simple.Document (document)
 import DOM.Simple.Event as Event
@@ -22,6 +22,9 @@ import Effect (Effect)
 import Math as M
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Toestand as T
+
+import Gargantext.Prelude
 
 import Gargantext.Utils.Math (roundToMultiple)
 import Gargantext.Utils.Range as Range
@@ -51,6 +54,9 @@ rangeSlider :: Record Props -> R.Element
 rangeSlider props = R.createElement rangeSliderCpt props []
 
 data Knob = MinKnob | MaxKnob
+derive instance genericKnob :: Generic Knob _
+instance eqKnob :: Eq Knob where
+  eq = genericEq
 
 data RangeUpdate = SetMin Number | SetMax Number
 
@@ -70,10 +76,12 @@ rangeSliderCpt = here.component "rangeSlider" cpt
       -- high knob
       highElem <- (R.useRef null) :: R.Hooks (R.Ref (Nullable DOM.Element)) -- a dom ref to the high knob
       -- The value of the user's selection
-      value /\ setValue <- R.useState' $ initialValue props
+      value <- T.useBox $ initialValue props
+      value' <- T.useLive T.unequal value
 
       -- the knob we are currently in a drag for. set by mousedown on a knob
-      dragKnob /\ setDragKnob <- R.useState' $ (Nothing :: Maybe Knob)
+      dragKnob <- T.useBox (Nothing :: Maybe Knob)
+      dragKnob' <- T.useLive T.unequal dragKnob
 
       -- the handler functions for trapping mouse events, so they can be removed
       mouseMoveHandler <- (R.useRef $ Nothing) :: R.Hooks (R.Ref (Maybe (EL.Callback Event.MouseEvent)))
@@ -84,24 +92,24 @@ rangeSliderCpt = here.component "rangeSlider" cpt
             R.setRef mouseMoveHandler $ Nothing
             R.setRef mouseUpHandler $ Nothing
 
-      R2.useLayoutEffect1' dragKnob $ \_ -> do
+      R2.useLayoutEffect1' dragKnob' $ \_ -> do
         let scalePos = R2.readPositionRef scaleElem
         let lowPos = R2.readPositionRef lowElem
         let highPos = R2.readPositionRef highElem
 
-        case dragKnob of
+        case dragKnob' of
           Just knob -> do
             let drag = (getDragScale knob scalePos lowPos highPos) :: Maybe Range.NumberRange
 
             let onMouseMove = EL.callback $ \(event :: Event.MouseEvent) -> do
                   case reproject drag scalePos props.bounds props.epsilon (R2.domMousePosition event) of
                     Just val -> do
-                      setKnob knob setValue value val
-                      props.onChange $ knobSetter knob value val
+                      setKnob knob value value' val
+                      props.onChange $ knobSetter knob value' val
                     Nothing -> destroy unit
             let onMouseUp = EL.callback $ \(_event :: Event.MouseEvent) -> do
                   --props.onChange $ knobSetter knob value val
-                  setDragKnob $ const Nothing
+                  T.write_ Nothing dragKnob
                   destroy unit
             EL.addEventListener document "mousemove" onMouseMove
             EL.addEventListener document "mouseup" onMouseUp
@@ -109,10 +117,10 @@ rangeSliderCpt = here.component "rangeSlider" cpt
             R.setRef mouseUpHandler $ Just onMouseUp
           Nothing -> destroy unit
       pure $ H.div { className, aria }
-        [ renderScale scaleElem props value
-        , renderScaleSel scaleSelElem props value
-        , renderKnob MinKnob lowElem  value props.bounds setDragKnob precision
-        , renderKnob MaxKnob highElem value props.bounds setDragKnob precision
+        [ renderScale scaleElem props value'
+        , renderScaleSel scaleSelElem props value'
+        , renderKnob MinKnob lowElem  value' props.bounds dragKnob precision
+        , renderKnob MaxKnob highElem value' props.bounds dragKnob precision
         ]
     className = "range-slider"
     aria = { label: "Range Slider Control. Expresses filtering data by a minimum and maximum value range through two slider knobs. Knobs can be adjusted with the arrow keys." }
@@ -127,8 +135,8 @@ destroyEventHandler name ref = traverse_ destroy $ R.readRef ref
       EL.removeEventListener document name handler
       R.setRef ref Nothing
 
-setKnob :: Knob -> R.Setter Range.NumberRange -> Range.NumberRange -> Number -> Effect Unit
-setKnob knob setValue r val = setValue $ const $ knobSetter knob r val
+setKnob :: Knob -> T.Box Range.NumberRange -> Range.NumberRange -> Number -> Effect Unit
+setKnob knob value r val = T.write_ (knobSetter knob r val) value
 
 knobSetter :: Knob -> Range.NumberRange -> Number -> Range.NumberRange
 knobSetter MinKnob = Range.withMin
@@ -165,7 +173,7 @@ renderScaleSel ref props (Range.Closed {min, max}) =
     computeWidth = (show $ 100.0 * (percOffsetMax - percOffsetMin)) <> "%"
 
 
-renderKnob :: Knob -> R.Ref (Nullable DOM.Element) -> Range.NumberRange -> Bounds -> R.Setter (Maybe Knob) -> Int -> R.Element
+renderKnob :: Knob -> R.Ref (Nullable DOM.Element) -> Range.NumberRange -> Bounds -> T.Box (Maybe Knob) -> Int -> R.Element
 renderKnob knob ref (Range.Closed value) bounds set precision =
   H.div { ref, tabIndex, className, aria, on: { mouseDown: onMouseDown }, style } [
       H.div { className: "button" }
@@ -181,7 +189,7 @@ renderKnob knob ref (Range.Closed value) bounds set precision =
     aria = { label: labelPrefix knob <> "value: " <> show val }
     labelPrefix MinKnob = "Minimum "
     labelPrefix MaxKnob = "Maximum "
-    onMouseDown _ = set $ const $ Just knob
+    onMouseDown _ = T.write_ (Just knob) set
     percOffset = Range.normalise bounds val
     style = { left: (show $ 100.0 * percOffset) <> "%" }
     val = case knob of

src/Gargantext/Components/Router.purs

@@ -42,7 +42,7 @@ import Gargantext.Utils.Reactix as R2
 here :: R2.Here
 here = R2.here "Gargantext.Components.Router"
 
-type Props = ( boxes :: Boxes, tasks :: T.Box (Maybe GAT.Reductor) )
+type Props = ( boxes :: Boxes, tasks :: GAT.Reductor )
 
 type SessionProps = ( session :: R.Context Session, sessionId :: SessionId | Props )
 

src/Gargantext/Components/Tab.purs

@@ -6,6 +6,7 @@ import Data.Tuple (Tuple)
 import Data.Tuple.Nested ((/\))
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Toestand as T
 
 import Gargantext.Utils.Reactix as R2
 
@@ -24,21 +25,23 @@ tabs props = R.createElement tabsCpt props []
 tabsCpt :: R.Component TabsProps
 tabsCpt = here.component "tabs" cpt where
   cpt props _ = do
-    (activeTab /\ setActiveTab) <- R.useState' props.selected
+    activeTab <- T.useBox props.selected
+    activeTab' <- T.useLive T.unequal activeTab
+
     pure $ H.div {}
       [ H.nav {}
         [ H.br {}
         , H.div { className: "nav nav-tabs", title: "Search result" }
-          (mapWithIndex (button setActiveTab activeTab) props.tabs) 
+          (mapWithIndex (button activeTab activeTab') props.tabs)
         ]
       , H.div { className: "tab-content" }
-        (mapWithIndex (item activeTab) props.tabs)
+        (mapWithIndex (item activeTab') props.tabs)
       ]
-  button setActiveTab selected index (name /\ _) =
+  button activeTab selected index (name /\ _) =
     H.a { className, on: { click } } [ H.text name ] where
       eq = index == selected
       className = "nav-item nav-link" <> (if eq then " active" else "")
-      click e = setActiveTab (const index)
+      click e = T.write_ index activeTab
   item selected index (_ /\ cpt') = tab { selected, index } [ cpt' ]
 
 -- TODO: document what these are (selection, item indices)

src/Gargantext/Components/Themes.purs

 module Gargantext.Components.Themes where
 
 import Data.Array as A
+import Data.Generic.Rep (class Generic)
+import Data.Generic.Rep.Eq (genericEq)
 import Data.Maybe (Maybe(..))
-import Data.Tuple (fst)
-import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import FFI.Simple ((.=))
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Toestand as T
 
 import Gargantext.Prelude
 import Gargantext.Utils.Reactix as R2
@@ -18,8 +19,11 @@ here = R2.here "Gargantext.Components.Themes"
 stylesheetElId :: String
 stylesheetElId = "bootstrap-css"
 
-newtype Theme = Theme { name :: String
-                      , location :: String }
+newtype Theme = Theme { location :: String
+                      , name :: String }
+derive instance genericTheme :: Generic Theme _
+instance genericEq :: Eq Theme where
+  eq = genericEq
 
 themeName :: Theme -> String
 themeName (Theme { name }) = name
@@ -68,16 +72,17 @@ themeSwitcherCpt :: R.Component ThemeSwitcherProps
 themeSwitcherCpt = here.component "themeSwitcher" cpt
   where
     cpt { theme, themes } _ = do
-      currentTheme <- R.useState' theme
+      currentTheme <- T.useBox theme
+      currentTheme' <- T.useLive T.unequal currentTheme
 
       let option (Theme { name }) = H.option { value: name } [ H.text name ]
       let options = map option themes
 
       pure $ R2.select { className: "form-control"
-                       , defaultValue: themeName $ fst currentTheme
+                       , defaultValue: themeName currentTheme'
                        , on: { change: onChange currentTheme } } options
       where
-        onChange (_ /\ setCurrentTheme) e = do
+        onChange currentTheme e = do
           let value = R.unsafeEventValue e
           let mTheme = A.head $ A.filter (\(Theme { name }) -> value == name) themes
 
@@ -85,4 +90,4 @@ themeSwitcherCpt = here.component "themeSwitcher" cpt
             Nothing -> pure unit
             Just t  -> do
               switchTheme t
-              setCurrentTheme $ const t
+              T.write_ t currentTheme

src/Gargantext/Version.purs

@@ -7,6 +7,7 @@ import Effect.Class (liftEffect)
 import Prelude
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Toestand as T
 
 import Gargantext.Config.REST as REST
 import Gargantext.Ends (toUrl)
@@ -37,20 +38,21 @@ versionCpt :: R.Component VersionProps
 versionCpt = here.component "version" cpt
   where
     cpt { session } _ = do
-      (versionBack /\ setVer) <- R.useState' "No Backend Version"
+      versionBack <- T.useBox "No Backend Version"
+      versionBack' <- T.useLive T.unequal versionBack
 
       R.useEffect' $ do
         launchAff_ $ do
           v <- getBackendVersion session
-          liftEffect $ setVer $ const v
+          liftEffect $ T.write_ v versionBack
 
-      pure $ case version == versionBack of
+      pure $ case version == versionBack' of
         true  -> H.a { className: "fa fa-check-circle-o"
                      , textDecoration: "none"
                      , title: "Versions match: frontend ("
                             <> version
                             <> "), backend ("
-                            <> versionBack
+                            <> versionBack'
                             <> ")"
                       } []
         false -> H.a { className: "fa fa-exclamation-triangle"
@@ -58,7 +60,7 @@ versionCpt = here.component "version" cpt
                      , title: "Versions mismatch: frontend ("
                             <> version
                             <> "), backend ("
-                            <> versionBack
+                            <> versionBack'
                             <> ")"
                      } []