From 61c0d1c3f06107a40bd30279e098be590b6caf73 Mon Sep 17 00:00:00 2001 From: Dani Yanani Date: Mon, 24 Feb 2025 12:04:06 +0000 Subject: [PATCH 1/3] parte_1 --- "src/pages/A\303\261adirCoontacto.jsx" | 0 src/pages/EditarContacto.jsx | 0 src/pages/EliminarContacto.jsx | 0 src/pages/ListaDeContactos.jsx | 47 +++++++++++++++++++++++ src/store.js | 52 ++++++++++++++++---------- 5 files changed, 80 insertions(+), 19 deletions(-) create mode 100644 "src/pages/A\303\261adirCoontacto.jsx" create mode 100644 src/pages/EditarContacto.jsx create mode 100644 src/pages/EliminarContacto.jsx create mode 100644 src/pages/ListaDeContactos.jsx diff --git "a/src/pages/A\303\261adirCoontacto.jsx" "b/src/pages/A\303\261adirCoontacto.jsx" new file mode 100644 index 000000000..e69de29bb diff --git a/src/pages/EditarContacto.jsx b/src/pages/EditarContacto.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/pages/EliminarContacto.jsx b/src/pages/EliminarContacto.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/pages/ListaDeContactos.jsx b/src/pages/ListaDeContactos.jsx new file mode 100644 index 000000000..55ba25a5e --- /dev/null +++ b/src/pages/ListaDeContactos.jsx @@ -0,0 +1,47 @@ +import { useEffect } from "react" +import useGlobalReducer from "../hooks/useGlobalReducer" + + +export const ListaDeContactos = async () => { + const { store, dispatch } = useGlobalReducer() + const getContacts = async () => { + try { + const response = await fletch() + if (!response.ok) throw new Error("No se pudo cargar los datos.") + const data = await response.json() + + console.log (data.contacts); + + dispatch( + { + type: actualizarContacto, + payload: data.contacts + } + ) + } catch (error) { + + } + + return ( + + <> + + + + + useEffect(() => {getContacts()},[]) + } + diff --git a/src/store.js b/src/store.js index 933c7bc40..aada54963 100644 --- a/src/store.js +++ b/src/store.js @@ -1,32 +1,46 @@ -export const initialStore=()=>{ - return{ - message: null, - todos: [ - { - id: 1, - title: "Make the bed", - background: null, - }, +export const initialStore = () => { + return { + + "contacts": [ { - id: 2, - title: "Do my homework", - background: null, + "name": "", + "phone": "", + "email": "", + "address": "", + "id": 0 } ] } } + export default function storeReducer(store, action = {}) { - switch(action.type){ - case 'add_task': + switch (action.type) { - const { id, color } = action.payload + case 'añadirContacto': + return { + ...store, agendas: action.payload + }; + case 'editarContacto': return { + ...store, - todos: store.todos.map((todo) => (todo.id === id ? { ...todo, background: color } : todo)) + contacts: store.contacts.map(contact => + contact.id === action.payload.id ? action.payload : + contact.name + ) }; + + case 'eliminarContacto': + + return { + ...store, + contacts: store.contact.filter(contact => contact.id !== action.payload) + }; + default: - throw Error('Unknown action.'); - } -} + throw new Error("Unknow Action."); + + } +} \ No newline at end of file From b50ebf52b1591b0f38d5ca7be09b2baa6993efbd Mon Sep 17 00:00:00 2001 From: Dani Yanani Date: Mon, 24 Feb 2025 14:57:23 +0000 Subject: [PATCH 2/3] paso_2 --- .../pages/AddContact.jsx | 0 src/pages/ContactList.jsx | 64 +++++++++++++++++++ .../{EditarContacto.jsx => DeleteContact.jsx} | 0 .../{EliminarContacto.jsx => EditContact.jsx} | 0 src/pages/ListaDeContactos.jsx | 47 -------------- src/routes.jsx | 7 +- src/store.js | 30 +++++---- 7 files changed, 84 insertions(+), 64 deletions(-) rename "src/pages/A\303\261adirCoontacto.jsx" => src/pages/AddContact.jsx (100%) create mode 100644 src/pages/ContactList.jsx rename src/pages/{EditarContacto.jsx => DeleteContact.jsx} (100%) rename src/pages/{EliminarContacto.jsx => EditContact.jsx} (100%) delete mode 100644 src/pages/ListaDeContactos.jsx diff --git "a/src/pages/A\303\261adirCoontacto.jsx" b/src/pages/AddContact.jsx similarity index 100% rename from "src/pages/A\303\261adirCoontacto.jsx" rename to src/pages/AddContact.jsx diff --git a/src/pages/ContactList.jsx b/src/pages/ContactList.jsx new file mode 100644 index 000000000..3acc3ea13 --- /dev/null +++ b/src/pages/ContactList.jsx @@ -0,0 +1,64 @@ +import { useEffect } from "react" +import { useNavigate } from "react-router-dom" +import useGlobalReducer from "../hooks/useGlobalReducer" +import { func } from "prop-types" + + +export const ContactList = () => { + + const { store, dispatch } = useGlobalReducer(); + + useEffect(() => { + const getContacts = async () => { + try { + const response = await fletch('https://playground.4geeks.com/contact/agendas/Dani'); + + if (!response.ok) { + throw new Error("No se pudo cargar los datos."); + } + + const data = await response.json(); + + setContacts(data.contact) + + console.log(data.contacts); + + dispatch( + { + type: editontact, + payload: {contact: data.contact} + } + ) + } + + catch (error) { console.error("No se descargaron los datos"); }; + + + return ( + <> + + + ); + + + + + + + useEffect(() => { getContacts() }, []) + } + }; diff --git a/src/pages/EditarContacto.jsx b/src/pages/DeleteContact.jsx similarity index 100% rename from src/pages/EditarContacto.jsx rename to src/pages/DeleteContact.jsx diff --git a/src/pages/EliminarContacto.jsx b/src/pages/EditContact.jsx similarity index 100% rename from src/pages/EliminarContacto.jsx rename to src/pages/EditContact.jsx diff --git a/src/pages/ListaDeContactos.jsx b/src/pages/ListaDeContactos.jsx deleted file mode 100644 index 55ba25a5e..000000000 --- a/src/pages/ListaDeContactos.jsx +++ /dev/null @@ -1,47 +0,0 @@ -import { useEffect } from "react" -import useGlobalReducer from "../hooks/useGlobalReducer" - - -export const ListaDeContactos = async () => { - const { store, dispatch } = useGlobalReducer() - const getContacts = async () => { - try { - const response = await fletch() - if (!response.ok) throw new Error("No se pudo cargar los datos.") - const data = await response.json() - - console.log (data.contacts); - - dispatch( - { - type: actualizarContacto, - payload: data.contacts - } - ) - } catch (error) { - - } - - return ( - - <> - - - - - useEffect(() => {getContacts()},[]) - } - diff --git a/src/routes.jsx b/src/routes.jsx index 0557df614..23ef8e1f8 100644 --- a/src/routes.jsx +++ b/src/routes.jsx @@ -9,6 +9,7 @@ import { Layout } from "./pages/Layout"; import { Home } from "./pages/Home"; import { Single } from "./pages/Single"; import { Demo } from "./pages/Demo"; +import { ContactList } from "./pages/ContactList"; export const router = createBrowserRouter( createRoutesFromElements( @@ -22,9 +23,9 @@ export const router = createBrowserRouter( } errorElement={

Not found!

} > {/* Nested Routes: Defines sub-routes within the BaseHome component. */} - } /> - } /> {/* Dynamic route for single items */} - } /> + } /> + } /> {/* Dynamic route for single items */} + } /> ) ); \ No newline at end of file diff --git a/src/store.js b/src/store.js index aada54963..0f3160b33 100644 --- a/src/store.js +++ b/src/store.js @@ -1,7 +1,7 @@ export const initialStore = () => { return { - "contacts": [ + contacts: [ { "name": "", "phone": "", @@ -17,30 +17,32 @@ export const initialStore = () => { export default function storeReducer(store, action = {}) { switch (action.type) { - case 'añadirContacto': + case "addContact": return { - ...store, agendas: action.payload + ...store, + contacts: action.payload }; - case 'editarContacto': + case "editcontact": return { - ...store, - contacts: store.contacts.map(contact => - contact.id === action.payload.id ? action.payload : - contact.name - ) + contacts: [...store.contacts, action.payload] }; - case 'eliminarContacto': + case "deleteContact": return { ...store, - contacts: store.contact.filter(contact => contact.id !== action.payload) + contacts: store.contacts.filter(contact => contact.id !== action.payload) }; - default: - throw new Error("Unknow Action."); + + + default: return store; } -} \ No newline at end of file + + +} + + \ No newline at end of file From 40464a10f11445a6aa5bc694521c3053235765d9 Mon Sep 17 00:00:00 2001 From: Dani Yanani Date: Tue, 25 Feb 2025 16:58:46 +0000 Subject: [PATCH 3/3] parte_3 --- src/components/CardContact.jsx | 31 ++++++++++++++ src/components/Navbar.jsx | 44 ++++++++++++++------ src/main.jsx | 4 ++ src/pages/AddContact.jsx | 0 src/pages/ContactList.jsx | 64 ----------------------------- src/pages/Contacts/AddContact.jsx | 14 +++++++ src/pages/Contacts/ContactList.jsx | 53 ++++++++++++++++++++++++ src/pages/Contacts/EditContact.jsx | 14 +++++++ src/pages/Contacts/ViewContacts.jsx | 13 ++++++ src/pages/DeleteContact.jsx | 0 src/pages/EditContact.jsx | 0 src/pages/Home.jsx | 6 ++- src/pages/Layout.jsx | 6 ++- src/pages/Single.jsx | 37 ----------------- src/routes.jsx | 43 ++++++++----------- src/store.js | 19 +++++---- 16 files changed, 197 insertions(+), 151 deletions(-) create mode 100644 src/components/CardContact.jsx delete mode 100644 src/pages/AddContact.jsx delete mode 100644 src/pages/ContactList.jsx create mode 100644 src/pages/Contacts/AddContact.jsx create mode 100644 src/pages/Contacts/ContactList.jsx create mode 100644 src/pages/Contacts/EditContact.jsx create mode 100644 src/pages/Contacts/ViewContacts.jsx delete mode 100644 src/pages/DeleteContact.jsx delete mode 100644 src/pages/EditContact.jsx delete mode 100644 src/pages/Single.jsx diff --git a/src/components/CardContact.jsx b/src/components/CardContact.jsx new file mode 100644 index 000000000..288eac7f5 --- /dev/null +++ b/src/components/CardContact.jsx @@ -0,0 +1,31 @@ +import React from "react"; +import { useNavigate } from "react-router-dom"; + + +function CardContact(props) { + + const navigate = useNavigate() + + return ( + + <> +
+ Contact + +
+
{props.contactName}
+
+
    +
  • {props.contactMail}
    • +
  • {props.contactPhone}
    • +
  • {props.contactAddress}
    • +
+ +
+ + ) +} +export default CardContact; \ No newline at end of file diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 30d43a263..3bd123556 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,19 +1,37 @@ +import React from "react"; +import { useNavigate } from "react-router-dom"; import { Link } from "react-router-dom"; -export const Navbar = () => { +function Navbar() { + const navigate = useNavigate(); + + const goHome =() => { + navigate('/'); + }; + const goBack = () => { + navigate(-1); + }; + return ( -