>>> BEGIN 333

* add Theme to global box container

src/Gargantext/Components/App/Data.purs

 module Gargantext.Components.App.Data (App, Boxes, emptyApp) where
 
+
 import Gargantext.Prelude
 
 import Data.Maybe (Maybe(..))
 import Data.Set as Set
-import Toestand as T
-
 import Gargantext.AsyncTasks as GAT
 import Gargantext.Components.GraphExplorer.Sidebar.Types as GEST
 import Gargantext.Components.Nodes.Lists.Types as ListsT
 import Gargantext.Components.Nodes.Texts.Types as TextsT
+import Gargantext.Components.Themes as Themes
 import Gargantext.Ends (Backend)
 import Gargantext.Routes (AppRoute(Home), Tile)
 import Gargantext.Sessions (Session, Sessions)
@@ -17,6 +17,7 @@ import Gargantext.Sessions as Sessions
 import Gargantext.Sessions.Types (OpenNodes(..))
 import Gargantext.Types (FrontendError, Handed(RightHanded), SidePanelState(..))
 import Gargantext.Utils.Toestand as T2
+import Toestand as T
 
 type App =
   { backend             :: Maybe Backend
@@ -38,6 +39,7 @@ type App =
   , sidePanelTexts      :: Maybe (Record TextsT.SidePanel)
   , sidePanelState      :: SidePanelState
   , tasks               :: GAT.Storage
+  , theme               :: Themes.Theme
   , tileAxisXList       :: Array (Record Tile)
   , tileAxisYList       :: Array (Record Tile)
   }
@@ -63,6 +65,7 @@ emptyApp =
   , sidePanelTexts      : TextsT.initialSidePanel
   , sidePanelState      : InitialClosed
   , tasks               : GAT.empty
+  , theme               : Themes.defaultTheme
   , tileAxisXList       : mempty
   , tileAxisYList       : mempty
   }
@@ -87,6 +90,7 @@ type Boxes =
   , sidePanelTexts      :: T.Box (Maybe (Record TextsT.SidePanel))
   , sidePanelState      :: T.Box SidePanelState
   , tasks               :: T.Box GAT.Storage
+  , theme               :: T.Box Themes.Theme
   , tileAxisXList       :: T.Box (Array (Record Tile))
   , tileAxisYList       :: T.Box (Array (Record Tile))
   }

src/Gargantext/Components/Themes.purs

@@ -86,7 +86,7 @@ markThemeToDOMTree (Theme { name }) = do
 
 
 type ThemeSwitcherProps = (
-    theme  :: Theme
+    theme  :: T.Box Theme
   , themes :: Array Theme
   )
 
@@ -97,19 +97,18 @@ themeSwitcherCpt :: R.Component ThemeSwitcherProps
 themeSwitcherCpt = here.component "themeSwitcher" cpt
   where
     cpt { theme, themes } _ = do
-      currentTheme <- T.useBox theme
-      currentTheme' <- T.useLive T.unequal currentTheme
+      currentTheme <- T.useLive T.unequal theme
 
       let option (Theme { name }) = H.option { value: name } [ H.text name ]
       let options = map option themes
 
-      R.useEffectOnce' $ markThemeToDOMTree currentTheme'
+      R.useEffectOnce' $ markThemeToDOMTree currentTheme
 
       pure $ R2.select { className: "form-control"
-                       , defaultValue: themeName currentTheme'
-                       , on: { change: onChange currentTheme } } options
+                       , defaultValue: themeName currentTheme
+                       , on: { change: onChange theme } } options
       where
-        onChange currentTheme e = do
+        onChange box e = do
           let value = R.unsafeEventValue e
           let mTheme = A.head $ A.filter (\(Theme { name }) -> value == name) themes
 
@@ -118,4 +117,4 @@ themeSwitcherCpt = here.component "themeSwitcher" cpt
             Just t  -> do
               switchTheme t
               markThemeToDOMTree t
-              T.write_ t currentTheme
+              T.write_ t box

src/Gargantext/Components/TopBar.purs

@@ -5,7 +5,7 @@ import Gargantext.Prelude
 import Data.Foldable (intercalate)
 import Gargantext.Components.App.Data (Boxes)
 import Gargantext.Components.GraphExplorer.ToggleButton as Toggle
-import Gargantext.Components.Themes (themeSwitcher, defaultTheme, allThemes)
+import Gargantext.Components.Themes (themeSwitcher, allThemes)
 import Gargantext.Types (Handed(..), reverseHanded)
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
@@ -23,7 +23,7 @@ topBar = R.createElement topBarCpt
 topBarCpt :: R.Component TopBarProps
 topBarCpt = here.component "topBar" cpt
   where
-    cpt { boxes: { handed, showTree } } children = do
+    cpt { boxes: { handed, showTree, theme } } children = do
       handed' <- T.useLive T.unequal handed
 
       pure $ H.div { className: "navbar navbar-expand-lg navbar-dark bg-dark"
@@ -41,7 +41,7 @@ topBarCpt = here.component "topBar" cpt
               ([ divDropdownLeft {} []
                , handButton
                , smiley
-               , H.li { className: "nav-item" } [ themeSwitcher { theme: defaultTheme
+               , H.li { className: "nav-item" } [ themeSwitcher { theme
                                                                 , themes: allThemes } [] ]
                , Toggle.treeToggleButton { state: showTree } []
                ] <> children)