diff --git a/apps/photos/src/components/Collections/CollectionShare/ShareControl/CollaboratorParticipants.tsx b/apps/photos/src/components/Collections/CollectionShare/ShareControl/CollaboratorParticipants.tsx
index 2c6c76822..f4e2c86e0 100644
--- a/apps/photos/src/components/Collections/CollectionShare/ShareControl/CollaboratorParticipants.tsx
+++ b/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 (
diff --git a/apps/photos/src/components/Collections/CollectionShare/ShareControl/ManageParticipantsList.tsx b/apps/photos/src/components/Collections/CollectionShare/ShareControl/ManageParticipantsList.tsx
index 8036bd227..33dc510bb 100644
--- a/apps/photos/src/components/Collections/CollectionShare/ShareControl/ManageParticipantsList.tsx
+++ b/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 (
@@ -25,7 +39,8 @@ export function ManageParticipantsList({ collection, onRootClose }: Iprops) {
onRootClose={onRootClose}>
+ onRootClose={onRootClose}
+ collectionUnshare={collectionUnshare}>
);
}
diff --git a/apps/photos/src/components/Collections/CollectionShare/ShareControl/ManageParticipantsRole.tsx b/apps/photos/src/components/Collections/CollectionShare/ShareControl/ManageParticipantsRole.tsx
index b7165fd9b..54059b9e2 100644
--- a/apps/photos/src/components/Collections/CollectionShare/ShareControl/ManageParticipantsRole.tsx
+++ b/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;
}
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={
void;
+ collectionUnshare: (email: string) => Promise;
}
-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) {