[WEB-570] chore: toast refactor (#3836)

* new toast setup

* chore: new toast implementation.

* chore: move toast component to ui package.

* chore: replace `setToast` with `setPromiseToast` in required places for better UX.
* chore: code cleanup.

* chore: update theme.

* fix: theme switching issue.

* chore: remove toast from issue update operations.

* chore: add promise toast for add/ remove issue to cycle/ module and remove local spinners.

---------

Co-authored-by: rahulramesha <rahulramesham@gmail.com>
This commit is contained in:
Prateek Shourya 2024-03-06 14:18:41 +05:30 committed by GitHub
parent c06ef4d1d7
commit 53367a6bc4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
167 changed files with 1827 additions and 1896 deletions

View file

@ -6,9 +6,8 @@ import { Popover, Transition } from "@headlessui/react";
import { observer } from "mobx-react-lite";
// hooks
import { useEventTracker, useProjectState } from "hooks/store";
import useToast from "hooks/use-toast";
// ui
import { Button, CustomSelect, Input, Tooltip } from "@plane/ui";
import { Button, CustomSelect, Input, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
// types
import type { IState } from "@plane/types";
// constants
@ -39,8 +38,6 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
// store hooks
const { captureProjectStateEvent, setTrackElement } = useEventTracker();
const { createState, updateState } = useProjectState();
// toast alert
const { setToastAlert } = useToast();
// form info
const {
handleSubmit,
@ -82,8 +79,8 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
await createState(workspaceSlug.toString(), projectId.toString(), formData)
.then((res) => {
handleClose();
setToastAlert({
type: "success",
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success!",
message: "State created successfully.",
});
@ -98,14 +95,14 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
})
.catch((error) => {
if (error.status === 400)
setToastAlert({
type: "error",
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "State with that name already exists. Please try again with another name.",
});
else
setToastAlert({
type: "error",
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "State could not be created. Please try again.",
});
@ -135,22 +132,22 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
element: "Project settings states page",
},
});
setToastAlert({
type: "success",
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success!",
message: "State updated successfully.",
});
})
.catch((error) => {
if (error.status === 400)
setToastAlert({
type: "error",
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "Another state exists with the same name. Please try again with another name.",
});
else
setToastAlert({
type: "error",
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "State could not be updated. Please try again.",
});