Skip to content

Silvia #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 19, 2025
Merged

Silvia #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ea3a866
prueba-barra-buscar-navbar
Silvia-LC Aug 17, 2025
9c163b6
search bar
Silvia-LC Aug 19, 2025
fd35d7c
Merge branch 'beta' into Silvia
Silvia-LC Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions src/api/routes/games.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,3 +129,20 @@ def get_games_by_platform(platform):

games = [g.serialize() for g in q.all()] #devuelve todos los juegos encontrados
return jsonify({"games": games}), 200

# BUSCAR JUEGOS NAVBAR
#@api.route('/SearchGames/<int:game_id>', methods=["GET"])
#def get_games_by_search():
#query = request.args.get("query")

#if not query:
#return jsonify({"error": "Falta el parámetro 'query'"}), 400

#try:
#results = Games.query.filter(Games.name.ilike(f"%{query}%")).all()
#games_list = [{"id": game.id, "name": game.name} for game in results]
#return jsonify(games_list)
#except Exception as e:
#print("Error en la búsqueda:", e)
#return jsonify({"error": "Juego no encontrado"}), 500

82 changes: 57 additions & 25 deletions src/front/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,28 @@
import './Navbar.css'
import { useState, useEffect } from "react"
import { Link, useNavigate } from "react-router-dom"
import { Link, useNavigate, useParams } from "react-router-dom"
import { LogOut } from 'lucide-react';
import { LogIn } from 'lucide-react';
import Logo from "../assets/img/logo.png";
import useGlobalReducer from "../hooks/useGlobalReducer";

