import React, { useState } from "react";
import Papa from "papaparse";
import firebase from "firebase/app";
import "firebase/firestore";
import PropTypes from "prop-types";
import searchByNameArrayConstructor from "./searchByNameArray";
const REQUIRED_FIELDS = {
estado: "",
municipio: "",
programa: "",
tipoDeApoyo: "",
comentarios: "",
fechaReporte: "",
prioridadReporte: "",
rangoEdad: "",
nombre: "",
apellidoPaterno: "",
apellidoMaterno: "",
genero: "",
fechaNacimiento: "",
calle: "",
numeroExterior: "",
numeroInterior: "",
colonia: "",
codigoPostal: "",
telefono: "",
celular: "",
correo: "",
whatsapp: "",
principalProblema: "",
calificacionServicio: "",
ine: "",
curp: "",
distritoFederal: "",
distritoLocal: "",
seccionElectoral: "",
origen: "",
funcionarioRecepcion: "",
estatus: "",
folio: "",
photo: "",
photo2: "",
geolocalizacion: "",
};
const CsvUploader = ({ firebaseConfig }) => {
const [csvData, setCsvData] = useState([]);
const [fileName, setFileName] = useState("");
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
const handleFileChange = (event) => {
const file = event.target.files[0];
setFileName(file?.name || "");
if (file) {
Papa.parse(file, {
header: true,
skipEmptyLines: true,
complete: (results) => {
const formattedData = results.data.map((row) => {
const searchByNameArray = searchByNameArrayConstructor(row)
const formattedRow = {
...REQUIRED_FIELDS,
...row,
searchByNameArray,
};
if (!formattedRow.notas || formattedRow.notas.trim() === "") {
formattedRow.notas = [{}];
} else {
formattedRow.notas = formattedRow.notas.split(",").map((nota) =>
nota.trim());
}
return formattedRow;
});
setCsvData(formattedData);
},
error: (error) => {
console.error("Error parsing CSV file:", error);
},
});
}
};
const handleUploadToFirebase = async () => {
if (csvData.length === 0) {
alert("No data to upload. Please select a valid CSV file.");
return;
}
const dbRef = firebase.firestore().collection("Reports");
try {
await firebase.firestore().runTransaction(async (transaction) => {
csvData.forEach((row) => {
const docId = row.id?.trim() ? row.id : undefined;
if (docId) {
transaction.set(dbRef.doc(docId), row);
} else {
transaction.set(dbRef.doc(), row);
}
});
});
alert("Data successfully uploaded to Firebase in a single transaction!");
} catch (error) {
console.error("Error uploading data to Firebase:", error);
}
};
return (
<div style={{ padding: "20px", fontFamily: "Arial, sans-serif" }}>
<h1>CSV File Uploader</h1>
<div style={{ marginBottom: "20px" }}>
<input
type="file"
accept=".csv"
onChange={handleFileChange}
style={{ marginBottom: "10px" }}
/>
{fileName && <p>Selected File: {fileName}</p>}
</div>
{csvData.length > 0 && (
<div style={{ marginBottom: "20px" }}>
<h2>Firebase Data Preview</h2>
{csvData.map((row, index) => (
<div key={index} style={{ marginBottom: "20px" }}>
<h3>Document {row.id || "(generated)"}</h3>
<table
border="1"
style={{ width: "100%", borderCollapse: "collapse" }}
>
<tbody>
{Object.entries(row).map(([key, value]) => (
<tr key={key}>
<td
style={{ padding: "8px", backgroundColor: "#f4f4f4" }}
>
{key}
</td>
<td style={{ padding: "8px" }}>
{JSON.stringify(value)}
</td>
</tr>
))}
</tbody>
</table>
</div>
))}
<button
onClick={handleUploadToFirebase}
style={{ padding: "10px 20px", cursor: "pointer" }}
>
Load to Firebase
</button>
</div>
)}
</div>
);
};
CsvUploader.propTypes = {
firebaseConfig: PropTypes.object.isRequired,
};
export default CsvUploader;
