Merge branch 'dev' into dev-forest

src/Gargantext/Components/App.purs

@@ -60,12 +60,12 @@ appCpt = R.hooksComponent "G.C.App.app" cpt where
           Login -> login { sessions, backends, visible: showLogin }
           Folder sid _ -> withSession sid $ \_ -> forested (folder {})
           Corpus sid nodeId -> withSession sid $ \_ -> forested $ corpusLayout { nodeId }
-          Texts sid nodeId -> withSession sid $ \session -> forested $ textsLayout { 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 {}
           Annuaire sid nodeId -> withSession sid $ \session -> forested $ annuaireLayout { nodeId, session }
-          UserPage sid nodeId -> withSession sid $ \session -> forested $ userLayout { nodeId, session }
-          ContactPage sid nodeId -> withSession sid $ \session -> forested $ userLayout { nodeId, session }
+          UserPage sid nodeId -> withSession sid $ \session -> forested $ userLayout { frontends, nodeId, session }
+          ContactPage sid nodeId -> withSession sid $ \session -> forested $ userLayout { frontends, nodeId, session }
           CorpusDocument sid corpusId listId nodeId ->
             withSession sid $ \session -> forested $ documentLayout { nodeId, listId, session, corpusId: Just corpusId }
           Document sid listId nodeId ->

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, log3)
 import DOM.Simple.Event as DE
@@ -26,14 +26,13 @@ import Reactix.DOM.HTML as H
 ------------------------------------------------------------------------
 import Gargantext.Components.Search.Types (Category(..), CategoryQuery(..), favCategory, trashCategory, decodeCategory, putCategories)
 import Gargantext.Components.Table as T
-import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Components.Loader (loader)
 import Gargantext.Components.Search.Types (Category(..), CategoryQuery(..), favCategory, trashCategory, decodeCategory, putCategories)
 import Gargantext.Components.Table as T
-import Gargantext.Ends (url)
+import Gargantext.Ends (Frontends, url)
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Routes as Routes
-import Gargantext.Routes (SessionRoute(NodeAPI))
+import Gargantext.Routes (AppRoute, SessionRoute(NodeAPI))
 import Gargantext.Sessions (Session, sessionId, post, delete)
 import Gargantext.Types (NodeType(..), OrderBy(..), TabType, TabPostQuery(..))
 ------------------------------------------------------------------------
@@ -49,6 +48,7 @@ type LayoutProps =
   , listId       :: Int
   , corpusId     :: Maybe Int
   , showSearch   :: Boolean
+  , frontends    :: Frontends
   , session      :: Session )
   -- ^ tabType is not ideal here since it is too much entangled with tabs and
   -- ngramtable. Let's see how this evolves.  )
@@ -61,6 +61,7 @@ type PageLayoutProps =
   , corpusId     :: Maybe Int
   , query        :: Query
   , session      :: Session
+  , frontends    :: Frontends
   , params       :: R.State T.Params )
 
 type LocalCategories = Map Int Category
@@ -146,14 +147,14 @@ docView props = R.createElement docViewCpt props []
 docViewCpt :: R.Component Props
 docViewCpt = R.hooksComponent "G.C.DocsTable.docView" cpt where
   cpt { query, params
-      , layout: { session, nodeId, tabType, listId, corpusId
-                , totalRecords, chart, showSearch } } _ = do
+      , layout: { frontends, session, nodeId, tabType, listId
+                , corpusId, totalRecords, chart, showSearch } } _ = do
     pure $ H.div {className: "container1"}
       [ H.div {className: "row"}
         [ chart
         , if showSearch then searchBar query else H.div {} []
         , H.div {className: "col-md-12"}
-          [ pageLayout {session, nodeId, totalRecords, tabType, listId, corpusId, query: fst query, params} ] ] ]
+          [ pageLayout {frontends, session, nodeId, totalRecords, tabType, listId, corpusId, query: fst query, params} ] ] ]
     -- onClickTrashAll nodeId _ = do
     --   launchAff $ deleteAllDocuments p.session nodeId
           
@@ -214,7 +215,8 @@ searchBar (query /\ setQuery) = R.createElement el {} []
 mock :: Boolean
 mock = false
 