export default function Navbar({showDrowpdown, setShowDrowpdown}) {
export default function Navbar({ showDrowpdown, setShowDrowpdown }) {
const { store, dispatch } = useGlobalReducer()
const { all_games } = store;
console.log(all_games)
const navigate = useNavigate()
const token_user = localStorage.getItem('jwt-token');
const user = localStorage.getItem('user');
const [view, setview] = useState(false)
const [view, setview] = useState(false);
const [searchGame, setSearchGame] = useState() /* Barra de buscar funcional*/


const handleSearch = () => {
if (searchGame.trim()) {
navigate(`/search?query=${encodeURIComponent(searchGame)}`);
}

};

const cerrarSesion = () => {
localStorage.removeItem("jwt-token")
Expand All @@ -38,6 +49,19 @@ export default function Navbar({showDrowpdown, setShowDrowpdown}) {
}, [token_user]);


const search = () => {

const game = all_games.find(game => game.name === searchGame)
console.log(game)
console.log(game.id)
navigate(`/DetailsGames/${game.id}`)

if (!game.name == searchGame)
alert("Juego no encontrado")

}


return (
<nav className="bg-gray-900">
<div className=" navbar-bg mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
Expand Down Expand Up @@ -72,42 +96,50 @@ export default function Navbar({showDrowpdown, setShowDrowpdown}) {
Juegos
</button>
{showDrowpdown && (
<ul className="absolute z-10 mt-2 w-40 rounded-md bg-white shadow-lg ring-1 ring-black/5">
<li><Link to="/games/platform/PS5" className="block px-4 py-2 text-sm text-indigo-900 hover:bg-indigo-200">PS5</Link></li>
<li><Link to="/games/platform/PS4" className="block px-4 py-2 text-sm text-indigo-900 hover:bg-indigo-200">PS4</Link></li>
<li><Link to="/games/platform/Xbox One" className="block px-4 py-2 text-sm text-indigo-900 hover:bg-indigo-200">Xbox One</Link></li>
<li><Link to="/games/platform/Nintendo Switch" className="block px-4 py-2 text-sm text-indigo-900 hover:bg-indigo-200">Nintendo Switch</Link></li>
<li><Link to="/games/platform/Nintendo Switch 2" className="block px-4 py-2 text-sm text-indigo-900 hover:bg-indigo-200">Nintendo Switch 2</Link></li>
<li><Link to="/games/platform/PC" className="block px-4 py-2 text-sm text-indigo-900 hover:bg-indigo-200">PC</Link></li>
</ul>
<ul className="absolute z-10 mt-2 w-40 rounded-md bg-white shadow-lg ring-1 ring-black/5">
<li><Link to="/games/platform/PS5" className="block px-4 py-2 text-sm text-indigo-900 hover:bg-indigo-200">PS5</Link></li>
<li><Link to="/games/platform/PS4" className="block px-4 py-2 text-sm text-indigo-900 hover:bg-indigo-200">PS4</Link></li>
<li><Link to="/games/platform/Xbox One" className="block px-4 py-2 text-sm text-indigo-900 hover:bg-indigo-200">Xbox One</Link></li>
<li><Link to="/games/platform/Nintendo Switch" className="block px-4 py-2 text-sm text-indigo-900 hover:bg-indigo-200">Nintendo Switch</Link></li>
<li><Link to="/games/platform/Nintendo Switch 2" className="block px-4 py-2 text-sm text-indigo-900 hover:bg-indigo-200">Nintendo Switch 2</Link></li>
<li><Link to="/games/platform/PC" className="block px-4 py-2 text-sm text-indigo-900 hover:bg-indigo-200">PC</Link></li>
</ul>
)}
</div>

{
{
view && (
<Link to="/addgame">
<p href="#" className="rounded-md px-3 py-2 text-lg font-bold text-gray-300 hover:text-white">Añadir Juego</p>
</Link>
)}

{/* Barra de buscar funcional*/}

<input
type="text"
value={searchGame}
onChange={(e) => setSearchGame(e.target.value)}
placeholder="Buscar..."
className="px-1 py-1 border rounded-md focus:outline-none focus:ring focus:border-indigo-900"
className="px-1 py-1 border rounded-md focus:outline-none focus:ring focus:border-gray-900"
/>
<button onClick={search}>
Buscar
</button>

</div>
</div>
</div>
<div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">

{/* ---- carrito ---- */}
<Link to="/Carro" className="relative mr-4">
{
{

token_user && (
<span className="text-white text-2xl">🛒</span>
)}

token_user && (
<span className="text-white text-2xl">🛒</span>
)}

{store.carro && store.carro.length > 0 && (
<span className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full text-xs px-1">
{store.carro.length}
Expand All @@ -116,12 +148,12 @@ export default function Navbar({showDrowpdown, setShowDrowpdown}) {
</Link>
{

token_user && (
<Link to="/historial" className="rounded-md px-3 py-2 text-lg font-bold text-gray-300 hover:text-white">
Historial
</Link>
)}
token_user && (
<Link to="/historial" className="rounded-md px-3 py-2 text-lg font-bold text-gray-300 hover:text-white">
Historial
</Link>
)}



<button type="button" className="relative rounded-full p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden">
Expand Down
34 changes: 34 additions & 0 deletions src/front/components/searchgames/SearchGames.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { useLocation } from "react-router-dom";
import { useEffect, useState } from "react";

const backendUrl = "https://refactored-couscous-x5p76ppwgq5v3xxr-3001.app.github.dev/"; // Cada uno tiene que poner su url de su backend hasta tener BD común

export default function SearchResults() {
const location = useLocation();
const query = new URLSearchParams(location.search).get("query");
const [results, setResults] = useState([]);

useEffect(() => {
if (query) {
fetch(`${backendUrl}api/games/search?query=${encodeURIComponent(query)}`)
.then(res => res.json())
.then(data => setResults(data))
.catch(err => console.error("Error al buscar:", err));
}
}, [query]);

return (
<div>
<h2>Resultados para: {query}</h2>
{results.length > 0 ? (
<ul>
{results.map(game => (
<li key={game.id}>{game.name}</li>
))}
</ul>
) : (
<p> No se encontraron resultados </p>
)}
</div>
);
}
2 changes: 1 addition & 1 deletion src/front/routes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export const router = createBrowserRouter(
<Route path="/historial" element={<Historial />} />
<Route path="/recPassword" element={<RecPassword />} />
<Route path="/resetPassword/:token" element={<ResetPassword />} />
<Route path="/editgames/:id" element={<EditGames />} /> {/* PAGINA DETALLES GAMES*/}
<Route path="/editgames/:id" element={<EditGames />} />
<Route path="/games/platform/:platform" element={<GamesByPlatform />} />


Expand Down