[home] allow switching landing page lang

src/Gargantext/Components/App/Data.purs

@@ -7,6 +7,7 @@ import Data.Maybe (Maybe(..))
 import Data.Set as Set
 import Gargantext.AsyncTasks as GAT
 import Gargantext.Components.GraphExplorer.Sidebar.Types as GEST
+import Gargantext.Components.Lang as Lang
 import Gargantext.Components.Nodes.Lists.Types as ListsT
 import Gargantext.Components.Nodes.Texts.Types as TextsT
 import Gargantext.Components.Themes as Themes
@@ -25,6 +26,7 @@ type App =
   , forestOpen          :: OpenNodes
   , graphVersion        :: T2.Reload
   , handed              :: Handed
+  , lang                :: Lang.LandingLang
   , reloadForest        :: T2.Reload
   , reloadMainPage      :: T2.Reload
   , reloadRoot          :: T2.Reload
@@ -51,6 +53,7 @@ emptyApp =
   , forestOpen          : OpenNodes $ Set.empty
   , graphVersion        : T2.newReload
   , handed              : RightHanded
+  , lang                : Lang.LL_EN
   , reloadForest        : T2.newReload
   , reloadMainPage      : T2.newReload
   , reloadRoot          : T2.newReload
@@ -76,6 +79,7 @@ type Boxes =
   , forestOpen          :: T.Box OpenNodes
   , graphVersion        :: T2.ReloadS
   , handed              :: T.Box Handed
+  , lang                :: T.Box Lang.LandingLang
   , reloadForest        :: T2.ReloadS
   , reloadMainPage      :: T2.ReloadS
   , reloadRoot          :: T2.ReloadS

src/Gargantext/Components/Lang.purs

 module Gargantext.Components.Lang where
 
+import Gargantext.Prelude
+
 import Data.Argonaut (class EncodeJson, encodeJson)
+import Data.Array as A
 import Data.Maybe (Maybe(..))
-import Gargantext.Prelude (class Eq, class Show, show, class Read)
+import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Toestand as T
+
+here :: R2.Here
+here = R2.here "Gargantext.Components.Lang"
 
 -- Language used for search
 allLangs :: Array Lang
@@ -36,6 +45,44 @@ instance EncodeJson Lang where
 -- Language used for the landing page
 data LandingLang = LL_EN | LL_FR
 
+derive instance Eq LandingLang
+
+instance Show LandingLang where
+  show LL_EN = "EN"
+  show LL_FR = "FR"
+
 -- @TODO a possible method/class that a real i18n logic could later replace
 class Show t <= Translate t where
   translate :: Lang -> t -> String
+
+allFeLangs :: Array LandingLang
+allFeLangs = [ LL_EN, LL_FR ]
+
+type LangSwitcherProps = (
+    lang  :: T.Box LandingLang
+  , langs :: Array LandingLang
+)
+
+langSwitcher :: R2.Component LangSwitcherProps
+langSwitcher = R.createElement langSwitcherCpt
+
+langSwitcherCpt :: R.Component LangSwitcherProps
+langSwitcherCpt = here.component "langSwitcher" cpt
+  where
+    cpt { lang, langs} _ = do
+      currentLang <- T.useLive T.unequal lang
+      let option l = H.option { value: show l} [ H.text $ show l]
+      let options = map option langs
+
+      pure $ R2.select { className: "form-control"
+                       , defaultValue: show currentLang 
+                       , on: {change: onChange lang } } options
+      where
+        onChange box e = do
+          let value = R.unsafeEventValue e
+          let mLang = A.head $ A.filter (\l -> value == show l) langs
+
+          case mLang of
+            Nothing -> pure unit
+            Just l  -> do
+              T.write_ l box
\ No newline at end of file

src/Gargantext/Components/Nodes/Home.purs

@@ -52,9 +52,7 @@ langLandingData LL_EN = En.landingData
 ------------------------------------------------------------------------
 
 type HomeProps =
-  ( boxes     :: Boxes
-  , lang      :: LandingLang
-  )
+  ( boxes     :: Boxes )
 
 homeLayout :: R2.Leaf HomeProps
 homeLayout = R2.leafComponent homeLayoutCpt
@@ -62,12 +60,14 @@ homeLayoutCpt :: R.Component HomeProps
 homeLayoutCpt = here.component "homeLayout" cpt
   where
     cpt { boxes: boxes@{ backend
+                       , lang
                        , sessions
                        , showLogin }
-        , lang } _ = do
+        } _ = do
       backend'  <- T.useLive T.unequal backend
       sessions' <- T.useLive T.unequal sessions
-      let landingData = langLandingData lang
+      lang'     <- T.useLive T.unequal lang
+      let landingData = langLandingData lang'
       pure $
         H.span {}
         [ H.div { className: "home-title container1" }

src/Gargantext/Components/Router.purs

@@ -451,7 +451,7 @@ home = R.createElement homeCpt
 homeCpt :: R.Component Props
 homeCpt = here.component "home" cpt where
   cpt { boxes } _ = do
-    pure $ homeLayout { boxes, lang: LL_EN }
+    pure $ homeLayout { boxes }
 
 lists :: R2.Component SessionNodeProps
 lists = R.createElement listsCpt

src/Gargantext/Components/TopBar.purs

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