Refactor G.P.Annuaire to use Reactix

src/Gargantext/Pages/Annuaire.purs

@@ -4,170 +4,127 @@ import Gargantext.Prelude
 
 import Data.Argonaut (class DecodeJson, decodeJson, (.:), (.:!))
 import Data.Array (head)
-import Data.Either (Either(..))
-import Data.Lens (Prism', prism)
 import Data.Maybe (Maybe(..), maybe)
+import Data.Tuple (fst, snd)
 import Effect.Aff (Aff)
-import Effect.Class (liftEffect)
-import Gargantext.Components.Loader as Loader
-import Gargantext.Components.Tab as Tab
 import Gargantext.Components.Table as T
-import Gargantext.Config (toUrl, endConfigStateful, Path(..), NodeType(..), End(..))
+import Gargantext.Config (NodeType(..), Ends, BackendRoute(..), NodePath(..), url)
 import Gargantext.Config.REST (get)
+import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Pages.Annuaire.User.Contacts.Types (Contact(..), HyperdataContact(..), ContactWhere(..))
-import React (ReactClass, ReactElement, Children)
-import React as React
-import React.DOM (a, br', div, input, p, text)
-import React.DOM.Props (className, href, style, target)
-import Thermite (Render, Spec, createClass, simpleSpec, defaultPerformAction)
-------------------------------------------------------------------------------
-
-type Props = Loader.InnerProps Int AnnuaireInfo ()
-
-data Action
-  = TabsA   Tab.Action
+import Reactix as R
+import Reactix.DOM.HTML as H
 
-_tabsAction :: Prism' Action Tab.Action
-_tabsAction = prism TabsA \ action ->
-  case action of
-    TabsA taction -> Right taction
-    -- _-> Left action
-
-newtype IndividuView
-  = CorpusView
+newtype IndividuView =
+  CorpusView
   { id      :: Int
   , name    :: String
   , role    :: String
-    , company :: String
-    }
-
-------------------------------------------------------------------------------
+  , company :: String }
 
--- unused
-defaultAnnuaireTable :: AnnuaireTable
-defaultAnnuaireTable = AnnuaireTable { annuaireTable : [] }
-
--- unused
-defaultHyperdataAnnuaire :: HyperdataAnnuaire
-defaultHyperdataAnnuaire = HyperdataAnnuaire { title: Nothing, desc: Nothing }
-
--- unused
-defaultAnnuaireInfo :: AnnuaireInfo
-defaultAnnuaireInfo = AnnuaireInfo { id : 0
-                                   , typename : 0
-                                   , userId   : 0
-                                   , parentId : 0
-                                   , name     : ""
-                                   , date     : ""
-                                   , hyperdata : defaultHyperdataAnnuaire
-                                   }
-------------------------------------------------------------------------------
 toRows :: AnnuaireTable -> Array (Maybe Contact)
 toRows (AnnuaireTable a) = a.annuaireTable
 
-layout :: Spec {} {annuaireId :: Int} Void
-layout = simpleSpec defaultPerformAction render
+-- | Top level layout component. Loads an annuaire by id and renders
+-- | the annuaire using the result
+type LayoutProps = ( annuaireId :: Int, ends :: Ends )
+
+annuaireLayout :: Record LayoutProps -> R.Element
+annuaireLayout props = R.createElement annuaireLayoutCpt props []
+
+annuaireLayoutCpt :: R.Component LayoutProps
+annuaireLayoutCpt = R.hooksComponent "G.P.Annuaire.annuaireLayout" cpt
   where
-    render :: Render {} {annuaireId :: Int} Void
-    render _ {annuaireId} _ _ =
-      [ annuaireLoader
-          { path: annuaireId
-          , component: createClass "LoadedAnnuaire" loadedAnnuaireSpec (const {})
-          } ]
-
-loadedAnnuaireSpec :: Spec {} Props Void
-loadedAnnuaireSpec = simpleSpec defaultPerformAction render
+    cpt {annuaireId, ends} _ = do
+      path <- R.useState' annuaireId
+      useLoader (fst path) (getAnnuaireInfo ends) $
+        \info -> annuaire {ends, path, info}
+      
+type AnnuaireProps =
+  ( ends :: Ends
+  , path :: R.State Int
+  , info :: AnnuaireInfo )
+
+-- | Renders a basic table and the page loader
+annuaire :: Record AnnuaireProps -> R.Element
+annuaire props = R.createElement annuaireCpt props []
+
+-- Abuses closure to work around the Loader
+annuaireCpt :: R.Component AnnuaireProps
+annuaireCpt = R.staticComponent "G.P.Annuaire.annuaire" cpt
   where
-    render :: Render {} Props Void
-    render _ {path: nodeId, loaded: annuaireInfo@(AnnuaireInfo {name, date})} _ _ =
-      T.renderTableHeaderLayout
-        { title: name
-        , desc: name
-        , query: ""
-        , date: "Last update: " <> date
-        , user: ""
-        } <>
-      [ p [] []
-      , div [className "col-md-3"] [ text "    Filter ", input [className "form-control", style {"width" : "250px", "display": "inline-block"}]]
-      , br'
-      , pageLoader
-          { path: initialPageParams nodeId
-          , annuaireInfo
-          }
-      ]
-
-type PageParams = {nodeId :: Int, params :: T.Params}
+    cpt {ends, path, info: info@(AnnuaireInfo {name, date: date'})} _ = R.fragment
+      [ T.tableHeaderLayout headerProps
+      , H.p {} []
+      , H.div {className: "col-md-3"}
+        [ H.text "    Filter ", H.input { className: "form-control", style } ]
+      , H.br {}
+      , pageLayout { info, ends, annuairePath: path } ]
+      where
+        headerProps = { title: name, desc: name, query: "", date, user: ""}
+        date = "Last update: " <> date'
+        style = {width: "250px", display: "inline-block"}
+type PagePath = { nodeId :: Int, params :: T.Params }
 
-initialPageParams :: Int -> PageParams
-initialPageParams nodeId = {nodeId, params: T.initialParams}
+type PageLayoutProps =
+  ( ends :: Ends
+  , annuairePath :: R.State Int
+  , info :: AnnuaireInfo )
 
-type PageLoaderProps =
-  { path :: PageParams
-  , annuaireInfo :: AnnuaireInfo
-  }
+pageLayout :: Record PageLayoutProps -> R.Element
+pageLayout props = R.createElement pageLayoutCpt props []
 
-renderPage :: forall props path.
-              Render (Loader.State {nodeId :: Int | path} AnnuaireTable)
-                     {annuaireInfo :: AnnuaireInfo | props}
-                     (Loader.Action PageParams)
-renderPage _ _ {loaded: Nothing} _ = [] -- TODO loading spinner
-renderPage dispatch {annuaireInfo} { currentPath: {nodeId}
-                                   , loaded: Just (AnnuaireTable {annuaireTable: res})
-                                   } _ = [ T.tableElt { rows
-                                       , setParams: \params -> liftEffect $ dispatch (Loader.SetPath {nodeId, params})
-                                       , container: T.defaultContainer { title: "Annuaire" } -- TODO
-                                       , colNames: T.ColumnName <$> [ "", "Name", "Company", "Service", "Role"]
-                                       , totalRecords: 4361 -- TODO
-                                       }
-                                     ]
+pageLayoutCpt :: R.Component PageLayoutProps
+pageLayoutCpt = R.hooksComponent "G.P.Annuaire.pageLayout" cpt
+  where
+    cpt {annuairePath, info, ends} _ = do
+      pagePath <- R.useState' (initialPagePath (fst annuairePath))
+      useLoader (fst pagePath) (loadPage ends) $
+        \table -> page {ends, table, pagePath, annuairePath}
+    initialPagePath nodeId = {nodeId, params: T.initialParams}
+
+type PageProps = 
+  ( ends :: Ends
+  , annuairePath :: R.State Int
+  , pagePath :: R.State PagePath
+  -- , info :: AnnuaireInfo
+  , table :: AnnuaireTable )
+
+page :: Record PageProps -> R.Element
+page props = R.createElement pageCpt props []
+
+pageCpt :: R.Component PageProps
+pageCpt = R.staticComponent "LoadedAnnuairePage" cpt
+  where
+    cpt { ends, annuairePath, pagePath, table: (AnnuaireTable {annuaireTable}) } _ = do
+      T.table { rows, setParams, container, colNames, totalRecords }
       where
-                          --rows = (\c -> {row: [text $ show c.id], delete: false}) <$> res
-                          rows = (\c -> {row: renderContactCells c, delete: false}) <$> res
-
-{-
-showRow :: Maybe Contact -> ReactElement
-showRow Nothing = tr [][]
-showRow (Just (Contact {id: id, hyperdata: (HyperdataContact contact) })) = tr [] []
-  [ td [] [ a [ href (toUrl endConfigStateful Front NodeUser (Just id)) ] [
-               text $ maybe "name" identity contact.title
-               ]
-          ]
-  , td [] [text $ maybe "fonction" identity contact.source]
-  , td [] [text $ maybe "groupe"   identity contact.source]
-  , td [] [text $ "date entry"]
-  ]
-    --where
-      --maybe' key = maybe (key <> " not found") identity $ lookup key contact
-      -}
-
-pageLoaderClass :: ReactClass { path :: PageParams, annuaireInfo :: AnnuaireInfo, children :: Children }
-pageLoaderClass = Loader.createLoaderClass' "AnnuairePageLoader" loadPage renderPage
-
-pageLoader :: PageLoaderProps -> ReactElement
-pageLoader props = React.createElement pageLoaderClass props []
-
---{-
-renderContactCells :: Maybe Contact -> Array ReactElement
-renderContactCells Nothing = []
-renderContactCells (Just (Contact { id, hyperdata : (HyperdataContact contact@{who: who, ou:ou} ) })) =
-  [ text ""
-  , a [ href (toUrl endConfigStateful Front NodeContact (Just id)), target "blank" ] [ text $ maybe "name" identity contact.title ]
-  , text $ maybe "No ContactWhere" renderContactWhereOrg  (head $ ou)
-  , text $ maybe "No ContactWhere" renderContactWhereDept (head $ ou)
-  , div [className "nooverflow"] [text $ maybe "No ContactWhere" renderContactWhereRole (head $ ou)]
-  ]
+        totalRecords =4361 -- TODO
+        rows = (\c -> {row: contactCells ends c, delete: false}) <$> annuaireTable
+        setParams params = snd pagePath $ const {params, nodeId: fst annuairePath}
+        container = T.defaultContainer { title: "Annuaire" } -- TODO
+        colNames = T.ColumnName <$> [ "", "Name", "Company", "Service", "Role"]
+
+contactCells :: Ends -> Maybe Contact -> Array R.Element
+contactCells ends = maybe [] render
   where
-    maybe' = maybe "" identity
-    renderContactWhereOrg (ContactWhere { organization: [] }) = "No Organization"
-    renderContactWhereOrg (ContactWhere { organization: orga }) =
+    render (Contact { id, hyperdata : (HyperdataContact contact@{who: who, ou:ou} ) }) =
+      let nodepath = NodePath NodeContact (Just id)
+          href = url ends nodepath in
+      [ H.text ""
+      , H.a { href, target: "blank" } [ H.text $ maybe "name" identity contact.title ]
+      , H.text $ maybe "No ContactWhere" contactWhereOrg  (head $ ou)
+      , H.text $ maybe "No ContactWhere" contactWhereDept (head $ ou)
+      , H.div {className: "nooverflow"}
+        [ H.text $ maybe "No ContactWhere" contactWhereRole (head $ ou) ] ]
+    contactWhereOrg (ContactWhere { organization: [] }) = "No Organization"
+    contactWhereOrg (ContactWhere { organization: orga }) =
       maybe "No orga (list)" identity (head orga)
-
-    renderContactWhereDept (ContactWhere { labTeamDepts : [] }) = "Empty Dept"
-    renderContactWhereDept (ContactWhere { labTeamDepts : dept }) =
+    contactWhereDept (ContactWhere { labTeamDepts : [] }) = "Empty Dept"
+    contactWhereDept (ContactWhere { labTeamDepts : dept }) =
       maybe "No Dept (list)" identity (head dept)
-
-    renderContactWhereRole (ContactWhere { role: Nothing }) = "Empty Role"
-    renderContactWhereRole (ContactWhere { role: Just role }) = role
+    contactWhereRole (ContactWhere { role: Nothing }) = "Empty Role"
+    contactWhereRole (ContactWhere { role: Just role }) = role
 
 
 data HyperdataAnnuaire = HyperdataAnnuaire
@@ -177,8 +134,8 @@ data HyperdataAnnuaire = HyperdataAnnuaire
 instance decodeHyperdataAnnuaire :: DecodeJson HyperdataAnnuaire where
   decodeJson json = do
     obj   <- decodeJson json
-    title <- obj .:! "title"
-    desc  <- obj .:! "desc"
+    title <- obj .:? "title"
+    desc  <- obj .:? "desc"
     pure $ HyperdataAnnuaire { title, desc }
 
 ------------------------------------------------------------------------------
@@ -218,10 +175,9 @@ instance decodeAnnuaireTable :: DecodeJson AnnuaireTable where
     rows <- decodeJson json
     pure $ AnnuaireTable { annuaireTable : rows}
 ------------------------------------------------------------------------
-loadPage :: PageParams -> Aff AnnuaireTable
-loadPage {nodeId, params: { offset, limit, orderBy }} =
-    get $ toUrl endConfigStateful Back (Children NodeContact offset limit Nothing {-(convOrderBy <$> orderBy)-})
-                     (Just nodeId)
+loadPage :: Ends -> PagePath -> Aff AnnuaireTable
+loadPage ends {nodeId, params: { offset, limit, orderBy }} =
+    get $ url ends children
  -- TODO orderBy
  -- where
  --   convOrderBy (T.ASC  (T.ColumnName "Name")) = NameAsc
@@ -229,12 +185,11 @@ loadPage {nodeId, params: { offset, limit, orderBy }} =
  --   ...
  --   convOrderBy _ = NameAsc -- TODO
 
-getAnnuaireInfo :: Int -> Aff AnnuaireInfo
-getAnnuaireInfo id = get $ toUrl endConfigStateful Back Node (Just id)
-------------------------------------------------------------------------------
+  where
+    children = Children NodeContact offset limit Nothing {-(convOrderBy <$> orderBy)-} (Just nodeId)
+
+------ Annuaire loading ------
 
-annuaireLoaderClass :: ReactClass (Loader.Props Int AnnuaireInfo)
-annuaireLoaderClass = Loader.createLoaderClass "AnnuaireLoader" getAnnuaireInfo
+getAnnuaireInfo :: Ends -> Int -> Aff AnnuaireInfo
+getAnnuaireInfo ends id = get $ url ends (NodeAPI Node (Just id))
 
-annuaireLoader :: Loader.Props' Int AnnuaireInfo -> ReactElement
-annuaireLoader props = React.createElement annuaireLoaderClass props []

src/Gargantext/Pages/Annuaire/User/Contacts.purs

 module Gargantext.Pages.Annuaire.User.Contacts
-       (module Gargantext.Pages.Annuaire.User.Contacts.Types,
-        module Gargantext.Pages.Annuaire.User.Contacts.Specs)
+  ( module Gargantext.Pages.Annuaire.User.Contacts.Types
+  , userLayout )
   where
 
+import Prelude ((<$>))
+import Data.List (List, zipWith, catMaybes, toUnfoldable)
+import Data.Map (Map, empty, keys, values, lookup)
+import Data.Array (head)
+import Data.Semigroup ((<>))
+import Data.Maybe (Maybe(..), fromMaybe, maybe)
+import Data.Set (toUnfoldable) as S
+import Data.Tuple (Tuple(..), uncurry)
+import Data.Tuple.Nested ((/\))
+import Data.Unfoldable (class Unfoldable)
+import Data.Maybe (Maybe(..))
+import Data.Newtype (unwrap)
+import Data.String (joinWith)
+import Effect.Aff (Aff, throwError)
+import Effect.Exception (error)
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Gargantext.Prelude
+import Gargantext.Config (Ends, BackendRoute(..), NodeType(..), url)
+import Gargantext.Config.REST (get)
+import Gargantext.Components.Node (NodePoly(..), HyperdataList(..))
+import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Pages.Annuaire.User.Contacts.Types
-import Gargantext.Pages.Annuaire.User.Contacts.Specs (layoutUser)
+import Gargantext.Pages.Annuaire.User.Contacts.Tabs.Specs as Tabs
+import Gargantext.Utils.Reactix as R2
+
+display :: String -> Array R.Element -> R.Element
+display title elems =
+  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"} []
+    , H.div { className: "col-md-2"} [ H.span {} [ H.text "" ] ]
+    ]
+  , H.div { className: "row", id: "contact-page-info" }
+    [ H.div { className: "col-md-12" }
+      [ 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
+        ]]]]
+
+getFirstName obj = fromMaybe "Empty title" $ getFirstName' <$> obj
+getFirstName' = fromMaybe "Empty first name" <<< _.firstName <<< unwrap
+
+getLastName obj = fromMaybe "Empty title" $ getLastName' <$> obj
+getLastName' = fromMaybe "Empty last name"  <<< _.lastName <<< unwrap
+
+-- | ContactWhere infos
+-- TODO factor below
+getRole :: Array ContactWhere -> String
+getRole = maybe "Empty Contact-Where" getRole' <<< head
+  where
+    getRole' = fromMaybe "Empty Role" <<< _.role <<< unwrap
+
+getOrga :: Array ContactWhere -> String
+getOrga = maybe "Emtpy Contact-Where" getOrga' <<< head
+  where
+    getOrga' :: ContactWhere -> String
+    getOrga' obj = joinWith ", " $ (\(ContactWhere {organization: o}) ->o) obj
+
+getDept :: Array ContactWhere -> String
+getDept = maybe "Empty Department" getDept' <<< head
+  where
+    getDept' :: ContactWhere -> String
+    getDept' obj = joinWith ", " $ (\(ContactWhere {labTeamDepts: l}) ->l) obj
+
+getOffice :: Array ContactWhere -> String
+getOffice = fromMaybe "Empty Office"
+          <<< maybe Nothing (\(ContactWhere {office:x}) -> x)
+          <<< head
+
+getCity :: Array ContactWhere -> String
+getCity = fromMaybe "Empty City"
+          <<< maybe Nothing (\(ContactWhere {city:x}) -> x)
+          <<< head
+
+getCountry :: Array ContactWhere -> String
+getCountry = fromMaybe "Empty Country"
+          <<< maybe Nothing (\(ContactWhere {country:x}) -> x)
+          <<< head
+
+-- | ContactWhere / Touch infos
+getTouch :: Array ContactWhere -> Maybe ContactTouch
+getTouch = maybe Nothing (\(ContactWhere {touch:x}) -> x) <<< head
+
+getPhone :: Array ContactWhere -> String
+getPhone obj = fromMaybe "Empty touch info" $ getPhone' <$> (getTouch obj)
+getPhone' :: ContactTouch -> String
+getPhone' = fromMaybe "Empty phone" <<< _.phone <<< unwrap
+
+getMail :: Array ContactWhere -> String
+getMail obj = fromMaybe "Empty info" $ getMail' <$> (getTouch obj)
+getMail' :: ContactTouch -> String
+getMail' = fromMaybe "Empty mail" <<< _.mail <<< unwrap
+
+-- | TODO format data in better design (UI) shape
+contactInfos :: HyperdataContact -> Array R.Element
+contactInfos (HyperdataContact {who:who, ou:ou}) = item <$> items
+  where
+    items =
+      [ "Last Name"     /\ getLastName who
+      , "First Name"    /\ getFirstName who
+      , "Organisation"  /\ getOrga ou
+      , "Lab/Team/Dept" /\ getOrga ou
+      , "Office"        /\ getOffice ou
+      , "City"          /\ getCity ou
+      , "Country"       /\ getCountry ou
+      , "Role"          /\ getRole ou
+      , "Phone"         /\ getPhone ou
+      , "Mail"          /\ getMail ou ]
+    item (name /\ value) =
+      H.li { className: "list-group-item" }
+        (infoRender (name /\ (" " <> value)))
+
+listInfo :: Tuple String String -> R.Element
+listInfo s = listElement $ infoRender s
+
+listElement :: Array R.Element -> R.Element
+listElement = H.li { className: "list-group-item justify-content-between" }
+
+infoRender :: Tuple String String -> Array R.Element
+infoRender (Tuple title content) =
+  [ H.span { className: "badge badge-default badge-pill"} [ H.text title ]
+  , H.span {} [H.text content] ]
+
+type LayoutProps = ( nodeId :: Int, ends :: Ends )
+
+userLayout :: Record LayoutProps -> R.Element
+userLayout props = R.createElement userLayoutCpt props []
+
+userLayoutCpt :: R.Component LayoutProps
+userLayoutCpt = R.hooksComponent "G.P.Annuaire.UserLayout" cpt
+  where
+    cpt {nodeId, ends} _ =
+      useLoader nodeId (getContact ends) $
+        \contactData@{contactNode: Contact {name, hyperdata}} ->
+          H.ul { className: "col-md-12 list-group" }
+          [ display (fromMaybe "no name" name) (contactInfos hyperdata)
+          , Tabs.tabs {nodeId, contactData, ends} ]
+
+-- | toUrl to get data
+getContact :: Ends -> Int -> Aff ContactData
+getContact ends id = do
+  contactNode <- get $ url ends (NodeAPI NodeContact (Just id))
+  -- TODO: we need a default list for the pairings
+  --defaultListIds <- get $ toUrl endConfigStateful Back (Children NodeList 0 1 Nothing) $ Just id
+  --case (head defaultListIds :: Maybe (NodePoly HyperdataList)) of
+  --  Just (NodePoly { id: defaultListId }) ->
+  --    pure {contactNode, defaultListId}
+  --  Nothing ->
+  --    throwError $ error "Missing default list"
+  pure {contactNode, defaultListId: 424242}
+

src/Gargantext/Pages/Annuaire/User/Contacts/Specs.purs

-module Gargantext.Pages.Annuaire.User.Contacts.Specs
-       (layoutUser)
-       where
-
-
-import Data.Array (head)
-import Data.List (zipWith, catMaybes, toUnfoldable)
-import Data.Map (Map, keys, lookup)
-import Data.Maybe (Maybe(..), fromMaybe, maybe)
-import Data.Newtype (unwrap)
-import Data.Set (toUnfoldable) as S
-import Data.String (joinWith)
-import Data.Tuple (Tuple(..))
-import Data.Unfoldable (class Unfoldable)
-import Effect.Aff (Aff)
-import React (ReactElement)
-import React.DOM (div, h3, img, li, span, text, ul)
-import React.DOM.Props (_id, className, src)
-import Reactix as R
-import Thermite (Spec)
-
-import Gargantext.Prelude
-import Gargantext.Config (toUrl, End(..), NodeType(..))
-import Gargantext.Config (toUrl, endConfigStateful, End(..), NodeType(..), Path(..))
-import Gargantext.Config.REST (get)
-import Gargantext.Components.Loader2 (useLoader)
-import Gargantext.Pages.Annuaire.User.Contacts.Types
-import Gargantext.Pages.Annuaire.User.Contacts.Tabs.Specs as Tabs
-import Gargantext.Utils.Reactix as R2
-
-display :: String -> Array ReactElement -> Array ReactElement
-display title elems =
-  [ div [className "container-fluid"]
-    [ div [className "row", _id "contact-page-header"]
-          [ div [className "col-md-6"] [ h3 [] [text title] ]
-          , div [className "col-md-8"] []
-          , div [className "col-md-2"] [ span [] [text ""] ]
-          ]
-    , div [className "row", _id "contact-page-info"]
-          [ div [className "col-md-12"]
-            [ div [className "row"]
-              [ div [className "col-md-2"]
-                    --[ ]
-                    [ img [src "/images/Gargantextuel-212x300.jpg"] ]
-              , div [className "col-md-1"] []
-              , div [className "col-md-8"] elems
-              ]
-            ]
-          ]
-     ]
-  ]
-
-mapMyMap :: forall k v x f. Ord k => Unfoldable f => (k -> v -> x) -> Map k v -> f x
-mapMyMap f m = toUnfoldable
-               $ zipWith f mapKeys
-               (catMaybes $ flip lookup m <$> mapKeys)
-  where mapKeys = S.toUnfoldable $ keys m
-
-infixl 4 mapMyMap as <.~$>
-
-getFirstName :: Maybe ContactWho -> String
-getFirstName obj = fromMaybe "Empty title" $ getFirstName' <$> obj
-  where
-    getFirstName' = fromMaybe "Empty first name" <<< _.firstName <<< unwrap
-
-getLastName :: Maybe ContactWho -> String
-getLastName obj = fromMaybe "Empty title" $ getLastName' <$> obj
-  where
-    getLastName' = fromMaybe "Empty last name"  <<< _.lastName <<< unwrap
-
--- | ContactWhere infos
--- TODO factor below
-getRole :: Array ContactWhere -> String
-getRole = maybe "Empty Contact-Where" getRole' <<< head
-  where
-    getRole' = fromMaybe "Empty Role" <<< _.role <<< unwrap
-
-getOrga :: Array ContactWhere -> String
-getOrga = maybe "Emtpy Contact-Where" getOrga' <<< head
-  where
-    getOrga' :: ContactWhere -> String
-    getOrga' obj = joinWith ", " $ (\(ContactWhere {organization: o}) ->o) obj
-
-getDept :: Array ContactWhere -> String
-getDept = maybe "Empty Department" getDept' <<< head
-  where
-    getDept' :: ContactWhere -> String
-    getDept' obj = joinWith ", " $ (\(ContactWhere {labTeamDepts: l}) ->l) obj
-
-getOffice :: Array ContactWhere -> String
-getOffice = fromMaybe "Empty Office"
-          <<< maybe Nothing (\(ContactWhere {office:x}) -> x)
-          <<< head
-
-getCity :: Array ContactWhere -> String
-getCity = fromMaybe "Empty City"
-          <<< maybe Nothing (\(ContactWhere {city:x}) -> x)
-          <<< head
-
-getCountry :: Array ContactWhere -> String
-getCountry = fromMaybe "Empty Country"
-          <<< maybe Nothing (\(ContactWhere {country:x}) -> x)
-          <<< head
-
--- | ContactWhere / Touch infos
-getTouch :: Array ContactWhere -> Maybe ContactTouch
-getTouch = maybe Nothing (\(ContactWhere {touch:x}) -> x) <<< head
-
-getPhone :: Array ContactWhere -> String
-getPhone obj = fromMaybe "Empty touch info" $ getPhone' <$> (getTouch obj)
-getPhone' :: ContactTouch -> String
-getPhone' = fromMaybe "Empty phone" <<< _.phone <<< unwrap
-
-getMail :: Array ContactWhere -> String
-getMail obj = fromMaybe "Empty info" $ getMail' <$> (getTouch obj)
-getMail' :: ContactTouch -> String
-getMail' = fromMaybe "Empty mail" <<< _.mail <<< unwrap
-
--- | TODO format data in better design (UI) shape
-contactInfos :: HyperdataContact -> Array ReactElement
-contactInfos (HyperdataContact {who:who, ou:ou}) =
-  [ li [className "list-group-item"] (infoRender (Tuple "Last Name"    $ " " <> getLastName  who))
-  , li [className "list-group-item"] (infoRender (Tuple "First name"   $ " " <> getFirstName who))
-  , li [className "list-group-item"] (infoRender (Tuple "Organization" $ " " <> getOrga      ou ))
-  , li [className "list-group-item"] (infoRender (Tuple "Lab/Team/Dept"$ " " <> getOrga      ou ))
-  , li [className "list-group-item"] (infoRender (Tuple "Office"       $ " " <> getOffice    ou ))
-  , li [className "list-group-item"] (infoRender (Tuple "City"         $ " " <> getCity      ou ))
-  , li [className "list-group-item"] (infoRender (Tuple "Country"      $ " " <> getCountry   ou ))
-  , li [className "list-group-item"] (infoRender (Tuple "Role"         $ " " <> getRole      ou ))
-  , li [className "list-group-item"] (infoRender (Tuple "Phone"        $ " " <> getPhone     ou ))
-  , li [className "list-group-item"] (infoRender (Tuple "Mail"         $ " " <> getMail      ou ))
-  ]
-
-
-  {- $
-    listInfo <.~$> hyperdata
-  where
-    checkMaybe (Nothing) = empty
-    checkMaybe (Just (HyperData a)) = a
--}
-
-listInfo :: Tuple String String -> ReactElement
-listInfo s = listElement $ infoRender s
-
-listElement :: Array ReactElement -> ReactElement
-listElement = li [className "list-group-item justify-content-between"]
-
-infoRender :: Tuple String String -> Array ReactElement
-infoRender (Tuple title content) =
-  [ span [className "badge badge-default badge-pill"] [text title]
-  , span [] [text content]
-  ]
-
--- | Below an example of a loader, use all code below and adapt it
--- to your code
--- layoutUser is exported by the module
-layoutUser :: Spec {} {nodeId :: Int} Void
-layoutUser =
-  R2.elSpec $ R.hooksComponent "LayoutUser" \{nodeId} _ ->
-    useLoader nodeId getContact $ \{loaded: contactData} ->
-      let {contactNode: Contact {name, hyperdata}} = contactData in
-      R2.toElement
-        [ ul [className "col-md-12 list-group"] $
-            display (fromMaybe "no name" name) (contactInfos hyperdata)
-        , Tabs.elt {nodeId, contactData}
-        ]
-
--- | toUrl to get data
-getContact :: Int -> Aff ContactData
-getContact id = do
-  contactNode <- get $ toUrl endConfigStateful Back Node $ Just id
-  -- TODO: we need a default list for the pairings
-  --defaultListIds <- get $ toUrl endConfigStateful Back (Children NodeList 0 1 Nothing) $ Just id
-  --case (head defaultListIds :: Maybe (NodePoly HyperdataList)) of
-  --  Just (NodePoly { id: defaultListId }) ->
-  --    pure {contactNode, defaultListId}
-  --  Nothing ->
-  --    throwError $ error "Missing default list"
-  pure {contactNode, defaultListId: 424242}

src/Gargantext/Pages/Annuaire/User/Contacts/Tabs/Specs.purs → src/Gargantext/Pages/Annuaire/User/Contacts/Tabs.purs

@@ -7,9 +7,10 @@ import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Show (genericShow)
 import Data.List (fromFoldable)
 import Data.Maybe (Maybe(..))
-import Data.Tuple (Tuple(..))
+import Data.Tuple (Tuple(..), fst)
+import Data.Tuple.Nested ((/\))
 
-import Gargantext.Config (TabType(..), TabSubType(..), PTabNgramType(..), CTabNgramType(..))
+import Gargantext.Config (Ends, TabType(..), TabSubType(..), PTabNgramType(..), CTabNgramType(..))
 import Gargantext.Components.DocsTable as DT
 import Gargantext.Components.NgramsTable as NT
 import Gargantext.Components.Tab as Tab
@@ -17,8 +18,7 @@ import Gargantext.Pages.Annuaire.User.Contacts.Types (ContactData)
 import Gargantext.Utils.Reactix as R2
 
 import Reactix as R
-import React (Children, ReactElement, ReactClass, createElement)
-import Thermite (Spec, hideState, noState, cmapProps, createClass)
+import Reactix.DOM.HTML as H
 
 data Mode = Patents | Books | Communication
 
@@ -40,51 +40,53 @@ modeTabType' Patents = CTabAuthors
 modeTabType' Books = CTabAuthors
 modeTabType' Communication = CTabAuthors
 
-
-
-type PropsRow =
+type Props =
   ( nodeId :: Int
   , contactData :: ContactData
-  )
-
-type Props = Record PropsRow
-
-elt :: Props -> ReactElement
-elt props = createElement tabsClass props []
-
-tabsClass :: ReactClass { children :: Children | PropsRow }
-tabsClass = createClass "ContactsTabs" pureTabs (const {})
+  , ends :: Ends )
 
-pureTabs :: Spec {} Props Void
-pureTabs = hideState (const {activeTab: 0}) statefulTabs
+tabs :: Record Props -> R.Element
+tabs props = R.createElement tabsCpt props []
 
-statefulTabs :: Spec Tab.State Props Tab.Action
-statefulTabs =
-  Tab.tabs identity identity $ fromFoldable
-    [ Tuple "Documents"     $ docs
-    , Tuple "Patents"       $ ngramsViewSpec {mode: Patents}
-    , Tuple "Books"         $ ngramsViewSpec {mode: Books}
-    , Tuple "Communication" $ ngramsViewSpec {mode: Communication}
-    , Tuple "Trash"         $ docs -- TODO pass-in trash mode
+tabsCpt :: R.Component Props
+tabsCpt = R.hooksComponent "G.P.Annuaire.User.Contacts.Tabs.tabs" cpt
+  where
+    cpt {nodeId, contactData: {defaultListId}, ends} _ = do
+      active <- R.useState' 0
+      pure $
+        Tab.tabs { tabs: tabs', selected: fst active }
+      where
+        tabs' =
+          [ "Documents"     /\ docs
+          , "Patents"       /\ ngramsView patentsView
+          , "Books"         /\ ngramsView booksView
+          , "Communication" /\ ngramsView commView
+          , "Trash"         /\ docs -- TODO pass-in trash mode
           ]
           where
+            patentsView = {ends, defaultListId, nodeId, mode: Patents}
+            booksView = {ends, defaultListId, nodeId, mode: Books}
+            commView = {ends, defaultListId, nodeId, mode: Communication}
             chart = mempty
-    -- TODO totalRecords
-    docs = noState $ R2.elSpec $ R.hooksComponent "DocViewSpecWithCorpus" $ \{nodeId, contactData: {defaultListId}} _ -> do
-      pure $ DT.docViewSpec
-        { nodeId
-        , chart
+            totalRecords = 4736 -- TODO
+            docs = DT.docView
+              { ends, nodeId, chart, totalRecords
               , tabType: TabPairing TabDocs
-        , totalRecords: 4736
               , listId: defaultListId
               , corpusId: Nothing
-        , showSearch: true
-        }
-
-ngramsViewSpec :: {mode :: Mode} -> Spec Tab.State Props Tab.Action
-ngramsViewSpec {mode} =
-  cmapProps (\{contactData: {defaultListId}, nodeId} ->
-              {defaultListId, nodeId, tabType})
-            (noState (NT.mainNgramsTableSpec (modeTabType' mode)))
+              , showSearch: true }
+
+
+type NgramsViewProps =
+  ( ends :: Ends
+  , mode :: Mode
+  , defaultListId :: Int
+  , nodeId :: Int )
+
+ngramsView :: Record NgramsViewProps -> R.Element
+ngramsView {ends,mode, defaultListId, nodeId} =
+  NT.mainNgramsTable
+  { nodeId, defaultListId, tabType, ends, tabNgramType }
   where
+    tabNgramType = modeTabType' mode
     tabType = TabPairing $ TabNgramType $ modeTabType mode

src/Gargantext/Pages/Annuaire/User/Contacts/Types.purs

@@ -2,33 +2,34 @@ module Gargantext.Pages.Annuaire.User.Contacts.Types where
 
 import Prelude
 
-import Data.Argonaut (class DecodeJson, decodeJson, (.:), (.:!))
-import Data.Maybe (Maybe, fromMaybe)
-import Data.Map (Map)
-
+import Data.Argonaut (class DecodeJson, decodeJson, (.?), (.??))
+import Data.Either (Either(..))
+import Data.Lens (Lens', Prism', lens, prism)
+import Data.Maybe (Maybe(..), maybe, fromMaybe)
+import Data.Map (Map(..))
 import Gargantext.Utils.DecodeMaybe ((.?|))
 import Data.Newtype (class Newtype)
 
 -- TODO: should it be a NodePoly HyperdataContact ?
-newtype Contact = Contact {
-  id :: Int
+newtype Contact =
+  Contact
+  { id :: Int
   , typename :: Maybe Int
   , userId :: Maybe Int
   , parentId :: Maybe Int
   , name :: Maybe String
   , date :: Maybe String
-  , hyperdata :: HyperdataContact
-  }
+  , hyperdata :: HyperdataContact }
 
 derive instance newtypeContact :: Newtype Contact _
 
 newtype ContactWho =
-     ContactWho { idWho     :: Maybe String
+  ContactWho
+  { idWho     :: Maybe String
   , firstName :: Maybe String
   , lastName  :: Maybe String
   , keywords  :: (Array String)
-                , freetags  :: (Array String)
-                }
+  , freetags  :: (Array String) }
 
 derive instance newtypeContactWho :: Newtype ContactWho _
 
@@ -48,7 +49,8 @@ instance decodeContactWho :: DecodeJson ContactWho
       pure $ ContactWho {idWho, firstName, lastName, keywords:k, freetags:f}
 
 newtype ContactWhere =
-     ContactWhere { organization :: (Array String)
+  ContactWhere
+  { organization :: (Array String)
   , labTeamDepts :: (Array String)
                   
   , role         :: Maybe String
@@ -60,8 +62,8 @@ newtype ContactWhere =
   , touch        :: Maybe ContactTouch
                     
   , entry        :: Maybe String
-                  , exit         :: Maybe String
-  }
+  , exit         :: Maybe String }
+
 derive instance newtypeContactWhere :: Newtype ContactWhere _
 
 instance decodeContactWhere :: DecodeJson ContactWhere
@@ -84,10 +86,11 @@ instance decodeContactWhere :: DecodeJson ContactWhere
       pure $ ContactWhere {organization:o, labTeamDepts:l, role, office, country, city, touch, entry, exit}
 
 newtype ContactTouch =
-     ContactTouch { mail      :: Maybe String
+  ContactTouch
+  { mail  :: Maybe String
   , phone :: Maybe String
-                  , url       :: Maybe String
-  }
+  , url   :: Maybe String }
+
 derive instance newtypeContactTouch :: Newtype ContactTouch _
 
 instance decodeContactTouch :: DecodeJson ContactTouch

src/Gargantext/Pages/Corpus/Chart/Histo.purs

@@ -6,7 +6,7 @@ import Effect.Aff (Aff)
 import Gargantext.Config
 import Gargantext.Config.REST (get)
 import Reactix as R
-import Thermite (Spec)
+import Reactix.DOM.HTML as H
 
 import Gargantext.Prelude
 import Gargantext.Types (TermList(..))
@@ -20,14 +20,11 @@ import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Pages.Corpus.Chart.Utils as U
 
-type Path =
-  { corpusId :: Int
-  , tabType  :: TabType
-  }
+type Path = { corpusId :: Int, tabType  :: TabType }
 
-newtype ChartMetrics = ChartMetrics
-  { "data" :: HistoMetrics
-  }
+type Props = ( path :: Path, ends :: Ends )
+
+newtype ChartMetrics = ChartMetrics { "data" :: HistoMetrics }
 
 instance decodeChartMetrics :: DecodeJson ChartMetrics where
   decodeJson json = do
@@ -35,10 +32,7 @@ instance decodeChartMetrics :: DecodeJson ChartMetrics where
     d   <- obj .: "data"
     pure $ ChartMetrics { "data": d }
 
-newtype HistoMetrics = HistoMetrics
-  { dates :: Array String
-  , count :: Array Number
-  }
+newtype HistoMetrics = HistoMetrics { dates :: Array String, count :: Array Number }
 
 instance decodeHistoMetrics :: DecodeJson HistoMetrics where
   decodeJson json = do
@@ -60,27 +54,29 @@ chartOptions (HistoMetrics { dates: dates', count: count'}) = Options
   , tooltip   : mkTooltip { formatter: templateFormatter "{b0}" }
   }
 
-
-getMetrics :: Path -> Aff HistoMetrics
-getMetrics {corpusId, tabType} = do
-  ChartMetrics ms <- get $ toUrl endConfigStateful Back (Chart {chartType: Histo, tabType: tabType}) $ Just corpusId
+getMetrics :: Ends -> Path -> Aff HistoMetrics
+getMetrics ends {corpusId, tabType} = do
+  ChartMetrics ms <- get $ url ends chart
   pure ms."data"
+  where chart = Chart {chartType: Histo, tabType: tabType} (Just corpusId)
+
+histo :: Record Props -> R.Element
+histo props = R.createElement histoCpt props []
 
-histoSpec :: Spec {} Path Void
-histoSpec = R2.elSpec $ R.hooksComponent "LoadedMetricsHisto" cpt
+histoCpt :: R.Component Props
+histoCpt = R.hooksComponent "LoadedMetricsHisto" cpt
   where
-    cpt p _ = do
+    cpt {ends,path} _ = do
       setReload <- R.useState' 0
+      pure $ metricsLoadView ends setReload path
 
-      pure $ metricsLoadView setReload p
-
-metricsLoadView :: R.State Int -> Path -> R.Element
-metricsLoadView setReload p = R.createElement el p []
+metricsLoadView :: Ends -> R.State Int -> Path -> R.Element
+metricsLoadView ends setReload path = R.createElement el {ends,path} []
   where
     el = R.hooksComponent "MetricsLoadedHistoView" cpt
-    cpt p _ = do
-      useLoader p getMetrics $ \{loaded} ->
+    cpt {path,ends} _ = do
+      useLoader path (getMetrics ends) $ \loaded ->
         loadedMetricsView setReload loaded
 
 loadedMetricsView :: R.State Int -> HistoMetrics -> R.Element
-loadedMetricsView setReload loaded = U.reloadButtonWrap setReload $ R2.buff $ chart $ chartOptions loaded
+loadedMetricsView setReload loaded = U.reloadButtonWrap setReload $ chart $ chartOptions loaded

src/Gargantext/Pages/Corpus/Chart/Metrics.purs

@@ -6,9 +6,10 @@ import Data.Map (Map)
 import Data.Maybe (Maybe(..))
 import Data.Tuple (Tuple(..))
 import Effect.Aff (Aff)
-import Gargantext.Config
+import Gargantext.Config (Ends, BackendRoute(..), TabType, url)
 import Gargantext.Config.REST (get)
 import Reactix as R
+import Reactix.DOM.HTML as H
 
 import Gargantext.Prelude
 import Gargantext.Types (TermList(..))
@@ -30,6 +31,8 @@ type Path =
   , limit    :: Maybe Int
   }
 
+type Props = ( path :: Path, ends :: Ends )
+
 newtype Metric = Metric
   { label :: String
   , x     :: Number
@@ -92,26 +95,29 @@ scatterOptions metrics = Options
                         }
     --}
 
-getMetrics :: Path -> Aff Loaded
-getMetrics {corpusId, listId, limit, tabType} = do
-  Metrics ms <- get $ toUrl endConfigStateful Back (CorpusMetrics {listId, tabType, limit}) $ Just corpusId
+getMetrics :: Ends -> Path -> Aff Loaded
+getMetrics ends {corpusId, listId, limit, tabType} = do
+  Metrics ms <- get $ url ends metrics
   pure ms."data"
+  where metrics = CorpusMetrics {listId, tabType, limit} (Just corpusId)
 
+metrics :: Record Props -> R.Element
+metrics props = R.createElement metricsCpt props []
 
-metricsSpec = R2.elSpec $ R.hooksComponent "LoadedMetrics" cpt
+metricsCpt :: R.Component Props
+metricsCpt = R.hooksComponent "LoadedMetrics" cpt
   where
-    cpt p _ = do
+    cpt {path, ends} _ = do
       setReload <- R.useState' 0
+      pure $ metricsLoadView ends setReload path
 
-      pure $ metricsLoadView setReload p
-
-metricsLoadView :: R.State Int -> Path -> R.Element
-metricsLoadView setReload p = R.createElement el p []
+metricsLoadView :: Ends -> R.State Int -> Path -> R.Element
+metricsLoadView ends setReload path = R.createElement el {ends,path} []
   where
     el = R.hooksComponent "MetricsLoadedView" cpt
-    cpt p' _ = do
-      useLoader p' getMetrics $ \{loaded} ->
+    cpt {ends, path} _ = do
+      useLoader path (getMetrics ends) $ \loaded ->
         loadedMetricsView setReload loaded
 
 loadedMetricsView :: R.State Int -> Loaded -> R.Element
-loadedMetricsView setReload loaded = U.reloadButtonWrap setReload $ R2.buff $ chart $ scatterOptions loaded
+loadedMetricsView setReload loaded = U.reloadButtonWrap setReload $ chart $ scatterOptions loaded

src/Gargantext/Pages/Corpus/Chart/Pie.purs

@@ -7,10 +7,10 @@ import Data.Maybe (Maybe(..))
 import Data.String (take, joinWith, Pattern(..), split, length)
 import Data.Tuple (Tuple(..))
 import Effect.Aff (Aff)
-import Gargantext.Config
+import Gargantext.Config (Ends, BackendRoute(..), TabType, ChartType(..), url)
 import Gargantext.Config.REST (get)
 import Reactix as R
-import Thermite (Spec)
+import Reactix.DOM.HTML as H
 
 import Gargantext.Prelude
 import Gargantext.Types (TermList(..))
@@ -28,6 +28,8 @@ type Path =
   , tabType  :: TabType
   }
 
+type Props = ( ends :: Ends, path :: Path )
+
 newtype ChartMetrics = ChartMetrics
   { "data" :: HistoMetrics
   }
@@ -76,50 +78,52 @@ chartOptionsPie (HistoMetrics { dates: dates', count: count'}) = Options
   }
 
 
-getMetrics :: Path -> Aff HistoMetrics
-getMetrics {corpusId, tabType:tabType} = do
-  ChartMetrics ms <- get $ toUrl endConfigStateful Back (Chart {chartType: ChartPie, tabType: tabType}) $ Just corpusId
+getMetrics :: Ends -> Path -> Aff HistoMetrics
+getMetrics ends {corpusId, tabType:tabType} = do
+  ChartMetrics ms <- get $ url ends chart
   pure ms."data"
+  where chart = Chart {chartType: ChartPie, tabType: tabType} (Just corpusId)
 
+pie :: Record Props -> R.Element
+pie props = R.createElement pieCpt props []
 
-
-pieSpec :: Spec {} Path Void
-pieSpec = R2.elSpec $ R.hooksComponent "LoadedMetricsPie" cpt
+pieCpt :: R.Component Props
+pieCpt = R.hooksComponent "LoadedMetricsPie" cpt
   where
-    cpt p _ = do
+    cpt {path,ends} _ = do
       setReload <- R.useState' 0
+      pure $ metricsLoadPieView ends setReload path
 
-      pure $ metricsLoadPieView setReload p
-
-metricsLoadPieView :: R.State Int -> Path -> R.Element
-metricsLoadPieView setReload p = R.createElement el p []
+metricsLoadPieView :: Ends -> R.State Int -> Path -> R.Element
+metricsLoadPieView ends setReload path = R.createElement el {ends,path} []
   where
     el = R.hooksComponent "MetricsLoadedPieView" cpt
-    cpt p _ = do
-      useLoader p getMetrics $ \{loaded} ->
+    cpt {ends,path} _ = do
+      useLoader path (getMetrics ends) $ \loaded ->
         loadedMetricsPieView setReload loaded
 
 loadedMetricsPieView :: R.State Int -> HistoMetrics -> R.Element
-loadedMetricsPieView setReload loaded = U.reloadButtonWrap setReload $ R2.buff $ chart $ chartOptionsPie loaded
+loadedMetricsPieView setReload loaded = U.reloadButtonWrap setReload $ chart $ chartOptionsPie loaded
 
 
+bar :: Record Props -> R.Element
+bar props = R.createElement barCpt props []
 
-barSpec :: Spec {} Path Void
-barSpec = R2.elSpec $ R.hooksComponent "LoadedMetricsBar" cpt
+barCpt :: R.Component Props
+barCpt = R.hooksComponent "LoadedMetricsBar" cpt
   where
-    cpt p _ = do
+    cpt {path, ends} _ = do
       setReload <- R.useState' 0
-
-      pure $ metricsLoadBarView setReload p
+      pure $ metricsLoadBarView ends setReload path
 
 
-metricsLoadBarView :: R.State Int -> Path -> R.Element
-metricsLoadBarView setReload p = R.createElement el p []
+metricsLoadBarView :: Ends -> R.State Int -> Path -> R.Element
+metricsLoadBarView ends setReload path = R.createElement el {ends,path} []
   where
     el = R.hooksComponent "MetricsLoadedBarView" cpt
-    cpt p _ = do
-      useLoader p getMetrics $ \{loaded} ->
+    cpt {path, ends} _ = do
+      useLoader path (getMetrics ends) $ \loaded ->
         loadedMetricsBarView setReload loaded
 
 loadedMetricsBarView :: R.State Int -> Loaded -> R.Element
-loadedMetricsBarView setReload loaded = U.reloadButtonWrap setReload $ R2.buff $ chart $ chartOptionsBar loaded
+loadedMetricsBarView setReload loaded = U.reloadButtonWrap setReload $ chart $ chartOptionsBar loaded

src/Gargantext/Pages/Corpus/Chart/Tree.purs

@@ -3,11 +3,10 @@ module Gargantext.Pages.Corpus.Chart.Tree where
 import Data.Argonaut (class DecodeJson, decodeJson, (.:))
 import Data.Maybe (Maybe(..))
 import Effect.Aff (Aff)
-import Gargantext.Config
+import Gargantext.Config (Ends, BackendRoute(..), TabType, ChartType(..), url)
 import Gargantext.Config.REST (get)
 import Reactix as R
 import Reactix.DOM.HTML as H
-import Thermite (Spec)
 
 import Gargantext.Prelude
 import Gargantext.Types (TermList(..))
@@ -26,7 +25,7 @@ type Path =
   , tabType  :: TabType
   , limit    :: Maybe Int
   }
