preserve and load folding tree state with local storage state hook

src/Gargantext/Components/App.purs

 module Gargantext.Components.App where
 
 import Prelude
+
 import Data.Array (fromFoldable)
 import Data.Foldable (intercalate)
 import Data.Maybe (Maybe(..), maybe')
 import Data.Tuple (fst, snd)
-import Reactix as R
-import Reactix.DOM.HTML as H
-
 import Gargantext.Components.Data.Lang (Lang(..))
+import Gargantext.Components.Folder (folder)
 import Gargantext.Components.Forest (forest)
 import Gargantext.Components.GraphExplorer (explorerLayout)
 import Gargantext.Components.Login (login)
--- import Gargantext.Components.Search.SearchBar as SB
--- import Gargantext.Components.Search.Types (allDatabases)
-import Gargantext.Config (defaultFrontends, defaultBackends)
-import Gargantext.Components.Folder (folder)
 import Gargantext.Components.Nodes.Annuaire (annuaireLayout)
 import Gargantext.Components.Nodes.Annuaire.User.Contacts (annuaireUserLayout, userLayout)
 import Gargantext.Components.Nodes.Corpus (corpusLayout)
-import Gargantext.Components.Nodes.Corpus.Document (documentLayout)
 import Gargantext.Components.Nodes.Corpus.Dashboard (dashboardLayout)
+import Gargantext.Components.Nodes.Corpus.Document (documentLayout)
+import Gargantext.Components.Nodes.Home (homeLayout)
 import Gargantext.Components.Nodes.Lists (listsLayout)
 import Gargantext.Components.Nodes.Texts (textsLayout)
-import Gargantext.Components.Nodes.Home (homeLayout)
+import Gargantext.Config (defaultFrontends, defaultBackends)
 import Gargantext.Ends (Frontends)
+import Gargantext.Hooks.Router (useHashRouter)
 import Gargantext.Router (router)
 import Gargantext.Routes (AppRoute(..))
-import Gargantext.Hooks.Router (useHashRouter)
-import Gargantext.Utils.Reactix as R2
-import Gargantext.Sessions as Sessions
 import Gargantext.Sessions (Sessions, useSessions)
+import Gargantext.Sessions as Sessions
+import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
 
 -- TODO (what does this mean?)
 -- tree changes endConfig state => trigger endConfig change in outerLayout, layoutFooter etc
@@ -47,7 +45,7 @@ appCpt = R.hooksComponent "G.C.App.app" cpt where
 
     showLogin  <- R.useState' false
     showCorpus <- R.useState' false
-    
+
     let forested      = forestLayout frontends (fst sessions) (fst route) (snd showLogin)
     let mCurrentRoute = fst route
     let backends      = fromFoldable defaultBackends
@@ -77,16 +75,16 @@ appCpt = R.hooksComponent "G.C.App.app" cpt where
                 simpleLayout $
                   explorerLayout { graphId, mCurrentRoute, session
                                  , sessions: (fst sessions), frontends
-                                 , showLogin}
+                                 , showLogin }
 
 forestLayout :: Frontends -> Sessions -> AppRoute -> R2.Setter Boolean -> R.Element -> R.Element
-forestLayout frontends sessions route showLogin child =
+forestLayout frontends sessions route showLogin child = do
   R.fragment [ topBar {}, R2.row [main], footer {} ]
   where
     main =
       R.fragment
       [ H.div {className: "col-md-2", style: {paddingTop: "60px"}}
-              [ forest {sessions, route, frontends, showLogin} ]
+              [ forest {sessions, route, frontends, showLogin } ]
       , mainPage child
       ]
 

src/Gargantext/Components/Forest.purs

 module Gargantext.Components.Forest where
 
-import Prelude (const, pure, ($), (<$>))
 import Data.Array as A
 import Data.Maybe (Maybe(..))
-import Data.Tuple.Nested((/\))
-import Reactix as R
-import Reactix.DOM.HTML as H
+import Data.Tuple.Nested ((/\))
+import Gargantext.Components.Forest.Tree (treeView)
 import Gargantext.Ends (Frontends)
 import Gargantext.Routes (AppRoute)
 import Gargantext.Sessions (Session(..), Sessions, unSessions)
-import Gargantext.Components.Forest.Tree (treeView)
 import Gargantext.Utils.Reactix as R2
