[reactix] R2.Component

src/Gargantext/Components/App.purs

@@ -157,12 +157,12 @@ appCpt = R.hooksComponentWithModule thisModule "app" cpt where
           RouteFrameCalc  sid nodeId -> withSession sid $ \session -> forested [
             frameLayout { nodeId, nodeType: GT.NodeFrameCalc, session     }
           ]
-          RouteFrameWrite sid nodeId -> withSession sid $ \session -> forested [
-            frameLayout { nodeId, nodeType: GT.NodeFrameWrite, session    }
-          ]
           RouteFrameCode  sid nodeId -> withSession sid $ \session -> forested [
             frameLayout { nodeId, nodeType: GT.NodeFrameNotebook, session }
           ]
+          RouteFrameWrite sid nodeId -> withSession sid $ \session -> forested [
+            frameLayout { nodeId, nodeType: GT.NodeFrameWrite, session    }
+          ]
           Team sid nodeId  -> withSession sid $ \session -> forested [
             corpusLayout { nodeId, session }
           ]

src/Gargantext/Components/ContextMenu/ContextMenu.purs

@@ -29,7 +29,7 @@ type Props t = (
   , onClose :: Effect Unit
   )
 
-contextMenu :: forall t. Record (Props t) -> Array R.Element -> R.Element
+contextMenu :: forall t. R2.Component (Props t)
 contextMenu = R.createElement contextMenuCpt
 
 contextMenuCpt :: forall t. R.Component (Props t)

src/Gargantext/Components/Forest.purs

@@ -126,17 +126,17 @@ type ForestLayoutProps = (
   , treeReloadRef :: R.Ref (Maybe ReloadS)
   )
 
-forestLayout :: Record ForestLayoutProps -> Array R.Element -> R.Element
+forestLayout :: R2.Component ForestLayoutProps
 forestLayout props = R.createElement forestLayoutCpt props
 
 forestLayoutCpt :: R.Component ForestLayoutProps
 forestLayoutCpt = R.hooksComponentWithModule thisModule "forestLayout" cpt
   where
-    cpt props@{ handed } _ = do
-      pure $ R.fragment [ topBar { handed }, forestLayoutMain props ]
+    cpt props@{ handed } children = do
+      pure $ R.fragment [ topBar { handed }, forestLayoutMain props children ]
 
-forestLayoutMain :: Record ForestLayoutProps -> R.Element
-forestLayoutMain props = R.createElement forestLayoutMainCpt props []
+forestLayoutMain :: R2.Component ForestLayoutProps
+forestLayoutMain props = R.createElement forestLayoutMainCpt props
 
 forestLayoutMainCpt :: R.Component ForestLayoutProps
 forestLayoutMainCpt = R.hooksComponentWithModule thisModule "forestLayoutMain" cpt
@@ -166,11 +166,11 @@ forestLayoutMainCpt = R.hooksComponentWithModule thisModule "forestLayoutMain" c
                    , sessions
                    , showLogin
                    , treeReloadRef } ]
-      , mainPage children
+      , mainPage {} children
       ]
 
-mainPage :: Array R.Element -> R.Element
-mainPage = R.createElement mainPageCpt {}
+mainPage :: R2.Component ()
+mainPage = R.createElement mainPageCpt
 
 mainPageCpt :: R.Component ()
 mainPageCpt = R.hooksComponentWithModule thisModule "mainPage" cpt

src/Gargantext/Components/Modal.purs

@@ -21,7 +21,7 @@ thisModule = "Gargantext.Components.Modal"
 
 type Props = ( setVisible :: R.Setter Boolean )
 
-modal :: Record Props -> Array R.Element -> R.Element
+modal :: R2.Component Props
 modal = R.createElement modalCpt
 
 modalCpt :: R.Component Props

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

