[Team management] UX

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

@@ -2,7 +2,9 @@ module Gargantext.Components.Forest.Tree.Node.Action.ManageTeam where
 
 import Gargantext.Prelude
 
-import Effect.Aff (launchAff_)
+import Data.Array (filter)
+import Data.Either (Either(..))
+import Effect.Aff (runAff_)
 import Effect.Class (liftEffect)
 import Gargantext.Components.Forest.Tree.Node.Tools as Tools
 import Gargantext.Components.GraphQL.Endpoints (deleteTeamMembership, getTeam)
@@ -12,7 +14,6 @@ import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (ID, NodeType)
 import Gargantext.Utils.Reactix as R2
-import Gargantext.Utils.Toestand as T2
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Toestand as T
@@ -32,17 +33,13 @@ actionManageTeam = R.createElement actionManageTeamCpt
 actionManageTeamCpt :: R.Component ActionManageTeam
 actionManageTeamCpt = here.component "actionManageTeam" cpt where
   cpt {id, session} _ = do
-    reload <- T.useBox T2.newReload
-    _ <- T.useLive T.unequal reload
-
     useLoader { errorHandler
               , loader: loadTeam
               , path: { nodeId: id, session }
-              , render: \team -> teamLayoutRows { team
+              , render: \team -> teamLayoutWrapper { team
                                                    , nodeId: id
                                                    , session
-                                                , reload
-                                                }
+                                                   } []
               }
     where
       errorHandler = logRESTError here "teamLayout"
@@ -50,28 +47,63 @@ actionManageTeamCpt = here.component "actionManageTeam" cpt where
 type TeamProps =
   ( nodeId  :: ID
   , session :: Session
-  , team    :: Array TeamMember
-  , reload  :: T.Box T2.Reload )
+  , team    :: (Array TeamMember)
+  )
+
+teamLayoutWrapper :: R2.Component TeamProps
+teamLayoutWrapper = R.createElement teamLayoutWrapperCpt
+
+teamLayoutWrapperCpt :: R.Component TeamProps
+teamLayoutWrapperCpt = here.component "teamLayoutWrapper" cpt where
+  cpt {nodeId, session, team} _ = do
+    teamS <- T.useBox team
+    team' <- T.useLive T.unequal teamS
+    error <- T.useBox ""
+    error' <- T.useLive T.unequal error
+
+    pure $ teamLayoutRows {nodeId, session, team: teamS, team', error, error'}
+
+type TeamRowProps =
+  ( nodeId  :: ID
+  , session :: Session
+  , team    :: T.Box (Array TeamMember)
+  , error   :: T.Box String 
+  , team'   :: Array TeamMember
+  , error'  :: String
+  )
 
-teamLayoutRows :: R2.Leaf TeamProps
+teamLayoutRows :: R2.Leaf TeamRowProps
 teamLayoutRows = R2.leafComponent teamLayoutRowsCpt
 
-teamLayoutRowsCpt :: R.Component TeamProps
+teamLayoutRowsCpt :: R.Component TeamRowProps
 teamLayoutRowsCpt = here.component "teamLayoutRows" cpt where
-  cpt { team, nodeId, session, reload } _ = do
-    pure $ Tools.panel (map makeTeam team) (H.div {} [])
+  cpt { team, nodeId, session, error, team', error' } _ = do
+    
+    pure $ Tools.panel (map makeTeam team') (H.div {} [H.text error'])
     where
+      makeTeam :: TeamMember -> R.Element
       makeTeam { username, shared_folder_id } = H.div {className: "from-group row"} [ H.div { className: "col-8" } [ H.text username ]
                                                                                     , H.a { className: "text-danger col-2 fa fa-times"
                                                                                           , title: "Remove user from team"
                                                                                           , type: "button"
-                                                                                          , on: {click: submit shared_folder_id} 
+                                                                                          , on: {click: submit shared_folder_id } 
                                                                                           } []
                                                                                     ]
       
       submit sharedFolderId _ = do
-        launchAff_ $ saveDeleteTeam { session, nodeId, sharedFolderId }
-        liftEffect $ T2.reload reload
+        runAff_ callback $ saveDeleteTeam { session, nodeId, sharedFolderId }
+
+      callback res =
+        case res of
+          Left _ -> do
+            _ <- liftEffect $ T.write "Only the Team owner can remove users" error
+            pure unit
+          Right val ->
+            case val of
+              Left _ -> do
+                pure unit
+              Right r -> do
+                T.write_ (filter (\tm -> tm.shared_folder_id /= r) team') team
 
 -------------------------------------------------------------
 

src/Gargantext/Components/GraphQL/Endpoints.purs

@@ -94,6 +94,6 @@ deleteTeamMembership session sharedFolderId teamNodeId = do
                                        , team_node_id: teamNodeId } }
   pure $ case A.head delete_team_membership of
     Nothing -> Left (CustomError $ "Failed  to delete team membership. team node id=" <> show teamNodeId <> " shared folder id=" <> show sharedFolderId)
-    Just i -> Right i
+    Just _ -> Right sharedFolderId
   where
     getToken (Session { token }) = token