fix: mutation of states (#256)

* feat: label grouping, fix: new states response

* fix: mutation of states
This commit is contained in:
Aaryan Khandelwal 2023-02-08 23:58:17 +05:30 committed by GitHub
parent bd399d6d1a
commit 8e3541b947
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 9 additions and 29 deletions

View File

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

View File

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

View File

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

View File

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

View File

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