Add notistack for query error

yorkie-team · Jan 23, 2024 · 5ed1efc · 5ed1efc
1 parent 75097d8
commit 5ed1efc
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 2 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -36,6 +36,7 @@
 		"color": "^4.2.3",
 		"lib0": "^0.2.88",
 		"moment": "^2.30.1",
+		"notistack": "^2.0.8",
 		"randomcolor": "^0.6.2",
 		"react": "^17.0.0 || ^18.0.0",
 		"react-dom": "^17.0.0 || ^18.0.0",

diff --git a/frontend/src/hooks/useErrorHandler.ts b/frontend/src/hooks/useErrorHandler.ts
@@ -1,7 +1,11 @@
+import { useSnackbar } from "notistack";
 import { useCallback } from "react";
 
 export function useErrorHandler() {
-	const handleError = useCallback((error: Error) => {}, []);
+	const { enqueueSnackbar } = useSnackbar();
+	const handleError = useCallback((error: Error) => {
+		enqueueSnackbar(error.message || "Something went wrong...", { variant: "error" });
+	}, []);
 
 	return handleError;
 }
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -6,14 +6,17 @@ import { store } from "./store/store";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 import { persistStore } from "redux-persist";
+import { SnackbarProvider } from "notistack";
 
 const persistor = persistStore(store);
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
 		<Provider store={store}>
 			<PersistGate loading={null} persistor={persistor}>
-				<App />
+				<SnackbarProvider maxSnack={3}>
+					<App />
+				</SnackbarProvider>
 			</PersistGate>
 		</Provider>
 	</React.StrictMode>