From 4b46944440b3286e306c1fb814f0d08673c54ac1 Mon Sep 17 00:00:00 2001
From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com>
Date: Wed, 29 May 2024 21:34:59 +0900
Subject: [PATCH] Create toast provider

---
 frontend/styles/globals.css      | 5 +++++
 frontend/utils/ToastProvider.tsx | 8 ++++++--
 frontend/utils/TokenProvider.tsx | 4 ++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css
index b5c61c9..aec6ee6 100644
--- a/frontend/styles/globals.css
+++ b/frontend/styles/globals.css
@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* TODO Temporary use until NextUI's Toast is released. */
+.Toastify__toast-body {
+  font-family: 'systems-ui';
+}
diff --git a/frontend/utils/ToastProvider.tsx b/frontend/utils/ToastProvider.tsx
index c5ba500..4d49ea2 100644
--- a/frontend/utils/ToastProvider.tsx
+++ b/frontend/utils/ToastProvider.tsx
@@ -12,7 +12,11 @@ const ToastContext = createContext<ToastContextType>(defaultContext);
 
 const ToastProvider = ({ children }: ToastProps) => {
   const showToast = (text: string, mode: string) => {
-    toast(text, { theme: 'light' });
+    if (mode === 'error') {
+      toast.error(text);
+    } else {
+      toast(text, { theme: 'light' });
+    }
   };
 
   const toastContext = {
@@ -21,7 +25,7 @@ const ToastProvider = ({ children }: ToastProps) => {
 
   return (
     <ToastContext.Provider value={toastContext}>
-      <ToastContainer hideProgressBar={true} />
+      <ToastContainer position="bottom-right" hideProgressBar={true} theme="colored" />
       {children}
     </ToastContext.Provider>
   );
diff --git a/frontend/utils/TokenProvider.tsx b/frontend/utils/TokenProvider.tsx
index 8fa21ef..7892007 100644
--- a/frontend/utils/TokenProvider.tsx
+++ b/frontend/utils/TokenProvider.tsx
@@ -111,12 +111,12 @@ const TokenProvider = ({ toastMessages, locale, children }: TokenProps) => {
       }
       if (isPrivatePath(pathname) && !isSignedIn()) {
         if (tokenExists()) {
-          toastContext.showToast(toastMessages.needSignedIn, 'default');
+          toastContext.showToast(toastMessages.needSignedIn, 'error');
           router.push(`/account/signin`, { locale: locale });
           return;
         }
         if (isTokenValid()) {
-          toastContext.showToast(toastMessages.sessionExpired, 'default');
+          toastContext.showToast(toastMessages.sessionExpired, 'error');
           router.push(`/account/signin`, { locale: locale });
           return;
         }