Merge pull request #13 from Excali-Studio/exd-120

EXD-120 - Tag color field as optional
Excali-Studio · Sep 9, 2024 · 543844f · 543844f
2 parents 3d80a97 + 7699418
commit 543844f
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 27 deletions.
diff --git a/src/components/CreateOrModifyTagDialog.tsx b/src/components/CreateOrModifyTagDialog.tsx
@@ -27,10 +27,8 @@ import { useCreateOrModifyTag } from '@/hooks/useCreateOrModifyTag';
 import { useModalStore } from '@/store/modalStore';
 import { useTranslation } from 'react-i18next';
 
-type CurrentTagId = string | null;
-
 interface CreateOrModifyCanvasDialogProps {
-	currentTagId: CurrentTagId;
+	currentTagId?: string;
 }
 
 export default function CreateOrModifyTagDialog({
@@ -64,9 +62,7 @@ export default function CreateOrModifyTagDialog({
 			description: formValues.description || undefined,
 		};
 
-		currentTagId === 'new'
-			? createTagHandler(formData)
-			: updateTagHandler(formData);
+		currentTagId ? updateTagHandler(formData) : createTagHandler(formData);
 	}
 
 	return (

diff --git a/src/components/TagsManager.tsx b/src/components/TagsManager.tsx
@@ -10,35 +10,29 @@ import { useTranslation } from 'react-i18next';
 
 export default function TagsManager() {
 	const { t } = useTranslation();
-	const { openModal, modalState, resetState, modalProps } = useModalStore();
+	const { openModal, resetState, modalProps } = useModalStore();
 
 	return (
 		<>
 			<Toaster />
-			{(modalState === 'ADD_TAG' || modalState === 'EDIT_TAG') && (
-				<CreateOrModifyTagDialog
-					currentTagId={modalProps?.selectedId ?? null}
-				/>
-			)}
-
+			<CreateOrModifyTagDialog currentTagId={modalProps?.selectedId} />
 			<ContentWrapper pagePaths={['Dashboard', 'Tags Manager']}>
 				<Tabs defaultValue="all">
 					<div className="flex items-center">
 						<TabsList>
-							<TabsTrigger value="all">{t('tagsManager.all')}</TabsTrigger>
+							<TabsTrigger value="all">{t('components.tagsManager.all')}</TabsTrigger>
 						</TabsList>
 						<div className="ml-auto flex items-center gap-2">
 							<PrimaryActionButton
 								onClickHandler={() => {
 									resetState();
 									openModal({
 										modalState: 'ADD_TAG',
-										params: { selectedId: null },
 									});
 								}}
 								icon={<PlusCircle className="h-3.5 w-3.5" />}
 							>
-								{t('tagsManager.createButton')}
+								{t('components.tagsManager.createButton')}
 							</PrimaryActionButton>
 						</div>
 					</div>

diff --git a/src/hooks/useCreateOrModifyTag.ts b/src/hooks/useCreateOrModifyTag.ts
@@ -5,7 +5,7 @@ import { toast } from '@/components/ui/use-toast';
 import { useModalStore } from '@/store/modalStore';
 
 export function useCreateOrModifyTag(
-	currentTagId: string | null,
+	currentTagId: string | undefined,
 	resetForm: () => void
 ) {
 	const queryClient = useQueryClient();
@@ -14,7 +14,7 @@ export function useCreateOrModifyTag(
 	const { data: tagDetails } = useQuery({
 		queryKey: ['canvas-tag-details', currentTagId],
 		queryFn: () => ExcaliApi.getTagById(`${currentTagId}`),
-		enabled: Boolean(currentTagId) && currentTagId !== 'new',
+		enabled: !!currentTagId,
 	});
 
 	function onSuccess() {

diff --git a/src/schema/create-or-modify-tag.ts b/src/schema/create-or-modify-tag.ts
@@ -17,7 +17,7 @@ export const createOrModifyTagFormSchema = z.object({
 				number: 12,
 			}),
 		}),
-	color: z.string(),
+	color: z.string().optional(),
 	description: z.string().optional(),
 });
 

diff --git a/src/store/modalStore.ts b/src/store/modalStore.ts
@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { immer } from 'zustand/middleware/immer';
 
-type ModalProps = { selectedId: string | null } | undefined;
+type ModalProps = { selectedId: string } | undefined;
 
 interface ModalState {
 	isModalOpen: boolean;
@@ -29,13 +29,14 @@ const initialState = {
 	modalProps: undefined,
 };
 
-export type ModalPayload = {
-	modalState:
-		| typeof MODAL_STATE.ADD_TAG
-		| typeof MODAL_STATE.EDIT_TAG
-		| typeof MODAL_STATE.REMOVE_TAG;
-	params: ModalProps;
-};
+export type ModalPayload =
+	| {
+			modalState: typeof MODAL_STATE.EDIT_TAG | typeof MODAL_STATE.REMOVE_TAG;
+			params: ModalProps;
+	  }
+	| {
+			modalState: typeof MODAL_STATE.ADD_TAG;
+	  };
 
 const useModalStore = create<ModalState, [['zustand/immer', never]]>(
 	immer((set) => ({