diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index c97382c..5e2224a 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -13,9 +13,12 @@ jobs: env: VITE_API_F_KEY: ${{ secrets.VITE_API_F_KEY }} VITE_BASE_ID: ${{ secrets.VITE_BASE_ID }} + VITE_FIREBASE_KEY: ${{ secrets.VITE_FIREBASE_KEY }} run: | echo "VITE_API_F_KEY=$VITE_API_F_KEY" >> .env echo "VITE_BASE_ID=$VITE_BASE_ID" >> .env + echo "VITE_FIREBASE_KEY=$VITE_FIREBASE_KEY" >> .env + - uses: actions/checkout@v2 - name: Install modules run: yarn diff --git a/.gitignore b/.gitignore index 5c1697f..fd27dde 100644 --- a/.gitignore +++ b/.gitignore @@ -23,4 +23,4 @@ dist-ssr *.sln *.sw? .env - +.yarn/install-state.gz \ No newline at end of file diff --git a/cors.json b/cors.json new file mode 100644 index 0000000..e398d1c --- /dev/null +++ b/cors.json @@ -0,0 +1,9 @@ +[ + { + "origin": ["http://mapadelapolicia.com"], + "method": ["GET", "POST", "PUT", "DELETE"], + "maxAgeSeconds": 3600, + "responseHeader": ["Content-Type", "Authorization"] + } + ] + \ No newline at end of file diff --git a/package.json b/package.json index 7eb0030..83cea43 100644 --- a/package.json +++ b/package.json @@ -17,11 +17,13 @@ "@react-email/render": "^0.0.12", "@vitejs/plugin-react-swc": "^3.6.0", "airtable": "^0.12.2", + "firebase": "^10.12.2", "maplibre-gl": "^3.5.2", "nodemailer": "^6.9.13", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-google-recaptcha": "^3.1.0", "react-icons": "^4.11.0", "react-map-gl": "^7.1.6", "react-router-dom": "^6.17.0" @@ -50,4 +52,4 @@ "resolutions": { "strip-ansi": "6.0.1" } -} \ No newline at end of file +} diff --git a/services/constants.js b/services/constants.js index 0fc9f7d..0a0907d 100644 --- a/services/constants.js +++ b/services/constants.js @@ -1,9 +1,13 @@ const apiKey = import.meta.env.VITE_API_F_KEY; const baseId = import.meta.env.VITE_BASE_ID; +const firebaseKey = import.meta.env.VITE_FIREBASE_KEY; +const reCaptchaKey = import.meta.env.VITE_RECAPTCHA_KEY; const constants = { apiKey: `${apiKey}`, baseId: `${baseId}`, + firebaseKey: `${firebaseKey}`, + reCaptchaKey: `${reCaptchaKey}`, }; export default constants; diff --git a/services/firebase.js b/services/firebase.js new file mode 100644 index 0000000..c0e8901 --- /dev/null +++ b/services/firebase.js @@ -0,0 +1,19 @@ +// firebase.js +import { initializeApp } from "firebase/app"; +import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage"; +import constants from "./constants"; + +const firebaseConfig = { + apiKey: constants.firebaseKey, + authDomain: "mapadelapoliciacaba-5011d.firebaseapp.com", + projectId: "mapadelapoliciacaba-5011d", + storageBucket: "mapadelapoliciacaba-5011d.appspot.com", + messagingSenderId: "613709364108", + appId: "1:613709364108:web:bb047b55dc138e68de74a9", +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); +const storage = getStorage(app); + +export { storage, ref, uploadBytes, getDownloadURL }; diff --git a/src/components/denuncia/Denuncia.jsx b/src/components/denuncia/Denuncia.tsx similarity index 81% rename from src/components/denuncia/Denuncia.jsx rename to src/components/denuncia/Denuncia.tsx index dc44bdb..44f5677 100644 --- a/src/components/denuncia/Denuncia.jsx +++ b/src/components/denuncia/Denuncia.tsx @@ -2,6 +2,12 @@ import { useState } from "react"; import styles from "./Denuncia.module.css"; import Airtable from "airtable"; import constants from "../../../services/constants"; +import { + storage, + ref, + uploadBytes, + getDownloadURL, +} from "../../../services/firebase"; // Initialize Airtable base const base = new Airtable({ apiKey: constants.apiKey }).base(constants.baseId); @@ -14,7 +20,7 @@ const Denuncia = () => { const [agresor, setAgresor] = useState(""); const [identificacion, setIdentificacion] = useState(""); const [patente, setPatente] = useState(""); - const [archivos, setArchivos] = useState(null); // This needs to be handled + const [archivos, setArchivos] = useState(null); const [nombre, setNombre] = useState(""); const [telefono, setTelefono] = useState(""); const [email, setEmail] = useState(""); @@ -47,25 +53,39 @@ const Denuncia = () => { return; } - const recordData = { - Fecha: fecha, - Hora: hora, - Lugar: lugar, - Descripcion: descripcion, - Agresor: agresor, - Identificación: identificacion, - Patente: patente, - Archivos: archivos, // You need to handle file uploads correctly - Nombre: nombre, - Teléfono: telefono, - Email: email, - Visibilizar: visibilizar, - Denunciar_legalmente: denunciarLegalmente, - }; - try { + const fileUrls: string[] = []; + if (archivos) { + for (let i = 0; i < archivos.length; i++) { + const archivo = archivos[i]; + if (archivo) { + const archivoRef = ref(storage, `archivos/${archivo.name}`); + const snapshot = await uploadBytes(archivoRef, archivo); + const fileUrl = await getDownloadURL(snapshot.ref); + fileUrls.push(fileUrl); + } + } + } + /* Objeto con la data para guardar en airtable */ + const recordData = { + Fecha: fecha, + Hora: hora, + Lugar: lugar, + Descripcion: descripcion, + Agresor: agresor, + Identificación: identificacion, + Patente: patente, + // commas are legal parts of URLs, so separating URLs with commas and spaces makes sense + Archivos: fileUrls.join(" , "), + Nombre: nombre, + Teléfono: telefono, + Email: email, + Visibilizar: visibilizar, + Denunciar_legalmente: denunciarLegalmente, + }; + const response = await base("tblLbB2PWSaWbhWG0").create(recordData); - console.log("Record created successfully:", response); + console.log("Registro creado con éxito:", response); alert("Denuncia enviada con éxito"); setFecha(""); setHora(""); @@ -190,6 +210,15 @@ const Denuncia = () => { onChange={(e) => setEmail(e.target.value)} /> +

V. ARCHIVO ADJUNTO

+ { + setArchivos(e.target.files); + }} + /> +

Marque las opciones deseadas