-type PageParams = { nodeId :: Int
+type PageParams =
+  { nodeId :: Int
   , listId :: Int
   , corpusId :: Maybe Int
   , tabType :: TabType
@@ -262,7 +264,7 @@ pageLayout props = R.createElement pageLayoutCpt props []
 
 pageLayoutCpt :: R.Memo PageLayoutProps
 pageLayoutCpt = R.memo' $ R.staticComponent "G.C.DocsTable.pageLayout" cpt where
-  cpt props@{session, nodeId, listId, corpusId, tabType, query, params} _ =
+  cpt props@{frontends, session, nodeId, listId, corpusId, tabType, query, params} _ =
     loader path (loadPage session) paint
     where
       path = {nodeId, listId, corpusId, tabType, query, params: fst params}
@@ -278,7 +280,7 @@ page params layout documents = R.createElement pageCpt {params, layout, document
 
 pageCpt :: R.Memo PageProps
 pageCpt = R.memo' $ R.hooksComponent "G.C.DocsTable.pageCpt" cpt where
-  cpt { layout: {session, nodeId, corpusId, listId, totalRecords}, documents, params } _ = do
+  cpt { layout: {frontends, session, nodeId, corpusId, listId, totalRecords}, documents, params } _ = do
     localCategories <- R.useState' (mempty :: LocalCategories)
     pure $ T.table
       { rows: rows localCategories
@@ -290,8 +292,9 @@ pageCpt = R.memo' $ R.hooksComponent "G.C.DocsTable.pageCpt" cpt where
         gi _ = "glyphicon glyphicon-star-empty"
         trashStyle Trash = {textDecoration: "line-through"}
         trashStyle _ = {textDecoration: "none"}
-        corpusDocument (Just corpusId) = Routes.CorpusDocument sid corpusId
-        corpusDocument _ = Routes.Document sid
+        corpusDocument
+          | Just cid <- corpusId = Routes.CorpusDocument sid cid listId
+          | otherwise = Routes.Document sid listId
         colNames = T.ColumnName <$> [ "Map", "Stop", "Date", "Title", "Source"]
         getCategory (localCategories /\ _) {_id, category} = maybe category identity (localCategories ^. at _id)
         rows localCategories = row <$> documents
@@ -302,7 +305,8 @@ pageCpt = R.memo' $ R.hooksComponent "G.C.DocsTable.pageCpt" cpt where
                 , H.input { type: "checkbox", defaultValue: checked, on: {click: click Trash} }
                 -- TODO show date: Year-Month-Day only
                 , H.div { style } [ R2.showText r.date ]
-                , H.div { style } [ H.text r.title ]
+                , H.div { style }
+                  [ H.a { href: url frontends $ corpusDocument r._id } [ H.text r.title ] ]
                 , H.div { style } [ H.text r.source ]
                 ]
               , delete: true }

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

@@ -13,12 +13,13 @@ import Data.String (joinWith)
 import Effect.Aff (Aff)
 import Reactix as R
 import Reactix.DOM.HTML as H
-import Gargantext.Hooks.Loader (useLoader)
+import Gargantext.Components.Loader (loader)
 import Gargantext.Components.Nodes.Annuaire.User.Contacts.Types
   ( Contact(..), ContactData, ContactTouch(..), ContactWhere(..)
   , ContactWho(..), HyperData(..), HyperdataContact(..) )
 import Gargantext.Components.Nodes.Annuaire.User.Contacts.Tabs as Tabs
-import Gargantext.Routes (SessionRoute(..))
+import Gargantext.Routes
+import Gargantext.Ends (Frontends)
 import Gargantext.Sessions (Session, get)
 import Gargantext.Types (NodeType(..))
 
@@ -122,20 +123,20 @@ infoRender (Tuple title content) =
   [ H.span { className: "badge badge-default badge-pill"} [ H.text title ]
   , H.span {} [H.text content] ]
 
-type LayoutProps = ( nodeId :: Int, session :: Session )
+type LayoutProps = ( frontends :: Frontends, nodeId :: Int, session :: Session )
 
 userLayout :: Record LayoutProps -> R.Element
 userLayout props = R.createElement userLayoutCpt props []
 
 userLayoutCpt :: R.Component LayoutProps
-userLayoutCpt = R.hooksComponent "G.P.Annuaire.UserLayout" cpt
+userLayoutCpt = R.staticComponent "G.C.Nodes.Annuaire.User.Contacts.userLayout" cpt
   where
-    cpt {nodeId, session} _ =
-      useLoader nodeId (getContact session) $
+    cpt {frontends, nodeId, session} _ =
+      loader nodeId (getContact session) $
         \contactData@{contactNode: Contact {name, hyperdata}} ->
           H.ul { className: "col-md-12 list-group" }
           [ display (fromMaybe "no name" name) (contactInfos hyperdata)
-          , Tabs.tabs {nodeId, contactData, session} ]
+          , Tabs.tabs {frontends, nodeId, contactData, session} ]
 
 -- | toUrl to get data
 getContact :: Session -> Int -> Aff ContactData

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

@@ -12,6 +12,8 @@ import Gargantext.Components.DocsTable as DT
 import Gargantext.Components.NgramsTable as NT
 import Gargantext.Components.Tab as Tab
 import Gargantext.Components.Nodes.Annuaire.User.Contacts.Types (ContactData)
+import Gargantext.Ends (Frontends)
+import Gargantext.Routes (AppRoute)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (TabType(..), TabSubType(..), CTabNgramType(..), PTabNgramType(..))
 
@@ -36,18 +38,19 @@ modeTabType' Patents = CTabAuthors
 modeTabType' Books = CTabAuthors
 modeTabType' Communication = CTabAuthors
 
-type Props =
+type TabsProps =
   ( nodeId :: Int
   , contactData :: ContactData
+  , frontends :: Frontends
   , session :: Session )
 
-tabs :: Record Props -> R.Element
+tabs :: Record TabsProps -> R.Element
 tabs props = R.createElement tabsCpt props []
 
-tabsCpt :: R.Component Props
+tabsCpt :: R.Component TabsProps
 tabsCpt = R.hooksComponent "G.P.Annuaire.User.Contacts.Tabs.tabs" cpt
   where
-    cpt {nodeId, contactData: {defaultListId}, session} _ = do
+    cpt {frontends, nodeId, contactData: {defaultListId}, session} _ = do
       active <- R.useState' 0
       pure $
         Tab.tabs { tabs: tabs', selected: fst active }
@@ -66,20 +69,20 @@ tabsCpt = R.hooksComponent "G.P.Annuaire.User.Contacts.Tabs.tabs" cpt
             chart = mempty
             totalRecords = 4736 -- TODO
             docs = DT.docViewLayout
-              { session, nodeId, chart, totalRecords
+              { frontends, session, nodeId, chart, totalRecords
               , tabType: TabPairing TabDocs
               , listId: defaultListId
               , corpusId: Nothing
               , showSearch: true }
 
 
-type NgramsViewProps =
+type NgramsViewTabsProps =
   ( session :: Session
   , mode :: Mode
   , defaultListId :: Int
   , nodeId :: Int )
 
-ngramsView :: Record NgramsViewProps -> R.Element
+ngramsView :: Record NgramsViewTabsProps -> R.Element
 ngramsView {session,mode, defaultListId, nodeId} =
   NT.mainNgramsTable
   { nodeId, defaultListId, tabType, session, tabNgramType }

src/Gargantext/Components/Nodes/Texts.purs

 module Gargantext.Components.Nodes.Texts where
 
+import Prelude
+import Data.Generic.Rep (class Generic)
+import Data.Generic.Rep.Show (genericShow)
 import Data.Maybe (Maybe(..))
+import Data.Tuple.Nested ((/\))
 import Reactix as R
+import Reactix.DOM.HTML as H
+
 --------------------------------------------------------
-import Gargantext.Prelude
+import Gargantext.Components.DocsTable as DT
 import Gargantext.Components.Loader (loader)
 import Gargantext.Components.Node (NodePoly(..))
+import Gargantext.Components.Nodes.Corpus (CorpusData, CorpusInfo(..), loadCorpus)
+import Gargantext.Components.Nodes.Corpus.Chart.Histo (histo)
+import Gargantext.Components.Tab as Tab
 import Gargantext.Components.Table as Table
-import Gargantext.Hooks.Loader (useLoader)
-import Gargantext.Components.Nodes.Corpus (CorpusInfo(..), loadCorpus)
-import Gargantext.Components.Nodes.Texts.Tabs as Tabs
+import Gargantext.Ends (Frontends)
+import Gargantext.Routes (AppRoute)
 import Gargantext.Sessions (Session)
-import Gargantext.Types (NodeType(..))
+import Gargantext.Types (CTabNgramType(..), TabSubType(..), TabType(..))
 
-type Props = ( session :: Session, nodeId :: Int )
+type Props = ( frontends :: Frontends, session :: Session, nodeId :: Int )
 
 textsLayout :: Record Props -> R.Element
 textsLayout props = R.createElement textsLayoutCpt props []
 
 ------------------------------------------------------------------------
 textsLayoutCpt :: R.Component Props
-textsLayoutCpt = R.hooksComponent "G.P.Texts.textsLayout" cpt where
-  cpt path@{session} _ = do
-    pure $ loader path loadCorpus paint
+textsLayoutCpt = R.hooksComponent "G.C.Nodes.Texts.textsLayout" cpt where
+  cpt {session,nodeId,frontends} _ = do
+    pure $ loader {session, nodeId} loadCorpus paint
     where
       paint corpusData@{corpusId, corpusNode, defaultListId} =
-        R.fragment [ Table.tableHeaderLayout headerProps, tabs ]
+        R.fragment [ Table.tableHeaderLayout headerProps, tabs' ]
         where
           NodePoly { name, date, hyperdata: CorpusInfo corpus } = corpusNode
           {desc, query, authors: user} = corpus
-          tabs = Tabs.tabs {session, corpusId, corpusData}
+          tabs' = tabs {session, corpusId, corpusData, frontends}
           title = "Corpus " <> name
           headerProps = { title, desc, query, date, user }
+
+data Mode = MoreLikeFav | MoreLikeTrash
+
+derive instance genericMode :: Generic Mode _
+
+instance showMode :: Show Mode where
+  show = genericShow
+
+derive instance eqMode :: Eq Mode
+
+modeTabType :: Mode -> CTabNgramType
+modeTabType MoreLikeFav    = CTabAuthors  -- TODO
+modeTabType MoreLikeTrash  = CTabSources  -- TODO
+
+type TabsProps = ( frontends :: Frontends, session :: Session, corpusId :: Int, corpusData :: CorpusData )
+
+tabs :: Record TabsProps -> R.Element
+tabs props = R.createElement tabsCpt props []
+
+tabsCpt :: R.Component TabsProps
+tabsCpt = R.hooksComponent "G.C.Nodes.Texts.tabs" cpt
+  where
+    cpt {frontends, session, corpusId, corpusData} _ = do
+      (selected /\ setSelected) <- R.useState' 0
+      pure $ Tab.tabs { tabs: tabs', selected }
+      where
+        tabs' = [ "Documents"     /\ docs,        "Trash"           /\ trash
+                , "More like fav" /\ moreLikeFav, "More like trash" /\ moreLikeTrash ]
+        docView' tabType = docView { frontends, session, corpusId, corpusData, tabType }
+        docs = R.fragment [ docsHisto, docView' TabDocs ]
+        docsHisto = histo { path, session }
+          where path = { corpusId, tabType: TabCorpus TabDocs }
+        moreLikeFav = docView' TabMoreLikeFav
+        moreLikeTrash = docView' TabMoreLikeTrash
+        trash = docView' TabTrash
+
+type DocViewProps a =
+  ( frontends :: Frontends
+  , session :: Session
+  , corpusId :: Int
+  , corpusData :: CorpusData
+  , tabType :: TabSubType a )
+
+docView :: forall a. Record (DocViewProps a) -> R.Element
+docView props = R.createElement docViewCpt props []
+
+docViewCpt :: forall a. R.Component (DocViewProps a)
+docViewCpt = R.hooksComponent "G.C.Nodes.Texts.docView" cpt
+  where
+    cpt {frontends, session, corpusId, corpusData: {defaultListId}, tabType} _children = do
+      pure $ DT.docViewLayout $ params tabType
+      where
+        params :: forall b. TabSubType b -> Record DT.LayoutProps
+        params TabDocs =
+          { nodeId: corpusId
+            -- ^ TODO merge nodeId and corpusId in DT
+          , chart  : H.div {} []
+          , tabType: TabCorpus TabDocs
+          , totalRecords: 4737
+          , listId: defaultListId
+          , corpusId: Just corpusId
+          , showSearch: true
+          , frontends, session }
+        params TabMoreLikeFav =
+          { nodeId: corpusId
+            -- ^ TODO merge nodeId and corpusId in DT
+          , chart  : H.div {} []
+          , tabType: TabCorpus TabMoreLikeFav
+          , totalRecords: 4737
+          , listId: defaultListId
+          , corpusId: Just corpusId
+          , showSearch: false
+          , frontends, session }
+        params TabMoreLikeTrash =
+          { nodeId: corpusId
+            -- ^ TODO merge nodeId and corpusId in DT
+          , chart  : H.div {} []
+          , tabType: TabCorpus TabMoreLikeTrash
+          , totalRecords: 4737
+          , listId: defaultListId
+          , corpusId: Just corpusId
+          , showSearch: false
+          , frontends, session }
+        params TabTrash =
+          { nodeId: corpusId
+            -- ^ TODO merge nodeId and corpusId in DT
+          , chart  : H.div {} []
+          , tabType: TabCorpus TabTrash
+          , totalRecords: 4737
+          , listId: defaultListId
+          , corpusId: Nothing
+          , showSearch: true
+          , frontends, session }
+        -- DUMMY
+        params _ =
+          { nodeId: corpusId
+            -- ^ TODO merge nodeId and corpusId in DT
+          , chart  : H.div {} []
+          , tabType: TabCorpus TabTrash
+          , totalRecords: 4737
+          , listId: defaultListId
+          , corpusId: Nothing
+          , showSearch: true
+          , frontends, session }

src/Gargantext/Components/Nodes/Texts/Tabs.purs

-module Gargantext.Components.Nodes.Texts.Tabs where
-
---------------------------------------------------------
-import Prelude (class Eq, class Show, bind, pure, ($))
-import Data.Argonaut (class DecodeJson, decodeJson, (.:), (.??))
-import Data.Generic.Rep (class Generic)
-import Data.Generic.Rep.Show (genericShow)
-import Data.Maybe (Maybe(..))
-import Data.Tuple.Nested ((/\))
-import Reactix as R
-import Reactix.DOM.HTML as H
-
-import Gargantext.Components.DocsTable as DT
-import Gargantext.Components.Node (NodePoly(..))
-import Gargantext.Components.Tab as Tab
-import Gargantext.Components.Nodes.Corpus (CorpusData)
-import Gargantext.Components.Nodes.Corpus.Chart.Histo (histo)
-import Gargantext.Sessions (Session)
-import Gargantext.Types (CTabNgramType(..), TabSubType(..), TabType(..))
-
-data Mode = MoreLikeFav | MoreLikeTrash
-
-derive instance genericMode :: Generic Mode _
-
-instance showMode :: Show Mode where
-  show = genericShow
-
-derive instance eqMode :: Eq Mode
-
-modeTabType :: Mode -> CTabNgramType
-modeTabType MoreLikeFav    = CTabAuthors  -- TODO
-modeTabType MoreLikeTrash  = CTabSources  -- TODO
-
-type Props = ( session :: Session, corpusId :: Int, corpusData :: CorpusData )
-
-tabs :: Record Props -> R.Element
-tabs props = R.createElement tabsCpt props []
-
-tabsCpt :: R.Component Props
-tabsCpt = R.hooksComponent "CorpusTabs" cpt
-  where
-    cpt {session, corpusId, corpusData} _ = do
-      (selected /\ setSelected) <- R.useState' 0
-      pure $ Tab.tabs { tabs: tabs', selected }
-      where
-        tabs' = [ "Documents"     /\ docs,        "Trash"           /\ trash
-                , "More like fav" /\ moreLikeFav, "More like trash" /\ moreLikeTrash ]
-        docView' tabType = docView { session, corpusId, corpusData, tabType }
-        docs = R.fragment [ docsHisto, docView' TabDocs ]
-        docsHisto = histo { path, session }
-          where path = { corpusId, tabType: TabCorpus TabDocs }
-        moreLikeFav = docView' TabMoreLikeFav
-        moreLikeTrash = docView' TabMoreLikeTrash
-        trash = docView' TabTrash
-
-type DocViewProps a = ( session :: Session, corpusId :: Int, corpusData :: CorpusData, tabType :: TabSubType a )
-
-docView :: forall a. Record (DocViewProps a) -> R.Element
-docView props = R.createElement docViewCpt props []
-
---docViewSpec :: forall a. TabSubType a -> Props -> R.Element
-docViewCpt :: forall a. R.Component (DocViewProps a)
-docViewCpt = R.hooksComponent "DocViewWithCorpus" cpt
-  where
-    cpt {session, corpusId, corpusData: {defaultListId}, tabType} _children = do
-      pure $ DT.docViewLayout $ params tabType
-      where
-        params :: forall b. TabSubType b -> Record DT.LayoutProps
-        params TabDocs =
-          { nodeId: corpusId
-            -- ^ TODO merge nodeId and corpusId in DT
-          , chart  : H.div {} []
-          , tabType: TabCorpus TabDocs
-          , totalRecords: 4737
-          , listId: defaultListId
-          , corpusId: Just corpusId
-          , showSearch: true
-          , session }
-        params TabMoreLikeFav =
-          { nodeId: corpusId
-            -- ^ TODO merge nodeId and corpusId in DT
-          , chart  : H.div {} []
-          , tabType: TabCorpus TabMoreLikeFav
-          , totalRecords: 4737
-          , listId: defaultListId
-          , corpusId: Just corpusId
-          , showSearch: false
-          , session }
-        params TabMoreLikeTrash =
-          { nodeId: corpusId
-            -- ^ TODO merge nodeId and corpusId in DT
-          , chart  : H.div {} []
-          , tabType: TabCorpus TabMoreLikeTrash
-          , totalRecords: 4737
-          , listId: defaultListId
-          , corpusId: Just corpusId
-          , showSearch: false
-          , session }
-        params TabTrash =
-          { nodeId: corpusId
-            -- ^ TODO merge nodeId and corpusId in DT
-          , chart  : H.div {} []
-          , tabType: TabCorpus TabTrash
-          , totalRecords: 4737
-          , listId: defaultListId
-          , corpusId: Nothing
-          , showSearch: true
-          , session }
-        -- DUMMY
-        params _ =
-          { nodeId: corpusId
-            -- ^ TODO merge nodeId and corpusId in DT
-          , chart  : H.div {} []
-          , tabType: TabCorpus TabTrash
-          , totalRecords: 4737
-          , listId: defaultListId
-          , corpusId: Nothing
-          , showSearch: true
-          , session }
-
-
-

src/Gargantext/Components/Table.purs

@@ -85,7 +85,7 @@ tableHeaderLayout :: Record TableHeaderLayoutProps -> R.Element
 tableHeaderLayout props = R.createElement tableHeaderLayoutCpt props []
 
 tableHeaderLayoutCpt :: R.Component TableHeaderLayoutProps
-tableHeaderLayoutCpt = R.staticComponent "TableHeaderLayout" cpt
+tableHeaderLayoutCpt = R.staticComponent "G.C.Table.tableHeaderLayout" cpt
   where
     cpt {title, desc, query, date, user} _ =
       R.fragment
@@ -124,7 +124,7 @@ table :: Record Props -> R.Element
 table props = R.createElement tableCpt props []
 
 tableCpt :: R.Component Props
-tableCpt = R.hooksComponent "Table" cpt
+tableCpt = R.hooksComponent "G.C.Table.table" cpt
   where
     cpt {container, colNames, totalRecords, rows, params} _ = do
       pageSize@(pageSize' /\ setPageSize) <- R.useState' PS10