Replace react-toastify with notistack

pitang1965 · Jul 17, 2022 · a85ecb2 · a85ecb2
1 parent 0bc9189
commit a85ecb2
Show file tree

Hide file tree

Showing 8 changed files with 269 additions and 108 deletions.
diff --git a/package.json b/package.json
@@ -8,12 +8,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@material-ui/core": "^4.12.4",
     "@reach/visually-hidden": "^0.17.0",
     "@supabase/supabase-js": "^1.35.4",
+    "notistack": "^1.0.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.4.0",
-    "react-toastify": "^9.0.5"
+    "react-icons": "^4.4.0"
   },
   "devDependencies": {
     "@types/node": "^18.0.5",

diff --git a/src/App.tsx b/src/App.tsx
@@ -4,6 +4,7 @@ import { supabase } from './utils/supabaseClient';
 import Auth from './components/Auth';
 import Account from './components/Account';
 import { Session } from '@supabase/gotrue-js';
+import { SnackbarProvider } from 'notistack';
 
 function App() {
   const [session, setSession] = useState<Session | null>(null);
@@ -17,13 +18,15 @@ function App() {
   }, []);
 
   return (
-    <div className='container' style={{ padding: '50px 0 100px 0' }}>
-      {!session ? (
-        <Auth />
-      ) : (
-        <Account key={session?.user?.id} session={session} />
-      )}
-    </div>
+    <SnackbarProvider>
+      <div className='container' style={{ padding: '50px 0 100px 0' }}>
+        {!session ? (
+          <Auth />
+        ) : (
+          <Account key={session?.user?.id} session={session} />
+        )}
+      </div>
+    </SnackbarProvider>
   );
 }
 

diff --git a/src/components/Account.tsx b/src/components/Account.tsx
@@ -1,7 +1,8 @@
 import { useState, useEffect } from 'react';
 import { supabase } from '../utils/supabaseClient';
 import { Session } from '@supabase/gotrue-js';
-import { alertApiError, NotifyContainer } from '../utils/notify';
+import { useSnackbar } from 'notistack';
+import type { SnackbarMessage } from 'notistack';
 import Avatar from './Avatar';
 import Todos from './Todos';
 
@@ -14,6 +15,7 @@ export default function Account({ session }: Props) {
   const [username, setUsername] = useState<any>(null);
   const [website, setWebsite] = useState<any>(null);
   const [avatar_url, setAvatarUrl] = useState<any>(null);
+  const { enqueueSnackbar } = useSnackbar();
 
   useEffect(() => {
     getProfile();
@@ -40,7 +42,7 @@ export default function Account({ session }: Props) {
         setAvatarUrl(data.avatar_url);
       }
     } catch (error) {
-      alertApiError(error);
+      enqueueSnackbar(error as SnackbarMessage, { variant: 'error' });
     } finally {
       setLoading(false);
     }
@@ -75,7 +77,7 @@ export default function Account({ session }: Props) {
         throw error;
       }
     } catch (error) {
-      alertApiError(error);
+      enqueueSnackbar(error as SnackbarMessage, { variant: 'error' });
     } finally {
       setLoading(false);
     }
@@ -129,7 +131,6 @@ export default function Account({ session }: Props) {
         </button>
       </div>
       <Todos session={session} />
-      <NotifyContainer />
     </div>
   );
 }
diff --git a/src/components/Auth.tsx b/src/components/Auth.tsx
@@ -1,19 +1,24 @@
 import { useState } from 'react';
 import { supabase } from '../utils/supabaseClient';
