[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,31 +397,25 @@ 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
-          { colNames
-          , container: tableContainer
-              { dispatch: performAction
-              , ngramsChildren
-              , ngramsParent
-              , ngramsSelection
-              , ngramsTable
-              , path
-              , syncResetButton: [ syncResetButton ]
-              , tabNgramType }
-          , params
-          , rows: filteredConvertedRows
+    pure $ R.fragment
+      [ TT.table
+        { colNames
+        , container: tableContainer
+          { dispatch: performAction
+          , ngramsChildren
+          , ngramsParent
+          , ngramsSelection
+          , ngramsTable
+          , path
           , syncResetButton: [ syncResetButton ]
-          , totalRecords
-          , wrapColElts:
-            wrapColElts { allNgramsSelected, dispatch: performAction, ngramsSelection } scoreType
-          }
+          , tabNgramType }
+        , params
+        , rows: filteredConvertedRows
+        , syncResetButton: [ syncResetButton ]
+        , totalRecords
+        , wrapColElts:
+          wrapColElts { allNgramsSelected, dispatch: performAction, ngramsSelection } scoreType
+        }
       , syncResetButton
       ]
       where

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,44 +37,57 @@ 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" }
-              [ if searchQuery' /= ""
-                then removeButton
-                else H.span { className: "fa fa-search input-group-text" } []
-              ]
-          removeButton =
-            H.button { className: "btn btn-danger"
-                     , on: {click: \e -> T.write "" searchQuery}}
-              [ H.span {className: "fa fa-times"} []]
-
-          fieldInput searchQuery' =
-            H.input { className: "form-control"
-                    , defaultValue: searchQuery'
-                    , name: "search"
-                    , on: { input: \e -> T.write (R.unsafeEventValue e) searchQuery }
-                    , placeholder: "Search"
-                    , type: "value"
-                    }
 
+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
+          H.button { className: "btn btn-danger"
+                   , 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
+  )
+
+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"
+                   , type: "value"
+                   }
+    
 type SelectionCheckboxProps =
   ( allNgramsSelected :: Boolean
   , dispatch          :: Dispatch