[toestand] more R.State refactoring

src/Gargantext/Components/DocsTable.purs

@@ -100,14 +100,14 @@ docViewLayoutCpt :: R.Component LayoutProps
 docViewLayoutCpt = here.component "docViewLayout" cpt
   where
     cpt layout _children = do
-      query <- R.useState' ""
+      query <- T.useBox ""
       let params = TT.initialParams
       pure $ docView { layout, params, query } []
 
 type Props = (
     layout :: Record LayoutProps
   , params :: TT.Params
-  , query :: R.State Query
+  , query  :: T.Box Query
   )
 
 docView :: R2.Component Props
@@ -131,11 +131,12 @@ docViewCpt = here.component "docView" cpt where
       , query
       } _ = do
     cacheState' <- T.useLive T.unequal cacheState
+    query' <- T.useLive T.unequal query
 
     pure $ H.div { className: "doc-table-doc-view container1" }
       [ R2.row
         [ chart
-        , if showSearch then searchBar query else H.div {} []
+        , if showSearch then searchBar { query } [] else H.div {} []
         , H.div {className: "col-md-12"}
           [ pageLayout { cacheState
                        , frontends
@@ -144,53 +145,61 @@ docViewCpt = here.component "docView" cpt where
                        , mCorpusId
                        , nodeId
                        , params
-                       , query: fst query
+                       , query: query'
                        , session
                        , sidePanelTriggers
                        , tabType
                        , totalRecords
                        } ] ] ]
 
-searchBar :: R.State Query -> R.Element
-searchBar (query /\ setQuery) = R.createElement el {} []
+type SearchBarProps =
+  ( query :: T.Box Query )
+
+searchBar :: R2.Component SearchBarProps
+searchBar = R.createElement searchBarCpt
+
+searchBarCpt :: R.Component SearchBarProps
+searchBarCpt = here.component "searchBar" cpt
   where
