[layout] Modal reactivity for "Close" action

* #427

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

-module Gargantext.Components.Bootstrap.BaseModal (baseModal) where
+module Gargantext.Components.Bootstrap.BaseModal
+  (baseModal
+  , showModal, hideModal
+  ) where
 
 import Gargantext.Prelude
 
@@ -109,12 +112,14 @@ component = R.hooksComponent componentName cpt where
 
       id = componentName <> "-" <> uuid
 
+      selector = "#" <> id
+
     -- | Hooks
     -- |
     useUpdateEffect1' isVisible
       if isVisible
-      then showModal window $ "#" <> id
-      else hideModal window $ "#" <> id
+      then showModal window selector
+      else hideModal window selector
 
     -- | Behaviors
     -- |

src/Gargantext/Components/FolderView/Box.purs

@@ -42,7 +42,7 @@ nodePopupViewCpt = here.component "nodePopupView" cpt where
         ]
       ]
 
-  closePopover props = props.onPopoverClose <<< R.unsafeEventTarget
+  closeBox props = props.onPopoverClose <<< R.unsafeEventTarget
 
   panelHeading props@{ nodeType } =
     H.div { className: "popup-container__header card-header" }
@@ -53,5 +53,5 @@ nodePopupViewCpt = here.component "nodePopupView" cpt where
       , H.div { className: "col-6" }
         [ H.span { className: "text-primary center" } [ H.text props.name ] ]
       , H.div { className: "col-1" }
-        [ H.a { type: "button", on: { click: closePopover props }, title: "Close"
+        [ H.a { type: "button", on: { click: closeBox props }, title: "Close"
               , className: glyphicon "window-close" } [] ]]]

src/Gargantext/Components/Forest/Tree.purs

@@ -7,7 +7,6 @@ import Data.Array as Array
 import Data.Maybe (Maybe(..), isJust)
 import Data.Traversable (intercalate, traverse, traverse_)
 import Data.Tuple.Nested ((/\))
-import Effect (Effect)
 import Effect.Aff (Aff)
 import Effect.Class (liftEffect)
 import Gargantext.AsyncTasks as GAT
@@ -31,13 +30,13 @@ import Gargantext.Components.Forest.Tree.Node.Tools.SubTree.Types (SubTreeOut(..
 import Gargantext.Config.REST (AffRESTError, logRESTError)
 import Gargantext.Config.Utils (handleRESTError)
 import Gargantext.Ends (Frontends)
-import Gargantext.Hooks.Loader (useLoader, useLoaderEffect)
+import Gargantext.Hooks.Loader (useLoaderEffect)
 import Gargantext.Routes as GR
 import Gargantext.Sessions (Session, get, mkNodeId)
 import Gargantext.Sessions.Types (useOpenNodesMemberBox, openNodesInsert, openNodesDelete)
-import Gargantext.Types (Handed, ID, isPublic, publicize, switchHanded)
+import Gargantext.Types (Handed, ID, isPublic, publicize)
 import Gargantext.Types as GT
-import Gargantext.Utils (nbsp, (?))
+import Gargantext.Utils ((?))
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
 import Reactix as R
@@ -99,11 +98,13 @@ type ChildLoaderProps =
   ( id     :: ID
   , render :: R2.Leaf TreeProps
   , root   :: ID
-  | NodeProps )
+  | NodeProps
+  )
 
 type PerformActionProps =
-  ( setPopoverRef :: R.Ref (Maybe (Boolean -> Effect Unit))
-  | PACommon )
+  ( isBoxVisible :: T.Box Boolean
+  | PACommon
+  )
 
 -- | Loads and renders the tree starting at the given root node id.
 treeLoader :: R2.Leaf ( key :: String | LoaderProps )
@@ -163,9 +164,9 @@ treeCpt = here.component "tree" cpt where
         , session
         , tree: NTree (LNode { id, name, nodeType }) children } _ = do
 
-    setPopoverRef <- R.useRef Nothing
-    folderOpen <- useOpenNodesMemberBox nodeId forestOpen
-    folderOpen' <- T.useLive T.unequal folderOpen
+    isBoxVisible  <- T.useBox false
+    folderOpen    <- useOpenNodesMemberBox nodeId forestOpen
+    folderOpen'   <- T.useLive T.unequal folderOpen
 
     pure $
 