@@ -26,13 +26,23 @@ import Gargantext.Prelude (Unit, bind, const, discard, pure, show, unit, ($), (+
 import Gargantext.Routes as Routes
 import Gargantext.Sessions (Session, get, put, sessionId)
 import Gargantext.Types (NodeType(..), ReloadS)
+import Gargantext.Utils.Reactix as R2
 
 thisModule :: String
 thisModule = "Gargantext.Components.Nodes.Annuaire.User.Contacts"
 
-display :: String -> Array R.Element -> R.Element
-display title elems =
-  H.div { className: "container-fluid" }
+type DisplayProps = (
+  title :: String
+  )
+
+display :: R2.Component DisplayProps
+display = R.createElement displayCpt
+
+displayCpt :: R.Component DisplayProps
+displayCpt = R.hooksComponentWithModule thisModule "display" cpt
+  where
+    cpt { title } children = do
+      pure $ H.div { className: "container-fluid" }
         [ H.div { className: "row", id: "contact-page-header" }
           [ H.div { className: "col-md-6"} [ H.h3 {} [ H.text title ] ]
           , H.div { className: "col-md-8"} []
@@ -43,7 +53,7 @@ display title elems =
             [ H.div { className: "row" }
               [ H.div { className: "col-md-2" } [ H.img { src: "/images/Gargantextuel-212x300.jpg"} ]
               , H.div { className: "col-md-1"} []
-        , H.div { className: "col-md-8"} elems
+              , H.div { className: "col-md-8"} children
               ]]]]
 
 -- | TODO format data in better design (UI) shape
@@ -191,7 +201,7 @@ userLayoutWithKeyCpt = R.hooksComponentWithModule thisModule "userLayoutWithKey"
       useLoader {nodeId, reload: fst reload, session} getContactWithReload $
         \contactData@{contactNode: Contact {name, hyperdata}} ->
           H.ul { className: "col-md-12 list-group" } [
-            display (fromMaybe "no name" name) (contactInfos hyperdata (onUpdateHyperdata reload))
+            display { title: fromMaybe "no name" name } (contactInfos hyperdata (onUpdateHyperdata reload))
           , Tabs.tabs {
                  appReload
                , asyncTasksRef
@@ -249,7 +259,7 @@ annuaireUserLayoutCpt = R.hooksComponentWithModule thisModule "annuaireUserLayou
       useLoader nodeId (getAnnuaireContact session annuaireId) $
         \contactData@{contactNode: Contact {name, hyperdata}} ->
           H.ul { className: "col-md-12 list-group" } [
-            display (fromMaybe "no name" name) (contactInfos hyperdata onUpdateHyperdata)
+            display { title: fromMaybe "no name" name } (contactInfos hyperdata onUpdateHyperdata)
           , Tabs.tabs {
                  appReload
                , asyncTasksRef

src/Gargantext/Components/Nodes/Lists.purs

@@ -35,6 +35,20 @@ type Props = (
   , treeReloadRef :: R.Ref (Maybe GT.ReloadS)
   )
 
+type WithTreeProps = (
+    handed :: GT.Handed
+  | Props
+  )
+
+listsLayoutWithTree :: R2.Component WithTreeProps
+listsLayoutWithTree props = R.createElement listsLayoutWithTreeCpt props
+
+listsLayoutWithTreeCpt :: R.Component WithTreeProps
+listsLayoutWithTreeCpt = R.hooksComponentWithModule thisModule "listsLayoutWithTree" cpt
+  where
+    cpt { appReload, asyncTasksRef, handed, nodeId, session, sessionUpdate, treeReloadRef } _ = do
+      pure $ listsLayout { appReload, asyncTasksRef, nodeId, session, sessionUpdate, treeReloadRef }
+
 listsLayout :: Record Props -> R.Element
 listsLayout props = R.createElement listsLayoutCpt props []
 

src/Gargantext/Components/Tab.purs

@@ -45,7 +45,7 @@ tabsCpt = R.hooksComponentWithModule thisModule "tabs" cpt
 -- TODO: document what these are (selection, item indices)
 type TabProps = ( selected :: Int, index :: Int )
 
-tab :: Record TabProps -> Array R.Element -> R.Element
+tab :: R2.Component TabProps
 tab = R.createElement tabCpt
 
 -- | A tab only shows its contents if it is currently selected

src/Gargantext/Utils/Reactix.purs

@@ -42,6 +42,8 @@ import Web.HTML (window)
 import Web.HTML.Window (localStorage)
 import Web.Storage.Storage (Storage, getItem, setItem)
 
+type Component p = Record p -> Array R.Element -> R.Element
+
 newtype Point = Point { x :: Number, y :: Number }
 
 -- a reducer function living in effector, for useReductor