WIP: various unfruitful attempts at uncovering the freezing bug in DocsTable

Most of the time it freezes when changing tabs (Docs and Trash).
However at times, instead of freezing it works. Yet if one click
to change some params no loading happens.
This seems nondeterministic to me.

src/Gargantext/Components/DocsTable.purs

@@ -14,7 +14,7 @@ import Data.Maybe (Maybe(..), maybe)
 import Data.Set (Set)
 import Data.Set as Set
 import Data.Symbol (SProxy(..))
-import Data.Tuple (Tuple(..), fst)
+import Data.Tuple (Tuple(..), fst, snd)
 import Data.Tuple.Nested ((/\))
 import DOM.Simple.Console (log)
 import DOM.Simple.Event as DE
@@ -28,7 +28,7 @@ import Gargantext.Config.REST (post, delete)
 import Gargantext.Components.Search.Types (Category(..), CategoryQuery(..), favCategory, trashCategory, decodeCategory, putCategories)
 import Gargantext.Components.Table as T
 import Gargantext.Ends (url)
-import Gargantext.Hooks.Loader (useLoader)
+import Gargantext.Hooks.Loader (useLoader, useLoader3)
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Routes as Routes
 import Gargantext.Routes (SessionRoute(NodeAPI))
@@ -131,6 +131,7 @@ docViewLayoutCpt = R.hooksComponent "G.C.DocsTable.docViewLayout" cpt
     cpt layout _children = do
       query <- R.useState' ""
       params <- R.useState' T.initialParams
+      --DEBUG-- let params = T.initialParams /\ const (pure unit)
       pure $ docView {query, params, layout}
 
 type Props =
@@ -154,7 +155,7 @@ docViewCpt = R.hooksComponent "G.C.DocsTable.docView" cpt where
           [ pageLayout {session, nodeId, totalRecords, tabType, listId, corpusId, query: fst query, params} ] ] ]
     -- onClickTrashAll nodeId _ = do
     --   launchAff $ deleteAllDocuments p.session nodeId
