[NGRAMS-REPO] add an AutoUpdate component and use it to refresh the NgramsTable every 3 seconds

psc-package.json

@@ -3,6 +3,7 @@
   "set": "master",
   "source": "https://github.com/np/package-sets.git",
   "depends": [
+    "js-timers",
     "psci-support",
     "css",
     "generics-rep",

src/Gargantext/Components/AutoUpdate.purs

+module Gargantext.Components.AutoUpdate where
+
+import Control.Monad.Cont.Trans (lift)
+import Data.Maybe (Maybe(..))
+import Data.Traversable (traverse_)
+import React as React
+import React (ReactClass, ReactElement, Children)
+import React.DOM (div')
+import Gargantext.Prelude
+import Effect (Effect)
+import Effect.Aff (Aff)
+import Effect.Timer (IntervalId, setInterval, clearInterval)
+
+import Thermite (Render, PerformAction, simpleSpec, modifyState_,
+                 createReactSpec, defaultRender)
+
+data Action = Update
+
+type PropsRow =
+  ( duration :: Int
+  , effect   :: Effect Unit
+  )
+
+type Props = { | PropsRow }
+
+type State = { intervalId :: Maybe IntervalId }
+
+autoUpdateClass :: ReactClass { children :: Children | PropsRow }
+autoUpdateClass =
+  React.component "AutoUpdate"
+    (\this -> do
+       pure { state: {intervalId: Nothing}
+            , render: pure $ div' []
+            , componentDidMount: do
+                {duration,effect} <- React.getProps this
+                intervalId        <- setInterval duration effect
+                React.setState this {intervalId: Just intervalId}
+            , componentWillUnmount: do
+                {intervalId} <- React.getState this
+                traverse_ clearInterval intervalId
+            })
+
+autoUpdateElt :: Props -> ReactElement
+autoUpdateElt props = React.createElement autoUpdateClass props []

src/Gargantext/Components/NgramsTable.purs

@@ -55,6 +55,7 @@ import Unsafe.Coerce (unsafeCoerce)
 import Gargantext.Types (TermList(..), TermType, readTermList, readTermType, termLists, termTypes)
 import Gargantext.Config (toUrl, End(..), Path(..), TabType)
 import Gargantext.Config.REST (put)
+import Gargantext.Components.AutoUpdate (autoUpdateElt)
 import Gargantext.Components.Table as T
 import Gargantext.Prelude
 import Gargantext.Components.Loader as Loader
@@ -400,6 +401,7 @@ data Action
   | SetTermListFilter (Maybe TermList)
   | SetTermTypeFilter (Maybe TermType)
   | SetSearchQuery String
+  | Refresh
 
 type Dispatch = Action -> Effect Unit
 
@@ -520,6 +522,8 @@ ngramsTableSpec = simpleSpec performAction render
       modifyState_ $ setParentResetChildren p
     performAction (ToggleChild b c) _ _ =
       modifyState_ $ _ngramsChildren <<< at c %~ toggleMap b
+    performAction Refresh {path: {nodeId, listIds, tabType}} {ngramsVersion} = do
+        commitPatch {nodeId, listIds, tabType} (Versioned {version: ngramsVersion, data: mempty})
     performAction (SetTermListItem n pl) {path: {nodeId, listIds, tabType}} {ngramsVersion} =
         commitPatch {nodeId, listIds, tabType} (Versioned {version: ngramsVersion, data: pt})
       where
@@ -550,7 +554,10 @@ ngramsTableSpec = simpleSpec performAction render
                     , dispatch: loaderDispatch }
                     { ngramsTablePatch, ngramsParent, ngramsChildren, searchQuery }
                     _reactChildren =
-      [ T.tableElt
+      [ autoUpdateElt { duration: 3000
+                      , effect:   dispatch Refresh
+                      }
+      , T.tableElt
           { rows
           , setParams: \params -> loaderDispatch (Loader.SetPath {nodeId, listIds, params, tabType})
           , container: tableContainer {searchQuery, dispatch, ngramsParent, ngramsChildren, ngramsTable}