From 4a67afdd3a76a4a70951b06c52fed22304611650 Mon Sep 17 00:00:00 2001
From: Ridham Khandar <ridhamk.j@gmail.com>
Date: Sun, 10 Aug 2025 01:05:29 +0530
Subject: [PATCH] fix: add new created label to selected label (#136)

---
 .../components/DeleteLabelConfirmation.tsx    |  8 +++--
 apps/web/src/components/LabelForm.tsx         |  6 ++--
 apps/web/src/providers/modal.tsx              | 15 +++++++++
 .../views/board/components/NewCardForm.tsx    | 31 ++++++++++++++++++-
 4 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/DeleteLabelConfirmation.tsx b/apps/web/src/components/DeleteLabelConfirmation.tsx
index 95bfd242..29a5c288 100644
--- a/apps/web/src/components/DeleteLabelConfirmation.tsx
+++ b/apps/web/src/components/DeleteLabelConfirmation.tsx
@@ -12,11 +12,14 @@ export function DeleteLabelConfirmation({
   labelPublicId: string;
   refetch: () => void;
 }) {
-  const { closeModal } = useModal();
+  const { closeModal, closeModals } = useModal();
   const { showPopup } = usePopup();
 
   const deleteLabelMutation = api.label.delete.useMutation({
-    onSuccess: () => refetch(),
+    onSuccess: () => {
+      refetch();
+      closeModals(2);
+    },
     onError: () =>
       showPopup({
         header: t`Error deleting label`,
@@ -26,7 +29,6 @@ export function DeleteLabelConfirmation({
   });
 
   const handleDeleteLabel = () => {
-    closeModal();
     deleteLabelMutation.mutate({
       labelPublicId,
     });
diff --git a/apps/web/src/components/LabelForm.tsx b/apps/web/src/components/LabelForm.tsx
index e2539955..780bb07f 100644
--- a/apps/web/src/components/LabelForm.tsx
+++ b/apps/web/src/components/LabelForm.tsx
@@ -32,7 +32,7 @@ export function LabelForm({
   refetch: () => void;
   isEdit?: boolean;
 }) {
-  const { closeModal, entityId, openModal } = useModal();
+  const { closeModal, entityId, openModal, setModalState } = useModal();
 
   const label = api.label.byPublicId.useQuery(
     {
@@ -57,12 +57,13 @@ export function LabelForm({
   const isCreateAnotherEnabled = watch("isCreateAnotherEnabled");
 
   const createLabel = api.label.create.useMutation({
-    onSuccess: () => {
+    onSuccess: (newLabel) => {
       const currentColourIndex = colours.findIndex(
         (c) => c.code === watch("colour").code,
       );
       try {
         refetch();
+        setModalState("NEW_LABEL_CREATED", newLabel.publicId);
         if (!isCreateAnotherEnabled) {
           closeModal();
         } else {
@@ -220,6 +221,7 @@ export function LabelForm({
         <div className="space-x-2">
           {isEdit && (
             <Button
+              type="button"
               variant="secondary"
               onClick={() => openModal("DELETE_LABEL", entityId)}
             >
diff --git a/apps/web/src/providers/modal.tsx b/apps/web/src/providers/modal.tsx
index d41ffdaf..712cf7da 100644
--- a/apps/web/src/providers/modal.tsx
+++ b/apps/web/src/providers/modal.tsx
@@ -18,6 +18,8 @@ type ModalContextType = {
     entityLabel?: string,
   ) => void;
   closeModal: () => void;
+  closeModals: (count: number) => void;
+  clearAllModals: () => void;
   modalContentType: string;
   entityId: string;
   entityLabel: string;
@@ -58,6 +60,17 @@ export const ModalProvider: React.FC<Props> = ({ children }) => {
     });
   };
 
+  const closeModals = (count: number) => {
+    setModalStack(prev => {
+      const newLength = Math.max(0, prev.length - count);
+      return prev.slice(0, newLength);
+    });
+  };
+
+  const clearAllModals = () => {
+    setModalStack([]);
+  };
+
   const setModalState = (modalType: string, state: any) => {
     setModalStates(prev => ({
       ...prev,
@@ -87,6 +100,8 @@ export const ModalProvider: React.FC<Props> = ({ children }) => {
         isOpen,
         openModal,
         closeModal,
+        closeModals,
+        clearAllModals,
         modalContentType,
         entityId,
         entityLabel,
diff --git a/apps/web/src/views/board/components/NewCardForm.tsx b/apps/web/src/views/board/components/NewCardForm.tsx
index ae5240ed..9600b8a0 100644
--- a/apps/web/src/views/board/components/NewCardForm.tsx
+++ b/apps/web/src/views/board/components/NewCardForm.tsx
@@ -46,7 +46,7 @@ export function NewCardForm({
   queryParams,
 }: NewCardFormProps) {
   const { showPopup } = usePopup();
-  const { closeModal, openModal } = useModal();
+  const { closeModal, openModal, modalStates, clearModalState } = useModal();
 
   const utils = api.useUtils();
 
@@ -85,10 +85,39 @@ export function NewCardForm({
     return () => subscription.unsubscribe();
   }, [watch, saveFormState]);
 
+  
   const { data: boardData } = api.board.byId.useQuery(queryParams, {
     enabled: !!boardPublicId,
   });
 
+  // this adds the new created label to selected labels
+  useEffect(() => {
+    const newLabelId = modalStates["NEW_LABEL_CREATED"];
+    if (newLabelId !== undefined && !labelPublicIds.includes(newLabelId)) {
+      setValue("labelPublicIds", [...labelPublicIds, newLabelId]);
+    }
+  }, [modalStates, labelPublicIds]);
+
+  // this removes the deleted label from selected labels if it is selected
+  useEffect(() => {
+    if (boardData?.labels) {
+      const availableLabelIds = boardData.labels.map(label => label.publicId);
+      const newLabelId = modalStates["NEW_LABEL_CREATED"];
+    
+      if (newLabelId && availableLabelIds.includes(newLabelId)) {
+        clearModalState("NEW_LABEL_CREATED");
+      }
+      
+      const validLabelIds = labelPublicIds.filter(id => 
+        availableLabelIds.includes(id) || id === newLabelId
+      );
+      
+      if (validLabelIds.length !== labelPublicIds.length) {
+        setValue("labelPublicIds", validLabelIds);
+      }
+    }
+  }, [boardData?.labels, labelPublicIds, modalStates["NEW_LABEL_CREATED"]]);
+  
   const createCard = api.card.create.useMutation({
     onMutate: async (args) => {
       await utils.board.byId.cancel();