-          
+
           {-, H.div {className: "col-md-1 col-md-offset-11"}
             [ pageLayout p.session params {nodeId, totalRecords, tabType, listId, corpusId, query: fst query} ]
           , H.div {className: "col-md-1 col-md-offset-11"}
@@ -172,6 +173,10 @@ searchBar (query /\ setQuery) = R.createElement el {} []
   where
     el = R.hooksComponent "SearchBar" cpt
     cpt {} _children = do
+      -- This is a local state for the query.
+      -- When the searchBar input changes it should not update right
+      -- away, instead it is when the searchButton is clicked that
+      -- the state is transfered.
       queryText <- R.useState' query
 
       pure $ H.div {className: "row"}
@@ -217,10 +222,11 @@ type PageParams = { nodeId :: Int
                   , corpusId :: Maybe Int
                   , tabType :: TabType
                   , query   :: Query
+                  , session :: Session
                   , params :: T.Params}
 
-loadPage :: Session -> PageParams -> Aff (Array DocumentsView)
-loadPage session {nodeId, tabType, query, listId, corpusId, params: {limit, offset, orderBy}} = do
+loadPage :: PageParams -> Aff (Array DocumentsView)
+loadPage {nodeId, tabType, query, listId, corpusId, session, params: {limit, offset, orderBy}} = do
   liftEffect $ log "loading documents page: loadPage with Offset and limit"
   -- res <- get $ toUrl endConfigStateful Back (Tab tabType offset limit (convOrderBy <$> orderBy)) (Just nodeId)
   let url2 = (url session (NodeAPI Node (Just nodeId))) <> "/table"
@@ -255,8 +261,9 @@ loadPage session {nodeId, tabType, query, listId, corpusId, params: {limit, offs
 
     convOrderBy _ = DateAsc -- TODO
 
-renderPage :: R.State T.Params -> Record PageLayoutProps -> Array DocumentsView -> R.Element
-renderPage (_ /\ setTableParams) p@{session} res = R.createElement el p []
+renderPage :: Record PageLayoutProps -> Array DocumentsView -> R.Element
+renderPage {session, nodeId, corpusId, listId, totalRecords, params: _ /\ setParams} res
+    = R.createElement el {nodeId, corpusId, listId, totalRecords} []
   where
     sid = sessionId session
     el = R.hooksComponent "RenderPage" cpt
@@ -268,12 +275,14 @@ renderPage (_ /\ setTableParams) p@{session} res = R.createElement el p []
     corpusDocument (Just corpusId) = Routes.CorpusDocument sid corpusId
     corpusDocument _ = Routes.Document sid
 
-    cpt {session, nodeId, corpusId, listId, totalRecords} _children = do
+    cpt {nodeId, corpusId, listId, totalRecords} _children = do
       localCategories <- R.useState' (mempty :: LocalCategories)
+      --DEBUG-- let localCategories = (mempty :: LocalCategories) /\ (\_ -> pure unit)
       pure $ T.table
           { rows: rows localCategories
           -- , setParams: \params -> liftEffect $ loaderDispatch (Loader.SetPath {nodeId, tabType, listId, corpusId, params, query})
-          , setParams: setTableParams <<< const
+          , setParams: setParams <<< const
+          --DEBUG-- , setParams: \_ -> pure unit
           , container: T.defaultContainer { title: "Documents" }
           , colNames
           , totalRecords
@@ -309,8 +318,15 @@ pageLayout props = R.createElement pageLayoutCpt props []
 pageLayoutCpt :: R.Component PageLayoutProps
 pageLayoutCpt = R.hooksComponent "G.C.DocsTable.pageLayout" cpt where
   cpt props@{session, nodeId, listId, corpusId, tabType, query, params} _ = do
-    useLoader {nodeId, listId, corpusId, tabType, query, params: fst params} (loadPage session) $
-      \loaded -> renderPage params props loaded
+    useLoader {nodeId, listId, corpusId, tabType, query, session, params: fst params} loadPage $
+      \loaded -> renderPage props loaded
+{- --DEBUG--
+  cpt props@{session, nodeId, listId, corpusId, tabType, query, totalRecords} _ = do
+    useLoader3 {nodeId, listId, corpusId, tabType, query, session, params: fst props.params}
+              loadPage (\{nodeId, listId, corpusId, tabType, query, session, params} ->
+                          renderPage {nodeId, listId, corpusId, tabType, query, session,
+                                      params: params /\ snd props.params, totalRecords})
+              -}
 
 ---------------------------------------------------------
 sampleData' :: DocumentsView

src/Gargantext/Hooks/Loader.purs

@@ -4,7 +4,8 @@ import Gargantext.Prelude
 import Data.Maybe (Maybe(..), isNothing, maybe, maybe')
 import Data.Tuple (fst)
 import Data.Tuple.Nested ((/\))
-import Effect.Aff (Aff)
+import Effect.Aff (Aff, launchAff, launchAff_, killFiber)
+import Effect.Exception (error)
 import Effect.Class (liftEffect)
 import Reactix as R
 import Gargantext.Utils.Reactix as R2
@@ -28,13 +29,13 @@ useLoader path loader render
   <$> (useAff =<< R.useMemo2 path loader (\_ -> loader path))
 
 useLoader2 :: forall path st.
-              R.State path -> (path -> Aff st) 
+              R.State path -> (path -> Aff st)
               -> (st -> R.Element) -> R.Hooks R.Element
 useLoader2 path loader render = do
   state <- R.useState' Nothing
   useLoaderEffect2 path state loader
   pure $ maybe (loadingSpinner {}) render (fst state)
-  
+
 useLoaderEffect :: forall state.
                    Aff state -> R.State (Maybe state) -> R.Hooks Unit
 useLoaderEffect loader (state /\ setState) = do
@@ -61,4 +62,31 @@ useRepointer :: forall path st.
                 R.State path -> (path -> Aff st) -> R.Hooks (Aff st)
 useRepointer path@(path' /\ _) loader = R.useMemo2 loader path' (\_ -> loader path')
 
+useLoader3
+  :: forall path loaded
+  .  Eq path
+  => Show path
+  => path
+  -> (path -> Aff loaded)
+  -> (path -> loaded -> R.Element)
+  -> R.Hooks R.Element
+useLoader3 newPath loader render = do
+  {currentPath, loaded} /\ setState <- R.useState' { currentPath: newPath, loaded: Nothing }
+
+  R.useEffect $
+    if (isNothing loaded || newPath /= currentPath) then do
+      logs $ "useLoader " <> show {newPath, currentPath, loadedIsNothing: isNothing loaded}
+
+      fiber <- launchAff do
+        freshlyLoaded <- loader newPath
+        liftEffect $ setState $ const { currentPath: newPath, loaded: Just freshlyLoaded }
+      pure $ launchAff_ $ killFiber (error "useLoader") fiber
+    else do
+      pure $ pure $ unit
 
+  pure case loaded of
+    Nothing ->
+      -- TODO load spinner
+      R.fragment []
+    Just loadedData ->
+      render currentPath loadedData --, setState}

src/Gargantext/Pages/Texts/Tabs.purs

@@ -39,7 +39,9 @@ tabsCpt :: R.Component Props
 tabsCpt = R.hooksComponent "CorpusTabs" cpt
   where
     cpt {session, corpusId, corpusData} _ = do
-      (selected /\ setSelected) <- R.useState' 0
+      let selected = 0
+      -- Why use a state if setSelected is never called?
+      -- (selected /\ setSelected) <- R.useState' 0
       pure $ Tab.tabs { tabs: tabs', selected }
       where
         tabs' = [ "Documents"     /\ docs,        "Trash"           /\ trash