-
+type Props = ( path :: Path, ends :: Ends )
 
 newtype Metrics = Metrics
   { "data" :: Array TreeNode
@@ -54,29 +53,33 @@ scatterOptions nodes = Options
 
   }
 
-getMetrics :: Path -> Aff Loaded
-getMetrics {corpusId, listId, limit, tabType} = do
-  Metrics ms <- get $ toUrl endConfigStateful Back (Chart {chartType : ChartTree, tabType: tabType}) $ Just corpusId
+getMetrics :: Ends -> Path -> Aff Loaded
+getMetrics ends {corpusId, listId, limit, tabType} = do
+  Metrics ms <- get $ url ends chart
   pure ms."data"
+  where
+    chart = Chart {chartType : ChartTree, tabType: tabType} (Just corpusId)
+
+tree :: Record Props -> R.Element
+tree props = R.createElement treeCpt props []
 
-treeSpec :: Spec {} Path Void
-treeSpec = R2.elSpec $ R.hooksComponent "LoadedMetrics" cpt
+treeCpt :: R.Component Props
+treeCpt = R.hooksComponent "LoadedMetrics" cpt
   where
-    cpt p _ = do
+    cpt {path, ends} _ = do
       setReload <- R.useState' 0
+      pure $ metricsLoadView ends setReload path
 
-      pure $ metricsLoadView setReload p
-
-metricsLoadView :: R.State Int -> Path -> R.Element
-metricsLoadView setReload p = R.createElement el p []
+metricsLoadView :: Ends -> R.State Int -> Path -> R.Element
+metricsLoadView ends setReload p = R.createElement el p []
   where
     el = R.hooksComponent "MetricsLoadView" cpt
     cpt p _ = do
-      useLoader p getMetrics $ \{loaded} ->
+      useLoader p (getMetrics ends) $ \loaded ->
         loadedMetricsView setReload loaded
 
 loadedMetricsView :: R.State Int -> Loaded -> R.Element
-loadedMetricsView setReload loaded = H.div {} [
-    U.reloadButton setReload
-  , R2.buff $ chart (scatterOptions loaded)
-  ]
+loadedMetricsView setReload loaded =
+  H.div {}
+  [ U.reloadButton setReload
+  , chart (scatterOptions loaded) ]