[app] add 'key' properties to layout views

This hides the explicit 'key' prop in App, moves it to the individual
components.

src/Gargantext/Components/App.purs

@@ -58,7 +58,6 @@ appCpt = R.hooksComponent "G.C.App.app" cpt where
                                          , sessions: fst sessions
                                          , showLogin: snd showLogin }
     let mCurrentRoute     = fst route
-    let mkKey sid nodeId  = show sid <> "-" <> show nodeId
     let withSession sid f =
           maybe' (const $ forested $ homeLayout LL_EN) (ff f) $ Sessions.lookup sid (fst sessions)
 
@@ -68,20 +67,20 @@ appCpt = R.hooksComponent "G.C.App.app" cpt where
         case fst route of
           Home  -> forested $ homeLayout LL_EN
           Login -> login { backends, sessions, visible: showLogin }
-          Folder sid nodeId        -> withSession sid $ \session -> forested $ corpusLayout { key: mkKey sid nodeId, nodeId, session }
-          FolderPrivate sid nodeId -> withSession sid $ \session -> forested $ corpusLayout { key: mkKey sid nodeId, nodeId, session }
-          FolderPublic sid nodeId  -> withSession sid $ \session -> forested $ corpusLayout { key: mkKey sid nodeId, nodeId, session }
-          FolderShared sid nodeId  -> withSession sid $ \session -> forested $ corpusLayout { key: mkKey sid nodeId, nodeId, session }
-          Team sid nodeId  -> withSession sid $ \session -> forested $ corpusLayout { key: mkKey sid nodeId, nodeId, session }
-          RouteFrameWrite sid nodeId -> withSession sid $ \session -> forested $ frameLayout { key: mkKey sid nodeId, nodeId, session }
-          RouteFrameCalc  sid nodeId -> withSession sid $ \session -> forested $ frameLayout { key: mkKey sid nodeId, nodeId, session }
-          Corpus sid nodeId        -> withSession sid $ \session -> forested $ corpusLayout { key: mkKey sid nodeId, nodeId, session }
+          Folder sid nodeId        -> withSession sid $ \session -> forested $ corpusLayout { nodeId, session }
+          FolderPrivate sid nodeId -> withSession sid $ \session -> forested $ corpusLayout { nodeId, session }
+          FolderPublic sid nodeId  -> withSession sid $ \session -> forested $ corpusLayout { nodeId, session }
+          FolderShared sid nodeId  -> withSession sid $ \session -> forested $ corpusLayout { nodeId, session }
+          Team sid nodeId  -> withSession sid $ \session -> forested $ corpusLayout { nodeId, session }
+          RouteFrameWrite sid nodeId -> withSession sid $ \session -> forested $ frameLayout { nodeId, session }
+          RouteFrameCalc  sid nodeId -> withSession sid $ \session -> forested $ frameLayout { nodeId, session }
+          Corpus sid nodeId        -> withSession sid $ \session -> forested $ corpusLayout { nodeId, session }
           Texts sid nodeId         -> withSession sid $ \session -> forested $ textsLayout { nodeId, session, frontends }
           Lists sid nodeId         -> withSession sid $ \session -> forested $ listsLayout { nodeId, session }
           Dashboard sid nodeId       -> withSession sid $ \session -> forested $ dashboardLayout { nodeId, session }
           Annuaire sid nodeId        -> withSession sid $ \session -> forested $ annuaireLayout { frontends, nodeId, session }
-          UserPage sid nodeId        -> withSession sid $ \session -> forested $ userLayout { frontends, key: mkKey sid nodeId, nodeId, session }
-          ContactPage sid aId nodeId                -> withSession sid $ \session -> forested $ annuaireUserLayout { annuaireId: aId, frontends, key: mkKey sid nodeId, nodeId, session }
+          UserPage sid nodeId        -> withSession sid $ \session -> forested $ userLayout { frontends, nodeId, session }
+          ContactPage sid aId nodeId                -> withSession sid $ \session -> forested $ annuaireUserLayout { annuaireId: aId, frontends, nodeId, session }
           CorpusDocument sid corpusId listId nodeId -> withSession sid $ \session -> forested $ documentLayout { nodeId, listId, session, corpusId: Just corpusId }
           Document sid listId nodeId ->
             withSession sid $

