[tree] fix for incorrect, nested component definition

src/Gargantext/Components/Forest/Tree.purs

@@ -153,57 +153,64 @@ loadedTreeViewFirstLevelCpt = R.hooksComponentWithModule thisModule "loadedTreeV
       } _ = do
       pure $ H.ul { className: "tree " <> if handed == GT.RightHanded then "mr-auto" else "ml-auto" } [
         H.div { className: if handed == GT.RightHanded then "righthanded" else "lefthanded" } [
-          toHtmlFirstLevel { appReload
-                           , asyncTasks
-                           , currentRoute
-                           , frontends
-                           , handed
-                           , openNodes
-                           , reload
-                           , reloadTree: reload
-                           , session
-                             -- , tasks
-                           , tree
-                           } []
+          toHtmlFirstLevel (ToHtmlProps { appReload
+                                        , asyncTasks
+                                        , currentRoute
+                                        , frontends
+                                        , handed
+                                        , openNodes
+                                        , reload
+                                        , reloadTree: reload
+                                        , render: toHtmlFirstLevel
+                                        , session
+                                          -- , tasks
+                                        , tree
+                                        }) []
             ]
         ]
 
 ------------------------------------------------------------------------
 
 
-type ToHtmlProps = (
+newtype ToHtmlProps = ToHtmlProps {
     asyncTasks :: GAT.Reductor
   , reloadTree :: GUR.ReloadS
+  , render       :: ToHtmlProps -> Array R.Element -> R.Element
   -- , tasks      :: Record Tasks
   , tree       :: FTree
-  | CommonProps
-  )
+  -- | CommonProps
+  , appReload     :: GUR.ReloadS
+  , currentRoute  :: AppRoute
+  , frontends     :: Frontends
+  , handed        :: GT.Handed
+  , openNodes     :: R.State OpenNodes
+  , reload        :: GUR.ReloadS
+  , session       :: Session
+  }
 
-toHtmlFirstLevel :: R2.Component ToHtmlProps
-toHtmlFirstLevel = R.createElement toHtmlFirstLevelCpt
+toHtmlFirstLevel :: ToHtmlProps -> Array R.Element -> R.Element
+toHtmlFirstLevel = R2.ntCreateElement toHtmlFirstLevelCpt
+
+toHtmlFirstLevelCpt :: R2.NTComponent ToHtmlProps
+toHtmlFirstLevelCpt = R2.ntHooksComponentWithModule thisModule "toHtmlFirstLevel" cpt
   where
-    -- TODO This shouldn't be here: make it a top-level function but be careful
-    -- about cyclic defines
-    -- https://discourse.purescript.org/t/strange-compiler-error-with-an-undefined-reference/2060/3
-    toHtmlFirstLevelCpt :: R.Component ToHtmlProps
-    toHtmlFirstLevelCpt = R.hooksComponentWithModule thisModule "toHtmlFirstLevel" cpt
-
-    cpt p@{ appReload
-          , asyncTasks
-          , currentRoute
-          , frontends
-          , handed
-          , openNodes
-          , reload
-          , reloadTree
-          , session
-          , tree: tree@(NTree (LNode { id
-                                      , name
-                                      , nodeType
-                                      }
-                              ) ary
-                        )
-          } _ = do
+    cpt (ToHtmlProps p@{ appReload
+                       , asyncTasks
+                       , currentRoute
+                       , frontends
+                       , handed
+                       , openNodes
+                       , reload
+                       , reloadTree
+                       , render
+                       , session
+                       , tree: tree@(NTree (LNode { id
+                                                  , name
+                                                  , nodeType
+                                                  }
+                                           ) ary
+                                    )
+                       }) _ = do
       setPopoverRef <- R.useRef Nothing
 
       let pAction a   = performAction a (RecordE.pick (Record.merge p { setPopoverRef }) :: Record PerformActionProps)
@@ -253,6 +260,7 @@ toHtmlFirstLevel = R.createElement toHtmlFirstLevelCpt
                                         , handed
                                         , id: cId
                                         , reloadTree
+                                        , render
                                         }
                                       ) []
                 ) $ sorted publicizedChildren
@@ -267,18 +275,19 @@ type ChildNodeFirstLevelProps = (
   , folderOpen   :: R.State Boolean
   , id           :: ID
   , reloadTree   :: GUR.ReloadS
+  , render       :: ToHtmlProps -> Array R.Element -> R.Element
   | CommonProps
   )
 
 childNodeFirstLevel :: R2.Component ChildNodeFirstLevelProps
 childNodeFirstLevel = R.createElement childNodeFirstLevelCpt
-  where
-    -- TODO This shouldn't be here: make it a top-level function but be careful
-    -- about cyclic defines
-    -- https://discourse.purescript.org/t/strange-compiler-error-with-an-undefined-reference/2060/3
-    childNodeFirstLevelCpt :: R.Component ChildNodeFirstLevelProps
-    childNodeFirstLevelCpt = R.hooksComponentWithModule thisModule "childNodeFirstLevel" cpt
 
