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
consetShowModal
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
desdefeatures/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
desdefeatures/auth/RegisterForm
.
Navegación React Router
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
yRegisterForm
: formularios controlados con validaciones.
Servicios Relacionados
getProductsByArea(distance)
→ productos por cercanía (HomeUser
)getProductsPostedByUser()
→ productos del vendedor (SellerHome
)