feat: firebase-firestore

package.json

@@ -11,6 +11,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "firebase": "^10.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",

src/components/Dashboard/Add.js

@@ -1,103 +1,117 @@
 import React, { useState } from 'react';
 import Swal from 'sweetalert2';
+import { collection, addDoc, doc, setDoc } from 'firebase/firestore';
+import { db } from '../../firebase';
+import { v4 as uuidv4 } from 'uuid';
 
-const Add = ({ employees, setEmployees, setIsAdding }) => {
+const Add = ({ setEmployees, setIsAdding }) => {
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
   const [email, setEmail] = useState('');
   const [salary, setSalary] = useState('');
   const [date, setDate] = useState('');
 
-  const handleAdd = e => {
+  const handleAdd = async e => {
     e.preventDefault();
-
+  
     if (!firstName || !lastName || !email || !salary || !date) {
-      return Swal.fire({
-        icon: 'error',
-        title: 'Error!',
-        text: 'All fields are required.',
-        showConfirmButton: true,
+      alert('Todos los campos son requeridos.');
+      return;
+    }
+
+    try {
+      const employeeId = uuidv4(); // Generamos una nueva UUID
+
+      await setDoc(doc(db, 'employees', employeeId), {
+        id: employeeId,
+        firstName,
+        lastName,
+        email,
+        salary,
+        date,
+      });
+
+      setEmployees(prevEmployees => [
+        ...prevEmployees,
+        {
+          id: employeeId,
+          firstName,
+          lastName,
+          email,
+          salary,
+          date,
+        },
+      ]);
+
+      setIsAdding(false);
+
+      setFirstName('');
+      setLastName('');
+      setEmail('');
+      setSalary('');
+      setDate('');
+
+      Swal.fire({
+        icon: 'success',
+        title: 'Registered!',
+        text: 'El empleado ha sido registrado satisfactoriamente.',
+        showConfirmButton: false,
+        timer: 1500,
       });
+
+    } catch (error) {
+      console.error('Error adding document: ', error);
     }
-
-    const id = employees.length + 1;
-    const newEmployee = {
-      id,
-      firstName,
-      lastName,
-      email,
-      salary,
-      date,
-    };
-
-    employees.push(newEmployee);
-    localStorage.setItem('employees_data', JSON.stringify(employees));
-    setEmployees(employees);
-    setIsAdding(false);
-
-    Swal.fire({
-      icon: 'success',
-      title: 'Added!',
-      text: `${firstName} ${lastName}'s data has been Added.`,
-      showConfirmButton: false,
-      timer: 1500,
-    });
   };
-
+
+
   return (
-    <div className="small-container">
+    <div className="add-form">
+      <h2>Agregar Nuevo Empleado</h2>
       <form onSubmit={handleAdd}>
-        <h1>Add Employee</h1>
-        <label htmlFor="firstName">First Name</label>
+        <label htmlFor="firstName">Nombre:</label>
         <input
-          id="firstName"
           type="text"
-          name="firstName"
+          id="firstName"
           value={firstName}
           onChange={e => setFirstName(e.target.value)}
         />
-        <label htmlFor="lastName">Last Name</label>
+        <label htmlFor="lastName">Apellido:</label>
         <input
-          id="lastName"
           type="text"
-          name="lastName"
+          id="lastName"
           value={lastName}
           onChange={e => setLastName(e.target.value)}
         />
-        <label htmlFor="email">Email</label>
+        <label htmlFor="email">Email:</label>
         <input
-          id="email"
           type="email"
-          name="email"
+          id="email"
           value={email}
           onChange={e => setEmail(e.target.value)}
         />
-        <label htmlFor="salary">Salary ($)</label>
+        <label htmlFor="salary">Salario:</label>
         <input
-          id="salary"
           type="number"
-          name="salary"
+          id="salary"
           value={salary}
           onChange={e => setSalary(e.target.value)}
         />
-        <label htmlFor="date">Date</label>
+        <label htmlFor="date">Fecha:</label>
         <input
-          id="date"
           type="date"
-          name="date"
+          id="date"
           value={date}
           onChange={e => setDate(e.target.value)}
         />
-        <div style={{ marginTop: '30px' }}>
-          <input type="submit" value="Add" />
-          <input
+        <button type="submit">Agregar</button>
+        <input
             style={{ marginLeft: '12px' }}
             className="muted-button"
             type="button"
             value="Cancel"
             onClick={() => setIsAdding(false)}
           />
-        </div>
       </form>
     </div>
   );

src/components/Dashboard/Edit.js

@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
 import Swal from 'sweetalert2';
+import { setDoc, doc } from 'firebase/firestore';
+import { db } from '../../firebase';
 
-const Edit = ({ employees, selectedEmployee, setEmployees, setIsEditing }) => {
-  const id = selectedEmployee.id;
-
+const Edit = ({ selectedEmployee, setEmployees, setIsEditing }) => {
   const [firstName, setFirstName] = useState(selectedEmployee.firstName);
   const [lastName, setLastName] = useState(selectedEmployee.lastName);
   const [email, setEmail] = useState(selectedEmployee.email);
   const [salary, setSalary] = useState(selectedEmployee.salary);
   const [date, setDate] = useState(selectedEmployee.date);
 
-  const handleUpdate = e => {
+  const handleUpdate = async e => {
     e.preventDefault();
 
     if (!firstName || !lastName || !email || !salary || !date) {
@@ -22,33 +22,41 @@ const Edit = ({ employees, selectedEmployee, setEmployees, setIsEditing }) => {
       });
     }
 
+
+
     const employee = {
-      id,
+      id: selectedEmployee.id,
       firstName,
       lastName,
       email,
       salary,
       date,
     };
 
-    for (let i = 0; i < employees.length; i++) {
-      if (employees[i].id === id) {
-        employees.splice(i, 1, employee);
-        break;
-      }
-    }
+    try {
+      await setDoc(doc(db, 'employees', selectedEmployee.id), employee);
+
+      setEmployees(prevEmployees => prevEmployees.map(prevEmployee => {
+        return prevEmployee.id === selectedEmployee.id ? employee : prevEmployee;
+      }));
 
-    localStorage.setItem('employees_data', JSON.stringify(employees));
-    setEmployees(employees);
-    setIsEditing(false);
+      setIsEditing(false);
 
-    Swal.fire({
-      icon: 'success',
-      title: 'Updated!',
-      text: `${employee.firstName} ${employee.lastName}'s data has been updated.`,
-      showConfirmButton: false,
-      timer: 1500,
-    });
+      Swal.fire({
+        icon: 'success',
+        title: 'Updated!',
+        text: `${employee.firstName} ${employee.lastName}'s data has been updated.`,
+        showConfirmButton: false,
+        timer: 1500,
+      });
+    } catch (error) {
+      console.error('Error updating employee: ', error);
+      Swal.fire({
+        icon: 'info',
+        title: 'Selected Employee ID',
+        text: selectedEmployee.id,
+      });
+    }
   };
 
   return (

src/components/Dashboard/Table.js

@@ -1,68 +1,38 @@
 import React from 'react';
 
 const Table = ({ employees, handleEdit, handleDelete }) => {
-  employees.forEach((employee, i) => {
-    employee.id = i + 1;
-  });
-
-  const formatter = new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-    minimumFractionDigits: null,
-  });
-
   return (
-    <div className="contain-table">
-      <table className="striped-table">
-        <thead>
-          <tr>
-            <th>No.</th>
-            <th>First Name</th>
-            <th>Last Name</th>
-            <th>Email</th>
-            <th>Salary</th>
-            <th>Date</th>
-            <th colSpan={2} className="text-center">
-              Actions
-            </th>
+    <table>
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Email</th>
+          <th>Salary</th>
+          <th>Date</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {employees.map((employee, index) => (
+          <tr key={employee.id}>
+            <td>{index + 1}</td>
+            <td>{employee.firstName}</td>
+            <td>{employee.lastName}</td>
+            <td>{employee.email}</td>
+            <td>{employee.salary}</td>
+            <td>{employee.date}</td>
+            <td>
+              <button onClick={() => handleEdit(employee.id)} className="button muted-button">Edit</button>
+              <button onClick={() => handleDelete(employee.id)} className="button muted-button">Delete</button>
+
+
+            </td>
           </tr>
-        </thead>
-        <tbody>
-          {employees.length > 0 ? (
-            employees.map((employee, i) => (
-              <tr key={employee.id}>
-                <td>{i + 1}</td>
-                <td>{employee.firstName}</td>
-                <td>{employee.lastName}</td>
-                <td>{employee.email}</td>
-                <td>{formatter.format(employee.salary)}</td>
-                <td>{employee.date} </td>
-                <td className="text-right">
-                  <button
-                    onClick={() => handleEdit(employee.id)}
-                    className="button muted-button"
-                  >
-                    Edit
-                  </button>
-                </td>
-                <td className="text-left">
-                  <button
-                    onClick={() => handleDelete(employee.id)}
-                    className="button muted-button"
-                  >
-                    Delete
-                  </button>
-                </td>
-              </tr>
-            ))
-          ) : (
-            <tr>
-              <td colSpan={7}>No Employees</td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </div>
+        ))}
+      </tbody>
+    </table>
   );
 };