+-- TODO This shouldn't be here: make it a top-level function but be careful
+-- about cyclic defines
+-- https://discourse.purescript.org/t/strange-compiler-error-with-an-undefined-reference/2060/3
+childNodeFirstLevelCpt :: R.Component ChildNodeFirstLevelProps
+childNodeFirstLevelCpt = R.hooksComponentWithModule thisModule "childNodeFirstLevel" cpt
+  where
     cpt props@{ appReload
               , asyncTasks
               , currentRoute
@@ -289,6 +298,7 @@ childNodeFirstLevel = R.createElement childNodeFirstLevelCpt
               , openNodes
               , reload
               , reloadTree
+              , render
               , session } _ = do
       cptReload <- GUR.new
 
@@ -302,6 +312,7 @@ childNodeFirstLevel = R.createElement childNodeFirstLevelCpt
                                                   , openNodes
                                                   , reload: cptReload
                                                   , reloadTree
+                                                  , render
                                                   , session
                                                   , tree: loaded } []
 
@@ -314,30 +325,33 @@ type ChildNodeFirstLevelPaintProps = (
     asyncTasks   :: GAT.Reductor
   , folderOpen   :: R.State Boolean
   , reloadTree   :: GUR.ReloadS
+  , render       :: ToHtmlProps -> Array R.Element -> R.Element
   , tree         :: FTree
   | CommonProps
   )
 
 childNodeFirstLevelPaint :: R2.Component ChildNodeFirstLevelPaintProps
 childNodeFirstLevelPaint = R.createElement childNodeFirstLevelPaintCpt
-  where
-    -- TODO This shouldn't be here: make it a top-level function but be careful
-    -- about cyclic defines
-    -- https://discourse.purescript.org/t/strange-compiler-error-with-an-undefined-reference/2060/3
-    childNodeFirstLevelPaintCpt :: R.Component ChildNodeFirstLevelPaintProps
-    childNodeFirstLevelPaintCpt = R.hooksComponentWithModule thisModule "childNodeFirstLevelPaint" cpt
-    -- TODO folderOpen is unused
 
+-- TODO This shouldn't be here: make it a top-level function but be careful
+-- about cyclic defines
+-- https://discourse.purescript.org/t/strange-compiler-error-with-an-undefined-reference/2060/3
+childNodeFirstLevelPaintCpt :: R.Component ChildNodeFirstLevelPaintProps
+childNodeFirstLevelPaintCpt = R.hooksComponentWithModule thisModule "childNodeFirstLevelPaint" cpt
+-- TODO folderOpen is unused
+  where
     cpt props@{ asyncTasks
               , handed
               , reload
               , reloadTree
+              , render
               , tree: ctree@(NTree (LNode { id }) _) } _ = do
       pure $ H.ul {} [
-        toHtmlFirstLevel (Record.merge commonProps { asyncTasks
-                                                   , handed
-                                                   , reloadTree
-                                                   , tree: ctree }
+        render (ToHtmlProps (Record.merge commonProps { asyncTasks
+                                                      , handed
+                                                      , reloadTree
+                                                      , render
+                                                      , tree: ctree })
                         ) []
         ]
       -- pure $ H.div { } [ H.text $ "[closed] Node id " <> show id ]

src/Gargantext/Utils/Reactix.purs

@@ -45,6 +45,35 @@ import Web.Storage.Storage (Storage, getItem, setItem)
 
 type Component p = Record p -> Array R.Element -> R.Element
 
+-- newtypes
+type NTHooksComponent props = props -> Array R.Element -> R.Hooks R.Element
+newtype NTComponent p = NTComponent (EffectFn1 p R.Element)
+
+class NTIsComponent component (props :: Type) children
+  | component -> props, component -> children where
+  ntCreateElement :: component -> props -> children -> R.Element
+
+instance componentIsNTComponent :: NTIsComponent (NTComponent props) props (Array R.Element) where
+  ntCreateElement = R.rawCreateElement
+
+-- | Turns a `HooksComponent` function into a Component
+ntHooksComponent :: forall props. String -> NTHooksComponent props -> NTComponent props
+ntHooksComponent name c = NTComponent $ named name $ mkEffectFn1 c'
+  where
+    c' :: props -> Effect R.Element
+    c' props = R.runHooks $ c props (children props)
+
+ntHooksComponentWithModule :: forall props. Module -> String -> NTHooksComponent props -> NTComponent props
+ntHooksComponentWithModule module' name c = ntHooksComponent (module' <> "." <> name) c
+
+---------------------------
+-- TODO Copied from reactix, export these:
+children :: forall a. a -> Array R.Element
+children a = react .. "Children" ... "toArray" $ [ (a .. "children") ]
+
+type Module = String
+---------------------------
+
 newtype Point = Point { x :: Number, y :: Number }
 
 -- a reducer function living in effector, for useReductor