From fbb13b7579408b0293c96cca13a389ea733666c5 Mon Sep 17 00:00:00 2001
From: namisatou <damianrod007@gmail.com>
Date: Wed, 12 Mar 2025 01:07:51 +0000
Subject: [PATCH] First commit

---
 src/components/Footer.jsx      |  2 +-
 src/components/Navbar.jsx      |  4 +-
 src/components/card.jsx        | 34 +++++++++++++
 src/components/modalDelete.jsx | 26 ++++++++++
 src/components/modalEdite.jsx  | 91 +++++++++++++++++++++++++++++++++
 src/pages/Demo.jsx             | 93 ++++++++++++++++++++++------------
 src/pages/Home.jsx             | 61 +++++++++++++++++++---
 src/pages/Single.jsx           |  2 +-
 src/routes.jsx                 | 34 ++++++-------
 src/store.js                   | 83 +++++++++++++++++++++++++++---
 10 files changed, 364 insertions(+), 66 deletions(-)
 create mode 100644 src/components/card.jsx
 create mode 100644 src/components/modalDelete.jsx
 create mode 100644 src/components/modalEdite.jsx

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 2b4c427bd..872862503 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,7 +1,7 @@
 export const Footer = () => (
 	<footer className="footer mt-auto py-3 text-center">
 		<p>
-			Check the <a target="_blank" href="https://4geeks.com/docs/start/start-react-advanced-project">template documentation</a> <i class="fa-solid fa-file"></i> for help.
+			Check the <a target="_blank" href="https://4geeks.com/docs/start/start-react-advanced-project">template documentation</a> <i className="fa-solid fa-file"></i> for help.
 		</p>
 		<p>
 			Made with <i className="fa fa-heart text-danger" /> by{" "}
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 30d43a263..13f7e31ae 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -6,11 +6,11 @@ export const Navbar = () => {
 		<nav className="navbar navbar-light bg-light">
 			<div className="container">
 				<Link to="/">
-					<span className="navbar-brand mb-0 h1">React Boilerplate</span>
+					<span className="navbar-brand mb-0 h1">Agenda</span>
 				</Link>
 				<div className="ml-auto">
 					<Link to="/demo">
-						<button className="btn btn-primary">Check the Context in action</button>
+						<button className="btn btn-primary">Agregar Contactos</button>
 					</Link>
 				</div>
 			</div>
diff --git a/src/components/card.jsx b/src/components/card.jsx
new file mode 100644
index 000000000..e6d3206cc
--- /dev/null
+++ b/src/components/card.jsx
@@ -0,0 +1,34 @@
+import rigobaby from "../assets/img/rigo-baby.jpg"
+export const Card = ({ id, name, address, phone, email,onDelete,onEdit }) => {
+
+    return (
+        <div className="card mb-3" style={{ maxWidth: "540px" }}>
+            <div className="row g-0">
+                <div className="col-md-4 p-3">
+                    <img src={rigobaby} className="img-fluid rounded-start" alt={name} />
+                </div>
+                <div className="col-md-8">
+                    <div className="card-body">
+                        <div className="d-flex justify-content-between">
+
+
+                            <h1 className="card-title">{name}</h1>
+                            <div>
+                                <button type="button" className="btn btn-outline-info me-2" onClick={()=>onEdit()} data-bs-toggle="modal" data-bs-target="#exampleModalEdit">
+                                    <i className="fa fa-pen"></i>
+                                </button>
+                                <button type="button" className="btn btn-outline-danger me-2" 
+                                onClick={()=>onDelete()} data-bs-toggle="modal" data-bs-target="#exampleModal">
+                                    <i className="fa fa-trash"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <p className="card-text">📍Address: {address}</p>
+                        <p className="card-text">☎️ Phone: {phone}</p>
+                        <p className="card-text">📧 E-Mail: {email}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/modalDelete.jsx b/src/components/modalDelete.jsx
new file mode 100644
index 000000000..6f6e5c4f7
--- /dev/null
+++ b/src/components/modalDelete.jsx
@@ -0,0 +1,26 @@
+import useGlobalReducer from "../hooks/useGlobalReducer"
+import { borrarContacto } from "../store"
+
+export const ModalDelete = ({ id, name }) => {
+    const { store, dispatch } = useGlobalReducer()
+
+    return (
+        <div className="modal fade" id="exampleModal" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+            <div className="modal-dialog">
+                <div className="modal-content">
+                    <div className="modal-header">
+                        <h1 className="modal-title fs-5" id="exampleModalLabel">Eliminar Contacto</h1>
+                        <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div className="modal-body">
+                        Estas seguro que desea borrar a {name} de contactos?
+                    </div>
+                    <div className="modal-footer">
+                        <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">cancelar</button>
+                        <button type="button" className="btn btn-danger" data-bs-dismiss="modal" onClick={() => borrarContacto(dispatch, id)}>borrar</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/modalEdite.jsx b/src/components/modalEdite.jsx
new file mode 100644
index 000000000..d3ff405bf
--- /dev/null
+++ b/src/components/modalEdite.jsx
@@ -0,0 +1,91 @@
+import useGlobalReducer from "../hooks/useGlobalReducer"
+import { editarContacto } from "../store"
+import { useEffect, useState } from "react"
+
+export const ModalEdit = ({ id, contact }) => {
+    const { store, dispatch } = useGlobalReducer()
+    const [nombre, setNombre] = useState("")
+    const [direccion, setDireccion] = useState("")
+    const [mail, setMail] = useState("")
+    const [telefono, setTelefono] = useState("")
+
+    const editar = (e) => {
+        e.preventDefault()
+        if (nombre == "") {
+            alert("Debe ingresar nombre completo")
+            return
+        }
+        if (mail == "") {
+            alert("Debe ingresar E-mail")
+            return
+        }
+        if (direccion == "") {
+            alert("Debe ingresar direccion")
+            return
+        }
+        if (telefono == "") {
+            alert("Debe ingresar numero de telefono")
+            return
+        }
+        const newContact = {
+            "name": nombre,
+            "phone": telefono,
+            "email": mail,
+            "address": direccion,
+        }
+        editarContacto(dispatch, newContact, id)
+        setNombre("")
+        setTelefono("")
+        setDireccion("")
+        setMail("")
+    }
+
+    const infoContact = () => {
+        setNombre(contact?.name)
+        setTelefono(contact?.phone)
+        setDireccion(contact?.address)
+        setMail(contact?.mail)
+    }
+
+    useEffect(() => {
+        infoContact()
+    }, [])
+
+    return (
+        <div className="modal fade" id="exampleModalEdit" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+            <div className="modal-dialog">
+                <div className="modal-content">
+                    <div className="modal-header">
+                        <h1 className="modal-title fs-5" id="exampleModalLabel">Editar Contacto</h1>
+                        <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div className="modal-body">
+                        <div className="input-group mb-3">
+                            <span className="input-group-text" id="inputGroup-sizing-default">Nombre Completo</span>
+                            <input type="text" className="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" value={nombre} onChange={(e) => setNombre(e.target.value)} />
+                        </div>
+                        <div className="input-group mb-3">
+                            <span className="input-group-text" id="inputGroup-sizing-default">Numero de telefono</span>
+                            <input type="text" className="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" value={telefono} onChange={(e) => setTelefono(e.target.value)} />
+                        </div>
+                        <div className="input-group mb-3">
+                            <span className="input-group-text" id="inputGroup-sizing-default">E-mail</span>
+                            <input type="mail" className="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" value={mail} onChange={(e) => setMail(e.target.value)} />
+                        </div>
+                        <div className="input-group mb-3">
+                            <span className="input-group-text" id="inputGroup-sizing-default">direccion</span>
+                            <input type="text" className="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" value={direccion} onChange={(e) => setDireccion(e.target.value)} />
+                        </div>
+                    </div>
+                    <div className="modal-footer">
+                        <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">cancelar</button>
+                        <button type="button" className="btn btn-success" data-bs-dismiss="modal"
+                         onClick={(e)=>editar(e)}
+                        >editar
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/pages/Demo.jsx b/src/pages/Demo.jsx
index 34250a45b..21223667e 100644
--- a/src/pages/Demo.jsx
+++ b/src/pages/Demo.jsx
@@ -1,43 +1,72 @@
 // Import necessary components from react-router-dom and other parts of the application.
 import { Link } from "react-router-dom";
 import useGlobalReducer from "../hooks/useGlobalReducer";  // Custom hook for accessing the global state.
+import { useState } from "react";
+import { crearContacto } from "../store";
 
 export const Demo = () => {
   // Access the global state and dispatch function using the useGlobalReducer hook.
   const { store, dispatch } = useGlobalReducer()
 
-  return (
-    <div className="container">
-      <ul className="list-group">
-        {/* Map over the 'todos' array from the store and render each item as a list element */}
-        {store && store.todos?.map((item) => {
-          return (
-            <li
-              key={item.id}  // React key for list items.
-              className="list-group-item d-flex justify-content-between"
-              style={{ background: item.background }}> 
-              
-              {/* Link to the detail page of this todo. */}
-              <Link to={"/single/" + item.id}>Link to: {item.title} </Link>
-              
-              <p>Open file ./store.js to see the global store that contains and updates the list of colors</p>
-              
-              <button className="btn btn-success" 
-                onClick={() => dispatch({
-                  type: "add_task", 
-                  payload: { id: item.id, color: '#ffa500' }
-                })}>
-                Change Color
-              </button>
-            </li>
-          );
-        })}
-      </ul>
-      <br />
+const [nombre,setNombre] = useState("")
+const [direccion,setDireccion] = useState("")
+const [mail,setMail] = useState("")
+const [telefono,setTelefono] = useState("")
 
-      <Link to="/">
-        <button className="btn btn-primary">Back home</button>
-      </Link>
+const agregarContacto =(e)=>{
+  e.preventDefault()
+if (nombre == ""){
+  alert ("Debe ingresar nombre completo")
+  return
+}
+if (mail == ""){
+  alert ("Debe ingresar E-mail")
+  return
+}
+if (direccion == ""){
+  alert ("Debe ingresar direccion")
+  return
+}
+if (telefono == ""){
+  alert ("Debe ingresar numero de telefono")
+  return
+}
+  const newContact = {
+    "name": nombre,
+    "phone": telefono,
+    "email": mail,
+    "address": direccion,
+  }
+  crearContacto (dispatch,newContact)
+  setNombre("")
+  setTelefono("")
+  setDireccion("")
+  setMail("")
+}
+  return (
+    <div className="container mt-5 mb-5 p-5">
+      <h2 className="text-center">Agregar Contacto</h2>
+      <div className="input-group mb-3">
+        <span className="input-group-text" id="inputGroup-sizing-default">Nombre Completo</span>
+        <input type="text" className="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" value={nombre} onChange={(e)=>setNombre(e.target.value)}/>
+      </div>
+      <div className="input-group mb-3">
+        <span className="input-group-text" id="inputGroup-sizing-default">Numero de telefono</span>
+        <input type="text" className="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" value={telefono} onChange={(e)=>setTelefono(e.target.value)}/>
+      </div>
+      <div className="input-group mb-3">
+        <span className="input-group-text" id="inputGroup-sizing-default">E-mail</span>
+        <input type="mail" className="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" value={mail} onChange={(e)=>setMail(e.target.value)}/>
+      </div>
+      <div className="input-group mb-3">
+        <span className="input-group-text" id="inputGroup-sizing-default">direccion</span>
+        <input type="text" className="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" value={direccion} onChange={(e)=>setDireccion(e.target.value)}/>
+      </div>
+      <div className="d-flex  justify-content-center">
+        <button className="btn btn-success" onClick={(e)=>agregarContacto(e)}>
+          Agregar Contacto
+        </button>
+      </div>
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 3e9f1aefa..0c1d974a0 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,16 +1,63 @@
-import rigoImageUrl from "../assets/img/rigo-baby.jpg";
+import { useEffect, useState } from "react";
 import useGlobalReducer from "../hooks/useGlobalReducer.jsx";
+import { obtenerContactos } from "../store.js";
+import { Card } from "../components/card.jsx";
+import { ModalDelete } from "../components/modalDelete.jsx";
+import { ModalEdit } from "../components/modalEdite.jsx";
 
 export const Home = () => {
 
-  const {store, dispatch} =useGlobalReducer()
+	const { store, dispatch } = useGlobalReducer()
+	const [showModalDelete, setShowModalDelete] = useState({
+		showModal: false,
+		id: undefined,
+		name: undefined,
+	})
+	const [showModalEdit, setShowModalEdit] = useState({
+		showModal: false,
+		id: undefined,
+		contact: undefined,
+	})
 
+	useEffect(() => {
+		obtenerContactos(dispatch)
+	}, [])
+
+	console.log(store.contacts)
 	return (
 		<div className="text-center mt-5">
-			<h1>Hello Rigo!!</h1>
-			<p>
-				<img src={rigoImageUrl} />
-			</p>
+			<h1>Contact List</h1>
+			{store.contacts.length > 0 ? (
+				<div className="d-flex flex-column align-items-center">
+					{store.contacts.map((contacto) => (
+						<Card
+							key={contacto.id}
+							id={contacto.id}
+							name={contacto.name}
+							address={contacto.address}
+							phone={contacto.phone}
+							email={contacto.email}
+							onDelete={() => setShowModalDelete({ showModal: true, id: contacto.id, name: contacto.name })}
+							onEdit={() => setShowModalEdit({ showModal: true, id: contacto.id, contact: contacto })}
+						/>
+					))}
+				</div>
+			) : (
+				<p> no existen contactos</p>
+			)}
+
+			<ModalDelete
+				id={showModalDelete.id}
+				name={showModalDelete.name}
+				show={showModalDelete.showModal}
+				onClose={() => setShowModalDelete({ showModal: false })}
+			/>
+			<ModalEdit
+				id={showModalEdit.id}
+				contact={showModalEdit.contact}
+				show={showModalEdit.showModal}
+				onClose={() => setShowModalEdit({ showModal: false })}
+			/>
 		</div>
 	);
-}; 
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/src/pages/Single.jsx b/src/pages/Single.jsx
index 7e68487da..9131119b0 100644
--- a/src/pages/Single.jsx
+++ b/src/pages/Single.jsx
@@ -34,4 +34,4 @@ Single.propTypes = {
   // Although 'match' prop is defined here, it is not used in the component.
   // Consider removing or using it as needed.
   match: PropTypes.object
-};
+};
\ No newline at end of file
diff --git a/src/routes.jsx b/src/routes.jsx
index 0557df614..381b35fe4 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -1,9 +1,9 @@
 // Import necessary components and functions from react-router-dom.
 
 import {
-    createBrowserRouter,
-    createRoutesFromElements,
-    Route,
+  createBrowserRouter,
+  createRoutesFromElements,
+  Route,
 } from "react-router-dom";
 import { Layout } from "./pages/Layout";
 import { Home } from "./pages/Home";
@@ -11,20 +11,20 @@ import { Single } from "./pages/Single";
 import { Demo } from "./pages/Demo";
 
 export const router = createBrowserRouter(
-    createRoutesFromElements(
-    // CreateRoutesFromElements function allows you to build route elements declaratively.
-    // Create your routes here, if you want to keep the Navbar and Footer in all views, add your new routes inside the containing Route.
-    // Root, on the contrary, create a sister Route, if you have doubts, try it!
-    // Note: keep in mind that errorElement will be the default page when you don't get a route, customize that page to make your project more attractive.
-    // Note: The child paths of the Layout element replace the Outlet component with the elements contained in the "element" attribute of these child paths.
+  createRoutesFromElements(
+  // CreateRoutesFromElements function allows you to build route elements declaratively.
+  // Create your routes here, if you want to keep the Navbar and Footer in all views, add your new routes inside the containing Route.
+  // Root, on the contrary, create a sister Route, if you have doubts, try it!
+  // Note: keep in mind that errorElement will be the default page when you don't get a route, customize that page to make your project more attractive.
+  // Note: The child paths of the Layout element replace the Outlet component with the elements contained in the "element" attribute of these child paths.
 
-      // Root Route: All navigation will start from here.
-      <Route path="/" element={<Layout />} errorElement={<h1>Not found!</h1>} >
+    // Root Route: All navigation will start from here.
+    <Route path="/" element={<Layout />} errorElement={<h1>Not found!</h1>} >
 
-        {/* Nested Routes: Defines sub-routes within the BaseHome component. */}
-        <Route path= "/" element={<Home />} />
-        <Route path="/single/:theId" element={ <Single />} />  {/* Dynamic route for single items */}
-        <Route path="/demo" element={<Demo />} />
-      </Route>
-    )
+      {/* Nested Routes: Defines sub-routes within the BaseHome component. */}
+      <Route path= "/" element={<Home />} />
+      <Route path="/single/:theId" element={ <Single />} />  {/* Dynamic route for single items */}
+      <Route path="/demo" element={<Demo />} />
+    </Route>
+  )
 );
\ No newline at end of file
diff --git a/src/store.js b/src/store.js
index 933c7bc40..618ed8a94 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,5 +1,5 @@
-export const initialStore=()=>{
-  return{
+export const initialStore = () => {
+  return {
     message: null,
     todos: [
       {
@@ -12,21 +12,92 @@ export const initialStore=()=>{
         title: "Do my homework",
         background: null,
       }
-    ]
+    ],
+    contacts: [],
   }
 }
 
 export default function storeReducer(store, action = {}) {
-  switch(action.type){
+  switch (action.type) {
     case 'add_task':
 
-      const { id,  color } = action.payload
+      const { id, color } = action.payload
 
       return {
         ...store,
         todos: store.todos.map((todo) => (todo.id === id ? { ...todo, background: color } : todo))
       };
+    case "load_contacts": {
+      return {
+        ...store,
+        contacts: action.playload
+      }
+    }
     default:
       throw Error('Unknown action.');
-  }    
+  }
+}
+
+export const obtenerContactos = async (dispatch) => {
+  try {
+    const response = await fetch("https://playground.4geeks.com/contact/agendas/mati_b/contacts")
+    if (response.status == 404) {
+      await crearAgenda()
+      return
+    }
+    const data = await response.json()
+    dispatch({
+      type: "load_contacts",
+      playload: data.contacts
+    })
+
+  } catch (error) {
+    console.log(error)
+  }
 }
+export const crearAgenda = async () => {
+  try {
+    const response = await fetch("https://playground.4geeks.com/contact/agendas/mati_b", {
+      method: "POST",
+      headers: { 'Content-Type': 'application/json' }
+    })
+    console.log(response)
+  } catch (error) {
+    console.log(error)
+  }
+}
+export const crearContacto = async (dispatch, newContact) => {
+  try {
+    const response = await fetch("https://playground.4geeks.com/contact/agendas/mati_b/contacts", {
+      method: "POST",
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(newContact)
+    })
+  } catch (error) {
+    console.log(error)
+  }
+}
+export const borrarContacto = async (dispatch, id) => {
+  try {
+    const response = await fetch("https://playground.4geeks.com/contact/agendas/mati_b/contacts/" + id, {
+      method: "DELETE",
+      headers: { 'Content-Type': 'application/json' },
+    })
+
+    obtenerContactos(dispatch)
+  } catch (error) {
+    console.log(error)
+  }
+}
+export const editarContacto = async (dispatch, newContact, id) => {
+  try {
+    const response = await fetch("https://playground.4geeks.com/contact/agendas/mati_b/contacts/" + id, {
+      method: "PUT",
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(newContact)
+    })
+    obtenerContactos(dispatch)
+  } catch (error) {
+    console.log(error)
+  }
+}
\ No newline at end of file