[toestand] refactor node action search

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

 module Gargantext.Components.Forest.Tree.Node.Action where
 
+import Data.Generic.Rep (class Generic)
+import Data.Generic.Rep.Eq (genericEq)
 import Data.Maybe (Maybe(..))
 import Effect.Aff (Aff)
 
-import Gargantext.Prelude (class Show, Unit)
-import Gargantext.Sessions (Session)
-import Gargantext.Types  as GT
+import Gargantext.Prelude
+
 import Gargantext.Components.Forest.Tree.Node.Tools.SubTree.Types (SubTreeOut, SubTreeParams(..))
 import Gargantext.Components.Forest.Tree.Node.Settings (NodeAction(..), glyphiconNodeAction)
 import Gargantext.Components.Forest.Tree.Node.Action.Upload.Types (FileType, UploadFileBlob)
 import Gargantext.Components.Forest.Tree.Node.Action.Update.Types (UpdateNodeParams)
 import Gargantext.Components.Forest.Tree.Node.Action.Contact.Types (AddContactParams)
+import Gargantext.Sessions (Session)
+import Gargantext.Types  as GT
 
 type Props =
   ( dispatch :: Action -> Aff Unit

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

@@ -31,18 +31,19 @@ mergeNodeCpt :: R.Component SubTreeParamsIn
 mergeNodeCpt = here.component "mergeNode" cpt
   where
     cpt p@{dispatch, subTreeParams, id, nodeType, session, handed} _ = do
-      action@(valAction /\ setAction) :: R.State Action <- R.useState' (MergeNode {params:Nothing})
+      action@(action' /\ _) :: R.State Action <- R.useState' (MergeNode {params:Nothing})
 
       merge   <- T.useBox false
       options <- T.useBox (Set.singleton GT.MapTerm)
 
-      let button = case valAction of
+      let button = case action' of
             MergeNode {params} -> case params of
               Just val -> submitButton (MergeNode {params: Just val}) dispatch
               Nothing -> H.div {} []
             _                   -> H.div {} []
 
-      pure $ panel [ subTreeView { action
+      pure $ panel
+        [ subTreeView { action
                       , dispatch
                       , id
                       , nodeType

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

@@ -5,6 +5,7 @@ import Effect (Effect)
 import Effect.Aff (Aff, launchAff)
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Toestand as T
 
 import Gargantext.Prelude
 
@@ -16,34 +17,45 @@ import Gargantext.Components.Lang (allLangs)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (ID)
 import Gargantext.Types as GT
+import Gargantext.Utils.Reactix as R2
 
+here :: R2.Here
+here = R2.here "Gargantext.Components.Forest.Tree.Node.Action.Search"
+
+
+type Props =
+  ( dispatch  :: Action -> Aff Unit
+  , id        :: Maybe ID
+  , nodePopup :: Maybe NodePopup
+  , session   :: Session )
 
 -- | Action : Search
-actionSearch :: Session
-            -> Maybe ID
-            -> (Action -> Aff Unit)
-            -> Maybe NodePopup
-            -> R.Hooks R.Element
-actionSearch session id dispatch nodePopup = do
-  search <- R.useState' $ defaultSearch { node_id = id }
-  pure $ R.fragment [ H.p { className: "action-search" }
-                          [ H.text $ "Search and create a private "
-                                  <> "corpus with the search query as corpus name." ]
-                    , searchBar { langs: allLangs
-                                , onSearch: searchOn dispatch nodePopup
-                                , search
-                                , session
-                                }
-                    ]
-    where
-      searchOn :: (Action -> Aff Unit)
-               -> Maybe NodePopup
-               -> GT.AsyncTaskWithType
-               -> Effect Unit
-      searchOn dispatch' p task = do
-        _ <- launchAff $ dispatch' (DoSearch task)
-        -- close popup
-        _ <- launchAff $ dispatch' ClosePopover
-        -- TODO
-        --snd p $ const Nothing
-        pure unit
+actionSearch :: R2.Component Props
+actionSearch = R.createElement actionSearchCpt
+
+actionSearchCpt :: R.Component Props
+actionSearchCpt = here.component "actionSearch" cpt
+  where
+    cpt { dispatch, id, nodePopup, session } _ = do
+      search <- T.useBox $ defaultSearch { node_id = id }
+      pure $ R.fragment [ H.p { className: "action-search" }
+                              [ H.text $ "Search and create a private "
+                                      <> "corpus with the search query as corpus name." ]
+                        , searchBar { langs: allLangs
+                                    , onSearch: searchOn dispatch nodePopup
+                                    , search
+                                    , session
+                                    } []
+                        ]
+        where
+          searchOn :: (Action -> Aff Unit)
+                  -> Maybe NodePopup
+                  -> GT.AsyncTaskWithType
+                  -> Effect Unit
+          searchOn dispatch' p task = do
+            _ <- launchAff $ dispatch' (DoSearch task)
+            -- close popup
+            _ <- launchAff $ dispatch' ClosePopover
+            -- TODO
+            --snd p $ const Nothing
+            pure unit

src/Gargantext/Components/Forest/Tree/Node/Action/Search/Frame.purs

 module Gargantext.Components.Forest.Tree.Node.Action.Search.Frame where
 
-import Gargantext.Prelude (discard, identity, pure, unit, ($), (<>), (==), class Show)
 import DOM.Simple as DOM
 import DOM.Simple.Event (MessageEvent)
 import DOM.Simple.EventListener (Callback, addEventListener, callback)
@@ -13,9 +12,12 @@ import Data.Tuple (Tuple(..))
 import Data.Tuple.Nested ((/\))
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Toestand as T
 import URI.Extra.QueryPairs as NQP
 import URI.Query as Query
 
+import Gargantext.Prelude
+
 import Gargantext.Components.Forest.Tree.Node.Action.Search.Types
   ( DataField(..), Search, isIsTex_Advanced )
 import Gargantext.Utils.Reactix as R2
@@ -37,59 +39,63 @@ instance showFrameSource :: Show FrameSource where
 
 type SearchIFramesProps = (
     iframeRef :: R.Ref (Nullable DOM.Element)
-  , search :: R.State Search
+  , search    :: T.Box Search
   )
 
-searchIframes :: Record SearchIFramesProps -> R.Element
-searchIframes props = R.createElement searchIframesCpt props []
+searchIframes :: R2.Component SearchIFramesProps
+searchIframes = R.createElement searchIframesCpt
 
 searchIframesCpt :: R.Component SearchIFramesProps
 searchIframesCpt = here.component "searchIframes" cpt
   where
-    cpt { iframeRef, search: search@(search' /\ _) } _ = do
+    cpt { iframeRef, search } _ = do
+      search' <- T.useLive T.unequal search
+
       pure $ if isIsTex_Advanced search'.datafield
-         then divIframe { frameSource: Istex, iframeRef, search }
+         then divIframe { frameSource: Istex, iframeRef, search } []
       else
         if Just Web == search'.datafield
-           then divIframe { frameSource: Searx, iframeRef, search }
+           then divIframe { frameSource: Searx, iframeRef, search } []
            else H.div {} []
 
 
 type IFrameProps = (
     frameSource :: FrameSource
-  , iframeRef :: R.Ref (Nullable DOM.Element)
-  , search :: R.State Search
+  , iframeRef   :: R.Ref (Nullable DOM.Element)
+  , search      :: T.Box Search
   )
 
-divIframe :: Record IFrameProps -> R.Element
-divIframe props = R.createElement divIframeCpt props []
+divIframe :: R2.Component IFrameProps
+divIframe = R.createElement divIframeCpt
 
 divIframeCpt :: R.Component IFrameProps
 divIframeCpt = here.component "divIframe" cpt
   where
-    cpt { frameSource, iframeRef, search: search@(search' /\ _) } _ = do
+    cpt props _ = do
       pure $ H.div { className: "frame-search card" }
-                   [ iframeWith { frameSource, iframeRef, search } ]
+                   [ iframeWith props [] ]
 
 frameUrl :: FrameSource -> String
 frameUrl Istex = "https://istex.frame.gargantext.org"
 frameUrl Searx = "https://searx.frame.gargantext.org" -- 192.168.1.4:8080"
 
 
-iframeWith :: Record IFrameProps -> R.Element
-iframeWith props = R.createElement iframeWithCpt props []
+iframeWith :: R2.Component IFrameProps
+iframeWith = R.createElement iframeWithCpt
 
 iframeWithCpt :: R.Component IFrameProps
 iframeWithCpt = here.component "iframeWith" cpt
   where
-    cpt { frameSource, iframeRef, search: (search /\ setSearch) } _ =
-      pure $ H.iframe { src: src frameSource search.term
+    cpt { frameSource, iframeRef, search } _ = do
+      search' <- T.useLive T.unequal search
+
+      pure $ H.iframe { src: src frameSource search'.term
                       , width: "100%"
                       , height: "100%"
                       , ref: iframeRef
                       , on: { load: \_ -> do
                                  addEventListener window "message" (changeSearchOnMessage url)
-                                 R2.postMessage iframeRef search.term
+                                 R2.postMessage iframeRef search'.term
                             }
                       } []
       where
@@ -100,7 +106,7 @@ iframeWithCpt = here.component "iframeWith" cpt
         changeSearchOnMessage url' =
                 callback $ \m -> if R2.getMessageOrigin m == url' then do
                                    let {url'', term} = R2.getMessageData m
-                                   setSearch $ _ {url = url'', term = term}
+                                   T.modify_ (_ {url = url'', term = term}) search
                                  else
                                     pure unit
 

src/Gargantext/Components/Forest/Tree/Node/Action/Search/SearchBar.purs

@@ -7,6 +7,7 @@ import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Toestand as T
 
 import Gargantext.Components.Forest.Tree.Node.Action.Search.SearchField (searchField)
 import Gargantext.Components.Forest.Tree.Node.Action.Search.Types -- (Database, SearchQuery(..), defaultSearchQuery, performSearch, Lang(..))
@@ -21,17 +22,17 @@ here = R2.here "Gargantext.Components.Forest.Tree.Node.Action.Search.SearchBar"
 
 type Props = ( langs     :: Array Lang
              , onSearch  :: GT.AsyncTaskWithType -> Effect Unit
-             , search    :: R.State Search
+             , search    :: T.Box Search
              , session   :: Session
              )
 
-searchBar :: Record Props -> R.Element
-searchBar props = R.createElement searchBarCpt props []
+searchBar :: R2.Component Props
+searchBar = R.createElement searchBarCpt
 
 searchBarCpt :: R.Component Props
 searchBarCpt = here.component "searchBar" cpt
   where
-    cpt {langs, onSearch, search: search@(s /\ _), session} _ = do
+    cpt { langs, onSearch, search, session } _ = do
       --onSearchChange session s
       pure $ H.div { className: "search-bar" }
                    [ searchField { databases:allDatabases
@@ -39,5 +40,5 @@ searchBarCpt = here.component "searchBar" cpt
                                  , onSearch
                                  , search
                                  , session
-                                 }
+                                 } []
                    ]

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

@@ -12,20 +12,17 @@ import Gargantext.Prelude (class Read, class Show, class Eq)
 data FileType = CSV | CSV_HAL | WOS | PresseRIS | Arbitrary
 
 derive instance genericFileType :: Generic FileType _
-
 instance eqFileType :: Eq FileType where
   eq = genericEq
-
 instance showFileType :: Show FileType where
   show = genericShow
-
 instance readFileType :: Read FileType where
   read :: String -> Maybe FileType
+  read "Arbitrary" = Just Arbitrary
   read "CSV"       = Just CSV
   read "CSV_HAL"   = Just CSV_HAL
   read "PresseRIS" = Just PresseRIS
   read "WOS"       = Just WOS
-  read "Arbitrary" = Just Arbitrary
   read _           = Nothing
 
 

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

@@ -203,5 +203,5 @@ panelActionCpt = here.component "panelAction" cpt
     cpt {action : Publish {subTreeParams}, dispatch, id, nodeType, session, handed} _ =
       pure $ Share.shareNode {dispatch, id, nodeType, session, subTreeParams, handed}
     cpt props@{action: SearchBox, id, session, dispatch, nodePopup} _ =
-      actionSearch session (Just id) dispatch nodePopup
+      pure $ actionSearch { dispatch, id: (Just id), nodePopup, session } []
     cpt _ _ = pure $ H.div {} []

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

@@ -7,6 +7,7 @@ import Effect.Aff (Aff)
 import React.SyntheticEvent     as E
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Toestand as T
 
 import Gargantext.Prelude
 

src/Gargantext/Components/Nodes/Texts/SidePanelToggleButton.purs

@@ -6,6 +6,7 @@ import Data.Tuple.Nested ((/\))
 import Prelude
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Toestand as T
 
 import Gargantext.Components.Nodes.Texts.Types
 import Gargantext.Utils.Reactix as R2
@@ -13,7 +14,7 @@ import Gargantext.Utils.Reactix as R2
 here :: R2.Here
 here = R2.here "Gargantext.Components.Nodes.Texts.SidePanelToggleButton"
 
-type Props = ( state :: R.State SidePanelState )
+type Props = ( state :: T.Box SidePanelState )
 
 sidePanelToggleButton :: R2.Component Props
 sidePanelToggleButton = R.createElement sidePanelToggleButtonCpt
@@ -22,11 +23,11 @@ sidePanelToggleButtonCpt :: R.Component Props
 sidePanelToggleButtonCpt = here.component "sidePanelToggleButton" cpt
   where
     cpt { state } _ = do
-      let (open /\ setOpen) = state
+      open' <- T.useLive T.unequal state
 
       pure $
         H.button { className: "btn btn-primary"
-                 , on: { click: \_ -> setOpen $ toggleSidePanelState } } [ H.text (text open) ]
+                 , on: { click: \_ -> T.modify_ toggleSidePanelState state } } [ H.text (text open') ]
     text InitialClosed = "Show Side Panel"
     text Opened        = "Hide Side Panel"
     text Closed        = "Show Side Panel"