-import { alertApiError, notifyInfo, NotifyContainer } from '../utils/notify';
+import { useSnackbar } from 'notistack';
 
 export default function Auth() {
   const [loading, setLoading] = useState(false);
   const [email, setEmail] = useState('');
+  const { enqueueSnackbar } = useSnackbar();
 
   const handleLogin = async (email: string) => {
     try {
       setLoading(true);
       const { error } = await supabase.auth.signIn({ email });
       if (error) throw error;
-      notifyInfo('リンクのためのメールをご確認ください。');
+      enqueueSnackbar('リンクのためのメールをご確認ください。', {
+        variant: 'info',
+      });
     } catch (error: any) {
-      alertApiError(error.error_description || error.message);
+      enqueueSnackbar(error.error_description || error.message, {
+        variant: 'error',
+      });
     } finally {
       setLoading(false);
     }
@@ -46,7 +51,6 @@ export default function Auth() {
           </button>
         </div>
       </div>
-      <NotifyContainer />
     </div>
   );
 }
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 import { supabase } from '../utils/supabaseClient';
 import VisuallyHidden from '@reach/visually-hidden';
-import { alertApiError, NotifyContainer } from '../utils/notify';
+import { useSnackbar } from 'notistack';
+import type { SnackbarMessage } from 'notistack';
 
 export default function Avatar({
   url,
@@ -14,6 +15,7 @@ export default function Avatar({
 }) {
   const [avatarUrl, setAvatarUrl] = useState<any>(null);
   const [uploading, setUploading] = useState(false);
+  const { enqueueSnackbar } = useSnackbar();
 
   useEffect(() => {
     if (url) downloadImage(url);
@@ -32,7 +34,7 @@ export default function Avatar({
         setAvatarUrl(url);
       }
     } catch (error) {
-      alertApiError(error);
+      enqueueSnackbar(error as SnackbarMessage, { variant: 'error' });
     }
   };
 
@@ -59,7 +61,7 @@ export default function Avatar({
 
       onUpload(filePath);
     } catch (error) {
-      alertApiError(error);
+      enqueueSnackbar(error as SnackbarMessage, { variant: 'error' });
     } finally {
       setUploading(false);
     }
@@ -91,7 +93,6 @@ export default function Avatar({
           </VisuallyHidden>
         </>
       )}
-      <NotifyContainer />
     </div>
   );
 }
diff --git a/src/components/Todos.tsx b/src/components/Todos.tsx
@@ -1,7 +1,8 @@
 import { useState, useEffect } from 'react';
 import { supabase } from '../utils/supabaseClient';
 import { Session } from '@supabase/gotrue-js';
-import { alertApiError, NotifyContainer, notifyWarning } from '../utils/notify';
+import { useSnackbar } from 'notistack';
+import type { SnackbarMessage } from 'notistack';
 import TodoCard from './TodoCard';
 import type { Todo } from './TodoCard';
 
@@ -13,6 +14,7 @@ export default function Todos({ session }: Props) {
   const [loading, setLoading] = useState(true);
   const [todos, setTodos] = useState<Todo[]>([]);
   const [newTask, setNewTask] = useState('');
+  const { enqueueSnackbar } = useSnackbar();
 
   useEffect(() => {
     getTodos();
@@ -36,7 +38,7 @@ export default function Todos({ session }: Props) {
       }
       setTodos(newTodos);
     } catch (error) {
-      alertApiError(error);
+      enqueueSnackbar(error as SnackbarMessage, { variant: 'error' });
     } finally {
       setLoading(false);
     }
@@ -70,7 +72,7 @@ export default function Todos({ session }: Props) {
         setTodos(newTodos);
       }
     } catch (error) {
-      alertApiError(error);
+      enqueueSnackbar(error as SnackbarMessage, { variant: 'error' });
     } finally {
       setLoading(false);
     }
@@ -93,7 +95,7 @@ export default function Todos({ session }: Props) {
       }
       setTodos(data);
     } catch (error) {
-      alertApiError(error);
+      enqueueSnackbar(error as SnackbarMessage, { variant: 'error' });
     } finally {
       setLoading(false);
     }
@@ -104,7 +106,7 @@ export default function Todos({ session }: Props) {
       return;
     }
     if (newTask.length <= 3) {
-      notifyWarning('4文字以上にしてください。')
+      enqueueSnackbar('4文字以上にしてください。', { variant: 'warning' });
       return;
     }
     try {
@@ -116,7 +118,7 @@ export default function Todos({ session }: Props) {
       setTodos([...todos, data!]);
       setNewTask('');
     } catch (error) {
-      alertApiError(error);
+      enqueueSnackbar(error as SnackbarMessage, { variant: 'error' });
     } finally {
       setLoading(false);
     }
@@ -153,7 +155,6 @@ export default function Todos({ session }: Props) {
             />
           ))}
       </ol>
-      <NotifyContainer />
     </>
   );
 }
diff --git a/src/utils/notify.tsx b/src/utils/notify.tsx