[toestand] more R.State refactoring

src/Gargantext/Components/DocsTable.purs

@@ -17,7 +17,6 @@ import Data.String as Str
 import Data.Symbol (SProxy(..))
 import Data.Tuple (Tuple(..), fst)
 import Data.Tuple.Nested ((/\))
-import DOM.Simple.Console (log2)
 import DOM.Simple.Event as DE
 import Effect (Effect)
 import Effect.Aff (Aff)
@@ -288,8 +287,8 @@ pageLayoutCpt = here.component "pageLayout" cpt where
               let route = tableRouteWithPage (p { params = paramsS', query = query })
               res <- get session $ route
               liftEffect $ do
-                log2 "[pageLayout] table route" route
-                log2 "[pageLayout] table res" res
+                here.log2 "table route" route
+                here.log2 "table res" res
               pure $ handleResponse res
             render (Tuple count documents) = pagePaintRaw { documents
                                                           , layout: props { params = paramsS'

src/Gargantext/Components/NgramsTable/Loader.purs

@@ -8,6 +8,7 @@ import Effect.Aff (Aff, launchAff_, throwError)
 import Effect.Class (liftEffect)
 import Effect.Exception (error)
 import Reactix as R
+import Toestand as T
 
 import Gargantext.Prelude
 
@@ -33,35 +34,38 @@ type LoaderWithCacheAPIProps path res ret = (
   )
 
 
-useLoaderWithCacheAPI :: forall path res ret. Eq path => DecodeJson res =>
+useLoaderWithCacheAPI :: forall path res ret. Eq path => DecodeJson res => Eq ret =>
                          Record (LoaderWithCacheAPIProps path res ret)
                       -> R.Hooks R.Element
 useLoaderWithCacheAPI { cacheEndpoint, handleResponse, mkRequest, path, renderer } = do
-  state <- R.useState' Nothing
+  state <- T.useBox Nothing
+  state' <- T.useLive T.unequal state
+
   useCachedAPILoaderEffect { cacheEndpoint
                            , handleResponse
                            , mkRequest
                            , path
                            , state }
-  pure $ maybe (loadingSpinner {}) renderer (fst state)
+  pure $ maybe (loadingSpinner {}) renderer state'
 
 type LoaderWithCacheAPIEffectProps path res ret = (
-    cacheEndpoint :: path -> Aff Version
+    cacheEndpoint  :: path -> Aff Version
   , handleResponse :: Versioned res -> ret
-  , mkRequest :: path -> GUC.Request
-  , path :: path
-  , state :: R.State (Maybe ret)
+  , mkRequest      :: path -> GUC.Request
+  , path           :: path
+  , state          :: T.Box (Maybe ret)
   )
 
-useCachedAPILoaderEffect :: forall path res ret. Eq path => DecodeJson res =>
+useCachedAPILoaderEffect :: forall path res ret. Eq path => DecodeJson res => Eq ret =>
                             Record (LoaderWithCacheAPIEffectProps path res ret)
                          -> R.Hooks Unit
 useCachedAPILoaderEffect { cacheEndpoint
                          , handleResponse
                          , mkRequest
                          , path
-                         , state: state@(state' /\ setState) } = do
+                         , state: state } = do
   oPath <- R.useRef path
+  state' <- T.useLive T.unequal state
 
   R.useEffect' $ do
     if (R.readRef oPath == path) && (isJust state') then
@@ -90,4 +94,4 @@ useCachedAPILoaderEffect { cacheEndpoint
           else
             throwError $ error $ "Fetched clean cache but hashes don't match: " <> show version <> " != " <> show cacheReal
         liftEffect $ do
-          setState $ const $ Just $ handleResponse val
+          T.write_ (Just $ handleResponse val) state

src/Gargantext/Components/Nodes/Corpus/Dashboard.purs

@@ -125,10 +125,10 @@ dashboardLayoutLoadedCpt = here.component "dashboardLayoutLoaded" cpt
                                   , fields }
 
 type CodeEditorProps =
-  ( fields :: List.List FTField
+  ( fields   :: List.List FTField
   , onChange :: List.List FTField -> Effect Unit
-  , nodeId :: NodeID
-  , session :: Session
+  , nodeId   :: NodeID
+  , session  :: Session
   )
 
 dashboardCodeEditor :: R2.Component CodeEditorProps
@@ -139,21 +139,22 @@ dashboardCodeEditorCpt = here.component "dashboardCodeEditor" cpt
   where
     cpt props@{ fields, nodeId, onChange, session } _ = do
       let fieldsWithIndex = List.mapWithIndex (\idx -> \t -> Tuple idx t) fields
-      fieldsS <- R.useState' fieldsWithIndex
-      fieldsRef <- R.useRef fields
+      fieldsS <- T.useBox fieldsWithIndex
+      fields' <- T.useLive T.unequal fieldsS
+      fieldsRef <- R.useRef fields'
 
       -- handle props change of fields
       R.useEffect1' fields $ do
-        if R.readRef fieldsRef == fields then
+        if R.readRef fieldsRef == fields' then
           pure unit
         else do
-          R.setRef fieldsRef fields
-          snd fieldsS $ const fieldsWithIndex
+          R.setRef fieldsRef fields'
+          T.write_ fieldsWithIndex fieldsS
 
       pure $ R.fragment
         [ H.div { className: "row" }
-          [ H.div { className: "btn btn-primary " <> (saveEnabled fieldsWithIndex fieldsS)
-                  , on: { click: onClickSave fieldsS }
+          [ H.div { className: "btn btn-primary " <> (saveEnabled fieldsWithIndex fields')
+                  , on: { click: onClickSave fields' }
                   }
             [ H.span { className: "fa fa-floppy-o" } [  ]
             ]
@@ -162,7 +163,7 @@ dashboardCodeEditorCpt = here.component "dashboardCodeEditor" cpt
           [ H.div { className: "col-12" }
             [ fieldsCodeEditor { fields: fieldsS
                                , nodeId
-                               , session} []
+                               , session } []
             ]
           ]
         , H.div { className: "row" }
@@ -174,11 +175,11 @@ dashboardCodeEditorCpt = here.component "dashboardCodeEditor" cpt
           ]
         ]
       where
-        saveEnabled :: FTFieldsWithIndex -> R.State FTFieldsWithIndex -> String
-        saveEnabled fs (fsS /\ _) = if fs == fsS then "disabled" else "enabled"
+        saveEnabled :: FTFieldsWithIndex -> FTFieldsWithIndex -> String
+        saveEnabled fs fsS = if fs == fsS then "disabled" else "enabled"
 
-        onClickSave :: forall e. R.State FTFieldsWithIndex -> e -> Effect Unit
-        onClickSave (fields' /\ _) _ = do
+        onClickSave :: forall e. FTFieldsWithIndex -> e -> Effect Unit
+        onClickSave fields' _ = do
           here.log "saving (TODO)"
           onChange $ snd <$> fields'
           -- launchAff_ do
@@ -186,9 +187,9 @@ dashboardCodeEditorCpt = here.component "dashboardCodeEditor" cpt
             --             , nodeId
             --             , session }
 
-        onClickAddField :: forall e. R.State FTFieldsWithIndex -> e -> Effect Unit
-        onClickAddField (_ /\ setFieldsS) _ = do
-          setFieldsS $ \fieldsS -> List.snoc fieldsS $ Tuple (List.length fieldsS) defaultField
+        onClickAddField :: forall e. T.Box FTFieldsWithIndex -> e -> Effect Unit
+        onClickAddField fieldsS _ = do
+          T.modify_ (\fs -> List.snoc fs $ Tuple (List.length fs) defaultField) fieldsS
 
 type PredefinedChartProps =
   ( chart         :: P.PredefinedChart

src/Gargantext/Components/TopBar.purs

@@ -85,7 +85,7 @@ divDropdownLeftCpt :: R.Component ()
 divDropdownLeftCpt = here.component "divDropdownLeft" cpt
   where
     cpt {} _ = do
-      show <- R.useState' false
+      show <- T.useBox false
 
       pure $ H.li { className: "nav-item dropdown" } [
           menuButton { element: menuElement, show } []
@@ -151,7 +151,7 @@ divDropdownLeftCpt = here.component "divDropdownLeft" cpt
 
 type MenuButtonProps = (
     element :: LiNav
-  , show :: R.State Boolean
+  , show    :: T.Box Boolean
   )
 
 menuButton :: R2.Component MenuButtonProps
@@ -160,11 +160,11 @@ menuButton = R.createElement menuButtonCpt
 menuButtonCpt :: R.Component MenuButtonProps
 menuButtonCpt = here.component "menuButton" cpt
   where
-    cpt { element: LiNav { title, href, icon, text }, show: (_ /\ setShow) } _ = do
+    cpt { element: LiNav { title, href, icon, text }, show } _ = do
       pure $ H.a { className: "dropdown-toggle navbar-text"
                 -- , data: {toggle: "dropdown"}
                 , href, title
-                , on: { click: \_ -> setShow $ not }
+                , on: { click: \_ -> T.modify_ not show }
                 , role: "button" } [
           H.span { aria: {hidden : true}, className: icon } []
         , H.text (" " <> text)
@@ -173,7 +173,7 @@ menuButtonCpt = here.component "menuButton" cpt
 -- | Menu in the sidebar, syntactic sugar
 type MenuElementsProps = (
     elements :: Array (Array LiNav)
-  , show :: R.State Boolean
+  , show     :: T.Box Boolean
   )
 
 menuElements :: R2.Component MenuElementsProps
@@ -182,15 +182,17 @@ menuElements = R.createElement menuElementsCpt
 menuElementsCpt :: R.Component MenuElementsProps
 menuElementsCpt = here.component "menuElements" cpt
   where
-    cpt { show: false /\ _ } _ = do
-      pure $ H.div {} []
-    cpt { elements, show: (true /\ setShow) } _ = do
-      pure $ H.ul { className: "dropdown-menu"
-                  , on: { click: setShow $ const false }
-                  , style: { display: "block" } } $ intercalate divider $ map (map liNav) elements
-      where
-        divider :: Array R.Element
-        divider = [H.li {className: "dropdown-divider"} []]
+    cpt { elements, show } _ = do
+      show' <- T.useLive T.unequal show
+
+      pure $ if show' then
+               H.ul { className: "dropdown-menu"
+                    , on: { click: \_ -> T.write_ false show }
+                    , style: { display: "block" } } $ intercalate divider $ map (map liNav) elements
+             else
+               H.div {} []
+    divider :: Array R.Element
+    divider = [H.li {className: "dropdown-divider"} []]
 
 -- | surgar for target : "blank"
 --data LiNav_ = LiNav_ { title  :: String

src/Gargantext/Utils/Reactix.purs

@@ -52,12 +52,14 @@ type Leaf p = Record p -> R.Element
 
 type Here =
   { component :: forall p. String -> R.HooksComponent p -> R.Component p
-  , log       :: forall l. l -> Effect Unit }
+  , log       :: forall l. l -> Effect Unit
+  , log2      :: forall l. String -> l -> Effect Unit }
 
 here :: Module -> Here
 here mod =
   { component: R.hooksComponentWithModule mod
-  , log:       log2 ("[" <> mod <> "]") }
+  , log:       log2 ("[" <> mod <> "]")
+  , log2:      \msg -> log2 ("[" <> mod <> "] " <> msg) }
 
 -- newtypes
 type NTHooksComponent props = props -> Array R.Element -> R.Hooks R.Element