Ramaavanzada

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 (
+
+        <>
+            <div className="card bg-secondary" style={{ width: "12rem"}}>
+                <img src="https://www.pokemon.com/static-assets/content-assets/cms2/img/pokedex/full/025.png" className="card-img-top" alt="Contact" />
+
+                <div className="card-body">
+                    <h5 className="card-title"> {props.contactName}</h5>
+                </div>
+                <ul className="list-group list-group-flush">
+                    <li className="list-group-item">{props.contactMail}</li>
+                    <li className="list-group-item">{props.contactPhone}</li>
+                    <li className="list-group-item">{props.contactAddress}</li>
+                </ul>
+                <div className="card-body">
+                    <a className="card-link" onClick={() => navigate(`/ViewContacts/${props.contactId}`)}> View Contact</a>
+                    <a className="card-link">Another link</a>
+                </div>
+            </div>
+        </>
+    )
+}
+export default CardContact;

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 (
-		<nav className="navbar navbar-light bg-light">
-			<div className="container">
-				<Link to="/">
-					<span className="navbar-brand mb-0 h1">React Boilerplate</span>
-				</Link>
-				<div className="ml-auto">
-					<Link to="/demo">
-						<button className="btn btn-primary">Check the Context in action</button>
-					</Link>
-				</div>
-			</div>
+		<nav className="navbar navbar-light bg-black">
+			<ul className="cnav-links">
+				<li>
+					<Link to="/contact_list">Lista de contactos</Link>
+				</li>
+
+				<li>
+					<Link to="/">Acerca de</Link>
+				</li>
+
+				<li>
+					<Link to="/">Contacto</Link>
+				</li>
+
+				</ul>
+
 		</nav>
 	);
-};
+};
+
+export default Navbar;

src/main.jsx

@@ -5,8 +5,12 @@ import { RouterProvider } from "react-router-dom";  // Import RouterProvider to
 import { router } from "./routes";  // Import the router configuration
 import { StoreProvider } from './hooks/useGlobalReducer';  // Import the StoreProvider for global state management
 
+
+
+
 const Main = () => {
     return (
+
         <React.StrictMode>  
             {/* Provide global state to all components */}
             <StoreProvider> 

src/pages/Contacts/AddContact.jsx

@@ -0,0 +1,14 @@
+import React from "react";    
+import useGlobalReducer from "../../hooks/useGlobalReducer.jsx";   
+
+ const AddContact = () => {
+
+    const {store, dispatch} =useGlobalReducer()
+    return (
+
+        <div className = "addContact"/>, <h2>Add Contacts</h2>
+    );
+};
+
+export default AddContact;
+

src/pages/Contacts/ContactList.jsx

@@ -0,0 +1,53 @@
+import React, { useEffect } from "react";
+import useGlobalReducer from "../../hooks/useGlobalReducer.jsx";
+import CardContact from "../../components/CardContact.jsx"
+
+const ContactList = () => {
+
+    const { store, dispatch } = useGlobalReducer()
+
+    useEffect(() => { fetchContacts() }, []);
+
+    const fetchContacts = async () => {
+        try {
+            const response = await fetch('https://playground.4geeks.com/contact/agendas/Dani');
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            const data = await response.json();
+            console.log(data);
+            dispatch({ type: 'setContacts', payload: data.contacts });
+
+        } catch (error) {
+            console.error("Hubo un problema con la solicitud:", error);
+        }
+    };
+
+    return (
+
+        <>
+            <div className="ContactList">
+                <h2 className="bg-danger"> Contact List </h2>
+                <div className="row">
+                    {store.contacts.map((contact, index) => {
+                        return (
+                            <div key={index} className="col-3">
+                                <CardContact contactName={contact.name}
+                                    contacMail={contact.email}
+                                    contactPhone={contact.phone}
+                                    contactAddress={contact.address}
+                                    contactId={contact.id} />
+
+                            </div>
+                        )
+                    })}
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default ContactList;
+
+
+

src/pages/Contacts/EditContact.jsx

@@ -0,0 +1,14 @@
+import React from "react";    
+import useGlobalReducer from "../../hooks/useGlobalReducer.jsx";   
+
+const EditContact = () => {
+
+    const {store, dispatch} =useGlobalReducer()
+
+    return (
+
+        <div className = "EditContacts"/>, <h2>Edit Contacts</h2>
+    );
+};
+
+export default EditContact;

src/pages/Contacts/ViewContacts.jsx

@@ -0,0 +1,13 @@
+import React, { useContext } from "react";
+import useGlobalReducer from "../../hooks/useGlobalReducer.jsx";   
+
+const ViewContacts = () => {
+
+    const {store, dispatch} =useGlobalReducer()
+    return (
+
+        <div className = "ViewContacts"/>, <h2>View Contacts</h2>
+    );
+};
+
+export default ViewContacts;

src/pages/Home.jsx

@@ -1,7 +1,7 @@
 import rigoImageUrl from "../assets/img/rigo-baby.jpg";
 import useGlobalReducer from "../hooks/useGlobalReducer.jsx";
 
-export const Home = () => {
+const Home = () => {
 
   const {store, dispatch} =useGlobalReducer()
 
@@ -13,4 +13,6 @@ export const Home = () => {
 			</p>
 		</div>
 	);
-}; 
+}; 
+
+export default Home;

src/pages/Layout.jsx

@@ -1,6 +1,6 @@
 import { Outlet } from "react-router-dom/dist"
 import ScrollToTop from "../components/ScrollToTop"
-import { Navbar } from "../components/Navbar"
+import  Navbar  from "../components/Navbar"
 import { Footer } from "../components/Footer"
 
 // Base component that maintains the navbar and footer throughout the page and the scroll to top functionality.
@@ -12,4 +12,6 @@ export const Layout = () => {
             <Footer />
         </ScrollToTop>
     )
-}
+}
+
+export default Layout;

src/routes.jsx

@@ -1,30 +1,24 @@
-// Import necessary components and functions from react-router-dom.
-
-import {
-    createBrowserRouter,
-    createRoutesFromElements,
-    Route,
-} from "react-router-dom";
+import { createBrowserRouter, createRoutesFromElements, Route, Navigate } from "react-router-dom";
 import { Layout } from "./pages/Layout";
-import { Home } from "./pages/Home";
-import { Single } from "./pages/Single";
-import { Demo } from "./pages/Demo";
+import Home  from "./pages/Home";
+import ContactList from "./pages/Contacts/ContactList"
+import ViewContacts from "./pages/Contacts/ViewContacts";
+import AddContact from "./pages/Contacts/AddContact";
+import EditContact from "./pages/Contacts/EditContact";
 
 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(
+    <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>} >
+
+        <Route path="/" element={<Home />} />
+        <Route path="/ViewContacts/:Id" element={<ViewContacts />} />
+        <Route path="/contact_list" element={<ContactList/>} />
+        <Route path="/add_contact" element={<AddContact/>} />
+        <Route path="/edit_contact" element={<EditContact/>} />
 
-        {/* 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>
-    )
-);
+  )
+);
+
+export default router;