feat: add Notifications

package.json

@@ -27,6 +27,7 @@
     "@mantine/core": "^6.0.10",
     "@mantine/form": "^6.0.10",
     "@mantine/hooks": "^6.0.10",
+    "@mantine/notifications": "^6.0.11",
     "@tabler/icons-react": "^2.18.0",
     "firebase": "^9.22.0",
     "react": "^18.2.0",

src/App.tsx

@@ -2,6 +2,7 @@ import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 
 import { useAppColorScheme } from '@hooks';
 import { ColorSchemeProvider, MantineProvider } from '@mantine/core';
+import { Notifications } from '@mantine/notifications';
 import { routes } from '@routes';
 import { theme } from '@theme';
 
@@ -13,6 +14,7 @@ const App = () => {
   return (
     <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
       <MantineProvider withGlobalStyles withNormalizeCSS theme={{ colorScheme, ...theme }}>
+        <Notifications position="top-center" limit={3} />
         <RouterProvider router={router} />
       </MantineProvider>
     </ColorSchemeProvider>

src/helpers/firebase.ts

@@ -2,25 +2,14 @@ import { initializeApp } from 'firebase/app';
 import { getAuth } from 'firebase/auth';
 import { getFirestore } from 'firebase/firestore';
 
-//TO DO with .env
-// const firebaseConfig = {
-//   apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
-//   authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
-//   projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
-//   storageBucket: import.meta.env.VITE_APP_FIREBASE_STORAGE_BUCKET,
-//   messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
-//   appId: import.meta.env.VITE_FIREBASE_APP_ID,
-//   measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
-// };
-
 const firebaseConfig = {
-  apiKey: 'AIzaSyBsWPst_XA3sWiyGkEtjiiEajMGVhKGLH0',
-  authDomain: 'graphiql-app-596d2.firebaseapp.com',
-  projectId: 'graphiql-app-596d2',
-  storageBucket: 'graphiql-app-596d2.appspot.com',
-  messagingSenderId: '119287809900',
-  appId: '1:119287809900:web:6aa08dc0e59e9941b21549',
-  measurementId: 'G-348M5X654B',
+  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+  storageBucket: import.meta.env.VITE_APP_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+  appId: import.meta.env.VITE_FIREBASE_APP_ID,
+  measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
 };
 
 const app = initializeApp(firebaseConfig);

src/helpers/helpers.tsx

@@ -0,0 +1,12 @@
+import { notifications } from '@mantine/notifications';
+import { IconX } from '@tabler/icons-react';
+
+export const showNotifications = (err: unknown) => {
+  return notifications.show({
+    title: 'Error',
+    message: `${err} 🤥`,
+    autoClose: 3000,
+    icon: <IconX />,
+    color: 'red',
+  });
+};

src/helpers/index.ts

@@ -1 +1,3 @@
-export {};
+import { showNotifications } from './helpers';
+
+export { showNotifications };