From aa29fb8e4c8f0aedbb192cb076d6c8ac860af596 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sun, 1 Dec 2024 11:18:16 -0600 Subject: [PATCH 1/2] Remove unused useEffect import from reports details page --- src/app/reports/details/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/reports/details/page.tsx b/src/app/reports/details/page.tsx index 0ae519d..489b289 100644 --- a/src/app/reports/details/page.tsx +++ b/src/app/reports/details/page.tsx @@ -5,7 +5,7 @@ import { useReports } from "@/contexts/ReportsContext"; import { useRouter } from "next/navigation"; import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import { useRole } from "@/contexts/RoleContext"; -import { useState, useEffect } from "react"; +import { useState } from "react"; import { Status } from "@/types/register"; import ConfirmModal from "@/components/ConfirmModal"; import MapWithMarker from "@/components/MapWithMarker"; // Importa el componente del mapa From 00ebdea3bed964b7562252d77d8414702227b66c Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sun, 1 Dec 2024 11:18:19 -0600 Subject: [PATCH 2/2] Improve error handling in user authentication flow --- src/components/RegisterList.tsx | 270 +++++++++++++++++++++++--------- 1 file changed, 195 insertions(+), 75 deletions(-) diff --git a/src/components/RegisterList.tsx b/src/components/RegisterList.tsx index 04abe80..abaa3fa 100644 --- a/src/components/RegisterList.tsx +++ b/src/components/RegisterList.tsx @@ -1,22 +1,22 @@ -import React, { useState, useEffect, useCallback } from 'react'; -import { Register, Status } from '@/types/register'; -import { useRouter } from 'next/navigation'; -import { useReports } from '@/contexts/ReportsContext'; -import { useLinesStations } from '@/stores/LinesStationsContext'; -import { Station } from '@/types'; +import React, { useState, useEffect, useCallback } from "react"; +import { Register, Status } from "@/types/register"; +import { useRouter } from "next/navigation"; +import { useReports } from "@/contexts/ReportsContext"; +import { useLinesStations } from "@/stores/LinesStationsContext"; +import { Station } from "@/types"; const RegisterList: React.FC = () => { const [filteredRegisters, setFilteredRegisters] = useState([]); const [filters, setFilters] = useState({ - user: '', - transport: '', - line: '', - route: '', - station: '', - status: '', - sort: 'mostRecent', // Default sorting order - search: '', // Search term - sortField: 'date', // Default sort field + user: "", + transport: "", + line: "", + route: "", + station: "", + status: "", + sort: "mostRecent", // Default sorting order + search: "", // Search term + sortField: "date", // Default sort field }); const [currentPage, setCurrentPage] = useState(1); const itemsPerPage = 5; // Number of items per page @@ -29,39 +29,60 @@ const RegisterList: React.FC = () => { let filtered = reports; if (filters.user) { - filtered = filtered.filter(register => register.user.toString().includes(filters.user)); + filtered = filtered.filter((register) => + register.user.toString().includes(filters.user) + ); } if (filters.transport) { - filtered = filtered.filter(register => register.transport.includes(filters.transport)); + filtered = filtered.filter((register) => + register.transport.includes(filters.transport) + ); } if (filters.line) { - filtered = filtered.filter(register => register.line.toString().includes(filters.line)); + filtered = filtered.filter((register) => + register.line.toString().includes(filters.line) + ); } if (filters.route) { - filtered = filtered.filter(register => register.route.toString().includes(filters.route)); + filtered = filtered.filter((register) => + register.route.toString().includes(filters.route) + ); } if (filters.station) { - filtered = filtered.filter(register => register.station.toString().includes(filters.station)); + filtered = filtered.filter((register) => + register.station.toString().includes(filters.station) + ); } if (filters.status) { - filtered = filtered.filter(register => register.status === filters.status); + filtered = filtered.filter( + (register) => register.status === filters.status + ); } if (filters.search) { - filtered = filtered.filter(register => - Object.values(register).some(value => + filtered = filtered.filter((register) => + Object.values(register).some((value) => value.toString().toLowerCase().includes(filters.search.toLowerCase()) ) ); } + // Exclude registers with coordinates (0, 0) + filtered = filtered.filter( + (register) => !(Number(register.x) === 0 && Number(register.y) === 0) + ); + // Sort by selected field filtered = filtered.sort((a, b) => { const fieldA = a[filters.sortField as keyof Register]; const fieldB = b[filters.sortField as keyof Register]; - if (typeof fieldA === 'string' && typeof fieldB === 'string') { - return filters.sort === 'mostRecent' ? fieldB.localeCompare(fieldA) : fieldA.localeCompare(fieldB); - } else if (typeof fieldA === 'number' && typeof fieldB === 'number') { - return filters.sort === 'mostRecent' ? fieldB - fieldA : fieldA - fieldB; + if (typeof fieldA === "string" && typeof fieldB === "string") { + return filters.sort === "mostRecent" + ? fieldB.localeCompare(fieldA) + : fieldA.localeCompare(fieldB); + } else if (typeof fieldA === "number" && typeof fieldB === "number") { + return filters.sort === "mostRecent" + ? fieldB - fieldA + : fieldA - fieldB; } else { return 0; } @@ -72,10 +93,14 @@ const RegisterList: React.FC = () => { useEffect(() => { filterRegisters(); - setFilteredStations(stations.filter(station => station.line === Number(filters.line))); + setFilteredStations( + stations.filter((station) => station.line === Number(filters.line)) + ); }, [filters, currentPage, filterRegisters, lines, stations]); - const handleFilterChange = (e: React.ChangeEvent) => { + const handleFilterChange = ( + e: React.ChangeEvent + ) => { const { name, value } = e.target; setFilters({ ...filters, @@ -86,25 +111,28 @@ const RegisterList: React.FC = () => { const resetFilters = () => { setFilters({ - user: '', - transport: '', - line: '', - route: '', - station: '', - status: '', - sort: 'mostRecent', - search: '', - sortField: 'date', + user: "", + transport: "", + line: "", + route: "", + station: "", + status: "", + sort: "mostRecent", + search: "", + sortField: "date", }); setCurrentPage(1); // Reset to first page when filters reset }; const uniqueValues = (key: keyof Register) => { - return Array.from(new Set(reports.map(register => register[key]))); + return Array.from(new Set(reports.map((register) => register[key]))); }; // Calculate paginated data - const paginatedRegisters = filteredRegisters.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage); + const paginatedRegisters = filteredRegisters.slice( + (currentPage - 1) * itemsPerPage, + currentPage * itemsPerPage + ); const totalPages = Math.ceil(filteredRegisters.length / itemsPerPage); @@ -114,7 +142,7 @@ const RegisterList: React.FC = () => { const handleViewMore = (register: Register) => { setSelectedReport(register); - router.push('/reports/details'); + router.push("/reports/details"); }; return ( @@ -128,52 +156,105 @@ const RegisterList: React.FC = () => { onChange={handleFilterChange} className="p-2 border border-gray-300 rounded" /> - - {uniqueValues('user').map(user => ( - + {uniqueValues("user").map((user) => ( + ))} - - {uniqueValues('transport').map(transport => ( - + {uniqueValues("transport").map((transport) => ( + ))} - {lines.map((line) => { - const { firstStation, lastStation } = getFirstAndLastStations(line.id); + const { firstStation, lastStation } = getFirstAndLastStations( + line.id + ); return ( ); })} - - {uniqueValues('route').map(route => ( - + {uniqueValues("route").map((route) => ( + ))} - {filteredStations.map((station) => ( - + ))} - - {Object.values(Status).map(status => ( - + {Object.values(Status).map((status) => ( + ))} - - @@ -183,24 +264,59 @@ const RegisterList: React.FC = () => { - +
    - {paginatedRegisters.map(register => ( -
  • + {paginatedRegisters.map((register) => ( +
  • -

    Usuario: {register.user}

    -

    Transporte: {register.transport}

    -

    Línea: {lines.find((line: { id: number }) => line.id === Number(register.line))?.information || register.line}

    -

    Ruta: {register.route}

    -

    Estación: {stations.find((station: { id: number }) => station.id === Number(register.station))?.name || register.station}

    -

    Fecha: {register.date}

    -

    Estado: {register.status}

    +

    + Usuario: {register.user} +

    +

    + Transporte: {register.transport} +

    +

    + Línea:{" "} + {lines.find( + (line: { id: number }) => line.id === Number(register.line) + )?.information || register.line} +

    +

    + Ruta: {register.route} +

    +

    + Estación:{" "} + {stations.find( + (station: { id: number }) => + station.id === Number(register.station) + )?.name || register.station} +

    +

    + Fecha: {register.date} +

    +

    + Estado: {register.status} +

    -

    Hora: {register.time}

    -

    Descripción: {register.body}

    -

    Coordenadas: ({register.x}, {register.y})

    +

    + Hora: {register.time} +

    +

    + Descripción: {register.body} +

    +

    + Coordenadas: ({register.x}, {register.y}) +

    @@ -227,4 +347,4 @@ const RegisterList: React.FC = () => { ); }; -export default RegisterList; \ No newline at end of file +export default RegisterList;