From 998dc1bbae8b24cc02f84827c0b90547e9bb6be7 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Thu, 21 Sep 2023 02:23:27 +0530
Subject: [PATCH] fix: delete option mutation

---
 .../select-attribute/option-form.tsx          |  2 +-
 .../select-attribute/select-option.tsx        |  2 +-
 web/store/custom-attributes.ts                | 26 +++++++++----------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/web/components/custom-attributes/attribute-forms/select-attribute/option-form.tsx b/web/components/custom-attributes/attribute-forms/select-attribute/option-form.tsx
index 9af10d269..5aa2c839a 100644
--- a/web/components/custom-attributes/attribute-forms/select-attribute/option-form.tsx
+++ b/web/components/custom-attributes/attribute-forms/select-attribute/option-form.tsx
@@ -92,7 +92,7 @@ export const OptionForm: React.FC<Props> = observer((props) => {
       <div className="bg-custom-background-100 rounded border border-custom-border-200 flex items-center gap-2 px-3 py-2 flex-grow">
         <input
           type="text"
-          className="flex-grow border-none outline-none placeholder:text-custom-text-400 text-xs"
+          className="flex-grow border-none outline-none placeholder:text-custom-text-400 text-xs bg-transparent"
           value={option.display_name}
           onChange={(e) => setOption((prev) => ({ ...prev, display_name: e.target.value }))}
           placeholder="Enter new option"
diff --git a/web/components/custom-attributes/attribute-forms/select-attribute/select-option.tsx b/web/components/custom-attributes/attribute-forms/select-attribute/select-option.tsx
index a41dffbb8..91cf58ce8 100644
--- a/web/components/custom-attributes/attribute-forms/select-attribute/select-option.tsx
+++ b/web/components/custom-attributes/attribute-forms/select-attribute/select-option.tsx
@@ -57,7 +57,7 @@ export const SelectOption: React.FC<Props> = observer((props) => {
       </button> */}
         <Tooltip tooltipContent={option.display_name}>
           <p
-            className="text-custom-text-300 text-xs p-1 rounded inline truncate"
+            className="text-custom-text-200 text-xs p-1 rounded inline truncate"
             style={{
               backgroundColor: `${option.color}40`,
             }}
diff --git a/web/store/custom-attributes.ts b/web/store/custom-attributes.ts
index 3c957de66..77054d580 100644
--- a/web/store/custom-attributes.ts
+++ b/web/store/custom-attributes.ts
@@ -64,13 +64,13 @@ class CustomAttributesStore {
     }
   };
 
-  fetchObjectDetails = async (workspaceSlug: string, propertyId: string) => {
+  fetchObjectDetails = async (workspaceSlug: string, objectId: string) => {
     try {
       runInAction(() => {
         this.fetchObjectDetailsLoader = true;
       });
 
-      const response = await customAttributesService.getPropertyDetails(workspaceSlug, propertyId);
+      const response = await customAttributesService.getPropertyDetails(workspaceSlug, objectId);
 
       const objectChildren: { [key: string]: ICustomAttribute } = response.children.reduce(
         (acc, child) => ({
@@ -83,7 +83,7 @@ class CustomAttributesStore {
       runInAction(() => {
         this.objectAttributes = {
           ...this.objectAttributes,
-          [propertyId]: objectChildren,
+          [objectId]: objectChildren,
         };
         this.fetchObjectDetailsLoader = false;
       });
@@ -137,11 +137,11 @@ class CustomAttributesStore {
     }
   };
 
-  deleteObject = async (workspaceSlug: string, propertyId: string) => {
+  deleteObject = async (workspaceSlug: string, objectId: string) => {
     try {
-      await customAttributesService.deleteProperty(workspaceSlug, propertyId);
+      await customAttributesService.deleteProperty(workspaceSlug, objectId);
 
-      const newObjects = this.objects?.filter((object) => object.id !== propertyId);
+      const newObjects = this.objects?.filter((object) => object.id !== objectId);
 
       runInAction(() => {
         this.objects = [...(newObjects ?? [])];
@@ -309,13 +309,11 @@ class CustomAttributesStore {
     parentId: string,
     propertyId: string
   ) => {
+    const newOptions = this.objectAttributes[objectId][parentId].children.filter(
+      (option) => option.id !== propertyId
+    );
+
     try {
-      const response = await customAttributesService.deleteProperty(workspaceSlug, propertyId);
-
-      const newOptions = this.objectAttributes[objectId][parentId].children.filter(
-        (option) => option.id !== propertyId
-      );
-
       runInAction(() => {
         this.objectAttributes = {
           ...this.objectAttributes,
@@ -329,11 +327,13 @@ class CustomAttributesStore {
         };
       });
 
-      return response;
+      await customAttributesService.deleteProperty(workspaceSlug, propertyId);
     } catch (error) {
       runInAction(() => {
         this.error = error;
       });
+
+      this.fetchObjectDetails(workspaceSlug, objectId);
     }
   };
 }