src/Gargantext/Components/Nodes/Annuaire.purs

 module Gargantext.Components.Nodes.Annuaire where
 
-import Prelude (bind, const, identity, pure, ($), (<$>), (<>))
+import Prelude (bind, const, identity, pure, show, ($), (<$>), (<>))
 import Data.Argonaut (class DecodeJson, decodeJson, (.:), (.:?))
 import Data.Array as A
 import Data.List as L
@@ -32,18 +32,38 @@ newtype IndividuView =
 
 -- | Top level layout component. Loads an annuaire by id and renders
 -- | the annuaire using the result
-type LayoutProps = ( nodeId :: Int, session :: Session, frontends :: Frontends )
+type LayoutProps = (
+    frontends :: Frontends
+  , nodeId :: Int
+  , session :: Session
+  )
 
 annuaireLayout :: Record LayoutProps -> R.Element
 annuaireLayout props = R.createElement annuaireLayoutCpt props []
 
 annuaireLayoutCpt :: R.Component LayoutProps
-annuaireLayoutCpt = R.hooksComponent "G.P.Annuaire.annuaireLayout" cpt
+annuaireLayoutCpt = R.hooksComponent "G.C.N.A.annuaireLayout" cpt
+  where
+    cpt { frontends, nodeId, session } _ = do
+      let sid = sessionId session
+
+      pure $ annuaireLayoutWithKey { frontends, key: show sid <> "-" <> show nodeId, nodeId, session }
+
+type KeyLayoutProps = (
+  key :: String
+  | LayoutProps
+  )
+
+annuaireLayoutWithKey :: Record KeyLayoutProps -> R.Element
+annuaireLayoutWithKey props = R.createElement annuaireLayoutWithKeyCpt props []
+
+annuaireLayoutWithKeyCpt :: R.Component KeyLayoutProps
+annuaireLayoutWithKeyCpt = R.hooksComponent "G.C.N.A.annuaireLayoutWithKey" cpt
   where
-    cpt {nodeId, session, frontends} _ = do
+    cpt { frontends, nodeId, session } _ = do
       path <- R.useState' nodeId
       useLoader (fst path) (getAnnuaireInfo session) $
