Merge pull request #51 from Black-Dot-2024/feat/RF09-NotifProj

RF09: Notifcación de asignación a proyecto

public/firebase-messaging-sw.js

@@ -0,0 +1,15 @@
+importScripts('https://www.gstatic.com/firebasejs/10.11.0/firebase-app-compat.js');
+importScripts('https://www.gstatic.com/firebasejs/10.11.0/firebase-messaging-compat.js');
+
+const firebaseConfig = {
+  apiKey: true,
+  authDomain: true,
+  projectId: true,
+  storageBucket: true,
+  messagingSenderId: true,
+  appId: true,
+};
+
+const app = firebase.initializeApp(firebaseConfig);
+
+const messaging = firebase.messaging(app);

src/config/firebase.config.ts

@@ -1,5 +1,6 @@
-import { initializeApp } from 'firebase/app';
 import { getAuth, GoogleAuthProvider } from 'firebase/auth';
+import firebase from 'firebase/compat/app';
+import 'firebase/compat/messaging';
 
 const firebaseConfig = {
   apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
@@ -10,11 +11,13 @@ const firebaseConfig = {
   appId: import.meta.env.VITE_FIREBASE_APP_ID,
 };
 
-const app = initializeApp(firebaseConfig);
+const app = firebase.initializeApp(firebaseConfig);
 const auth = getAuth(app);
+const messaging = firebase.messaging(app);
+
 const provider = new GoogleAuthProvider();
 provider.setCustomParameters({
   login_hint: 'user@example.com',
 });
 
-export { app, auth, provider };
+export { app, auth, firebaseConfig, messaging, provider };

src/pages/Auth/index.tsx

@@ -1,14 +1,19 @@
-import Button from '@mui/joy/Button';
-import { signInWithPopup } from 'firebase/auth';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
+
 import googleImage from '../../assets/images/google-logo.webp';
 import loginImage from '../../assets/images/login-image.png';
-import { auth, provider } from '../../config/firebase.config';
 import { RoutesPath } from '../../utils/constants';
 
+import Button from '@mui/joy/Button';
+
+import { signInWithPopup } from 'firebase/auth';
+import { getToken } from 'firebase/messaging';
+import { auth, messaging, provider } from '../../config/firebase.config';
+
 const Auth: React.FC = () => {
   const navigate = useNavigate();
+  const API_BASE_ROUTE = import.meta.env.VITE_BASE_API_URL;
 
   const handleGoogleSignIn = async () => {
     try {
@@ -18,8 +23,6 @@ const Auth: React.FC = () => {
 
       // TODO: Had trouble using the useHttp hook
 
-      const API_BASE_ROUTE = import.meta.env.VITE_BASE_API_URL;
-
       const response = await fetch(`${API_BASE_ROUTE}/employee/signup`, {
         method: 'POST',
         headers: {
@@ -37,13 +40,39 @@ const Auth: React.FC = () => {
         throw new Error('Failed to sign up');
       }
 
+      handleGetDeviceToken(result.user.email);
       navigate(RoutesPath.HOME);
     } catch (error) {
       console.error('Firebase Sign-in error:', error);
       throw error;
     }
   };
 
+  const handleGetDeviceToken = async (userEmail: string | null) => {
+    try {
+      const token = await getToken(messaging, {
+        vapidKey: import.meta.env.VITE_FIREBASE_VAPID_KEY,
+      });
+
+      if (token) {
+        await fetch(`${API_BASE_ROUTE}/notification/token`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: 'Bearer ' + sessionStorage.getItem('idToken'),
+          },
+          body: JSON.stringify({
+            email: userEmail,
+            deviceToken: token,
+          }),
+        });
+      }
+    } catch (error) {
+      console.error('Error getting token:', error);
+      throw error;
+    }
+  };
+
   return (
     <div className='bg-cover bg-center h-screen' style={{ backgroundImage: `url(${loginImage})` }}>
       <div className='flex justify-end pr-16 pt-10'>