From 2df5037fcdc6d163dd6244cca4eb89a7572ea948 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 10 Feb 2023 19:19:29 +0530
Subject: [PATCH 1/3] fix: state reordering

---
 apps/app/components/states/single-state.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/app/components/states/single-state.tsx b/apps/app/components/states/single-state.tsx
index 5e9aff80c6c..59fb834e8ac 100644
--- a/apps/app/components/states/single-state.tsx
+++ b/apps/app/components/states/single-state.tsx
@@ -53,7 +53,8 @@ export const SingleState: React.FC<Props> = ({
 
   const { setToastAlert } = useToast();
 
-  const groupLength = statesList.filter((s) => s.group === currentGroup).length;
+  const groupStates = statesList.filter((s) => s.group === currentGroup);
+  const groupLength = groupStates.length;
 
   const handleMakeDefault = (stateId: string) => {
     setIsSubmitting(true);
@@ -116,11 +117,11 @@ export const SingleState: React.FC<Props> = ({
     let newSequence = 15000;
 
     if (direction === "up") {
-      if (index === 1) newSequence = statesList[0].sequence - 15000;
-      else newSequence = (statesList[index - 2].sequence + statesList[index - 1].sequence) / 2;
+      if (index === 1) newSequence = groupStates[0].sequence - 15000;
+      else newSequence = (groupStates[index - 2].sequence + groupStates[index - 1].sequence) / 2;
     } else {
-      if (index === groupLength - 2) newSequence = statesList[groupLength - 1].sequence + 15000;
-      else newSequence = (statesList[index + 2].sequence + statesList[index + 1].sequence) / 2;
+      if (index === groupLength - 2) newSequence = groupStates[groupLength - 1].sequence + 15000;
+      else newSequence = (groupStates[index + 2].sequence + groupStates[index + 1].sequence) / 2;
     }
 
     let newStatesList = statesList.map((s) => {
@@ -133,6 +134,7 @@ export const SingleState: React.FC<Props> = ({
       return s;
     });
     newStatesList = orderArrayBy(newStatesList, "sequence", "ascending");
+
     mutate(
       STATE_LIST(projectId as string),
       orderStateGroups(groupBy(newStatesList, "group")),

From c959ead7a80cf40a792b632b9e7982699f2007ff Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 10 Feb 2023 21:09:25 +0530
Subject: [PATCH 2/3] refactor: remove unnecessary argument

---
 apps/app/components/states/single-state.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/app/components/states/single-state.tsx b/apps/app/components/states/single-state.tsx
index 59fb834e8ac..d5739151d86 100644
--- a/apps/app/components/states/single-state.tsx
+++ b/apps/app/components/states/single-state.tsx
@@ -113,7 +113,7 @@ export const SingleState: React.FC<Props> = ({
         });
   };
 
-  const handleMove = (state: IState, index: number, direction: "up" | "down") => {
+  const handleMove = (state: IState, direction: "up" | "down") => {
     let newSequence = 15000;
 
     if (direction === "up") {
@@ -174,7 +174,7 @@ export const SingleState: React.FC<Props> = ({
           <button
             type="button"
             className="hidden group-hover:inline-block text-gray-400 hover:text-gray-900"
-            onClick={() => handleMove(state, index, "up")}
+            onClick={() => handleMove(state, "up")}
           >
             <ArrowUpIcon className="h-4 w-4" />
           </button>
@@ -183,7 +183,7 @@ export const SingleState: React.FC<Props> = ({
           <button
             type="button"
             className="hidden group-hover:inline-block text-gray-400 hover:text-gray-900"
-            onClick={() => handleMove(state, index, "down")}
+            onClick={() => handleMove(state, "down")}
           >
             <ArrowDownIcon className="h-4 w-4" />
           </button>

From b3430cdc61144cc7e4686953eac4e5bc0c1df7fe Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Sat, 11 Feb 2023 16:03:21 +0530
Subject: [PATCH 3/3] refactor: mutation after setting default

---
 apps/app/components/states/single-state.tsx   | 73 +++++++------------
 .../projects/[projectId]/settings/states.tsx  |  1 -
 2 files changed, 28 insertions(+), 46 deletions(-)

diff --git a/apps/app/components/states/single-state.tsx b/apps/app/components/states/single-state.tsx
index d5739151d86..2c0f4071e85 100644
--- a/apps/app/components/states/single-state.tsx
+++ b/apps/app/components/states/single-state.tsx
@@ -6,8 +6,6 @@ import { mutate } from "swr";
 
 // services
 import stateService from "services/state.service";
-// hooks
-import useToast from "hooks/use-toast";
 // ui
 import { Tooltip } from "components/ui";
 // icons
@@ -29,7 +27,6 @@ import { STATE_LIST } from "constants/fetch-keys";
 
 type Props = {
   index: number;
-  currentGroup: string;
   state: IState;
   statesList: IState[];
   activeGroup: StateGroup;
@@ -39,7 +36,6 @@ type Props = {
 
 export const SingleState: React.FC<Props> = ({
   index,
-  currentGroup,
   state,
   statesList,
   activeGroup,
@@ -51,16 +47,26 @@ export const SingleState: React.FC<Props> = ({
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { setToastAlert } = useToast();
-
-  const groupStates = statesList.filter((s) => s.group === currentGroup);
+  const groupStates = statesList.filter((s) => s.group === state.group);
   const groupLength = groupStates.length;
 
-  const handleMakeDefault = (stateId: string) => {
+  const handleMakeDefault = () => {
     setIsSubmitting(true);
 
     const currentDefaultState = statesList.find((s) => s.default);
 
+    let newStatesList = statesList.map((s) => ({
+      ...s,
+      default: s.id === state.id ? true : s.id === currentDefaultState?.id ? false : s.default,
+    }));
+    newStatesList = orderArrayBy(newStatesList, "sequence", "ascending");
+
+    mutate(
+      STATE_LIST(projectId as string),
+      orderStateGroups(groupBy(newStatesList, "group")),
+      false
+    );
+
     if (currentDefaultState)
       stateService
         .patchState(workspaceSlug as string, projectId as string, currentDefaultState?.id ?? "", {
@@ -68,47 +74,27 @@ export const SingleState: React.FC<Props> = ({
         })
         .then(() => {
           stateService
-            .patchState(workspaceSlug as string, projectId as string, stateId, {
+            .patchState(workspaceSlug as string, projectId as string, state.id, {
               default: true,
             })
-            .then((res) => {
+            .then(() => {
               mutate(STATE_LIST(projectId as string));
-              setToastAlert({
-                type: "success",
-                title: "Successful",
-                message: `${res.name} state set to default successfuly.`,
-              });
               setIsSubmitting(false);
             })
-            .catch((err) => {
-              setToastAlert({
-                type: "error",
-                title: "Error",
-                message: "Error in setting the state to default.",
-              });
+            .catch(() => {
               setIsSubmitting(false);
             });
         });
     else
       stateService
-        .patchState(workspaceSlug as string, projectId as string, stateId, {
+        .patchState(workspaceSlug as string, projectId as string, state.id, {
           default: true,
         })
-        .then((res) => {
+        .then(() => {
           mutate(STATE_LIST(projectId as string));
-          setToastAlert({
-            type: "success",
-            title: "Successful",
-            message: `${res.name} state set to default successfuly.`,
-          });
           setIsSubmitting(false);
         })
         .catch(() => {
-          setToastAlert({
-            type: "error",
-            title: "Error",
-            message: "Error in setting the state to default.",
-          });
           setIsSubmitting(false);
         });
   };
@@ -124,15 +110,10 @@ export const SingleState: React.FC<Props> = ({
       else newSequence = (groupStates[index + 2].sequence + groupStates[index + 1].sequence) / 2;
     }
 
-    let newStatesList = statesList.map((s) => {
-      if (s.id === state.id)
-        return {
-          ...s,
-          sequence: newSequence,
-        };
-
-      return s;
-    });
+    let newStatesList = statesList.map((s) => ({
+      ...s,
+      sequence: s.id === state.id ? newSequence : s.sequence,
+    }));
     newStatesList = orderArrayBy(newStatesList, "sequence", "ascending");
 
     mutate(
@@ -157,7 +138,7 @@ export const SingleState: React.FC<Props> = ({
   return (
     <div
       className={`group flex items-center justify-between gap-2 border-b bg-gray-50 p-3 ${
-        activeGroup !== currentGroup ? "last:border-0" : ""
+        activeGroup !== state.group ? "last:border-0" : ""
       }`}
     >
       <div className="flex items-center gap-2">
@@ -167,7 +148,9 @@ export const SingleState: React.FC<Props> = ({
             backgroundColor: state.color,
           }}
         />
-        <h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
+        <h6 className="text-sm">
+          {addSpaceIfCamelCase(state.name)} {state.sequence}
+        </h6>
       </div>
       <div className="flex items-center gap-2">
         {index !== 0 && (
@@ -194,7 +177,7 @@ export const SingleState: React.FC<Props> = ({
           <button
             type="button"
             className="hidden group-hover:inline-block text-xs text-gray-400 hover:text-gray-900"
-            onClick={() => handleMakeDefault(state.id)}
+            onClick={handleMakeDefault}
             disabled={isSubmitting}
           >
             Set as default
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 4cec9379e71..f5cd0f37ecf 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -115,7 +115,6 @@ const StatesSettings: NextPage<UserAuth> = (props) => {
                             <SingleState
                               key={state.id}
                               index={index}
-                              currentGroup={key}
                               state={state}
                               statesList={statesList}
                               activeGroup={activeGroup}