From 7947fb2a1391030c8623cbab71a233c81e69f590 Mon Sep 17 00:00:00 2001
From: tomtitherington <tom.titherington@gmail.com>
Date: Sat, 28 Oct 2023 15:48:11 +0100
Subject: [PATCH] Update Toast component to use custom container and improve
 styling

---
 frontend/src/App.tsx                          |  4 +-
 frontend/src/components/Toast/index.tsx       | 27 --------
 .../src/components/toasts/Toast/index.tsx     | 65 +++++++++++++++++++
 frontend/src/components/toasts/index.ts       |  2 +
 .../components/CreateProjectModal.tsx         |  5 +-
 .../projects/pages/ProjectSettings.tsx        |  6 +-
 6 files changed, 74 insertions(+), 35 deletions(-)
 delete mode 100644 frontend/src/components/Toast/index.tsx
 create mode 100644 frontend/src/components/toasts/Toast/index.tsx
 create mode 100644 frontend/src/components/toasts/index.ts

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4ffac16..761905a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 // import { setOpenApiBase } from 'api/configOpenApi';
 import Router from './routes';
 import { TokenContext } from 'api';
-import { Toaster } from 'react-hot-toast';
+import { ToastContainer } from 'components/toasts';
 
 function App() {
   const [accessToken, setAccessToken] = useState<string>('');
@@ -16,7 +16,7 @@ function App() {
   return (
     <TokenContext.Provider value={{ accessToken, setAccessToken, refreshToken, setRefreshToken }}>
       <Router />
-			<Toaster position="bottom-right" />
+      <ToastContainer />
     </TokenContext.Provider>
   );
 }
diff --git a/frontend/src/components/Toast/index.tsx b/frontend/src/components/Toast/index.tsx
deleted file mode 100644
index 53102ff..0000000
--- a/frontend/src/components/Toast/index.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { MdInfoOutline } from 'react-icons/md';
-import { resolveValue, Toast as RHToast } from 'react-hot-toast';
-
-interface ToastProps {
-  toast: RHToast;
-  customMessage?: string | null;
-}
-
-const Toast = ({ toast, customMessage = null }: ToastProps) => {
-  const message = customMessage != null ? customMessage : resolveValue(toast.message, toast);
-  return (
-    <div
-      className={`w-80 py-2 px-3 bg-green-600 rounded-lg shadow justify-center items-center gap-2 inline-flex ${
-        toast.visible ? 'animate-in' : 'animate-out'
-      }`}>
-      <div className="w-4 h-4 relative">
-        <MdInfoOutline className="text-white" />
-      </div>
-      <div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">
-        <p className="self-stretch text-white text-sm w-full">{message}</p>
-      </div>
-      <div className="text-center text-neutral-300 text-sm">Close</div>
-    </div>
-  );
-};
-
-export default Toast;
diff --git a/frontend/src/components/toasts/Toast/index.tsx b/frontend/src/components/toasts/Toast/index.tsx
new file mode 100644
index 0000000..4aae404
--- /dev/null
+++ b/frontend/src/components/toasts/Toast/index.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from 'react';
+import toast from 'react-hot-toast';
+import { MdInfoOutline } from 'react-icons/md';
+
+interface ToastProps {
+  id?: string;
+  message: string;
+  type?: 'info' | 'success' | 'error';
+  duration?: number;
+}
+
+const Toast = ({ id, message, type = 'info', duration = 4000 }: ToastProps) => {
+  const [progress, setProgress] = useState(100);
+  const intervalRef = useRef<number | null>(null);
+  const color = type == 'info' ? 'bg-radial-ultra-light' : type == 'success' ? 'bg-green-600' : 'bg-red-600';
+  const progressColor =
+    type == 'info' ? 'bg-gray-200' : type == 'success' ? 'bg-green-200' : 'bg-red-200';
+
+  const startProgress = () => {
+    if (!intervalRef.current) {
+      intervalRef.current = window.setInterval(() => {
+        setProgress(prev => Math.max(prev - 100 / (duration / 10), 0));
+      }, 10);
+    }
+  };
+
+  const stopProgress = () => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  };
+
+  useEffect(() => {
+    startProgress();
+    return stopProgress;
+  }, []);
+
+  return (
+    <div
+      onMouseEnter={stopProgress}
+      onMouseLeave={startProgress}
+      className="w-80 rounded flex-col justify-start items-start inline-flex">
+      <div className={`self-stretch h-1 rounded-t ${color}`}>
+        <div style={{ width: `${progress}%` }} className={`h-1 ${progressColor} `}></div>
+      </div>
+      <div
+        className={`w-full py-2 px-3 shadow justify-center items-center gap-2 inline-flex rounded-b ${color}`}>
+        <div className="w-4 h-4 relative">
+          <MdInfoOutline className="text-white" />
+        </div>
+        <div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">
+          <p className="self-stretch text-white text-sm w-full">{message}</p>
+        </div>
+        <button
+          className="text-center text-neutral-300 hover:text-neutral-200 text-sm"
+          onClick={() => toast.remove(id)}>
+          Close
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Toast;
diff --git a/frontend/src/components/toasts/index.ts b/frontend/src/components/toasts/index.ts
new file mode 100644
index 0000000..d4f76d5
--- /dev/null
+++ b/frontend/src/components/toasts/index.ts
@@ -0,0 +1,2 @@
+export {default as ToastContainer } from './ToastContainer';
+export {default as Toast } from './Toast';
\ No newline at end of file
diff --git a/frontend/src/features/projects/components/CreateProjectModal.tsx b/frontend/src/features/projects/components/CreateProjectModal.tsx
index 20d0b35..266d4b9 100644
--- a/frontend/src/features/projects/components/CreateProjectModal.tsx
+++ b/frontend/src/features/projects/components/CreateProjectModal.tsx
@@ -1,7 +1,7 @@
 import { Dialog, Transition } from '@headlessui/react';
 import EmphasisButton from 'components/buttons/EmphasisButton';
 import { TextInput } from 'components/inputs';
-import Toast from 'components/Toast';
+import Toast from 'components/toasts/Toast';
 import { Fragment } from 'react';
 import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
@@ -21,7 +21,8 @@ export const CreateProjectModal = ({ isOpen, onClose }: CreateProjectModalProps)
 
   const onSubmit = () => {
     close();
-    toast.custom(t => <Toast customMessage="Project created successfully" toast={t} />);
+    toast.success("Project created successfully");
+    //toast.custom(t => <Toast customMessage="Project created successfully" toast={t} />);
   };
 
   const { formik } = useCreateProject({ onSubmit: onSubmit });
diff --git a/frontend/src/features/projects/pages/ProjectSettings.tsx b/frontend/src/features/projects/pages/ProjectSettings.tsx
index 68732ec..5f440f4 100644
--- a/frontend/src/features/projects/pages/ProjectSettings.tsx
+++ b/frontend/src/features/projects/pages/ProjectSettings.tsx
@@ -8,7 +8,7 @@ import { useProjectsStore } from 'features/projects/stores/useProjectsStore';
 import { MdAdd } from 'react-icons/md';
 import useSettings from '../hooks/useProjectSettings';
 import toast from 'react-hot-toast';
-import Toast from 'components/Toast';
+import Toast from 'components/toasts/Toast';
 
 const headers = [
   { propertyName: 'email', displayName: 'Email' },
@@ -101,9 +101,7 @@ const Settings = () => {
                     className="self-start"
                     onClick={async () =>
                       await deleteProject(selectedProject.data.id?.toString() ?? '', () =>
-                        toast.custom(t => (
-                          <Toast toast={t} customMessage="Project deleted successfully" />
-                        )),
+                        toast.success('Project deleted successfully'),
                       )
                     }
                   />