[app] small refactoring of app with new TopBar.purs

src/Gargantext/Components/Forest.purs

 module Gargantext.Components.Forest where
 
-import DOM.Simple.Console (log)
-
+import Data.Array (reverse)
+import Data.Tuple (fst)
 import Data.Maybe (Maybe(..))
 import Data.Set as Set
 import Data.Tuple (fst, snd)
 import Data.Tuple.Nested ((/\))
+import DOM.Simple.Console (log)
 import Reactix as R
 import Reactix.DOM.HTML as H
 
 import Gargantext.AsyncTasks as GAT
 import Gargantext.Components.Forest.Tree (treeView)
+import Gargantext.Components.TopBar (topBar)
 import Gargantext.Ends (Frontends, Backend(..))
 import Gargantext.Prelude
 import Gargantext.Routes (AppRoute)
@@ -91,3 +93,51 @@ plus handed showLogin backend = H.div { className: handedClass } [
 
     click _ = (snd backend) (const Nothing)
             *> showLogin (const true)
+
+
+-------------------------
+type ForestLayoutProps =
+  ( asyncTasks :: GAT.Reductor
+  , backend   :: R.State (Maybe Backend)
+  , child     :: R.Element
+  , frontends :: Frontends
+  , handed    :: R.State Handed
+  , reload    :: R.State Int
+  , route     :: AppRoute
+  , sessions  :: Sessions
+  , showLogin :: R.Setter Boolean
+  )
+
+forestLayout :: Record ForestLayoutProps -> R.Element
+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 ]
+
+forestLayoutMain :: Record ForestLayoutProps -> R.Element
+forestLayoutMain props = R.createElement forestLayoutMainCpt props []
+
+forestLayoutMainCpt :: R.Component ForestLayoutProps
+forestLayoutMainCpt = R.hooksComponentWithModule thisModule "forestLayoutMain" cpt
+  where
+    cpt { asyncTasks, child, frontends, handed, reload, route, sessions, showLogin, backend} _ = do
+      let ordering =
+            case fst handed of
+              LeftHanded  -> reverse
+              RightHanded -> identity
+
+      pure $ R2.row $ ordering [
+        H.div { className: "col-md-2", style: { paddingTop: "60px" } }
+            [ forest { asyncTasks, backend, frontends, handed: fst handed, reload, route, sessions, showLogin } ]
+      , mainPage child
+      ]
+
+
+mainPage :: R.Element -> R.Element
+mainPage child =
+  H.div {className: "col-md-10"}
+  [ H.div {id: "page-wrapper"}
+    [ H.div {className: "container-fluid"} [ child ] ] ]

src/Gargantext/Components/TopBar.purs

