Merge pull request #40 from edipoarg/frani/save-files-form

Frani/save files form

.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

.gitignore

@@ -23,4 +23,4 @@ dist-ssr
 *.sln
 *.sw?
 .env
-
+.yarn/install-state.gz

cors.json

@@ -0,0 +1,9 @@
+[
+    {
+      "origin": ["http://mapadelapolicia.com"],
+      "method": ["GET", "POST", "PUT", "DELETE"],
+      "maxAgeSeconds": 3600,
+      "responseHeader": ["Content-Type", "Authorization"]
+    }
+  ]
+

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"
   }
-}
+}

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;

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 };

src/components/denuncia/Denuncia.jsx → 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 | FileList>(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)}
         />
 
+        <h3>V. ARCHIVO ADJUNTO</h3>
+        <input
+          type="file"
+          multiple={true}
+          onChange={(e) => {
+            setArchivos(e.target.files);
+          }}
+        />
+
         <h3>Marque las opciones deseadas</h3>
         <label>
           <input
@@ -217,8 +246,6 @@ const Denuncia = () => {
           />
         </div>
 
-        {/* Agrega aquí el botón de Captcha de no soy un robot */}
-
         <button onClick={handleSubmit}>Enviar</button>
       </section>
     </section>

src/main.jsx

@@ -5,7 +5,7 @@ import { createHashRouter, RouterProvider } from "react-router-dom";
 import "./index.css";
 import App from "./App";
 import Investigaciones from "./components/Investigaciones/Investigaciones.jsx";
-import Denuncia from "./components/denuncia/Denuncia.jsx";
+import Denuncia from "./components/denuncia/Denuncia";
 import Denuncias from "./components/denuncias/Denuncias.jsx";
 import Recursos from "./components/recursos/Recursos.jsx";
 import Jefatura from "./components/jefatura/Jefatura.jsx";