Saltar a contenido

Documentación de Páginas Principales

Este documento describe las páginas clave de la aplicación, sus responsabilidades, estructura y componentes involucrados. Se incluyen fragmentos de código relevantes para facilitar su comprensión.

HomeUser.jsx - Página de Inicio del Usuario

Función

Muestra productos disponibles dentro del radio geográfico del usuario.

Lógica principal

const [products, setProducts] = useState([]);
const searchTerm = searchParams.get('search') || '';
const sorted = [...filtered].sort((a, b) => a.name.localeCompare(b.name));
  • Filtrado por búsqueda y categoría.
  • Ordenamiento configurable.
  • Paginación.

Componentes usados

  • ProductGrid
  • TopControls
  • Pagination

SellerHome.jsx - Inicio del Vendedor

Función

Muestra productos publicados por el vendedor actual y permite crearlos.

Fragmento clave

const fetchData = async () => {
  const data = await getProductsPostedByUser();
  setProducts(data.products.filter(p => p.name && p.price));
};
  • Permite buscar entre productos propios.
  • Permite crear un nuevo producto vía ProductCreateModal.

Componentes usados

  • ProductGrid (modo vendedor)
  • TopControls con setShowModal
  • Pagination
  • ProductCreateModal

Login.jsx - Pantalla de Inicio de Sesión

Función

Renderiza el formulario de inicio de sesión y el logo.

Estructura visual

<div className="flex flex-row">
  <div className="w-2xl login-container bg-primaryColor">
    <img alt="Logo" src={Logo} />
    <LoginForm />
  </div>
  <img src={bgImage} />
</div>
  • Usa LoginForm desde features/auth/LoginForm.

Register.jsx - Pantalla de Registro

Función

Muestra el formulario de registro con estilo dividido en dos columnas.

Estructura visual

<div className="w-2xl bg-altBgColor/20">
  <img src={Logo} />
</div>
<div className="bg-primaryColor w-screen">
  <RegisterForm />
</div>
  • Usa RegisterForm desde features/auth/RegisterForm.

Cada página usa rutas declaradas en el sistema de navegación (react-router-dom). Las rutas típicas son:

  • /home → HomeUser
  • /seller/home → SellerHome
  • /login → Login
  • /register → Register

Componentes Reutilizables Clave

  • Pagination: navegación entre páginas.
  • ProductGrid: visualización de productos.
  • TopControls: filtros y ordenamiento.
  • ProductCreateModal: creación de productos.
  • LoginForm y RegisterForm: formularios controlados con validaciones.

Servicios Relacionados

  • getProductsByArea(distance) → productos por cercanía (HomeUser)
  • getProductsPostedByUser() → productos del vendedor (SellerHome)