[search] some refactorings for search input box

src/Gargantext/Components/NgramsTable.purs

@@ -273,6 +273,33 @@ loadedNgramsTable :: R2.Component PropsNoReload
 loadedNgramsTable = R.createElement loadedNgramsTableCpt
 loadedNgramsTableCpt :: R.Component PropsNoReload
 loadedNgramsTableCpt = here.component "loadedNgramsTable" cpt where
+  cpt props@{ path } _ = do
+    searchQuery <- T.useFocused (_.searchQuery) (\a b -> b { searchQuery = a }) path
+    
+    pure $ R.fragment $
+      [ loadedNgramsTableHeader { searchQuery } []
+      , loadedNgramsTableBody props [] ]
+
+type LoadedNgramsTableHeaderProps =
+  ( searchQuery :: T.Box SearchQuery ) 
+
+loadedNgramsTableHeader :: R2.Component LoadedNgramsTableHeaderProps
+loadedNgramsTableHeader = R.createElement loadedNgramsTableHeaderCpt
+loadedNgramsTableHeaderCpt :: R.Component LoadedNgramsTableHeaderProps
+loadedNgramsTableHeaderCpt = here.component "loadedNgramsTableHeader" cpt where
+  cpt { searchQuery } _ = do
+    pure $ R.fragment
+      [ H.h4 {style: {textAlign : "center"}}
+        [ H.span {className: "fa fa-hand-o-down"} []
+        , H.text "Extracted Terms" ]
+      , NTC.searchInput { key: "search-input"
+                        , searchQuery }
+      ]
+
+loadedNgramsTableBody :: R2.Component PropsNoReload
+loadedNgramsTableBody = R.createElement loadedNgramsTableBodyCpt
+loadedNgramsTableBodyCpt :: R.Component PropsNoReload
+loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
   cpt { afterSync
       , boxes: { errors
                , tasks }
@@ -370,14 +397,8 @@ loadedNgramsTableCpt = here.component "loadedNgramsTable" cpt where
                             <<< _Just
             ) =<< ngramsParent
 
-    pure $ R.fragment $
-      autoUpdate path' <>
-      [ H.h4 {style: {textAlign : "center"}}
-        [ H.span {className: "fa fa-hand-o-down"} []
-        , H.text "Extracted Terms" ]
-      , NTC.searchInput { key: "search-input"
-                        , searchQuery }
-      , TT.table
+    pure $ R.fragment
+      [ TT.table
         { colNames
         , container: tableContainer
           { dispatch: performAction

src/Gargantext/Components/NgramsTable/Components.purs

@@ -25,7 +25,6 @@ import Gargantext.Components.NgramsTable.Core
   ( Action(..), Dispatch, NgramsElement, NgramsTable, NgramsTablePatch, NgramsTerm
   , _NgramsElement, _NgramsRepoElement, _PatchMap, _children, _list
   , _ngrams, _occurrences, ngramsTermText, replace, setTermListA )
-import Gargantext.Components.Nodes.Lists.Types as NT
 import Gargantext.Components.Table as Tbl
 import Gargantext.Types as T
 import Gargantext.Utils.Reactix as R2
@@ -38,38 +37,51 @@ type SearchInputProps =
   , searchQuery :: T.Box String
   )
 
-searchInput :: Record SearchInputProps -> R.Element
+searchInput :: R2.Leaf SearchInputProps
 searchInput props = R.createElement searchInputCpt props []
-
 searchInputCpt :: R.Component SearchInputProps
 searchInputCpt = here.component "searchInput" cpt
   where
     cpt { searchQuery } _ = do
-      searchQuery' <- T.useLive T.unequal searchQuery
-
       pure $ R2.row [
         H.div { className: "col-12" } [
           H.div { className: "input-group" }
-            [ searchButton searchQuery'
-            , fieldInput searchQuery'
+            [ searchButton { searchQuery } []
+            , searchFieldInput { searchQuery } []
             ]
           ]
         ]
-        where
-          searchButton searchQuery' =
-            H.div { className: "input-group-prepend" }
+
+type SearchButtonProps =
+  ( searchQuery :: T.Box String
+  )
+
+searchButton :: R2.Component SearchButtonProps
+searchButton = R.createElement searchButtonCpt
+searchButtonCpt :: R.Component SearchButtonProps
+searchButtonCpt = here.component "searchButton" cpt where
+  cpt { searchQuery } _ = do
+    searchQuery' <- T.useLive T.unequal searchQuery
+    
+    pure $ H.div { className: "input-group-prepend" }
       [ if searchQuery' /= ""
-                then removeButton
-                else H.span { className: "fa fa-search input-group-text" } []
-              ]
-          removeButton =
+        then
           H.button { className: "btn btn-danger"
-                     , on: {click: \e -> T.write "" searchQuery}}
+                   , on: {click: \_ -> T.write "" searchQuery}}
           [ H.span {className: "fa fa-times"} []]
+        else H.span { className: "fa fa-search input-group-text" } []
+      ]
+
+type SearchFieldInputProps =
+  ( searchQuery :: T.Box String
+  )
 
-          fieldInput searchQuery' =
-            H.input { className: "form-control"
-                    , defaultValue: searchQuery'
+searchFieldInput :: R2.Component SearchFieldInputProps
+searchFieldInput = R.createElement searchFieldInputCpt
+searchFieldInputCpt :: R.Component SearchFieldInputProps
+searchFieldInputCpt = here.component "searchFieldInput" cpt where
+  cpt { searchQuery } _ = do
+    pure $ H.input { className: "form-control"
                    , name: "search"
                    , on: { input: \e -> T.write (R.unsafeEventValue e) searchQuery }
                    , placeholder: "Search"