fix: mutation of states (#256)

* feat: label grouping, fix: new states response

* fix: mutation of states

apps/app/components/states/create-update-state-inline.tsx

@@ -15,7 +15,7 @@ import useToast from "hooks/use-toast";
 // ui
 import { Button, CustomSelect, Input } from "components/ui";
 // types
-import type { IState } from "types";
+import type { IState, StateResponse } from "types";
 // fetch-keys
 import { STATE_LIST } from "constants/fetch-keys";
 // constants
@@ -85,7 +85,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
       await stateService
         .createState(workspaceSlug, projectId, { ...payload })
         .then((res) => {
-          mutate<IState[]>(STATE_LIST(projectId), (prevData) => [...(prevData ?? []), res]);
+          mutate(STATE_LIST(projectId));
           handleClose();
 
           setToastAlert({

apps/app/components/states/create-update-state-modal.tsx

@@ -81,7 +81,7 @@ export const CreateUpdateStateModal: React.FC<Props> = ({
       await stateService
         .createState(workspaceSlug as string, projectId, payload)
         .then((res) => {
-          mutate<IState[]>(STATE_LIST(projectId), (prevData) => [...(prevData ?? []), res], false);
+          mutate(STATE_LIST(projectId));
           onClose();
         })
         .catch((err) => {
@@ -95,19 +95,7 @@ export const CreateUpdateStateModal: React.FC<Props> = ({
       await stateService
         .updateState(workspaceSlug as string, projectId, data.id, payload)
         .then((res) => {
-          mutate<IState[]>(
-            STATE_LIST(projectId),
-            (prevData) => {
-              const newData = prevData?.map((item) => {
-                if (item.id === res.id) {
-                  return res;
-                }
-                return item;
-              });
-              return newData;
-            },
-            false
-          );
+          mutate(STATE_LIST(projectId));
           onClose();
         })
         .catch((err) => {

apps/app/components/states/delete-state-modal.tsx

@@ -59,11 +59,7 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data }) =>
     await stateServices
       .deleteState(workspaceSlug as string, data.project, data.id)
       .then(() => {
-        mutate<IState[]>(
-          STATE_LIST(data.project),
-          (prevData) => prevData?.filter((state) => state.id !== data?.id),
-          false
-        );
+        mutate(STATE_LIST(data.project));
         handleClose();
 
         setToastAlert({

apps/app/helpers/state.helper.ts

@@ -9,10 +9,7 @@ export const orderStateGroups = (unorderedStateGroups: StateResponse) =>
 
 export const getStatesList = (stateGroups: any): IState[] => {
   // order the unordered state groups first
-  const orderedStateGroups = Object.assign(
-    { backlog: [], unstarted: [], started: [], completed: [], cancelled: [] },
-    stateGroups
-  );
+  const orderedStateGroups = orderStateGroups(stateGroups);
 
   // extract states from the groups and return them
   return Object.keys(orderedStateGroups)

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx

@@ -52,14 +52,13 @@ const StatesSettings: NextPage<UserAuth> = (props) => {
       : null
   );
   const orderedStateGroups = orderStateGroups(states ?? {});
-
-  const statesList = getStatesList(orderStateGroups ?? {});
+  const statesList = getStatesList(orderedStateGroups ?? {});
 
   return (
     <>
       <DeleteStateModal
         isOpen={!!selectDeleteState}
-        data={statesList?.find((state) => state.id === selectDeleteState) ?? null}
+        data={statesList?.find((s) => s.id === selectDeleteState) ?? null}
         onClose={() => setSelectDeleteState(null)}
       />
       <AppLayout
@@ -115,7 +114,7 @@ const StatesSettings: NextPage<UserAuth> = (props) => {
                             <div
                               key={state.id}
                               className={`flex items-center justify-between gap-2 border-b bg-gray-50 p-3 ${
-                                Boolean(activeGroup !== key) ? "last:border-0" : ""
+                                activeGroup !== key ? "last:border-0" : ""
                               }`}
                             >
                               <div className="flex items-center gap-2">