fix: state reordering (#269)

* fix: state reordering

* refactor: remove unnecessary argument

* refactor: mutation after setting default

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,15 +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 === state.group);
+  const groupLength = groupStates.length;
 
-  const groupLength = statesList.filter((s) => s.group === currentGroup).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 ?? "", {
@@ -67,72 +74,48 @@ 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);
         });
   };
 
-  const handleMove = (state: IState, index: number, direction: "up" | "down") => {
+  const handleMove = (state: IState, direction: "up" | "down") => {
     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) => {
-      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(
       STATE_LIST(projectId as string),
       orderStateGroups(groupBy(newStatesList, "group")),
@@ -155,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">
@@ -165,14 +148,16 @@ 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 && (
           <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>
@@ -181,7 +166,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>
@@ -192,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

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}