feat: Add canvas access maganer (#22)

src/components/ContentTable.tsx

@@ -170,7 +170,7 @@ export default function ContentTable({
 												</DropdownMenuTrigger>
 												<DropdownMenuContent align="end">
 													<DropdownMenuLabel>
-														{t('components.contentTable.createdAt')}
+														{t('components.contentTable.actions')}
 													</DropdownMenuLabel>
 													<DropdownMenuItem
 														onClick={() => {
@@ -199,6 +199,18 @@ export default function ContentTable({
 															{t('components.contentTable.buttons.delete')}
 														</DropdownMenuItem>
 													)}
+													{value.isOwner && (
+														<DropdownMenuItem
+															onClick={() => {
+																openModal({
+																	modalState: 'EDIT_CANVAS_ACCESS',
+																	params: { selectedId: value.id },
+																});
+															}}
+														>
+															{t('components.contentTable.buttons.access')}
+														</DropdownMenuItem>
+													)}
 												</DropdownMenuContent>
 											</DropdownMenu>
 										</TableCell>

src/components/EditCanvasAccessDialog.tsx

@@ -0,0 +1,113 @@
+import { Button } from '@/components/ui/button';
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from '@/components/ui/dialog';
+import { useModalStore } from '@/store/modalStore';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { canvasAccessByIdDTO, ExcaliApi } from '@/lib/api/excali-api';
+import { XIcon } from 'lucide-react';
+import { toast } from '@/components/ui/use-toast';
+
+interface EditCanvasDialogProps {
+	isOpen: boolean;
+	onClose: () => void;
+}
+
+export default function EditCanvasAccessDialog({
+	isOpen,
+	onClose,
+}: EditCanvasDialogProps) {
+	const { t } = useTranslation();
+	const { modalProps } = useModalStore();
+
+	const queryClient = useQueryClient();
+
+	const currentCanvasId = modalProps?.selectedId;
+
+	const currentCanvasQueryKey = ['canvas', currentCanvasId];
+
+	const { data: canvasData } = useQuery({
+		queryKey: currentCanvasQueryKey,
+		queryFn: () => ExcaliApi.getCanvasById(`${currentCanvasId}`),
+		enabled: Boolean(currentCanvasId),
+	});
+
+	const { mutate: removeAccessById } = useMutation({
+		mutationFn: (data: canvasAccessByIdDTO) => ExcaliApi.removeAccessById(data),
+		onSuccess: async () => {
+			await queryClient.invalidateQueries({ queryKey: currentCanvasQueryKey });
+			toast({
+				title: 'Access remove successfully',
+			});
+		},
+	});
+
+	const { resetState } = useModalStore();
+
+	const canvasAccesses =
+		canvasData?.canvasAccesses.sort((a, b) =>
+			a.isOwner && b.isOwner ? 0 : a.isOwner ? -1 : 1
+		) ?? [];
+
+	function removeAccess(userId: string) {
+		if (!currentCanvasId) {
+			onClose();
+			return toast({
+				variant: 'destructive',
+				title: 'Invalid canvasId',
+			});
+		}
+
+		removeAccessById({
+			canvasId: currentCanvasId,
+			personId: userId,
+		});
+	}
+
+	return (
+		<Dialog
+			open={isOpen}
+			onOpenChange={() => {
+				onClose();
+				resetState();
+			}}
+		>
+			<DialogContent className="sm:max-w-[425px]">
+				<DialogHeader>
+					<DialogTitle>
+						{t('components.editCanvasAccessDialog.title')}
+					</DialogTitle>
+					<DialogDescription>
+						{t('components.editCanvasAccessDialog.description')}
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4 py-4">
+					{canvasAccesses.map(({ user, isOwner }) => (
+						<div key={user.id} className="flex items-center">
+							{!isOwner && (
+								<XIcon
+									className="h-4 w-4 cursor-pointer text-red-500"
+									onClick={() => removeAccess(user.id)}
+								/>
+							)}
+							<p className={isOwner ? 'text-neutral-500' : ''}>
+								{user.displayName}
+							</p>
+						</div>
+					))}
+				</div>
+				<DialogFooter>
+					<Button onClick={onClose}>
+						{t('components.editCanvasAccessDialog.close')}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

src/components/UserDashboard.tsx

@@ -18,6 +18,7 @@ import { TagsFilterStoreProvider } from '@/providers/TagsFilterProvider/TagsFilt
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { ShareCanvasByIdDialog } from '@/components/ShareCanvasByIdDialog';
 import { useModalStore } from '@/store/modalStore';
+import EditCanvasAccessDialog from '@/components/EditCanvasAccessDialog';
 
 export default function UserDashboard() {
 	const { data } = useUserAuth();
@@ -72,6 +73,10 @@ export default function UserDashboard() {
 				/>
 			)}
 
+			{modalState === 'EDIT_CANVAS_ACCESS' && (
+				<EditCanvasAccessDialog isOpen={isModalOpen} onClose={closeModal} />
+			)}
+
 			<Toaster />
 			<ContentWrapper pagePaths={['Dashboard', 'Canvases']}>
 				<Tabs defaultValue="all">

src/hooks/useEditCanvasForm.ts

@@ -10,7 +10,7 @@ import { useEffect } from 'react';
 import { useEditCanvas } from '@/hooks/useEditCanvas';
 
 export function useEditCanvasForm(
-	canvasId: string | undefined,
+	canvasId: string | undefined | null,
 	onClose: () => void
 ) {
 	const { data: tagsData = [] } = useQuery({

src/i18n/en.json

@@ -21,7 +21,8 @@
 				"edit": "Edit",
 				"share": "Share",
 				"delete": "Delete",
-				"load": "Load"
+				"load": "Load",
+				"access": "Access"
 			}
 		},
 		"createCanvasDialog": {
@@ -90,6 +91,12 @@
 			},
 			"saveCanvasButton": "Save canvas"
 		},
+		"editCanvasAccessDialog": {
+			"title": "Access to dialog",
+			"description": "Edit accesses to canvas",
+			"toast": "Access has been saved.",
+			"close": "Close"
+		},
 		"errorPage": {
 			"title": "Uh-oh!",
 			"description": " Something went wrong.",

src/lib/api/excali-api.ts

@@ -135,6 +135,16 @@ export class ExcaliApi {
 		return this.instance.post(`/canvas/${canvasId}/access`, { personId });
 	};
 
+	public static removeAccessById = async ({
+		personId,
+		canvasId,
+	}: canvasAccessByIdDTO) => {
+		return this.instance(`/canvas/${canvasId}/access`, {
+			method: 'DELETE',
+			data: { personId },
+		});
+	};
+
 	public static deleteCanvasById = async (canvasId: Uuid) => {
 		return this.instance.delete(`/canvas/${canvasId}`);
 	};
@@ -163,6 +173,12 @@ export interface CanvasDTO {
 	tags: CanvasTagDTO[];
 	isOwner: boolean;
 	owner: string;
+	canvasAccesses: CanvasAccessesDTO[];
+}
+
+export interface CanvasAccessesDTO {
+	isOwner: boolean;
+	user: UserDTO;
 }
 
 export interface ApiPageInfo {
@@ -214,6 +230,7 @@ export interface UpdateCanvasMetaDTO {
 export interface UserDTO {
 	id: string;
 	email: string;
+	displayName: string;
 }
 
 export interface canvasAccessDTO {

src/store/modalStore.ts

@@ -16,6 +16,7 @@ interface ModalState {
 export const MODAL_STATE = {
 	ADD_TAG: 'ADD_TAG',
 	EDIT_TAG: 'EDIT_TAG',
+	EDIT_CANVAS_ACCESS: 'EDIT_CANVAS_ACCESS',
 	REMOVE_TAG: 'REMOVE_TAG',
 	ADD_CANVAS: 'ADD_CANVAS',
 	EDIT_CANVAS: 'EDIT_CANVAS',
@@ -42,7 +43,8 @@ export type ModalPayload =
 				| typeof MODAL_STATE.REMOVE_TAG
 				| typeof MODAL_STATE.EDIT_CANVAS
 				| typeof MODAL_STATE.REMOVE_CANVAS
-				| typeof MODAL_STATE.SHARE_CANVAS_BY_ID;
+				| typeof MODAL_STATE.SHARE_CANVAS_BY_ID
+				| typeof MODAL_STATE.EDIT_CANVAS_ACCESS;
 			params: ModalProps;
 	  }
 	| {