From d6c6394c1e2fc4ba02f5a63784e25247845ae45c Mon Sep 17 00:00:00 2001 From: raulbordon Date: Mon, 23 Jun 2025 15:44:17 +0000 Subject: [PATCH 1/4] ayuda --- index.html | 4 ++ package-lock.json | 3 ++ src/components/CardItem.jsx | 27 +++++++++++++ src/components/Navbar.jsx | 58 ++++++++++++++++++++-------- src/main.jsx | 30 +++++---------- src/pages/Home.jsx | 44 +++++++++++++++------- src/pages/Layout.jsx | 37 ++++++++++++------ src/pages/Single.jsx | 75 ++++++++++++++++++++++--------------- src/store.js | 74 ++++++++++++++++++++---------------- 9 files changed, 228 insertions(+), 124 deletions(-) create mode 100644 src/components/CardItem.jsx diff --git a/index.html b/index.html index e029e2dab..5ec47a08d 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,10 @@ + diff --git a/package-lock.json b/package-lock.json index 40ae560d5..68109659f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,9 @@ "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", "vite": "^4.4.8" + }, + "engines": { + "node": ">=20.0.0" } }, "node_modules/@aashutoshrathi/word-wrap": { diff --git a/src/components/CardItem.jsx b/src/components/CardItem.jsx new file mode 100644 index 000000000..61960909f --- /dev/null +++ b/src/components/CardItem.jsx @@ -0,0 +1,27 @@ +import React, { useContext } from "react"; +import { Link } from "react-router-dom"; +import { Context } from "../store.js"; + +const CardItem = ({ item, type }) => { + const { actions } = useContext(Context); + const imageURL = `https://starwars-visualguide.com/assets/img/${type === "people" ? "characters" : type}/${item.uid}.jpg`; + + return ( +
+ {item.name} e.target.src = "https://starwars-visualguide.com/assets/img/big-placeholder.jpg"} /> +
+
{item.name}
+
+ + Learn more + + +
+
+
+ ); +}; + +export default CardItem; diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 30d43a263..3dbb8ec9a 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,19 +1,45 @@ +import React, { useContext, useState } from "react"; +import { Context } from "../store.js"; import { Link } from "react-router-dom"; -export const Navbar = () => { +const Navbar = () => { + const { store, actions } = useContext(Context); + const [showDropdown, setShowDropdown] = useState(false); - return ( - - ); -}; \ No newline at end of file + return ( + + ); +}; + +export default Navbar; diff --git a/src/main.jsx b/src/main.jsx index 3a122d76a..afbb87d72 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,22 +1,12 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import './index.css' // Global styles for your application -import { RouterProvider } from "react-router-dom"; // Import RouterProvider to use the router -import { router } from "./routes"; // Import the router configuration -import { StoreProvider } from './hooks/useGlobalReducer'; // Import the StoreProvider for global state management +import React from "react"; +import ReactDOM from "react-dom/client"; +import Layout from "./pages/Layout.jsx"; +import injectContext from "./store.js"; -const Main = () => { - return ( - - {/* Provide global state to all components */} - - {/* Set up routing for the application */} - - - - - ); -} +const LayoutWithContext = injectContext(Layout); -// Render the Main component into the root DOM element. -ReactDOM.createRoot(document.getElementById('root')).render(
) +ReactDOM.createRoot(document.getElementById("root")).render( + + + +); diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 3e9f1aefa..b48ee0625 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,16 +1,34 @@ -import rigoImageUrl from "../assets/img/rigo-baby.jpg"; -import useGlobalReducer from "../hooks/useGlobalReducer.jsx"; +import React, { useContext } from "react"; +import { Context } from "../store.js"; +import CardItem from "../components/CardItem.jsx"; -export const Home = () => { +const Home = () => { + const { store } = useContext(Context); - const {store, dispatch} =useGlobalReducer() + return ( +
+

Characters

+
+ {store.people.map((person) => ( + + ))} +
- return ( -
-

Hello Rigo!!

-

- -

-
- ); -}; \ No newline at end of file +

Planets

+
+ {store.planets.map((planet) => ( + + ))} +
+ +

Vehicles

+
+ {store.vehicles.map((vehicle) => ( + + ))} +
+
+ ); +}; + +export default Home; diff --git a/src/pages/Layout.jsx b/src/pages/Layout.jsx index 9bfa31325..f066fd0d7 100644 --- a/src/pages/Layout.jsx +++ b/src/pages/Layout.jsx @@ -1,15 +1,28 @@ -import { Outlet } from "react-router-dom/dist" -import ScrollToTop from "../components/ScrollToTop" -import { Navbar } from "../components/Navbar" -import { Footer } from "../components/Footer" +import React, { useContext, useEffect } from "react"; +import { BrowserRouter, Route, Routes } from "react-router-dom"; +import Home from "./Home.jsx"; +import Single from "./Single.jsx"; +import Navbar from "../components/Navbar.jsx"; +import { Context } from "../store.js"; + +const Layout = () => { + const { actions } = useContext(Context); + + // Cargar la data solo una vez + useEffect(() => { + actions.loadData(); + }, []); -// Base component that maintains the navbar and footer throughout the page and the scroll to top functionality. -export const Layout = () => { return ( - + - -