-        \info -> annuaire {session, path, info, frontends}
+        \info -> annuaire { frontends, info, path, session }
 
 type AnnuaireProps =
   ( session   :: Session

src/Gargantext/Components/Nodes/Annuaire/User/Contacts.purs

@@ -21,7 +21,7 @@ import Gargantext.Components.Nodes.Annuaire.User.Contacts.Tabs as Tabs
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Routes as Routes
 import Gargantext.Ends (Frontends)
-import Gargantext.Sessions (Session, get, put)
+import Gargantext.Sessions (Session, get, put, sessionId)
 import Gargantext.Types (NodeType(..))
 import Gargantext.Utils.Reactix as R2
 
@@ -137,18 +137,33 @@ infoRender (Tuple title content) =
 
 type LayoutProps = (
     frontends :: Frontends
-  , key :: String
   , nodeId :: Int
   , session :: Session
   )
 
+type KeyLayoutProps = (
+    key :: String
+  | LayoutProps
+  )
+
 userLayout :: Record LayoutProps -> R.Element
 userLayout props = R.createElement userLayoutCpt props []
 
 userLayoutCpt :: R.Component LayoutProps
-userLayoutCpt = R.hooksComponent "G.C.Nodes.Annuaire.User.Contacts.userLayout" cpt
+userLayoutCpt = R.hooksComponent "G.C.N.A.U.C.userLayout" cpt
+  where
+    cpt { frontends, nodeId, session } _ = do
+      let sid = sessionId session
+
+      pure $ userLayoutWithKey { frontends, key: show sid <> "-" <> show nodeId, nodeId, session }
+
+userLayoutWithKey :: Record KeyLayoutProps -> R.Element
+userLayoutWithKey props = R.createElement userLayoutWithKeyCpt props []
+
+userLayoutWithKeyCpt :: R.Component KeyLayoutProps
+userLayoutWithKeyCpt = R.hooksComponent "G.C.N.A.U.C.userLayoutWithKey" cpt
   where
-    cpt {frontends, nodeId, session} _ = do
+    cpt { frontends, nodeId, session } _ = do
       reload <- R.useState' 0
 
       useLoader {nodeId, reload: fst reload, session} getContactWithReload $

src/Gargantext/Components/Nodes/Corpus.purs

@@ -24,7 +24,7 @@ import Gargantext.Components.Nodes.Corpus.Types (CorpusData, FTField, Field(..),
 import Gargantext.Data.Array as GDA
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Routes (SessionRoute(NodeAPI, Children))
-import Gargantext.Sessions (Session, get, put)
+import Gargantext.Sessions (Session, get, put, sessionId)
 import Gargantext.Types (NodeType(..), AffTableResult)
 import Gargantext.Utils.Crypto as Crypto
 import Gargantext.Utils.Reactix as R2
@@ -41,13 +41,25 @@ type KeyProps =
   | Props
   )
 
-corpusLayout :: Record KeyProps -> R.Element
+corpusLayout :: Record Props -> R.Element
 corpusLayout props = R.createElement corpusLayoutCpt props []
 
-corpusLayoutCpt :: R.Component KeyProps
+corpusLayoutCpt :: R.Component Props
 corpusLayoutCpt = R.hooksComponent "G.C.N.C.corpusLayout" cpt
   where
-    cpt {nodeId, session} _ = do
+    cpt { nodeId, session } _ = do
+      let sid = sessionId session
+
+      pure $ corpusLayoutWithKey { key: show sid <> "-" <> show nodeId, nodeId, session }
+
+
+corpusLayoutWithKey :: Record KeyProps -> R.Element
+corpusLayoutWithKey props = R.createElement corpusLayoutWithKeyCpt props []
+
+corpusLayoutWithKeyCpt :: R.Component KeyProps
+corpusLayoutWithKeyCpt = R.hooksComponent "G.C.N.C.corpusLayoutWithKey" cpt
+  where
+    cpt { nodeId, session } _ = do
       reload <- R.useState' 0
 
       useLoader {nodeId, reload: fst reload, session} loadCorpusWithReload $

src/Gargantext/Components/Nodes/Corpus/Dashboard.purs

@@ -8,15 +8,16 @@ import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Effect.Class (liftEffect)
+import Reactix as R
+import Reactix.DOM.HTML as H
+
 import Gargantext.Components.Nodes.Corpus.Chart.Predefined as P
 import Gargantext.Components.Nodes.Dashboard.Types as DT
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Prelude
-import Gargantext.Sessions (Session)
+import Gargantext.Sessions (Session, sessionId)
 import Gargantext.Types (NodeID)
 import Gargantext.Utils.Reactix as R2
-import Reactix as R
-import Reactix.DOM.HTML as H
 
 type Props =
   ( nodeId :: NodeID
@@ -29,7 +30,23 @@ dashboardLayout props = R.createElement dashboardLayoutCpt props []
 dashboardLayoutCpt :: R.Component Props
 dashboardLayoutCpt = R.hooksComponent "G.C.N.C.D.dashboardLayout" cpt
   where
-    cpt params@{nodeId, session} _ = do
+    cpt { nodeId, session } _ = do
+      let sid = sessionId session
+
+      pure $ dashboardLayoutWithKey { key: show sid <> "-" <> show nodeId, nodeId, session }
+
+type KeyProps = (
+  key :: String
+  | Props
+  )
+
+dashboardLayoutWithKey :: Record KeyProps -> R.Element
+dashboardLayoutWithKey props = R.createElement dashboardLayoutWithKeyCpt props []
+
+dashboardLayoutWithKeyCpt :: R.Component KeyProps
+dashboardLayoutWithKeyCpt = R.hooksComponent "G.C.N.C.D.dashboardLayoutWithKey" cpt
+  where
+    cpt { nodeId, session } _ = do
       reload <- R.useState' 0
 
       useLoader {nodeId, reload: fst reload, session} DT.loadDashboardWithReload $

src/Gargantext/Components/Nodes/Corpus/Document.purs

 module Gargantext.Components.Nodes.Corpus.Document where
 
-import Prelude (class Show, bind, mempty, pure, ($), (<>))
+import Prelude (class Show, bind, mempty, pure, show, ($), (<>))
 import Data.Argonaut (class DecodeJson, decodeJson, (.:), (.:?))
 import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Show (genericShow)
@@ -21,7 +21,7 @@ import Gargantext.Components.NgramsTable.Core
 import Gargantext.Components.Annotation.AnnotatedField as AnnotatedField
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Routes (SessionRoute(..))
-import Gargantext.Sessions (Session, get)
+import Gargantext.Sessions (Session, get, sessionId)
 import Gargantext.Types (CTabNgramType(..), NodeType(..), TabSubType(..), TabType(..), TermList, ScoreType(..))
 import Gargantext.Utils as U
 import Gargantext.Utils.Reactix as R2
@@ -362,20 +362,45 @@ docViewClass :: ReactClass { children :: Children
                            }
 docViewClass = createClass "DocumentView" docViewSpec initialState
 
-type LayoutProps = ( session :: Session, nodeId :: Int, listId :: Int, corpusId :: Maybe Int )
+type LayoutProps = (
+    corpusId :: Maybe Int
+  , listId :: Int
+  , nodeId :: Int
+  , session :: Session
+  )
 
 documentLayout :: Record LayoutProps -> R.Element
 documentLayout props = R.createElement documentLayoutCpt props []
 
 documentLayoutCpt :: R.Component LayoutProps
-documentLayoutCpt = R.hooksComponent "G.P.Corpus.Document.documentLayout" cpt
+documentLayoutCpt = R.hooksComponent "G.C.N.C.D.documentLayout" cpt
   where
-    cpt {session, nodeId, listId, corpusId} _ = do
+    cpt { corpusId, listId, nodeId, session } _ = do
+      let sid = sessionId session
+
+      pure $ documentLayoutWithKey { corpusId
+                                   , key: show sid <> "-" <> show nodeId
+                                   , listId
+                                   , nodeId
+                                   , session }
+
+type KeyLayoutProps = (
+  key :: String
+  | LayoutProps
+  )
+
+documentLayoutWithKey :: Record KeyLayoutProps -> R.Element
+documentLayoutWithKey props = R.createElement documentLayoutWithKeyCpt props []
+
+documentLayoutWithKeyCpt :: R.Component KeyLayoutProps
+documentLayoutWithKeyCpt = R.hooksComponent "G.C.N.C.D.documentLayoutWithKey" cpt
+  where
+    cpt { corpusId, listId, nodeId, session } _ = do
       useLoader path loadData $ \loaded ->
         R2.createElement' docViewClass {path, loaded} []
       where
         tabType = TabDocument (TabNgramType CTabTerms)
-        path = {session, nodeId, listIds: [listId], corpusId, tabType}
+        path = { corpusId, listIds: [listId], nodeId, session, tabType }
 
 ------------------------------------------------------------------------
 

src/Gargantext/Components/Nodes/Frame.purs

@@ -3,21 +3,22 @@ module Gargantext.Components.Nodes.Frame where
 import Data.Maybe (Maybe(..))
 import Data.Tuple (fst)
 import Effect.Aff (Aff)
-import Gargantext.Components.Node (NodePoly(..))
-import Gargantext.Hooks.Loader (useLoader)
-import Gargantext.Prelude
-import Gargantext.Routes (SessionRoute(NodeAPI))
-import Gargantext.Sessions (Session, get)
-import Gargantext.Types (NodeType(..))
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Data.Argonaut as Argonaut
 import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Show (genericShow)
 --import Gargantext.Utils.Argonaut (genericSumDecodeJson, genericSumEncodeJson, genericEnumDecodeJson, genericEnumEncodeJson)
-import Gargantext.Utils.Argonaut (genericSumEncodeJson)
 import Data.Argonaut (decodeJson, (.:))
 
+import Gargantext.Components.Node (NodePoly(..))
+import Gargantext.Hooks.Loader (useLoader)
+import Gargantext.Prelude
+import Gargantext.Routes (SessionRoute(NodeAPI))
+import Gargantext.Sessions (Session, get, sessionId)
+import Gargantext.Types (NodeType(..))
+import Gargantext.Utils.Argonaut (genericSumEncodeJson)
+
 data Hyperdata =
   Hyperdata { base :: String
             , frame_id :: String
@@ -56,13 +57,24 @@ type KeyProps =
   | Props
   )
 
-frameLayout :: Record KeyProps -> R.Element
+frameLayout :: Record Props -> R.Element
 frameLayout props = R.createElement frameLayoutCpt props []
 
-frameLayoutCpt :: R.Component KeyProps
-frameLayoutCpt = R.hooksComponent "G.C.N.C.writeLayout" cpt
+frameLayoutCpt :: R.Component Props
+frameLayoutCpt = R.hooksComponent "G.C.N.F.frameLayout" cpt
   where
     cpt {nodeId, session} _ = do
+      let sid = sessionId session
+
+      pure $ frameLayoutWithKey { key: show sid <> "-" <> show nodeId, nodeId, session }
+
+frameLayoutWithKey :: Record KeyProps -> R.Element
+frameLayoutWithKey props = R.createElement frameLayoutWithKeyCpt props []
+
+frameLayoutWithKeyCpt :: R.Component KeyProps
+frameLayoutWithKeyCpt = R.hooksComponent "G.C.N.F.frameLayoutWithKey" cpt
+  where
+    cpt { nodeId, session } _ = do
       reload <- R.useState' 0
 
       useLoader {nodeId, reload: fst reload, session} loadframeWithReload $

src/Gargantext/Components/Nodes/Lists.purs

@@ -9,22 +9,43 @@ import Gargantext.Components.Nodes.Lists.Tabs as Tabs
 import Gargantext.Components.Table as Table
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Prelude
-import Gargantext.Sessions (Session)
+import Gargantext.Sessions (Session, sessionId)
 ------------------------------------------------------------------------
 ------------------------------------------------------------------------
 
-type Props = ( session :: Session, nodeId :: Int )
+type Props = (
+    nodeId :: Int
+  , session :: Session
+  )
 
 listsLayout :: Record Props -> R.Element
 listsLayout props = R.createElement listsLayoutCpt props []
 
 listsLayoutCpt :: R.Component Props
-listsLayoutCpt = R.hooksComponent "G.P.Lists.listsLayout" cpt
+listsLayoutCpt = R.hooksComponent "G.C.N.L.listsLayout" cpt
   where
-    cpt path@{session} _ =
+    cpt path@{ nodeId, session } _ = do
+      let sid = sessionId session
+
+      pure $ listsLayoutWithKey { key: show sid <> "-" <> show nodeId, nodeId, session }
+
+type KeyProps = (
+  key :: String
+  | Props
+  )
+
+listsLayoutWithKey :: Record KeyProps -> R.Element
+listsLayoutWithKey props = R.createElement listsLayoutWithKeyCpt props []
+
+listsLayoutWithKeyCpt :: R.Component KeyProps
+listsLayoutWithKeyCpt = R.hooksComponent "G.C.N.L.listsLayoutWithKey" cpt
+  where
+    cpt { nodeId, session } _ = do
+      let path = { nodeId, session }
+
       useLoader path loadCorpusWithChild $
-        \corpusData@{corpusId, defaultListId, corpusNode: NodePoly poly} ->
-              let { name, date, hyperdata : Hyperdata h} = poly
+        \corpusData@{ corpusId, corpusNode: NodePoly poly, defaultListId } ->
+              let { date, hyperdata : Hyperdata h, name } = poly
                   CorpusInfo {desc,query,authors} = getCorpusInfo h.fields
            in
           R.fragment

src/Gargantext/Components/Nodes/Texts.purs

@@ -17,29 +17,48 @@ import Gargantext.Components.Nodes.Corpus.Types (CorpusData, Hyperdata(..), getC
 import Gargantext.Components.Tab as Tab
 import Gargantext.Components.Table as Table
 import Gargantext.Ends (Frontends)
-import Gargantext.Sessions (Session)
+import Gargantext.Sessions (Session, sessionId)
 import Gargantext.Types (CTabNgramType(..), TabSubType(..), TabType(..))
 --------------------------------------------------------
 
-type Props = ( frontends :: Frontends, session :: Session, nodeId :: Int )
+type Props = (
+    frontends :: Frontends
+  , nodeId :: Int
+  , session :: Session
+  )
 
 textsLayout :: Record Props -> R.Element
 textsLayout props = R.createElement textsLayoutCpt props []
 
 ------------------------------------------------------------------------
 textsLayoutCpt :: R.Component Props
-textsLayoutCpt = R.hooksComponent "G.C.Nodes.Texts.textsLayout" cpt where
-  cpt {session,nodeId,frontends} _ = do
-    pure $ loader {session, nodeId} loadCorpusWithChild paint
-    where
-      paint corpusData@{corpusId, corpusNode, defaultListId} =
-        R.fragment [ Table.tableHeaderLayout headerProps, tabs' ]
-        where
-          NodePoly { name, date, hyperdata: Hyperdata h } = corpusNode
-          CorpusInfo {desc,query,authors} = getCorpusInfo h.fields
-          tabs' = tabs {session, corpusId, corpusData, frontends}
-          title = "Corpus " <> name
-          headerProps = { title, desc, query, date, user:authors }
+textsLayoutCpt = R.hooksComponent "G.C.N.T.textsLayout" cpt where
+  cpt { frontends, nodeId, session } _ = do
+    let sid = sessionId session
+
+    pure $ textsLayoutWithKey { frontends, key: show sid <> "-" <> show nodeId, nodeId, session }
+
+type KeyProps = (
+  key :: String
+  | Props
+  )
+
+textsLayoutWithKey :: Record KeyProps -> R.Element
+textsLayoutWithKey props = R.createElement textsLayoutWithKeyCpt props []
+
+textsLayoutWithKeyCpt = R.hooksComponent "G.C.N.T.textsLayoutWithKey" cpt
+  where
+    cpt { frontends, nodeId, session } _ = do
+      pure $ loader {session, nodeId} loadCorpusWithChild paint
+      where
+        paint corpusData@{corpusId, corpusNode, defaultListId} =
+          R.fragment [ Table.tableHeaderLayout headerProps, tabs' ]
+          where
+            NodePoly { name, date, hyperdata: Hyperdata h } = corpusNode
+            CorpusInfo {desc,query,authors} = getCorpusInfo h.fields
+            tabs' = tabs {session, corpusId, corpusData, frontends}
+            title = "Corpus " <> name
+            headerProps = { title, desc, query, date, user:authors }
 
 data Mode = MoreLikeFav | MoreLikeTrash