Quick Start

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import PrincipalPage from './pages/PrincipalPage';
import PeliculasPage from './pages/PeliculasPage';
import PeliculaDetailPage from './pages/PeliculaDetailPage';
import AlquileresPage from './pages/AlquileresPage';
import ComprasPage from './pages/ComprasPage';

function App() {
  return (
    <Router>
      <div className="app">
        <Header />
        <main className="app__main">
          <Routes>
            <Route path="/" element={<PrincipalPage />} />
            <Route path="/peliculas" element={<PeliculasPage />} />
            <Route path="/pelicula/:id" element={<PeliculaDetailPage />} />
            <Route path="/gestion-alquileres" element={<AlquileresPage />} />
            <Route path="/gestion-compras" element={<ComprasPage />} />
          </Routes>
        </main>
        <Footer />
      </div>
    </Router>
  );
}

export default App;

import { useState, useEffect } from "react";
import { mockPeliculas } from "../data/mockPeliculas";

const usePeliculaSearch = (initialPeliculas = mockPeliculas) => {
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("");
  const [filteredPeliculas, setFilteredPeliculas] = useState(initialPeliculas);
  const [loading, setLoading] = useState(false);

  // Filter movies by search term and category
  useEffect(() => {
    setLoading(true);

    const timer = setTimeout(() => {
      let results = mockPeliculas;

      // Search by title, director, or cast
      if (searchTerm) {
        results = results.filter(
          (pelicula) =>
            pelicula.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
            pelicula.director.toLowerCase().includes(searchTerm.toLowerCase()) ||
            pelicula.cast.some((actor) =>
              actor.toLowerCase().includes(searchTerm.toLowerCase())
            )
        );
      }

      // Filter by genre
      if (selectedCategory) {
        results = results.filter(
          (pelicula) => pelicula.genre === selectedCategory
        );
      }

      setFilteredPeliculas(results);
      setLoading(false);
    }, 300);

    return () => clearTimeout(timer);
  }, [searchTerm, selectedCategory]);

  return {
    searchTerm,
    setSearchTerm,
    selectedCategory,
    setSelectedCategory,
    filteredPeliculas,
    loading,
    categories: [...new Set(mockPeliculas.map((p) => p.genre))]
  };
};

export default usePeliculaSearch;