Remove Participant Method added

apps/photos/src/components/Collections/CollectionShare/ShareControl/CollaboratorParticipants.tsx

@@ -24,13 +24,11 @@ export function CollaboratorParticipants({ collection, onRootClose }: Iprops) {
     const [collaborators, setCollaborators] = useState([]);
 
     useEffect(() => {
-        collection.sharees?.map((sharee) => {
-            if (sharee.role === 'COLLABORATOR')
-                setCollaborators((prevViewers) => [
-                    ...prevViewers,
-                    sharee.email,
-                ]);
-        });
+        const collaboratorEmails =
+            collection.sharees
+                ?.filter((sharee) => sharee.role === 'COLLABORATOR')
+                .map((sharee) => sharee.email) || [];
+        setCollaborators(collaboratorEmails);
     }, [collection.sharees]);
 
     return (

apps/photos/src/components/Collections/CollectionShare/ShareControl/ManageParticipantsList.tsx

@@ -1,11 +1,13 @@
 import { Box } from '@mui/material';
-
-import React from 'react';
+import React, { useContext } from 'react';
 // import { t } from 'i18next';
 import { Collection } from 'types/collection';
 import { OwnerParticipant } from './OwnerParticipant';
 import { ViewerParticipants } from './ViewerParticipants';
 import { CollaboratorParticipants } from './CollaboratorParticipants';
+import { unshareCollection } from 'services/collectionService';
+import { AppContext } from 'pages/_app';
+import { GalleryContext } from 'pages/gallery';
 
 interface Iprops {
     collection: Collection;
@@ -16,6 +18,18 @@ export function ManageParticipantsList({ collection, onRootClose }: Iprops) {
     if (!collection.sharees?.length) {
         return <></>;
     }
+    const appContext = useContext(AppContext);
+    const galleryContext = useContext(GalleryContext);
+
+    const collectionUnshare = async (email: string) => {
+        try {
+            appContext.startLoading();
+            await unshareCollection(collection, email);
+            await galleryContext.syncWithRemote(false, true);
+        } finally {
+            appContext.finishLoading();
+        }
+    };
 
     return (
         <Box mb={3}>
@@ -25,7 +39,8 @@ export function ManageParticipantsList({ collection, onRootClose }: Iprops) {
                 onRootClose={onRootClose}></CollaboratorParticipants>
             <ViewerParticipants
                 collection={collection}
-                onRootClose={onRootClose}></ViewerParticipants>
+                onRootClose={onRootClose}
+                collectionUnshare={collectionUnshare}></ViewerParticipants>
         </Box>
     );
 }

apps/photos/src/components/Collections/CollectionShare/ShareControl/ManageParticipantsRole.tsx

@@ -18,6 +18,7 @@ interface Iprops {
     onClose: () => void;
     onRootClose: () => void;
     selectedEmail: string;
+    collectionUnshare: (email: string) => Promise<void>;
 }
 
 export default function ManageParticipantsRole({
@@ -26,6 +27,7 @@ export default function ManageParticipantsRole({
     onClose,
     onRootClose,
     selectedEmail,
+    collectionUnshare,
 }: Iprops) {
     const handleDrawerClose: DialogProps['onClose'] = (_, reason) => {
         if (reason === 'backdropClick') {
@@ -34,6 +36,12 @@ export default function ManageParticipantsRole({
             onClose();
         }
     };
+
+    const handleClick = () => {
+        collectionUnshare(selectedEmail);
+        onClose();
+    };
+
     console.log('collection Clicked', collection, selectedEmail);
     return (
         <>
@@ -88,7 +96,7 @@ export default function ManageParticipantsRole({
                         //
                         color="error"
                         fontWeight="normal"
-                        onClick={() => console.log('clicked')}
+                        onClick={handleClick}
                         label={'Remove'}
                         startIcon={
                             <BlockIcon

apps/photos/src/components/Collections/CollectionShare/ShareControl/ViewerParticipants.tsx

@@ -14,9 +14,14 @@ import ManageParticipantsRole from './ManageParticipantsRole';
 interface Iprops {
     collection: Collection;
     onRootClose: () => void;
+    collectionUnshare: (email: string) => Promise<void>;
 }
 
-export function ViewerParticipants({ collection, onRootClose }: Iprops) {
+export function ViewerParticipants({
+    collection,
+    onRootClose,
+    collectionUnshare,
+}: Iprops) {
     if (!collection.sharees?.length) {
         return <></>;
     }
@@ -34,10 +39,11 @@ export function ViewerParticipants({ collection, onRootClose }: Iprops) {
     };
 
     useEffect(() => {
-        collection.sharees?.map((sharee) => {
-            if (sharee.role === 'VIEWER')
-                setViewers((prevViewers) => [...prevViewers, sharee.email]);
-        });
+        const viewersEmails =
+            collection.sharees
+                ?.filter((sharee) => sharee.role === 'VIEWER')
+                .map((sharee) => sharee.email) || [];
+        setViewers(viewersEmails);
     }, [collection.sharees]);
 
     return (
@@ -80,6 +86,7 @@ export function ViewerParticipants({ collection, onRootClose }: Iprops) {
                 </Box>
             </Stack>
             <ManageParticipantsRole
+                collectionUnshare={collectionUnshare}
                 open={participantRoleView}
                 collection={collection}
                 onRootClose={onRootClose}