[layout] Debug login modal

* #427

src/Gargantext/Components/Bootstrap/Floaty/BaseModal.purs

@@ -78,14 +78,14 @@ componentName = "b-modal"
 -- |        - a FFI fix has been added to remove left elements
 -- |        - an overlay has been added to synchronise the close button
 -- |        - the keyboard shortcut has been removed
--- | @https://stackoverflow.com/questions/50168312/bootstrap-4-close-modal-backdrop-doesnt-disappear
+-- | @link https://stackoverflow.com/questions/50168312/bootstrap-4-close-modal-backdrop-doesnt-disappear
 -- |
--- | https://getbootstrap.com/docs/4.6/components/modal/
+-- | @link https://getbootstrap.com/docs/4.6/components/modal/
 baseModal :: forall r. R2.OptComponent Options Props r
 baseModal = R2.optComponent component options
 
-component :: R.Component Props
-component = R.hooksComponent componentName cpt where
+component :: R.Memo Props
+component = R.memo' $ R.hooksComponent componentName cpt where
   cpt props@{ isVisibleBox
             , title
             , hasCollapsibleBackground

src/Gargantext/Components/Login.purs

@@ -5,9 +5,11 @@ module Gargantext.Components.Login where
 
 import Gargantext.Prelude
 
+import DOM.Simple.Event as DE
 import Data.Array (head)
 import Data.Maybe (Maybe(..), fromMaybe)
 import Data.String as DST
+import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Effect.Class (liftEffect)
 import Gargantext.Components.Bootstrap as B
@@ -23,6 +25,7 @@ import Gargantext.Sessions as Sessions
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Reactix.SyntheticEvent as RE
 import Toestand as T
 
 here :: R2.Here
@@ -44,6 +47,27 @@ login :: R2.Leaf Props
 login = R2.leaf loginCpt
 loginCpt :: R.Component Props
 loginCpt = here.component "login" cpt where
+  cpt props@{ visible } _ = do
+    -- Render
+    pure $
+
+      B.baseModal
+      { isVisibleBox: visible
+      , title: Just "GarganText ecosystem explorer"
+      , size: ExtraLargeModalSize
+      }
+      [
+        loginContainer
+        props
+      ]
+
+-- | @XXX React re-rendering issue with `React.Portal`
+-- | @link https://github.com/facebook/react/issues/12247
+loginContainer :: R2.Leaf Props
+loginContainer = R2.leaf loginContainerCpt
+
+loginContainerCpt :: R.Component Props
+loginContainerCpt = here.component "container" cpt where
   cpt props@{ sessions, visible } _ = do
     -- States
     mBackend <- R2.useLive' props.backend
@@ -53,49 +77,96 @@ loginCpt = here.component "login" cpt where
     -- Render
     pure $
 
-      B.baseModal
-      { isVisibleBox: visible
-      , title: Just "GarganText ecosystem explorer"
-      , size: ExtraLargeModalSize
-      }
+      H.div
+      {}
       [
         case mBackend of
           Nothing      -> chooser props
           Just backend -> case formType' of
-                               Login -> form { backend, formType, sessions, visible }
-                               ForgotPassword -> forgotPassword { backend, sessions }
+            Login ->
+              form
+              { backend
+              , formType
+              , sessions
+              , visible
+              }
+            ForgotPassword ->
+              forgotPassword
+              { backend
+              , sessions
+              }
       ]
 
 chooser :: R2.Leaf Props
-chooser = R2.leafComponent chooserCpt
+chooser = R2.leaf chooserCpt
 chooserCpt :: R.Component Props
 chooserCpt = here.component "chooser" cpt where
   cpt { backend, backends, sessions } _ = do
     sessions' <- T.useLive T.unequal sessions
     pure $
-      R.fragment $
-        [ H.h2 { className: "mx-auto" } [ H.text "Workspace manager" ]]
-        <> activeConnections sessions sessions' <>
-        [ H.h3 {} [ H.text "Existing places (click to login)" ]
-        , H.table { className : "table" }
-                  [ H.thead { className: "thead-light" }
-                            [ H.tr {} (map header headers) ]
-                  , H.tbody {} (map (renderBackend backend) backends)
+      H.div
+      {} $
+      [
+        H.h2
+        { className: "mx-auto" }
+        [ H.text "Workspace manager" ]
+      ]
+      <>
+        activeConnections sessions sessions'
+      <>
+      [
+        H.h3
+        {}
+        [ H.text "Existing places (click to login)" ]
+      ,
+        H.table
+        { className : "table" }
+        [
+          H.thead
+          { className: "thead-light" }
+          [
+            H.tr
+            {}
+            (map header headers)
+          ]
+        ,
+          H.tbody
+          {}
+          (map (renderBackend backend) backends)
+        ]
+      ,
+        H.input
+        { className: "form-control"
+        , type:"text"
+        , placeholder: "Search for your institute"
+        }
       ]
-        , H.input { className: "form-control", type:"text", placeholder } ]
-  placeholder = "Search for your institute"
   headers = [ "", "GarganText places", "Fonction", "Garg protocol url" ]
   header label = H.th {} [ H.text label ]
 
 -- Shown in the chooser
 activeConnections :: forall s. T.ReadWrite s Sessions => s -> Sessions -> Array R.Element
-activeConnections _        sessions' | Sessions.null sessions' = []
+activeConnections _        sessions' | Sessions.null sessions'  = mempty
 activeConnections sessions sessions'                            =
-  [ H.h3 {} [ H.text "Active place(s)" ]
-  , H.table { className : "table" }
-                  [ H.thead { className: "thead-light" }
-                            [ H.tr {} (map header headers) ]
-                  , H.tbody {} [renderSessions sessions sessions']
+  [
+    H.h3
+    {}
+    [ H.text "Active place(s)" ]
+  ,
+    H.table
+    { className : "table" }
+    [
+      H.thead
+      { className: "thead-light" }
+      [
+        H.tr
+        {}
+        (map header headers)
+      ]
+    ,
+      H.tbody
+      {}
+      [ renderSessions sessions sessions' ]
     ]
   ]
   where
@@ -144,7 +215,11 @@ renderBackend cursor backend@(Backend {name, baseUrl, backendType}) =
   ]
     where
       className = "fa fa-hand-o-right" -- "glyphitem fa fa-log-in"
-      click _ = T.write_ (Just backend) cursor
+
+      click :: RE.SyntheticEvent DE.Event -> Effect Unit
+      click e = do
+        RE.preventDefault e
+        T.write_ (Just backend) cursor
 
 backendLabel :: String -> String
 backendLabel =

src/Gargantext/Components/Router.purs

@@ -575,10 +575,12 @@ listsCpt = here.component "lists" cpt where
 
 login' :: Boxes -> R.Element
 login' { backend, sessions, showLogin: visible } =
-  login { backend
+  login
+  { backend
   , backends: A.fromFoldable defaultBackends
   , sessions
-        , visible }
+  , visible
+  }
 
 --------------------------------------------------------------