[Tree] progress bar first draft, renders dummy values for now

src/Gargantext/Components/Forest/Tree.purs

@@ -14,6 +14,7 @@ import Gargantext.Ends (Frontends)
 import Gargantext.Components.Loader (loader)
 import Gargantext.Routes (AppRoute)
 import Gargantext.Sessions (Session)
+import Gargantext.Types (AsyncTask(..))
 import Prelude (Unit, bind, discard, map, pure, void, ($), (+), (<>))
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -55,7 +56,7 @@ loadedTreeView reload p = R.createElement el p []
   where
     el = R.hooksComponent "LoadedTreeView" cpt
     cpt {tree, mCurrentRoute, session, frontends} _ = do
-      treeState <- R.useState' {tree, asyncTasks: []}
+      treeState <- R.useState' {tree, asyncTasks: [AsyncTask {id: "1hello", status: "pending"}]}
 
       pure $ H.div {className: "tree"}
         [ toHtml reload treeState session frontends mCurrentRoute ]
@@ -102,8 +103,8 @@ childNodes session frontends reload (true /\ _) mCurrentRoute ary =
       childNode :: Tree -> R.Element
       childNode props = R.createElement el props []
       el = R.hooksComponent "ChildNodeView" cpt
-      cpt {tree} _ = do
-        treeState <- R.useState' {tree, asyncTasks: []}
+      cpt {tree, asyncTasks} _ = do
+        treeState <- R.useState' {tree, asyncTasks}
         pure $ toHtml reload treeState session frontends mCurrentRoute
 
 

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

@@ -11,6 +11,7 @@ import Gargantext.Components.Forest.Tree.Node.Action (Action(..), DroppedFile(..
 import Gargantext.Components.Forest.Tree.Node.Action.Add (NodePopup(..), createNodeView)
 import Gargantext.Components.Forest.Tree.Node.Action.Rename (renameBox)
 import Gargantext.Components.Forest.Tree.Node.Action.Upload (uploadFileView, fileTypeView)
+import Gargantext.Components.Forest.Tree.Node.ProgressBar (asyncProgressBar)
 import Gargantext.Components.Search.Types (allLangs)
 import Gargantext.Components.Search.SearchBar (searchBar)
 import Gargantext.Components.Search.SearchField (Search, defaultSearch, isIsTex)
@@ -22,7 +23,7 @@ import Gargantext.Sessions (Session, sessionId)
 import Gargantext.Types (NodeType(..), NodePath(..), fldr, AsyncTask(..))
 import Gargantext.Utils (glyphicon, glyphiconActive)
 import Gargantext.Utils.Reactix as R2
-import Prelude (Unit, bind, const, discard, identity, map, pure, show, void, ($), (<$>), (<>), (==), (-), (+))
+import Prelude (Unit, bind, const, discard, identity, map, pure, show, void, ($), (<>), (==), (-), (+))
 import React.SyntheticEvent as E
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -66,7 +67,7 @@ nodeMainSpan d p folderOpen session frontends = R.createElement el p []
         , popOverIcon showBox popupOpen popupPosition
         , mNodePopupView props showBox popupOpen popupPosition
         , fileTypeView   d {id, nodeType} droppedFile isDragOver
-        , H.div {} (progressBar <$> asyncTasks)
+        , H.div {} (map (\t -> asyncProgressBar {corpusId: id, asyncTask: t}) asyncTasks)
         ]
           where
             SettingsBox {show: showBox} = settingsBox nodeType
@@ -133,8 +134,6 @@ nodeMainSpan d p folderOpen session frontends = R.createElement el p []
       setIsDragOver $ const true
     onDragLeave (_ /\ setIsDragOver) _ = setIsDragOver $ const false
 
-    progressBar (AsyncTask {id}) = H.div {className: "progress"} [ H.text id ]
-
 {-
 fldr nt open = if open
                then "fa fa-globe" -- <> color nt

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

+module Gargantext.Components.Forest.Tree.Node.ProgressBar where
+
+import Data.Int (fromNumber)
+import Data.Maybe (fromJust)
+import Data.Tuple.Nested ((/\))
+import Effect.Timer (setTimeout)
+import Math (min)
+import Partial.Unsafe (unsafePartial)
+import Prelude ((+), ($), (<>), (<<<), pure, bind, discard, unit, show)
+import Reactix as R
+import Reactix.DOM.HTML as H
+
+import Gargantext.Components.Forest.Tree.Node.Action (ID)
+import Gargantext.Types (AsyncTask(..))
+
+
+type Props =
+  (
+    asyncTask :: AsyncTask
+  , corpusId  :: ID
+  )
+
+
+asyncProgressBar :: Record Props -> R.Element
+asyncProgressBar p = R.createElement asyncProgressBarCpt p []
+
+asyncProgressBarCpt :: R.Component Props
+asyncProgressBarCpt = R.hooksComponent "G.C.F.T.N.asyncProgressBar" cpt
+  where
+    cpt {asyncTask: (AsyncTask {id}), corpusId} _ = do
+      (progress /\ setProgress) <- R.useState' 0.0
+
+      R.useEffect' $ do
+        _ <- setTimeout 1000 $ do
+          setProgress \p -> min 100.0 (p + 10.0)
+        pure unit
+
+
+      pure $
+        H.div { className: "progress" } [
+          H.div { className: "progress-bar"
+                , role: "progressbar"
+                , style: { width: (show $ toInt progress) <> "%" }
+                } [ H.text id ]
+        ]
+
+    toInt :: Number -> Int
+    toInt n = unsafePartial $ fromJust $ fromNumber n