fix buges and clean code

Author: fe51

src/components/Alerts/AlertDetails/AlertContainer.tsx

@@ -36,10 +36,10 @@ export const AlertContainer = ({ alert, resetAlert }: AlertContainerType) => {
               resetAlert={resetAlert}
             />
           </Grid>
-          <Grid size={{ xs: 12, md: 9 }}>
+          <Grid size={{ xs: 12, xl: 9 }}>
             <AlertImages sequence={selectedSequence} />
           </Grid>
-          <Grid size={{ xs: 12, md: 3 }}>
+          <Grid size={{ xs: 12, xl: 3 }}>
             <AlertInfos sequence={selectedSequence} />
           </Grid>
         </Grid>

src/components/Alerts/AlertDetails/AlertImages.tsx

@@ -9,7 +9,7 @@ import { useQuery } from '@tanstack/react-query';
 
 import { getDetectionsBySequence } from '../../../services/alerts';
 import type { SequenceWithCameraInfoType } from '../../../utils/alerts';
-import { convertStrToEpoch, formatToTime } from '../../../utils/dates';
+import { formatToTime } from '../../../utils/dates';
 import { useTranslationPrefix } from '../../../utils/useTranslationPrefix';
 import { AlertImagesPlayer } from './AlertImagesPlayer';
 
@@ -28,13 +28,9 @@ export const AlertImages = ({ sequence }: AlertImagesType) => {
   } = useQuery({
     queryKey: ['detections', sequence.id],
     queryFn: async () => {
-      const detections = await getDetectionsBySequence(sequence.id);
-      detections.sort(
-        (d1, d2) =>
-          convertStrToEpoch(d1.created_at) - convertStrToEpoch(d2.created_at)
-      );
-      return detections;
+      return await getDetectionsBySequence(sequence.id);
     },
+    refetchOnWindowFocus: false,
   });
 
   return (

src/locales/es/translation.json

@@ -7,7 +7,7 @@
     "logout": "Desconectarse",
     "errors": {
       "INVALID_CREDENTIALS": "Nombre de usuario y/o contraseña incorrectos.",
-      "SERVER_ERROR": "Se ha producido un error en el servidor. Vuelva a intentarlo más tarde.",
+      "SERVER_ERROR": "Se ha producido un error. Vuelva a intentarlo más tarde.",
       "UNKNOWN_ERROR": "Se ha producido un error inesperado.",
       "INVALID_API_RESPONSE": "La respuesta del servidor de conexión no es válida."
     }
@@ -21,7 +21,7 @@
   },
   "dashboard": {
     "noCameraMessage": "No hay ninguna cámara asociada a su organización. Póngase en contacto con el administrador",
-    "errorFetchCameraMessage": "Se ha producido un error en el servidor. Vuelva a intentarlo más tarde.",
+    "errorFetchCameraMessage": "Se ha producido un error. Vuelva a intentarlo más tarde.",
     "titleImage": "Última imagen de la cámara",
     "inactiveCameraMsg": "Cámara inactiva"
   },
@@ -30,13 +30,13 @@
     "titleListPlural": "alertas a tratar",
     "prefixCardDetection": "Detectada por :",
     "noAlertsMessage": "Ninguna alerta detectada",
-    "errorFetchSequencesMessage": "Se ha producido un error en el servidor. Vuelva a intentarlo más tarde.",
+    "errorFetchSequencesMessage": "Se ha producido un error. Vuelva a intentarlo más tarde.",
     "titleSectionCamera": "Camera",
     "defaultCameraName": "Camera desconocida",
     "buttonImageDownload": "Descargar",
     "buttonPlay": "Play",
     "buttonPause": "Pause",
-    "errorFetchImagesMessage": "Se ha producido un error en el servidor. Vuelva a intentarlo más tarde.",
+    "errorFetchImagesMessage": "Se ha producido un error. Vuelva a intentarlo más tarde.",
     "titleDetails": "Detalles de la alerta",
     "titleButtonBackAlt": "Volver a la lista",
     "subtitleDate": "Fecha & ora",

src/locales/fr/translation.json

@@ -7,7 +7,7 @@
     "logout": "Se déconnecter",
     "errors": {
       "INVALID_CREDENTIALS": "Nom d'utilisateur ou mot de passe incorrect.",
-      "SERVER_ERROR": "Une erreur est survenue sur le serveur. Veuillez réessayer plus tard.",
+      "SERVER_ERROR": "Une erreur inattendue est survenue. Veuillez réessayer plus tard.",
       "UNKNOWN_ERROR": "Une erreur inattendue est survenue.",
       "INVALID_API_RESPONSE": "La réponse du serveur de connexion est invalide."
     }
@@ -21,7 +21,7 @@
   },
   "dashboard": {
     "noCameraMessage": "Aucune camera n'est associée avec votre organisation. Veuillez contacter l'administateur",
-    "errorFetchCameraMessage": "Une erreur est survenue sur le serveur. Veuillez réessayer plus tard.",
+    "errorFetchCameraMessage": "Une erreur inattendue est survenue. Veuillez réessayer plus tard.",
     "titleImage": "Dernière image de la camera",
     "inactiveCameraMsg": "Camera inactive"
   },
@@ -30,14 +30,14 @@
     "titleListPlural": "alertes à traiter",
     "prefixCardDetection": "Détectée par :",
     "noAlertsMessage": "Aucune alerte détectée",
-    "errorFetchSequencesMessage": "Une erreur est survenue sur le serveur. Veuillez réessayer plus tard.",
+    "errorFetchSequencesMessage": "Une erreur inattendue est survenue. Veuillez réessayer plus tard.",
     "titleSectionCamera": "Camera",
     "titleButtonBackAlt": "Retour à la liste",
     "defaultCameraName": "Camera inconnue",
     "buttonImageDownload": "Télécharger",
     "buttonPlay": "Play",
     "buttonPause": "Pause",
-    "errorFetchImagesMessage": "Une erreur est survenue sur le serveur. Veuillez réessayer plus tard.",
+    "errorFetchImagesMessage": "Une erreur inattendue est survenue. Veuillez réessayer plus tard.",
     "titleDetails": "Détail de l'alerte",
     "subtitleDate": "Date & Heure",
     "subtitleAzimuth": "Azimuth",

src/pages/AlertsPage.tsx

@@ -20,6 +20,7 @@ export const AlertsPage = () => {
   } = useQuery({
     queryKey: ['unlabelledSequences'],
     queryFn: getUnlabelledLatestSequences,
+    refetchOnWindowFocus: false,
   });
 
   const {
@@ -30,6 +31,7 @@ export const AlertsPage = () => {
   } = useQuery({
     queryKey: ['cameras'],
     queryFn: getCameraList,
+    refetchOnWindowFocus: false,
   });
 
   const alerts: AlertType[] = useMemo(

src/services/alerts.ts

@@ -1,6 +1,7 @@
 import type { AxiosResponse } from 'axios';
 import * as z from 'zod/v4';
 
+import { convertStrToEpoch } from '../utils/dates';
 import { instance } from './axios';
 
 const apiSequenceResponseSchema = z.object({
@@ -57,6 +58,13 @@ export const getDetectionsBySequence = async (
     .then((response: AxiosResponse) => {
       try {
         const result = apiDetectionListResponseSchema.safeParse(response.data);
+        if (result.data) {
+          result.data.sort(
+            (d1, d2) =>
+              convertStrToEpoch(d1.created_at) -
+              convertStrToEpoch(d2.created_at)
+          );
+        }
         return result.data ?? [];
       } catch {
         throw new Error('INVALID_API_RESPONSE');