notificaciones conectadas y funcionales [basicas]

iic2154-uc-cl · Nov 1, 2024 · c2343e9 · c2343e9
1 parent 725eb88
commit c2343e9
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,17 @@
     <link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
+    <script>
+      window.OneSignalDeferred = window.OneSignalDeferred || [];
+      OneSignalDeferred.push(async function(OneSignal) {
+        await OneSignal.init({
+          appId: "a8f9feb6-81c6-464a-ac6d-56bf9fafba76",
+        });
+      });
+    </script>
+
     <title>GeoMapp</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.9",
     "react-icons": "^5.3.0",
+    "react-onesignal": "^3.0.1",
     "react-router-dom": "^6.26.2"
   },
   "devDependencies": {

diff --git a/public/OneSignalSDKWorker.js b/public/OneSignalSDKWorker.js
@@ -0,0 +1 @@
+importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
diff --git a/src/pages/users/notificaciones.jsx b/src/pages/users/notificaciones.jsx
@@ -1,29 +1,41 @@
-import React, { useState } from 'react';
+import React, { useState} from 'react';
 import Navbar from '../../components/Navbar';
 import Footer from '../../components/Footer';
-import '../../styles/users/notification.css'; // Verifica que la ruta al CSS sea correcta
-//import '../../styles/helloworld.css'; 
+import '../../styles/users/notification.css';
+import '../../styles/helloworld.css';
 
 const Notification = () => {
   const [title, setTitle] = useState('');
   const [content, setContent] = useState('');
-  const [images, setImages] = useState([]);
+  const [image, setImage] = useState(null);
 
   const handleTitleChange = (e) => setTitle(e.target.value);
   const handleContentChange = (e) => setContent(e.target.value);
-  const handleImageChange = (e) => {
-    const files = Array.from(e.target.files);
-    setImages(files);
-  };
+  const handleImageChange = (e) => setImage(e.target.files[0]);
+
+  const handleSend = async () => {
+    const formData = new FormData();
+    formData.append('title', title);
+    formData.append('content', content);
+    if (image) {
+      formData.append('image', image);
+    }
 
-  const handleSend = () => {
-    const notificationData = {
-      title,
-      content,
-      images,
-    };
-    // Aquí puedes manejar el envío de la notificación, por ejemplo, haciendo una petición a una API
-    console.log('Notificación enviada:', notificationData);
+    try {
+      const response = await fetch('http://localhost:8000/onesignal/enviar-notificacion/', {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (response.ok) {
+        alert('Notificación enviada con éxito!');
+      } else {
+        alert('Error al enviar la notificación.');
+      }
+    } catch (error) {
+      console.error('Error al enviar la notificación:', error);
+      alert('Ocurrió un error al enviar la notificación.');
+    }
   };
 
   return (
@@ -34,7 +46,6 @@ const Notification = () => {
         <br></br>
         <br></br>
 
-
 
     <div className="notification-container">
       <h2>Crear Notificación</h2>
@@ -69,7 +80,6 @@ const Notification = () => {
       <button className="send-button" onClick={handleSend}>
         Enviar Notificación
       </button>
-
     </div>
     </div>
   );

diff --git a/yarn.lock b/yarn.lock
@@ -2607,6 +2607,11 @@ react-is@^18.3.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
+react-onesignal@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/react-onesignal/-/react-onesignal-3.0.1.tgz#055cc4f80cf0d58328c8febef6ca08242ed76620"
+  integrity sha512-AfAtGdXRcuMhVf+9OXehGcQeiJIYl1ihAByvfVNa3RCA1Vnn19tBha4XQB+o3ukUh2IQn0yiflRO4vXgI9nOng==
+
 react-refresh@^0.14.2:
   version "0.14.2"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"