[table] automatically sync on ngram addition

* #378

src/Gargantext/Components/NgramsTable.purs

@@ -26,6 +26,8 @@ import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Effect.Aff (Aff)
 import Gargantext.Components.App.Store (Boxes)
+import Gargantext.Components.Bootstrap as B
+import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
 import Gargantext.Components.NgramsTable.Components as NTC
 import Gargantext.Components.NgramsTable.Core (Action(..), CoreAction(..), CoreState, Dispatch, NgramsElement(..), NgramsPatch(..), NgramsTable, NgramsTerm, PageParams, PatchMap(..), Versioned(..), VersionedNgramsTable, VersionedWithCountNgramsTable, _NgramsElement, _NgramsRepoElement, _NgramsTable, _children, _list, _ngrams, _ngrams_repo_elements, _ngrams_scores, _occurrences, _root, addNewNgramA, applyNgramsPatches, applyPatchSet, chartsAfterSync, commitPatch, convOrderBy, coreDispatch, filterTermSize, fromNgramsPatches, ngramsRepoElementToNgramsElement, ngramsTermText, normNgram, patchSetFromMap, replace, setTermListA, singletonNgramsTablePatch, syncResetButtons, toVersioned)
 import Gargantext.Components.NgramsTable.Loader (useLoaderWithCacheAPI)
@@ -103,6 +105,7 @@ type TableContainerProps =
   , path              :: T.Box PageParams
   , tabNgramType      :: CTabNgramType
   , syncResetButton   :: Array R.Element
+  , addCallback       :: String -> Effect Unit
   )
 
 tableContainer :: Record TableContainerProps -> Record TT.TableContainerProps -> R.Element
@@ -117,6 +120,7 @@ tableContainerCpt { dispatch
                   , queryExactMatches
                   , tabNgramType
                   , syncResetButton
+                  , addCallback
                   } = here.component "tableContainer" cpt
   where
     cpt props _ = do
@@ -132,13 +136,10 @@ tableContainerCpt { dispatch
                   , if (not queryExactMatches || A.null props.tableBody) && searchQuery /= "" then
                   -- , if (not $ Set.member (normNgram tabNgramType searchQuery) ngramsSelection) && searchQuery /= "" then
                       H.li { className: "list-group-item" }
-                        [ H.button { className: "btn btn-primary"
-                                   , on: { click: const $ dispatch
-                                           $ CoreAction
-                                           $ addNewNgramA
-                                           (normNgram tabNgramType searchQuery)
-                                           MapTerm
-                                         }
+                      [
+                        B.button
+                        { variant: ButtonVariant Primary
+                        , callback: const $ addCallback searchQuery
                         }
                         [ H.text ("Add " <> searchQuery) ]
                       ] else H.div {} []
@@ -379,6 +380,17 @@ loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
                                            , ngramsLocalPatch
                                            , performAction: performAction <<< CoreAction }
 
+        addCallback searchQuery = do
+          -- add new ngram as a "Map Term"
+          performAction
+            $ CoreAction
+            $ addNewNgramA (normNgram tabNgramType searchQuery) MapTerm
+          -- then sync the ngram list
+          performAction
+            $ CoreAction
+            $ Synchronize { afterSync: afterSync' }
+
+
         -- autoUpdate :: Array R.Element
 --         autoUpdate = if withAutoUpdate then
 --                        [ R2.buff
@@ -410,7 +422,9 @@ loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
           , path
           , queryExactMatches: exactMatches
           , syncResetButton: [ syncResetButton ]
-          , tabNgramType }
+          , tabNgramType
+          , addCallback
+          }
         , params
         , rows: filteredConvertedRows
         , syncResetButton: [ syncResetButton ]