From 5ed1efcc55b812ef8ac77f0f532b6b15fcbad8aa Mon Sep 17 00:00:00 2001
From: devleejb <devleejb@gmail.com>
Date: Tue, 23 Jan 2024 13:19:53 +0900
Subject: [PATCH] Add notistack for query error

---
 frontend/package-lock.json            | 37 +++++++++++++++++++++++++++
 frontend/package.json                 |  1 +
 frontend/src/hooks/useErrorHandler.ts |  6 ++++-
 frontend/src/main.tsx                 |  5 +++-
 4 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d22ca467..b3aba5b8 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -32,6 +32,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",
@@ -5312,6 +5313,42 @@
 			"resolved": "https://registry.npmjs.org/not/-/not-0.1.0.tgz",
 			"integrity": "sha512-5PDmaAsVfnWUgTUbJ3ERwn7u79Z0dYxN9ErxCpVJJqe2RK0PJ3z+iFUxuqjwtlDDegXvtWoxD/3Fzxox7tFGWA=="
 		},
+		"node_modules/notistack": {
+			"version": "2.0.8",
+			"resolved": "https://registry.npmjs.org/notistack/-/notistack-2.0.8.tgz",
+			"integrity": "sha512-/IY14wkFp5qjPgKNvAdfL5Jp6q90+MjgKTPh4c81r/lW70KeuX6b9pE/4f8L4FG31cNudbN9siiFS5ql1aSLRw==",
+			"dependencies": {
+				"clsx": "^1.1.0",
+				"hoist-non-react-statics": "^3.3.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/notistack"
+			},
+			"peerDependencies": {
+				"@emotion/react": "^11.4.1",
+				"@emotion/styled": "^11.3.0",
+				"@mui/material": "^5.0.0",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@emotion/react": {
+					"optional": true
+				},
+				"@emotion/styled": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/notistack/node_modules/clsx": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+			"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/nth-check": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 77a48e7a..9330e10e 100755
--- 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
index 74673694..1876ed6f 100644
--- 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
index f59de3d2..489fad22 100755
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -6,6 +6,7 @@ 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);
 
@@ -13,7 +14,9 @@ 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>