@@ -183,7 +184,7 @@ treeCpt = here.component "tree" cpt where
         [
           nodeSpan
           { boxes
-          , dispatch: dispatch setPopoverRef
+          , dispatch: dispatch' isBoxVisible
           , folderOpen
           , frontends
           , id
@@ -193,7 +194,7 @@ treeCpt = here.component "tree" cpt where
           , reload
           , root
           , session
-          , setPopoverRef
+          , isBoxVisible
           }
         <>
           R2.when (folderOpen')
@@ -213,9 +214,9 @@ treeCpt = here.component "tree" cpt where
       nodeId = mkNodeId session id
       children' = A.sortWith fTreeID pubChildren
       pubChildren = if isPublic nodeType then map (map pub) children else children
-      dispatch setPopoverRef a = performAction a (Record.merge common' spr) where
+      dispatch' isBoxVisible a = performAction a (Record.merge common' extra) where
         common' = RecordE.pick p :: Record PACommon
-        spr = { setPopoverRef }
+        extra = { isBoxVisible }
   pub (LNode n@{ nodeType: t }) = LNode (n { nodeType = publicize t })
 
 
@@ -295,10 +296,10 @@ childLoaderCpt = here.component "childLoader" cpt where
         extra = { root, tree: tree' }
         nodeProps = RecordE.pick p :: Record NodeProps
 
-closePopover { setPopoverRef } =
-   liftEffect $ traverse_ (\set -> set false) (R.readRef setPopoverRef)
+closeBox { isBoxVisible } =
+  liftEffect $ T.write_ false isBoxVisible
 
-refreshTree p@{ reloadTree } = liftEffect $ T2.reload reloadTree *> closePopover p
+refreshTree p@{ reloadTree } = liftEffect $ T2.reload reloadTree *> closeBox p
 
 deleteNode' nt p@{ boxes: { forestOpen }, session, tree: (NTree (LNode {id, parent_id}) _) } = do
   case nt of
@@ -407,6 +408,6 @@ performAction (MoveNode {params}) p                           = moveNode params
 performAction (MergeNode {params}) p                          = mergeNode params p
 performAction (LinkNode { nodeType, params }) p               = linkNode nodeType params p
 performAction RefreshTree p                                   = refreshTree p
-performAction ClosePopover p                                  = closePopover p
+performAction CloseBox p                                      = closeBox p
 performAction (DocumentsFromWriteNodes { id }) p              = documentsFromWriteNodes id p
 performAction NoAction _                                      = liftEffect $ here.log "[performAction] NoAction"

src/Gargantext/Components/Forest/Tree/Node.purs

@@ -8,7 +8,6 @@ import Gargantext.Prelude
 import Data.Array.NonEmpty as NArray
 import Data.Foldable (intercalate)
 import Data.Maybe (Maybe(..), maybe)
-import Data.Nullable (null)
 import Data.String.Regex as Regex
 import Data.Symbol (SProxy(..))
 import Data.Tuple.Nested ((/\))
@@ -18,7 +17,7 @@ import Effect.Class (liftEffect)
 import Gargantext.AsyncTasks as GAT
 import Gargantext.Components.App.Store (Boxes)
 import Gargantext.Components.Bootstrap as B
-import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Elevation(..), ModalSizing(..), TooltipEffect(..), Variant(..))
+import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Elevation(..), TooltipEffect(..), Variant(..))
 import Gargantext.Components.Forest.Tree.Node.Action.Types (Action(..))
 import Gargantext.Components.Forest.Tree.Node.Action.Upload (DroppedFile(..), fileTypeView)
 import Gargantext.Components.Forest.Tree.Node.Action.Upload.Types (FileType(..), UploadFileBlob(..))
@@ -31,7 +30,6 @@ import Gargantext.Components.Nodes.Corpus (loadCorpusWithChild)
 import Gargantext.Config.REST (logRESTError)
 import Gargantext.Context.Progress (asyncContext, asyncProgress)
 import Gargantext.Ends (Frontends, url)
-import Gargantext.Hooks.FirstEffect (useFirstEffect')
 import Gargantext.Hooks.Loader (useLoaderEffect)
 import Gargantext.Hooks.Version (Version, useVersion)
 import Gargantext.Routes as Routes
@@ -39,7 +37,6 @@ import Gargantext.Sessions (Session, sessionId)
 import Gargantext.Types (ID, Name)
 import Gargantext.Types as GT
 import Gargantext.Utils (nbsp, textEllipsisBreak, (?))
-import Gargantext.Utils.Popover as Popover
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
 import React.SyntheticEvent as SE
@@ -47,7 +44,6 @@ import Reactix as R
 import Reactix.DOM.HTML as H
 import Record as Record
 import Toestand as T
-import Unsafe.Coerce (unsafeCoerce)
 
 -- (?) never been able to properly declare PureScript Regex...
 foreign import nodeUserRegexp :: Regex.Regex
@@ -68,7 +64,7 @@ type NodeSpanProps =
   , reload        :: T2.ReloadS
   , root          :: ID
   , session       :: Session
-  , setPopoverRef :: R.Ref (Maybe (Boolean -> Effect Unit))
+  , isBoxVisible  :: T.Box Boolean
   )
 
 type IsLeaf = Boolean
@@ -92,7 +88,7 @@ nodeSpanCpt = here.component "nodeSpan" cpt
               , nodeType
               , reload
               , session
-              , setPopoverRef
+              , isBoxVisible
               } _ = do
     -- States
 