+module Gargantext.Components.TopBar where
+
+import Data.Array (reverse)
+import Data.Foldable (intercalate)
+import Data.Tuple (fst)
+import Data.Tuple.Nested ((/\))
+import Reactix as R
+import Reactix.DOM.HTML as H
+
+import Gargantext.Prelude
+
+import Gargantext.Types (Handed(..))
+
+thisModule :: String
+thisModule = "Gargantext.Components.TopBar"
+
+type TopBarProps = (
+  handed :: R.State Handed
+  )
+
+topBar :: Record TopBarProps -> R.Element
+topBar props = R.createElement topBarCpt props []
+
+topBarCpt :: R.Component TopBarProps
+topBarCpt = R.hooksComponentWithModule thisModule "topBar" cpt
+  where
+    cpt { handed } _ = do
+      pure $ H.div { id: "dafixedtop"
+                   , role: "navigation"
+                   , className: "navbar navbar-inverse navbar-fixed-top" }
+        [ H.div { className: "container-fluid" }
+            [ H.div { className: "navbar-inner" }
+              [ logo (fst handed)
+              , H.div { className: "collapse navbar-collapse"  <> navHanded}
+                      $ sortHanded
+                      [ H.ul { className: "nav navbar-nav" <> navHanded} [divDropdownLeft]
+                      , H.ul { title: "If you are Left Handed you can change "
+                                    <> "the interface by clicking on me. Click "
+                                    <> "again to come back to previous state."
+                             , className: "nav navbar-nav" <> navHanded
+                             } [handedChooser { handed }]
+                      , H.ul { className: "nav navbar-nav" <> navHanded} []
+                      {-, H.ul { title: "Dark Mode soon here"
+                             , className : "nav navbar-nav"
+                             } [ H.li {} [ H.a {} [ H.span {className : "fa fa-moon"}[]
+                                                  ]
+                                         ]
+                               ]
+                      -}
+                      ]
+              ]
+            ]
+        ]
+          where
+            navHanded  = if fst handed == LeftHanded then " navbar-right" else ""
+            sortHanded = if fst handed == LeftHanded then reverse else reverse -- identity
+            -- SB.searchBar {session, databases: allDatabases}
+
+
+logo :: Handed -> R.Element
+logo handed =
+  H.a { className, href: "#/" }
+  [ H.img { src, title, width: "30", height: "28" }
+  ]
+  where
+    className = "navbar-brand logoSmall" <> navHanded
+    src       = "images/logoSmall.png"
+    title     = "Back to home."
+    navHanded = if handed == LeftHanded then " navbar-right" else ""
+
+
+divDropdownLeft :: R.Element
+divDropdownLeft =
+  divDropdownLeft' $
+    LiNav { title : "About Gargantext"
+          , href  : "#"
+          , icon  : "fa fa-info-circle"
+          , text  : "Info" }
+
+divDropdownLeft' :: LiNav -> R.Element
+divDropdownLeft' mb =
+  H.li {className: "dropdown"} [ menuButton mb, menuElements' ]
+
+
+menuButton :: LiNav -> R.Element
+menuButton (LiNav { title, href, icon, text } ) =
+  H.a { className: "dropdown-toggle navbar-text"
+      , data: {toggle: "dropdown"}
+      , href, title
+      , role: "button" }
+  [ H.span { aria: {hidden : true}, className: icon } []
+  , H.text (" " <> text) ]
+
+menuElements' :: R.Element
+menuElements' = menuElements-- title, icon, text
+  [ -- ===========================================================
+    [ LiNav { title : "Quick start, tutorials and methodology"
+            , href  : "https://iscpif.fr/gargantext/your-first-map/"
+            , icon  : "fa fa-lightbulb-o"
+            , text  : "Tutorials"
+            }
+    , LiNav { title : "Report bug here"
+            , href  : "https://www.iscpif.fr/gargantext/feedback-and-bug-reports/"
+            , icon  : "glyphicon glyphicon-bullhorn"
+            , text  : "Feedback"
+            }
+    ]
+    , -----------------------------------------------------------
+    [ LiNav { title : "Chat"
+            , href  : "https://chat.iscpif.fr/channel/gargantext"
+            , icon  : "fa fa-rocket"
+            , text  : "Chat"
+            }
+    , LiNav { title : "Forums"
+            , href  : "https://discourse.iscpif.fr/c/gargantext"
+            , icon  : "fa fa-weixin"
+            , text  : "Forum"
+            }
+    ]
+    ,------------------------------------------------------------
+    [ LiNav { title : "Code documentation"
+            , href  : "https://doc.gargantext.org"
+            , icon  : "glyphicon glyphicon-book"
+            , text  : "Source Code Documentation"
+            }
+    , LiNav { title : "API documentation"
+            , href  : "https://v4.gargantext.org/swagger-ui"
+            , icon  : "fa fa-code-fork"
+            , text  : "API documentation"
+            }
+    , LiNav { title : "Source code"
+            , href  : "https://gitlab.iscpif.fr/gargantext/haskell-gargantext"
+            , icon  : "fa fa-code"
+            , text  : "Source Code"
+            }
+    ]
+
+    ,------------------------------------------------------------
+    [ LiNav { title : "More about us (you)"
+            , href  : "https://iscpif.fr"
+            , icon  : "glyphicon glyphicon-question-sign"
+            , text  : "About"
+            }
+    ]
+  ] -- ===========================================================
+
+-- | Menu in the sidebar, syntactic sugar
+menuElements :: Array (Array LiNav) -> R.Element
+menuElements ns = dropDown $ intercalate divider $ map (map liNav) ns
+  where
+    dropDown :: Array R.Element -> R.Element
+    dropDown = H.ul {className: "dropdown-menu"}
+
+    divider :: Array R.Element
+    divider = [H.li {className: "divider"} []]
+
+-- | surgar for target : "blank"
+--data LiNav_ = LiNav_ { title  :: String
+--                     , href   :: String
+--                     , icon   :: String
+--                     , text   :: String
+--                     , target :: String
+--                     }
+
+data LiNav = LiNav { title :: String
+                   , href  :: String
+                   , icon  :: String
+                   , text  :: String
+                   }
+
+liNav :: LiNav -> R.Element
+liNav (LiNav { title : title'
+             , href  : href'
+             , icon  : icon'
+             , text  : text'
+             }
+      ) = H.li {} [ H.a { tabIndex: (-1)
+                        , target: "blank"
+                        , title: title'
+                        , href: href'
+                        } [ H.span { className: icon' } []
+                          , H.text $ " " <> text'
+                          ]
+                  ]
+
+
+type HandedChooserProps = (
+  handed :: R.State Handed
+  )
+
+handedChooser :: Record HandedChooserProps -> R.Element
+handedChooser props = R.createElement handedChooserCpt props []
+
+handedChooserCpt :: R.Component HandedChooserProps
+handedChooserCpt = R.hooksComponentWithModule thisModule "handedChooser" cpt
+  where
+    cpt { handed } _ = do
+      pure $ H.li {} [
+        H.a {} [
+          H.span { className: handedClass handed
+                 , on: { click: onClick handed } } []
+          ]
+        ]
+
+    handedClass (LeftHanded  /\ _) = "fa fa-hand-o-left"
+    handedClass (RightHanded /\ _) = "fa fa-hand-o-right"
+
+    onClick (_ /\ setHanded) = setHanded $ \h -> case h of
+      LeftHanded  -> RightHanded
+      RightHanded -> LeftHanded

src/Gargantext/Types.purs

@@ -11,11 +11,12 @@ import Data.Generic.Rep.Show (genericShow)
 import Data.Int (toNumber)
 import Data.Maybe (Maybe(..), maybe, fromMaybe)
 import Effect.Aff (Aff)
-import Gargantext.Prelude (class Read, read, class Show, show)
-import Prelude
 import Prim.Row (class Union)
+import Reactix as R
 import URI.Query (Query)
 
+import Gargantext.Prelude
+
 data Handed = LeftHanded | RightHanded
 
 derive instance genericHanded :: Generic Handed _
@@ -24,9 +25,10 @@ instance eqHanded :: Eq Handed where
 
 
 -------------------------------------------------------------------------
-type ID     = Int
-type Name   = String
-type Reload = Int
+type ID      = Int
+type Name    = String
+type Reload  = Int
+type ReloadS = R.State Reload
 
 newtype SessionId = SessionId String
 type NodeID = Int