-    el = here.component "SearchBar" cpt
-    cpt {} _children = do
-      queryText <- R.useState' query
+    cpt { query } _children = do
+      query' <- T.useLive T.unequal query
+      queryText <- T.useBox query'
+      queryText' <- T.useLive T.unequal queryText
 
       pure $ H.div {className: "col-md-12 row"}
         [ H.div {className: "col-md-3"} []
-        , H.div {className: "col-md-1"} [if query /= "" then clearButton else H.div {} []]
+        , H.div {className: "col-md-1"} [if query' /= "" then (clearButton query) else H.div {} []]
         , H.div {className: "col-md-3 form-group"}
-          [ H.input { type: "text"
-                    , className: "form-control"
-                    , on: {change: onSearchChange queryText, keyUp: onSearchKeyup queryText}
-                    , placeholder: query
-                    , defaultValue: query}
+          [ H.input { className: "form-control"
+                    , defaultValue: query'
+                    , on: { change: onSearchChange queryText
+                          , keyUp: onSearchKeyup query queryText' }
+                    , placeholder: query'
+                    , type: "text" }
           ]
-        , H.div {className: "col-md-1"} [searchButton queryText]
+        , H.div {className: "col-md-1"} [ searchButton query queryText' ]
         ]
 
-    onSearchChange :: forall e. R.State Query -> e -> Effect Unit
-    onSearchChange (_ /\ setQueryText) = \e ->
-      setQueryText $ const $ R.unsafeEventValue e
+    onSearchChange :: forall e. T.Box Query -> e -> Effect Unit
+    onSearchChange queryText e =
+      T.write_ (R.unsafeEventValue e) queryText
 
-    onSearchKeyup :: R.State Query -> DE.KeyboardEvent -> Effect Unit
-    onSearchKeyup (queryText /\ _) = \e ->
+    onSearchKeyup :: T.Box Query -> Query -> DE.KeyboardEvent -> Effect Unit
+    onSearchKeyup query queryText e =
       if DE.key e == "Enter" then
-        setQuery $ const queryText
+        T.write_ queryText query
       else
-        pure $ unit
+        pure unit
 
-    searchButton (queryText /\ _) =
-      H.button { type: "submit"
-               , className: "btn btn-primary"
-               , on: {click: \e -> setQuery $ const queryText}}
+    searchButton query queryText' =
+      H.button { className: "btn btn-primary"
+               , on: { click: \e -> T.write_ queryText' query }
+               , type: "submit" }
         [ H.span {className: "fa fa-search"} [] ]
 
-    clearButton =
+    clearButton query =
       H.button { className: "btn btn-danger"
-               , on: {click: \e -> setQuery $ const ""}}
+               , on: { click: \e -> T.write_ "" query } }
         [ H.span {className: "fa fa-times"} [] ]
 
 mock :: Boolean

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

@@ -6,6 +6,7 @@ import Data.Tuple.Nested ((/\))
 import Effect.Aff (Aff)
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Toestand as T
 
 import Gargantext.Components.Forest.Tree.Node.Action (Action(..))
 import Gargantext.Components.Forest.Tree.Node.Tools (submitButton, panel, checkbox, checkboxesListGroup)
@@ -32,8 +33,8 @@ mergeNodeCpt = here.component "mergeNode" cpt
     cpt p@{dispatch, subTreeParams, id, nodeType, session, handed} _ = do
       action@(valAction /\ setAction) :: R.State Action <- R.useState' (MergeNode {params:Nothing})
 
-      merge   <- R.useState' false
-      options <- R.useState' (Set.singleton GT.MapTerm)
+      merge   <- T.useBox false
+      options <- T.useBox (Set.singleton GT.MapTerm)
 
       let button = case valAction of
             MergeNode {params} -> case params of
@@ -52,15 +53,17 @@ mergeNodeCpt = here.component "mergeNode" cpt
                   , H.ul { className:"merge mx-auto list-group"}
                      ([ H.li { className: "list-group-item" }
                        [ H.h5 { className: "mb-1" } [ H.text "Merge which list?" ]
+                       , checkboxesListGroup { groups: [ GT.MapTerm, GT.CandidateTerm, GT.StopTerm ]
+                                             , options } []
                        ]
-                     ] <> (checkboxesListGroup [ GT.MapTerm, GT.CandidateTerm, GT.StopTerm ] options))
+                     ])
                   , H.ul { className:"merge mx-auto list-group"}
                      [ H.li { className: "list-group-item" }
                        [ H.h5 { className: "mb-1" } [ H.text "Title" ]
                        ]
                      , H.li { className: "list-group-item" }
                        [ H.div { className: " form-check" }
-                         [ checkbox merge
+                         [ checkbox { value: merge }
                          , H.label { className: "form-check-label" } [ H.text "Merge data?" ]
                          ]
                        ]

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

@@ -187,39 +187,54 @@ submitButtonHref action href =
 
 ------------------------------------------------------------------------
 -- | CheckBox tools
--- checkboxes: Array of poolean values (basic: without pending option)
+-- checkboxes: Array of boolean values (basic: without pending option)
 -- checkbox  : One boolean value only
 
-checkbox :: R.State Boolean -> R.Element
-checkbox ( val /\ set ) =
-  H.input
-  { className: "form-check-input", type: "checkbox"
-  , value: val, on: { click } } where
-    click _ = set $ const $ not val
+type CheckboxProps =
+  ( value :: T.Box Boolean )
+
+checkbox :: R2.Leaf CheckboxProps
+checkbox props = R.createElement checkboxCpt props []
+
+checkboxCpt :: R.Component CheckboxProps
+checkboxCpt = here.component "checkbox" cpt
+  where
+    cpt { value } _ = do
+      value' <- T.useLive T.unequal value
+
+      pure $ H.input { className: "form-check-input"
+                     , on: { click }
+                     , type: "checkbox"
+                     , value: value' }
+      where
+        click _ = T.modify_ not value
 
 data CheckBoxes = Multiple | Uniq
 
-checkboxes :: forall a. Ord a => Show a => Array a -> R.State (Set a) -> R.Element
-checkboxes xs (val /\ set) = H.fieldset {} $ map field xs where
-  field a =
-    H.div {}
-    [ H.input { defaultChecked, type: "checkbox", on: { click } }
-    , H.div {} [ H.text $ show a ] ] where
-      click _ = set (const $ toggleSet a val)
-      defaultChecked = Set.member a val
-
-checkboxesListGroup
-  :: forall a. Ord a => Show a => Array a -> R.State (Set a) -> Array R.Element
-checkboxesListGroup xs (val /\ set) = map one xs where
-  one a =
+type CheckboxesListGroup a =
+  ( groups :: Array a
+  , options :: T.Box (Set a) )
+
+checkboxesListGroup :: forall a. Ord a => Show a => R2.Component (CheckboxesListGroup a)
+checkboxesListGroup = R.createElement checkboxesListGroupCpt
+
+checkboxesListGroupCpt :: forall a. Ord a => Show a => R.Component (CheckboxesListGroup a)
+checkboxesListGroupCpt = here.component "checkboxesListGroup" cpt
+  where
+    cpt { groups, options } _ = do
+      options' <- T.useLive T.unequal options
+
+      let one a =
             H.li { className: "list-group-item" }
               [ H.div { className: "form-check" }
-      [ H.input { defaultChecked, type: "checkbox", on: { click }
+                [ H.input { defaultChecked: Set.member a options'
+                          , on: { click: \_ -> T.write_ (toggleSet a options') options
+                                , type: "checkbox" }
                           , className: "form-check-input" }
                 , H.label { className: "form-check-label" } [ H.text (show a) ] ]
-    ] where
-      click _ = set (const $ toggleSet a val)
-      defaultChecked = Set.member a val
+              ]
+
+      pure $ R.fragment $ map one $ Set.toUnfoldable options'
 
 prettyNodeType :: GT.NodeType -> String
 prettyNodeType

src/Gargantext/Components/GraphExplorer/ControlsToggleButton.purs

@@ -3,15 +3,18 @@ module Gargantext.Components.GraphExplorer.ControlsToggleButton
   ) where
 
 import Data.Tuple.Nested ((/\))
-import Prelude
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Toestand as T
+
+import Gargantext.Prelude
 
 import Gargantext.Utils.Reactix as R2
 
+here :: R2.Here
 here = R2.here "Gargantext.Components.GraphExplorer.ControlsToggleButton"
 
-type Props = ( state :: R.State Boolean )
+type Props = ( state :: T.Box Boolean )
 
 controlsToggleButton :: Record Props -> R.Element
 controlsToggleButton props = R.createElement controlsToggleButtonCpt props []
@@ -19,11 +22,11 @@ controlsToggleButton props = R.createElement controlsToggleButtonCpt props []
 controlsToggleButtonCpt :: R.Component Props
 controlsToggleButtonCpt = here.component "controlsToggleButton" cpt
   where
-    cpt {state} _ = do
-      let (open /\ setOpen) = state
+    cpt { state } _ = do
+      open' <- T.useLive T.unequal state
       pure $
         H.button
-          { className: "btn btn-primary", on: {click: \_ -> setOpen not } }
-          [ H.text (text open) ]
+          { className: "btn btn-primary", on: {click: \_ -> T.modify_ not state } }
+          [ H.text (text open') ]
     text true = "Hide Controls"
     text false = "Show Controls"

src/Gargantext/Components/GraphExplorer/Types.purs

@@ -115,7 +115,7 @@ type State = (
   --, multiNodeSelection :: R.State Boolean
   --, selectedNodes :: R.State (Set SelectedNode)
   --, showSidePanel :: R.State Boolean
-  --, showControls :: R.State Boolean
+  --, showControls :: T.Box Boolean
   --, showTree :: R.State Boolean
   --, sigmaGraphData :: R.State (Maybe SigmaxTypes.SGraph)
   --, sigmaSettings :: R.State ({|Graph.SigmaSettings})