@@ -108,8 +104,6 @@ nodeSpanCpt = here.component "nodeSpan" cpt
 
       folderOpen' <- R2.useLive' folderOpen
 
-      isSettingsModalVisible <- T.useBox false
-
       -- tasks' <- T.read tasks
 
     -- Computed
@@ -198,18 +192,10 @@ nodeSpanCpt = here.component "nodeSpan" cpt
           --   Nothing -> pure unit
           -- T2.reload reloadRoot
 
-        onPopoverClose ::
-             Popover.PopoverRef
-          -> Effect Unit
-        onPopoverClose ref = Popover.setOpen ref false
-
         -- NOTE Don't toggle tree if it is not selected
         onNodeLinkClick :: Unit -> Effect Unit
         onNodeLinkClick _ = when (not isSelected) (T.write_ true folderOpen)
 
-        toggleSettingsModal :: Unit -> Effect Unit
-        toggleSettingsModal _ = T.modify_ (not) isSettingsModalVisible
-
     -- Hooks
 
       mVersion <- useVersion $ nodeType == GT.NodeUser ?
@@ -320,7 +306,7 @@ nodeSpanCpt = here.component "nodeSpan" cpt
             B.iconButton
             { name: "cog"
             , className: "mainleaf__settings-icon"
-            , callback: toggleSettingsModal
+            , callback: \_ -> T.write_ true isBoxVisible
             , title:
                   "Each node of the Tree can perform some actions.\n"
                 <> "Click here to execute one of them."
@@ -346,7 +332,7 @@ nodeSpanCpt = here.component "nodeSpan" cpt
         -- // Modals //
 
           B.baseModal
-          { isVisibleBox: isSettingsModalVisible
+          { isVisibleBox: isBoxVisible
           , noBody: true
           , noHeader: true
           , modalClassName: "forest-tree-node-modal"
@@ -358,7 +344,7 @@ nodeSpanCpt = here.component "nodeSpan" cpt
             , id
             , name
             , nodeType
-            , onPopoverClose: \_ -> toggleSettingsModal unit
+            , closeCallback: \_ -> T.write_ false isBoxVisible
             , session
             }
           ]

src/Gargantext/Components/Forest/Tree/Node/Action.purs

@@ -46,7 +46,7 @@ icon (UploadFile _ _ _ _ _ _)       = glyphiconNodeAction Upload
 icon (UploadArbitraryFile _ _ _ _ ) = glyphiconNodeAction Upload
 icon UploadFrameCalc                = glyphiconNodeAction Upload
 icon  RefreshTree                   = glyphiconNodeAction Refresh
-icon  ClosePopover                  = glyphiconNodeAction CloseNodePopover
+icon  CloseBox                      = glyphiconNodeAction CloseNodePopover
 icon  DownloadNode                  = glyphiconNodeAction Download
 icon (MoveNode _ )                  = glyphiconNodeAction (Move  { subTreeParams : SubTreeParams {showtypes:[], valitypes:[] }})
 icon (MergeNode _ )                 = glyphiconNodeAction (Merge { subTreeParams : SubTreeParams {showtypes:[], valitypes:[] }})
@@ -70,7 +70,7 @@ text (UploadFile _  _ _ _ _ _)      = "Upload File !"
 text (UploadArbitraryFile _ _  _ _) = "Upload arbitrary file !"
 text UploadFrameCalc                = "Upload frame calc"
 text  RefreshTree                   = "Refresh Tree !"
-text  ClosePopover                  = "Close Popover !"
+text  CloseBox                      = "Close Box !"
 text DownloadNode                   = "Download !"
 text (MoveNode  _ )                 = "Move !"
 text (MergeNode _ )                 = "Merge !"
@@ -78,4 +78,3 @@ text (LinkNode  _ )                 = "Link !"
 text (DocumentsFromWriteNodes _ )   = "Documents from Write Nodes !"
 text NoAction                       = "No Action"
 -----------------------------------------------------------------------
-

src/Gargantext/Components/Forest/Tree/Node/Action/Search.purs

@@ -54,7 +54,7 @@ actionSearchCpt = here.component "actionSearch" cpt
           searchOn dispatch' task = do
             _ <- launchAff $ dispatch' (DoSearch task)
             -- close popup
-            _ <- launchAff $ dispatch' ClosePopover
+            _ <- launchAff $ dispatch' CloseBox
             -- TODO
             --snd p $ const Nothing
             pure unit

src/Gargantext/Components/Forest/Tree/Node/Action/Types.purs

@@ -21,7 +21,7 @@ data Action = AddNode     String GT.NodeType
             | UploadFrameCalc
             | DownloadNode
             | RefreshTree
-            | ClosePopover
+            | CloseBox
 
             | ShareTeam   String
             | AddContact  AddContactParams
@@ -48,7 +48,7 @@ instance Eq Action where
   eq UploadFrameCalc UploadFrameCalc = true
   eq DownloadNode DownloadNode = true
   eq RefreshTree RefreshTree = true
-  eq ClosePopover ClosePopover = true
+  eq CloseBox CloseBox = true
   eq (ShareTeam s1) (ShareTeam s2) = eq s1 s2
   eq (AddContact ac1) (AddContact ac2) = eq ac1 ac2
   eq (SharePublic p1) (SharePublic p2) = eq p1 p2
@@ -72,7 +72,7 @@ instance Show Action where
   show (UploadArbitraryFile _ _ _ _) = "UploadArbitraryFile"
   show UploadFrameCalc               = "UploadFrameCalc"
   show  RefreshTree                  = "RefreshTree"
-  show  ClosePopover                 = "ClosePopover"
+  show  CloseBox                     = "CloseBox"
   show  DownloadNode                 = "Download"
   show (MoveNode  _ )                = "MoveNode"
   show (MergeNode _ )                = "MergeNode"

src/Gargantext/Components/Forest/Tree/Node/Action/Update.purs

@@ -86,7 +86,7 @@ updateGraphCpt = here.component "updateGraph" cpt where
 
     let
       callback :: Action -> Aff Unit
-      callback = dispatch >=> \_ -> dispatch ClosePopover
+      callback = dispatch >=> \_ -> dispatch CloseBox
 
     pure $ panel [ H.text "Show subjects with Order1 or concepts with Order2 ?"
                  , formChoiceSafe { items: [Order1, Order2]
@@ -153,7 +153,7 @@ updatePhyloCpt = here.component "updatePhylo" cpt where
           opts <- pure $ options r'
           launchAff_ do
             dispatch opts
-            dispatch ClosePopover
+            dispatch CloseBox
 
         where
           options :: Phylo.UpdateData -> Action

src/Gargantext/Components/Forest/Tree/Node/Action/Upload.purs

@@ -265,7 +265,7 @@ uploadButtonCpt = here.component "uploadButton" cpt
               T.write_ Plain fileFormat
               T.write_ EN lang
               T.write_ false onPendingBox
-            dispatch ClosePopover
+            dispatch CloseBox
 
 uploadListView :: R2.Leaf Props
 uploadListView = R2.leafComponent uploadListViewCpt

src/Gargantext/Components/Forest/Tree/Node/Box.purs

@@ -39,8 +39,9 @@ here :: R2.Here
 here = R2.here "Gargantext.Components.Forest.Tree.Node.Box"
 
 type CommonProps =
-  ( dispatch :: Action -> Aff Unit
-  , session :: Session )
+  ( dispatch  :: Action -> Aff Unit
+  , session   :: Session
+  )
 
 nodePopupView :: R2.Leaf NodePopupProps
 nodePopupView = R2.leafComponent nodePopupCpt
@@ -71,7 +72,6 @@ nodePopupCpt = here.component "nodePopupView" cpt where
         ]
       ]
 
-  closePopover p = p.onPopoverClose <<< R.unsafeEventTarget
   panelHeading renameIsOpen open p@{ dispatch, id, name, nodeType } =
     H.div { className: "popup-container__header card-header" }
     [ R2.row
@@ -86,7 +86,7 @@ nodePopupCpt = here.component "nodePopupView" cpt where
         ]
       , H.div { className: "col-1" } [ editIcon renameIsOpen open ]
       , H.div { className: "col-1" }
-        [ H.a { type: "button", on: { click: closePopover p }, title: "Close"
+        [ H.a { type: "button", on: { click: \_ -> p.closeCallback unit }, title: "Close"
               , className: glyphicon "window-close" } [] ]]]
   editIcon _ true = H.div {} []
   editIcon isOpen false =

src/Gargantext/Components/Forest/Tree/Node/Box/Types.purs

 module Gargantext.Components.Forest.Tree.Node.Box.Types where
 
-import DOM.Simple as DOM
 import Data.Maybe (Maybe)
 import Effect (Effect)
 import Effect.Aff (Aff)
@@ -18,11 +17,11 @@ type CommonProps =
   )
 
 type NodePopupProps =
-  ( boxes :: Boxes
-  , id             :: ID
-  , name           :: Name
-  , nodeType       :: GT.NodeType
-  , onPopoverClose :: DOM.Element -> Effect Unit
+  ( boxes           :: Boxes
+  , id              :: ID
+  , name            :: Name
+  , nodeType        :: GT.NodeType
+  , closeCallback   :: Unit -> Effect Unit
   | CommonProps
   )