[Home] refactor to reactix, remove unnecessary state

src/Gargantext/Components/Login.purs

@@ -11,7 +11,6 @@ import Effect.Aff (Aff)
 import React.DOM (a, button, div, h2, h4, h5, i, input, label, p, span, text)
 import React.DOM.Props (_data, _id, _type, aria, className, href, maxLength, name, onClick, onInput, placeholder, role, target, value)
 import Thermite (PerformAction, Render, Spec, _render, modifyState_, simpleSpec)
-import Unsafe.Coerce (unsafeCoerce)
 import Web.HTML (window)
 import Web.HTML.Window (localStorage)
 import Web.Storage.Storage (getItem, setItem, removeItem)
@@ -153,39 +152,6 @@ renderSpec = simpleSpec performAction render
         ]
       ]
 
-      -- div [ className "modal fade myModal"
-      --                    , role "dialog"
---                    , _data {show : true}
---                    ][ div [ className "modal-dialog"
---                           , role "document"
---                           ] [ div [ className "modal-content"]
---                                   [ div [ className "modal-header"]
---                                         [ h5 [ className "modal-title"
---                                              ]
---                                              [ text "CorpusView"
---                                              ]
---                                         , button [ _type "button"
---                                                  , className "close"
---                                                  , _data { dismiss : "modal"}
---                                                  ] [ span [ aria {hidden : true}]
---                                                           [ text "X"]
---                                                    ]
---                                         ]
-
---                                   , div [ className "modal-body"]
---                                         [ ul [ className "list-group"] ( map fn1 state.authData ) ]
-
---                                   , div [className "modal-footer"]
---                                         [ button [ _type "button"
---                                                  , className "btn btn-secondary"
---                                                  , _data {dismiss : "modal"}
---                                                  ] [ text "GO"]
---                                         ]
---                                    ]
---                             ]
---                      ]
---         ]
-
 
 getAuthData :: Effect (Maybe AuthData)
 getAuthData = do

src/Gargantext/Pages/Home/Specs.purs

@@ -10,14 +10,15 @@ import Gargantext.Components.Lang.Landing.EnUS as En
 import Gargantext.Components.Lang.Landing.FrFR as Fr
 import Gargantext.Components.Data.Landing (BlockText(..), BlockTexts(..), Button(..), LandingData(..))
 import Gargantext.Components.Data.Lang (Lang(..))
-import Gargantext.Pages.Home.States (State, initialState)
 import Gargantext.Pages.Home.Actions (Action, performAction)
 
+import Reactix as R
+import Reactix.DOM.HTML as H
 import React (ReactElement)
-import React.DOM (a, div, h3, i, img, p, span, text)
-import React.DOM.Props (Props, _id, aria, className, href, src, target, title, height, width)
-import Thermite (Render, Spec, simpleSpec, hideState, focusState)
+import React.DOM.Props (Props)
+import Thermite (Spec, hideState, focusState, Render, simpleSpec)
 
+import Gargantext.Utils.Reactix as R2
 
 -- Layout |
 
@@ -26,80 +27,82 @@ landingData FR = Fr.landingData
 landingData EN = En.landingData
 
 layoutLanding :: Lang -> Spec {} {} Void
-layoutLanding = hideState (const $ unwrap initialState)
-            <<< focusState (re _Newtype)
-            <<< layoutLanding' <<< landingData
+layoutLanding = layoutLanding' <<< landingData
 
 ------------------------------------------------------------------------
 
-layoutLanding' :: LandingData -> Spec State {} Action
-layoutLanding' hd = simpleSpec performAction render
+layoutLanding' :: LandingData -> Spec {} {} Void
+layoutLanding' hd = R2.elSpec $ R.hooksComponent "LayoutLanding" cpt
   where
