chore(ui): add missing toasts (#20)

* chore: add toast for token expiry * including a timeout before redirecting * chore: add toasts for `project` components * chore: cleanup * chore: add toasts for `ProjectData` components
HarshPatel5940 · May 3, 2024 · 5502f8f · 5502f8f
1 parent 593998c
commit 5502f8f
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 13 deletions.
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -23,7 +23,6 @@ interface NavbarProps {
 }
 
 export default function MyNavbar({ projectName }: NavbarProps) {
-  // TODO: Try using the new reditect() from react-router-dom
   const navigate = useNavigate();
   const [token] = useState<string | null>(parseCookies().userToken || null);
 

diff --git a/src/components/projectData/AddImageDialog.tsx b/src/components/projectData/AddImageDialog.tsx
@@ -68,6 +68,7 @@ export default function CreateProjectDataDialog({
     }
 
     if (!image) return;
+    const toastId = toast.info('Uploading Data...');
 
     let res: AxiosResponse;
 
@@ -91,6 +92,11 @@ export default function CreateProjectDataDialog({
         toast.warning(`Unexpected Response Code - ${res.status}`);
         return;
       }
+      const data = res.data;
+
+      data.key = res.data.title;
+
+      setProjectData(prev => [...prev, data]);
     } catch (error) {
       if (error instanceof AxiosError) {
         if (error.response?.status === 400) {
@@ -112,13 +118,11 @@ export default function CreateProjectDataDialog({
       setLoading(false);
       return;
     }
-    const data = res.data;
-
-    data.key = res.data.title;
 
-    setProjectData(prev => [...prev, data]);
     setLoading(false);
     setOpen(false);
+    toast.success('Data Added Successfully');
+    toast.dismiss(toastId);
     return;
   };
 

diff --git a/src/components/projectData/DeleteImageDialog.tsx b/src/components/projectData/DeleteImageDialog.tsx
@@ -58,6 +58,7 @@ export default function DeleteProjectDataDialog({
         ?.classList.add(...['border-red-500', 'border-2']);
       return;
     }
+    const toastId = toast.loading('Deleting Project Data...');
 
     try {
       const res = await server.delete(
@@ -94,6 +95,8 @@ export default function DeleteProjectDataDialog({
 
     setLoading(false);
     setOpen(false);
+    toast.success('Project Data Deleted Successfully');
+    toast.dismiss(toastId);
     return;
   };
 

diff --git a/src/components/projectData/UpdateProjectDataDialog.tsx b/src/components/projectData/UpdateProjectDataDialog.tsx
@@ -57,7 +57,7 @@ export default function UpdateProjectDataDialog({
         ?.classList.add(...['border-red-500', 'border-2']);
       return;
     }
-
+    const toastId = toast.loading('Updating Image Data...');
     let res: AxiosResponse;
 
     try {
@@ -116,6 +116,9 @@ export default function UpdateProjectDataDialog({
     }
 
     setOpen(false);
+    toast.success('Image Data Updated Successfully');
+    toast.dismiss(toastId);
+
     return;
   };
 

diff --git a/src/components/projects/CreateProjectDialog.tsx b/src/components/projects/CreateProjectDialog.tsx
@@ -54,6 +54,7 @@ export default function CreateProjectDialog({
     }
 
     try {
+      const toastId = toast.loading('Creating Project...');
       const res = await server.post(
         '/api/project/new',
         {
@@ -74,6 +75,10 @@ export default function CreateProjectDialog({
       const data = res.data;
       data.ProjectData = [];
       setProjects(prev => [...prev, data]);
+      toast.success('Project Created Successfully', {
+        description: `Project Name: ${projectName}`,
+      });
+      toast.dismiss(toastId);
     } catch (error) {
       if (error instanceof AxiosError) {
         if (error.response?.status === 400) {

diff --git a/src/components/projects/DeleteProjectDialog.tsx b/src/components/projects/DeleteProjectDialog.tsx
@@ -46,6 +46,7 @@ export default function DeleteProjectDialog({
 
   const handleSubmit = async () => {
     setLoading(true);
+    const toastId = toast.loading('Deleting Project...');
     if (deleteText !== 'delete') {
       setLoading(false);
       toast.warning('Please write "delete" to confirm');
@@ -72,6 +73,8 @@ export default function DeleteProjectDialog({
       setProjects?.(prev =>
         prev.filter((project: Project) => project.slug !== projectSlug)
       );
+      toast.success('Project Deleted Successfully');
+      toast.dismiss(toastId);
     } catch (error) {
       if (error instanceof AxiosError) {
         if (error.response?.status === 400) {

diff --git a/src/components/projects/TokenResetDialog.tsx b/src/components/projects/TokenResetDialog.tsx
@@ -46,7 +46,6 @@ export default function ResetProjectToken({
 
     if (deleteText !== 'confirm') {
       setLoading(false);
-      toast.warning('Please write "confirm" to confirm');
       document.getElementById('projectName')?.focus();
       document
         .getElementById('projectName')
@@ -55,6 +54,7 @@ export default function ResetProjectToken({
     }
 
     try {
+      const toastId = toast.warning('Please write "confirm" to confirm');
       const res = await server.post(
         `/api/project/${projectSlug}/token`,
         {},
@@ -73,6 +73,8 @@ export default function ResetProjectToken({
 
       const data = res.data.projectToken;
       setProjectToken(data);
+      toast.success('Token Reset Successfully');
+      toast.dismiss(toastId);
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error) {

diff --git a/src/pages/project/manageProject.tsx b/src/pages/project/manageProject.tsx
@@ -158,8 +158,12 @@ export default function ManageProjectsPage() {
       if (error instanceof AxiosError) {
         if (error.response?.status === 400) {
           destroyCookie(null, 'userToken');
-          navigate('/login');
-          toast.warning('Please Login to Continue');
+
+          toast.warning('Token Expired. Logging Out!');
+          setTimeout(() => {
+            navigate('/login');
+          }, 3000);
+
           return;
         }
         if (error.response?.status === 401) {

diff --git a/src/pages/project/manageProjectData.tsx b/src/pages/project/manageProjectData.tsx
@@ -74,8 +74,10 @@ export default function ManageProjectDataPage() {
       if (error instanceof AxiosError) {
         if (error.response?.status === 400) {
           destroyCookie(null, 'userToken');
-          navigate('/login');
-          toast.warning('Please Login to Continue');
+          toast.warning('Token Expired. Logging Out!');
+          setTimeout(() => {
+            navigate('/login');
+          }, 3000);
           return;
         }
         if (error.response?.status === 401) {

diff --git a/src/pages/project/projectsPage.tsx b/src/pages/project/projectsPage.tsx
@@ -78,8 +78,10 @@ export default function DashboardPage() {
       if (error instanceof AxiosError) {
         if (error.response?.status === 400) {
           destroyCookie(null, 'userToken');
-          navigate('/login');
-          toast.warning('Please Login to Continue');
+          toast.warning('Token Expired. Logging Out!');
+          setTimeout(() => {
+            navigate('/login');
+          }, 3000);
           return;
         }
         if (error.response?.status === 401) {