+import Prelude (const, pure, ($), (<$>))
+import Reactix as R
+import Reactix.DOM.HTML as H
 
 type Props =
   ( frontends :: Frontends
@@ -24,7 +24,7 @@ forest props = R.createElement forestCpt props []
 
 forestCpt :: R.Component Props
 forestCpt = R.hooksComponent "G.C.Forest.forest" cpt where
-  cpt {frontends, route, sessions, showLogin} _ = R2.useCache (frontends /\ route /\ sessions) (cpt' showLogin)
+  cpt {frontends, route, sessions, showLogin } _ = R2.useCache (frontends /\ route /\ sessions) (cpt' showLogin)
   cpt' showLogin (frontends /\ route /\ sessions) =
     pure $ R.fragment $ A.cons (plus showLogin) trees
     where

src/Gargantext/Components/Forest/Tree.purs

 module Gargantext.Components.Forest.Tree where
 
-import Data.Array as A
+import Gargantext.Components.Forest.Tree.Node.Action
+import Gargantext.Prelude
+
 import DOM.Simple.Console (log2)
+import Data.Array as A
 import Data.Maybe (Maybe)
--- import Data.Newtype (class Newtype)
+import Data.Set (Set)
+import Data.Set as Set
+import Data.Tuple (Tuple(..), fst, snd)
 import Data.Tuple.Nested ((/\))
 import Effect.Aff (Aff)
 import Effect.Class (liftEffect)
-import Reactix as R
-import Reactix.DOM.HTML as H
-
-import Gargantext.Prelude
-
-import Gargantext.Components.Forest.Tree.Node.Action
 import Gargantext.Components.Forest.Tree.Node.Action.Upload (uploadFile)
 import Gargantext.Components.Forest.Tree.Node.Box (nodeMainSpan)
-import Gargantext.Ends (Frontends)
 import Gargantext.Components.Loader (loader)
+import Gargantext.Components.Login.Types (TreeId)
+import Gargantext.Ends (Frontends)
 import Gargantext.Routes (AppRoute)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (AsyncTask(..))
+import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
 
 ------------------------------------------------------------------------
 type Props = ( root          :: ID
@@ -34,34 +37,44 @@ treeView props = R.createElement treeViewCpt props []
 treeViewCpt :: R.Component Props
 treeViewCpt = R.hooksComponent "G.C.Tree.treeView" cpt
   where
-    cpt props _children = do
+    cpt { root, mCurrentRoute, session, frontends } _children = do
       -- NOTE: this is a hack to reload the tree view on demand
       reload <- R.useState' (0 :: Reload)
-      pure $ treeLoadView reload props
-
-treeLoadView :: R.State Reload -> Record Props -> R.Element
+      openNodes <- R2.useLocalStorageState R2.openNodesKey (Set.empty :: Set TreeId)
+      pure $ treeLoadView reload
+        { root, mCurrentRoute, session, frontends, openNodes }
+
+type Props' = ( root          :: ID
+              , mCurrentRoute :: Maybe AppRoute
+              , session       :: Session
+              , frontends     :: Frontends
+              , openNodes     :: R.State (Set TreeId)
+              )
+
+treeLoadView :: R.State Reload -> Record Props' -> R.Element
 treeLoadView reload p = R.createElement el p []
   where
     el = R.staticComponent "TreeLoadView" cpt
-    cpt {root, mCurrentRoute, session, frontends} _ = do
+    cpt {root, mCurrentRoute, session, frontends, openNodes} _ = do
       loader root (loadNode session) $ \loaded ->
-        loadedTreeView reload {tree: loaded, mCurrentRoute, session, frontends}
+        loadedTreeView reload {tree: loaded, mCurrentRoute, session, frontends, openNodes}
 
 type TreeViewProps = ( tree          :: FTree
                      , mCurrentRoute :: Maybe AppRoute
                      , frontends     :: Frontends
                      , session       :: Session 
+                     , openNodes     :: R.State (Set TreeId)
                      )
 
 loadedTreeView :: R.State Reload -> Record TreeViewProps -> R.Element
 loadedTreeView reload p = R.createElement el p []
   where
     el = R.hooksComponent "LoadedTreeView" cpt
-    cpt {tree, mCurrentRoute, session, frontends} _ = do
+    cpt {tree, mCurrentRoute, session, frontends, openNodes} _ = do
       treeState <- R.useState' {tree, asyncTasks: []}
 
       pure $ H.div {className: "tree"}
-        [ toHtml reload treeState session frontends mCurrentRoute ]
+        [ toHtml reload treeState session frontends mCurrentRoute openNodes ]
 
 ------------------------------------------------------------------------
 toHtml :: R.State Reload
@@ -69,14 +82,18 @@ toHtml :: R.State Reload
        -> Session
        -> Frontends
        -> Maybe AppRoute
+       -> R.State (Set TreeId)
        -> R.Element
-toHtml reload treeState@(ts@{tree: (NTree (LNode {id, name, nodeType}) ary), asyncTasks} /\ setTreeState) session frontends mCurrentRoute = R.createElement el {} []
+toHtml reload treeState@(ts@{tree: (NTree (LNode {id, name, nodeType}) ary), asyncTasks} /\ setTreeState) session frontends mCurrentRoute openNodes = R.createElement el {} []
   where
     el = R.hooksComponent "NodeView" cpt
     pAction = performAction session reload treeState
 
     cpt props _ = do
-      folderOpen <- R.useState' true
+      let folderIsOpen = Set.member id (fst openNodes)
+      let setFn = if folderIsOpen then Set.delete else Set.insert
+      let toggleFolderIsOpen _ = (snd openNodes) (setFn id)
+      let folderOpen = Tuple folderIsOpen toggleFolderIsOpen
 
       let withId (NTree (LNode {id: id'}) _) = id'
 
@@ -89,7 +106,7 @@ toHtml reload treeState@(ts@{tree: (NTree (LNode {id, name, nodeType}) ary), asy
                                    , nodeType
                                    , onAsyncTaskFinish
                                    } folderOpen session frontends ]
-            <> childNodes session frontends reload folderOpen mCurrentRoute ary
+            <> childNodes session frontends reload folderOpen mCurrentRoute openNodes ary
           )
         ]
 
@@ -103,11 +120,12 @@ childNodes :: Session
            -> R.State Reload
            -> R.State Boolean
            -> Maybe AppRoute
+           -> R.State (Set TreeId)
            -> Array FTree
            -> Array R.Element
-childNodes _ _ _ _ _ [] = []
-childNodes _ _ _ (false /\ _) _ _ = []
-childNodes session frontends reload (true /\ _) mCurrentRoute ary =
+childNodes _ _ _ _ _ _ [] = []
+childNodes _ _ _ (false /\ _) _ _ _ = []
+childNodes session frontends reload (true /\ _) mCurrentRoute openNodes ary =
   map (\ctree -> childNode {tree: ctree, asyncTasks: []}) $ sorted ary
     where
       sorted :: Array FTree -> Array FTree
@@ -117,8 +135,7 @@ childNodes session frontends reload (true /\ _) mCurrentRoute ary =
       el = R.hooksComponent "ChildNodeView" cpt
       cpt {tree, asyncTasks} _ = do
         treeState <- R.useState' {tree, asyncTasks}
-        pure $ toHtml reload treeState session frontends mCurrentRoute
-
+        pure $ toHtml reload treeState session frontends mCurrentRoute openNodes
 
 performAction :: Session
               -> R.State Int

src/Gargantext/Components/GraphExplorer.purs

@@ -2,6 +2,7 @@ module Gargantext.Components.GraphExplorer where
 
 import Gargantext.Prelude hiding (max,min)
 
+import DOM.Simple.Types (Element)
 import Data.Array as A
 import Data.FoldableWithIndex (foldMapWithIndex)
 import Data.Int (toNumber)
@@ -12,13 +13,7 @@ import Data.Sequence as Seq
 import Data.Set as Set
 import Data.Tuple (fst, snd, Tuple(..))
 import Data.Tuple.Nested ((/\))
-import DOM.Simple.Types (Element)
 import Effect.Aff (Aff)
-import Math (log)
-import Partial.Unsafe (unsafePartial)
-import Reactix as R
-import Reactix.DOM.HTML as RH
-
 import Gargantext.Components.Forest (forest)
 import Gargantext.Components.Graph as Graph
 import Gargantext.Components.GraphExplorer.Controls as Controls
@@ -35,6 +30,10 @@ import Gargantext.Sessions (Session, Sessions, get)
 import Gargantext.Types as Types
 import Gargantext.Utils.Range as Range
 import Gargantext.Utils.Reactix as R2
+import Math (log)
+import Partial.Unsafe (unsafePartial)
+import Reactix as R
+import Reactix.DOM.HTML as RH
 
 type GraphId = Int
 
@@ -70,7 +69,7 @@ explorerLayoutView :: R.State Int -> Record LayoutProps -> R.Element
 explorerLayoutView graphVersion p = R.createElement el p []
   where
     el = R.hooksComponent "G.C.GE.explorerLayoutView" cpt
-    cpt {frontends, graphId, mCurrentRoute, session, sessions, showLogin} _ = do
+    cpt {frontends, graphId, mCurrentRoute, session, sessions, showLogin } _ = do
       useLoader graphId (getNodes session graphVersion) handler
       where
         handler loaded =
@@ -82,7 +81,7 @@ explorerLayoutView graphVersion p = R.createElement el p []
                    , mMetaData
                    , session
                    , sessions
-                   , showLogin}
+                   , showLogin }
           where (Tuple mMetaData graph) = convert loaded
 
 --------------------------------------------------------------
@@ -92,7 +91,7 @@ explorer props = R.createElement explorerCpt props []
 explorerCpt :: R.Component Props
 explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
   where
-    cpt {frontends, graph, graphId, graphVersion, mCurrentRoute, mMetaData, session, sessions, showLogin} _ = do
+    cpt {frontends, graph, graphId, graphVersion, mCurrentRoute, mMetaData, session, sessions, showLogin } _ = do
       dataRef <- R.useRef graph
       graphRef <- R.useRef null
       graphVersionRef <- R.useRef (fst graphVersion)
@@ -167,7 +166,7 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
          -> R.Element
     tree false _ _ = RH.div { id: "tree" } []
     tree true {sessions, mCurrentRoute: route, frontends} showLogin =
-      RH.div {className: "col-md-2 graph-tree"} [forest {sessions, route, frontends, showLogin}]
+      RH.div {className: "col-md-2 graph-tree"} [forest {sessions, route, frontends, showLogin }]
 
     mSidebar :: Maybe GET.MetaData
              -> { frontends :: Frontends

src/Gargantext/Sessions.purs

 -- | A module for authenticating to create sessions and handling them
 module Gargantext.Sessions where
 
-import Prelude (class Eq, class Show, Unit, const, otherwise, pure, show, unit, ($), (*>), (<*), (<$>), (<>), (==), (/=), (>>=), (<<<), bind)
-import Data.Argonaut ( class DecodeJson, decodeJson, class EncodeJson, encodeJson, (:=), (~>), (.:))
+import DOM.Simple.Console (log2)
+import Data.Argonaut (class DecodeJson, decodeJson, class EncodeJson, encodeJson, (:=), (~>), (.:))
 import Data.Argonaut.Core (Json, fromArray, jsonEmptyObject, stringify)
 import Data.Argonaut.Parser (jsonParser)
 import Data.Array as A
-import Data.Traversable (traverse)
-import DOM.Simple.Console (log2)
 import Data.Either (Either(..))
 import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Eq (genericEq)
 import Data.Maybe (Maybe(..))
-import Data.Sequence as Seq
 import Data.Sequence (Seq)
+import Data.Sequence as Seq
+import Data.Traversable (traverse)
 import Effect (Effect)
 import Effect.Aff (Aff)
-import Reactix as R
-import Web.HTML (window)
-import Web.HTML.Window (localStorage)
-import Web.Storage.Storage (Storage, getItem, setItem, removeItem)
-import Gargantext.Components.Login.Types
-  (AuthRequest(..), AuthResponse(..), AuthInvalid(..), AuthData(..))
+import Gargantext.Components.Login.Types (AuthRequest(..), AuthResponse(..), AuthInvalid(..), AuthData(..))
 import Gargantext.Config.REST as REST
 import Gargantext.Ends (class ToUrl, Backend, backendUrl, toUrl, sessionPath)
 import Gargantext.Routes (SessionRoute)
 import Gargantext.Types (NodePath, SessionId(..), nodePath)
+import Gargantext.Utils.Reactix (getls)
 import Gargantext.Utils.Reactix as R2
+import Prelude (class Eq, class Show, Unit, const, otherwise, pure, show, unit, ($), (*>), (<*), (<$>), (<>), (==), (/=), (>>=), (<<<), bind)
+import Reactix as R
+import Web.Storage.Storage (getItem, removeItem, setItem)
 
 
 -- | A Session represents an authenticated session for a user at a
@@ -228,6 +226,3 @@ postWwwUrlencoded session@(Session {token}) p = REST.postWwwUrlencoded (Just tok
 
 postMultipartFormData :: forall b p. DecodeJson b => ToUrl Session p => Session -> p -> String -> Aff b
 postMultipartFormData session@(Session {token}) p = REST.postMultipartFormData (Just token) (toUrl session p)
-
-getls :: Effect Storage
-getls = window >>= localStorage

src/Gargantext/Utils/Reactix.purs

@@ -2,23 +2,27 @@ module Gargantext.Utils.Reactix where
 
 import Prelude
 
-import Data.Argonaut.Core (Json)
-import Data.Function.Uncurried (Fn2, runFn2)
-import Data.Maybe (Maybe(..), fromJust)
-import Data.Nullable (Nullable, null, toMaybe)
-import Data.Tuple (Tuple)
-import Data.Tuple.Nested ((/\))
 import DOM.Simple as DOM
 import DOM.Simple.Console (log2)
 import DOM.Simple.Document (document)
 import DOM.Simple.Element as Element
 import DOM.Simple.Event as DE
 import DOM.Simple.Types (class IsNode)
+import Data.Argonaut as Argonaut
+import Data.Argonaut as Json
+import Data.Argonaut.Core (Json)
+import Data.Either (hush)
+import Data.Foldable (for_)
+import Data.Function.Uncurried (Fn2, runFn2)
+import Data.Maybe (Maybe(..), fromJust)
+import Data.Nullable (Nullable, null, toMaybe)
+import Data.Tuple (Tuple(..))
+import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Effect.Aff (Aff, launchAff, launchAff_, killFiber)
 import Effect.Class (liftEffect)
 import Effect.Exception (error)
-import Effect.Uncurried (EffectFn1, runEffectFn1, mkEffectFn1, EffectFn2, runEffectFn2, mkEffectFn2)
+import Effect.Uncurried (EffectFn1, mkEffectFn1, mkEffectFn2, runEffectFn1)
 import FFI.Simple ((..), (...), defineProperty, delay, args2, args3)
 import Partial.Unsafe (unsafePartial)
 import React (class ReactPropFields, Children, ReactClass, ReactElement)
@@ -32,6 +36,9 @@ import Reactix.Utils (currySecond, hook, tuple)
 import Unsafe.Coerce (unsafeCoerce)
 import Web.File.File (toBlob)
 import Web.File.FileList (FileList, item)
+import Web.HTML (window)
+import Web.HTML.Window (localStorage)
+import Web.Storage.Storage (Storage, getItem, setItem)
 
 newtype Point = Point { x :: Number, y :: Number }
 
@@ -249,3 +256,38 @@ stringify :: Json -> Int -> String
 stringify j indent = runFn2 _stringify j indent
 
 foreign import _stringify :: Fn2 Json Int String
+
+getls :: Effect Storage
+getls = window >>= localStorage
+
+openNodesKey :: LocalStorageKey
+openNodesKey = "garg-open-nodes"
+
+type LocalStorageKey = String
+
+useLocalStorageState :: forall s. Argonaut.DecodeJson s => Argonaut.EncodeJson s => LocalStorageKey -> s -> R.Hooks (R.State s)
+useLocalStorageState key s = do
+  ref <- R.useRef s
+
+  R.useEffectOnce' do
+    item :: Maybe String <- getItem key =<< getls
+    let json = hush <<< Argonaut.jsonParser =<< item
+    let parsed = hush <<< Argonaut.decodeJson =<< json
+    for_ parsed \(x :: s) -> R.setRef ref x
+
+  let init = R.readRef ref
+
+  Tuple state setState' <- R.useState' init
+
+  let
+    setState update = do
+      let new = update (R.readRef ref)
+
+      setState' (\_ -> new)
+      R.setRef ref new
+
+      let json = Json.stringify $ Argonaut.encodeJson new
+      storage <- getls
+      setItem key json storage
+
+  pure (Tuple state setState)