-    render :: Render State {} Action
-    render dispatch _ state _ =
-      [ div [ className "container1" ] [ jumboTitle hd false                 ]
-      , div [ className "container1" ] [] -- TODO put research form
-      , div [ className "container1" ] [ blocksRandomText' hd                ]
-      ]
+    cpt {} _children = do
+      pure $ H.span {} [
+        H.div { className: "container1" }
+              [ jumboTitle hd false ]
+        , H.div { className: "container1" } [] -- TODO put research form
+        , H.div { className: "container1" } [ blocksRandomText' hd ]
+        ]
 ------------------------------------------------------------------------
 
-blocksRandomText' :: LandingData -> ReactElement
+blocksRandomText' :: LandingData -> R.Element
 blocksRandomText' (LandingData hd) = blocksRandomText hd.blockTexts
 
 
-blocksRandomText :: BlockTexts -> ReactElement
+blocksRandomText :: BlockTexts -> R.Element
 blocksRandomText (BlockTexts bt) =
-  div [ className "row" ] ( map showBlock bt.blocks )
+  H.div { className: "row" } ( map showBlock bt.blocks )
     where
-      showBlock :: BlockText -> ReactElement
+      showBlock :: BlockText -> R.Element
       showBlock (BlockText b) =
-        div [ className "col-md-4 content" ]
-              [ h3 [] [ a [ href b.href, title b.title]
-                          [ i [className b.icon] []
-                          , text ("   " <> b.titleText)
-                          ]
-                      ]
-              , p [] [ text b.text ]
-              , p [] [ docButton b.docButton ]
-              ]
-
-docButton :: Button -> ReactElement
-docButton (Button b) = a [ className "btn btn-outline-primary btn-sm spacing-class"
-              , href b.href
-              , target "blank"
-              , title b.title
-              ] [ span [ aria {hidden : true}
-                       , className "glyphicon glyphicon-hand-right"
-                       ]  []
-                , text b.text
-                ]
-
-jumboTitle :: LandingData -> Boolean -> ReactElement
-jumboTitle (LandingData hd) b = div jumbo
-                   [ div [className "row"             ]
-                     [ div [ className "col-md-12 content"]
-                           [ div [ className "center" ]
-                               [ div [_id "logo-designed" ]
-                                 [ img [ src "images/logo.png"
-                                       , title hd.logoTitle
-                                       ]
-                                 ]
-                               ]
-                           ]
-                     ]
-                   ]
-                  where
-                    jumbo = case b of
-                                 true  -> [className "jumbotron"]
-                                 false -> []
-
-imageEnter :: LandingData -> Props -> ReactElement
-imageEnter (LandingData hd) action =  div [className "row"]
-                           [ div [className "col-md-offset-5 col-md-6 content"]
-                             [ img [ src "images/Gargantextuel-212x300.jpg"
-                                   , _id "funnyimg"
-                                   , title hd.imageTitle
-                                   , action
-                                   ]
-                             ]
-                           ]
+        H.div { className: "col-md-4 content" }
+        [ H.h3 {} [ H.a { href: b.href, title: b.title}
+                    [ H.i {className: b.icon} []
+                    , H.text ("   " <> b.titleText)
+                    ]
+                  ]
+        , H.p {} [ H.text b.text ]
+        , H.p {} [ docButton b.docButton ]
+        ]
+
+docButton :: Button -> R.Element
+docButton (Button b) =
+  H.a { className: "btn btn-outline-primary btn-sm spacing-class"
+      , href: b.href
+      , target: "blank"
+      , title: b.title
+      } [ H.span { aria: {hidden : true}
+                 , className: "glyphicon glyphicon-hand-right"
+                 } []
+        , H.text b.text
+        ]
+
+jumboTitle :: LandingData -> Boolean -> R.Element
+jumboTitle (LandingData hd) b =
+  H.div {className: jumbo}
+  [ H.div { className: "row" }
+    [ H.div { className: "col-md-12 content" }
+      [ H.div { className: "center" }
+        [ H.div { id: "logo-designed" }
+          [ H.img { src: "images/logo.png"
+                  , title: hd.logoTitle
+                  }
+          ]
+        ]
+      ]
+    ]
+  ]
+  where
+    jumbo = case b of
+      true  -> "jumbotron"
+      false -> ""
+
+imageEnter :: LandingData -> Props -> R.Element
+imageEnter (LandingData hd) action =
+  H.div {className: "row"}
+  [ H.div {className: "col-md-offset-5 col-md-6 content"}
+    [ H.img { src: "images/Gargantextuel-212x300.jpg"
+            , id: "funnyimg"
+            , title: hd.imageTitle
+            , action
+            }
+    ]
+  ]