From e0b31f39617ca7a48d0f35bf2d5b930edd0aba06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20de=20Vasconcelos?= Date: Mon, 30 Dec 2024 23:35:58 +0000 Subject: [PATCH] Lint updates --- frontend/app/layout.tsx | 2 +- .../components/add-device/Error/index.tsx | 2 +- frontend/components/add-device/Page/index.tsx | 2 +- .../alerts/AlertActivePeriod/index.tsx | 20 +++-- .../alerts/AlertCauseEffectIcon/index.tsx | 14 ++-- .../analytics/ConsentPopup/index.tsx | 4 +- .../index.tsx | 2 +- .../app/AppStartupMessageDefault/index.tsx | 2 +- frontend/components/cards/Discounts/index.tsx | 2 +- .../components/common/BackButton/index.tsx | 2 +- frontend/components/common/Combobox/index.tsx | 15 ++-- .../common/LineBadgeBaseIcon/index.tsx | 10 ++- .../components/common/NextArrivals/index.tsx | 14 ++-- .../common/TimetableSchedules/index.tsx | 18 ++--- frontend/components/contacts/Page/index.tsx | 2 +- frontend/components/footer/Footer/index.tsx | 2 +- .../components/helpdesks/WhereToBuy/index.tsx | 2 +- .../home/MainCarouselCard/index.tsx | 2 +- .../components/home/MetricsSection/index.tsx | 2 +- .../MetricsSectionDemandSkeleton/index.tsx | 2 +- .../home/QuickSearchFavoritesBar/index.tsx | 2 +- .../home/QuickSearchWidget/index.tsx | 2 +- frontend/components/layout/Surface/index.tsx | 2 +- .../lines/PathWaypointNextArrivals/index.tsx | 40 ++++----- .../lost-and-found/OperatorSection/index.tsx | 10 +-- .../metrics/MetricsCardByLine/index.tsx | 2 +- .../metrics/MetricsCardByOperator/index.tsx | 4 +- .../metrics/MetricsCardYearToDate/index.tsx | 5 +- .../metrics/MetricsDemandChart/index.tsx | 2 +- frontend/components/news/NewsCard/index.tsx | 2 +- .../news/NewsDetailSidebar/hook.tsx | 10 +-- .../components/planner/Partners/index.tsx | 2 +- .../responsive/ThemeSwitch/index.js | 26 +++--- frontend/contexts/Lines.context.tsx | 15 +++- frontend/hooks/useSearch.js | 81 ------------------- frontend/next.config.mjs | 6 +- frontend/package.json | 11 ++- 37 files changed, 133 insertions(+), 210 deletions(-) delete mode 100644 frontend/hooks/useSearch.js diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index f0e45648..432625f5 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -1,9 +1,9 @@ /* * */ import { availableFormats } from '@/i18n/config'; -import { Inter } from 'next/font/google'; import { NextIntlClientProvider } from 'next-intl'; import { getLocale, getMessages } from 'next-intl/server'; +import { Inter } from 'next/font/google'; import { NuqsAdapter } from 'nuqs/adapters/next/app'; /* * */ diff --git a/frontend/components/add-device/Error/index.tsx b/frontend/components/add-device/Error/index.tsx index f4df95ea..393226be 100644 --- a/frontend/components/add-device/Error/index.tsx +++ b/frontend/components/add-device/Error/index.tsx @@ -3,8 +3,8 @@ /* * */ import { Section } from '@/components/layout/Section'; -import { useRouter } from 'next/navigation'; import { useTranslations } from 'next-intl'; +import { useRouter } from 'next/navigation'; import { useEffect, useState } from 'react'; import styles from './styles.module.css'; diff --git a/frontend/components/add-device/Page/index.tsx b/frontend/components/add-device/Page/index.tsx index e8bd04dd..fc047a0b 100644 --- a/frontend/components/add-device/Page/index.tsx +++ b/frontend/components/add-device/Page/index.tsx @@ -1,8 +1,8 @@ /* * */ import { Section } from '@/components/layout/Section'; -import { useRouter } from 'next/navigation'; import { useTranslations } from 'next-intl'; +import { useRouter } from 'next/navigation'; import { useEffect, useState } from 'react'; import styles from './styles.module.css'; diff --git a/frontend/components/alerts/AlertActivePeriod/index.tsx b/frontend/components/alerts/AlertActivePeriod/index.tsx index b8fa331c..d940d2a8 100644 --- a/frontend/components/alerts/AlertActivePeriod/index.tsx +++ b/frontend/components/alerts/AlertActivePeriod/index.tsx @@ -6,6 +6,11 @@ import styles from './styles.module.css'; /* * */ +interface AlertActivePeriodEndProps { + date?: Date + size?: 'md' | 'sm' +} + interface AlertActivePeriodStartProps { date?: Date size?: 'md' | 'sm' @@ -13,7 +18,7 @@ interface AlertActivePeriodStartProps { /* * */ -export function AlertActivePeriodStart({ date, size = 'md' }: AlertActivePeriodStartProps) { +export function AlertActivePeriodEnd({ date, size = 'md' }: AlertActivePeriodEndProps) { // // @@ -25,7 +30,7 @@ export function AlertActivePeriodStart({ date, size = 'md' }: AlertActivePeriodS // B. Render components if (date) { - return

{t.rich('start', { parsedDate: chunks => {chunks}, start: date })}

; + return

{t.rich('end', { end: date, parsedDate: chunks => {chunks} })}

; } // @@ -33,14 +38,7 @@ export function AlertActivePeriodStart({ date, size = 'md' }: AlertActivePeriodS /* * */ -interface AlertActivePeriodEndProps { - date?: Date - size?: 'md' | 'sm' -} - -/* * */ - -export function AlertActivePeriodEnd({ date, size = 'md' }: AlertActivePeriodEndProps) { +export function AlertActivePeriodStart({ date, size = 'md' }: AlertActivePeriodStartProps) { // // @@ -52,7 +50,7 @@ export function AlertActivePeriodEnd({ date, size = 'md' }: AlertActivePeriodEnd // B. Render components if (date) { - return

{t.rich('end', { end: date, parsedDate: chunks => {chunks} })}

; + return

{t.rich('start', { parsedDate: chunks => {chunks}, start: date })}

; } // diff --git a/frontend/components/alerts/AlertCauseEffectIcon/index.tsx b/frontend/components/alerts/AlertCauseEffectIcon/index.tsx index dde877a9..b8761bb2 100644 --- a/frontend/components/alerts/AlertCauseEffectIcon/index.tsx +++ b/frontend/components/alerts/AlertCauseEffectIcon/index.tsx @@ -15,6 +15,12 @@ interface AlertCauseIconProps { withText?: boolean } +interface AlertEffectIconProps { + className?: string + effect?: AlertEffect + withText?: boolean +} + /* * */ export function AlertCauseIcon({ cause, className, withText = false }: AlertCauseIconProps) { @@ -96,14 +102,6 @@ export function AlertCauseIcon({ cause, className, withText = false }: AlertCaus /* * */ -interface AlertEffectIconProps { - className?: string - effect?: AlertEffect - withText?: boolean -} - -/* * */ - export function AlertEffectIcon({ className, effect, withText = false }: AlertEffectIconProps) { // diff --git a/frontend/components/analytics/ConsentPopup/index.tsx b/frontend/components/analytics/ConsentPopup/index.tsx index d1a626ba..78e4030c 100644 --- a/frontend/components/analytics/ConsentPopup/index.tsx +++ b/frontend/components/analytics/ConsentPopup/index.tsx @@ -4,12 +4,10 @@ import { Logo } from '@/components/header/Logo'; import { useAnalyticsContext } from '@/contexts/Analytics.context'; -// import { BrandsCmet } from '@/settings/assets.settings'; import { Button, Modal } from '@mantine/core'; -// import Image from 'next/image'; +import { useTranslations } from 'next-intl'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; -import { useTranslations } from 'next-intl'; import { useEffect, useState } from 'react'; import styles from './styles.module.css'; diff --git a/frontend/components/app-navegante/AppNaveganteStartupMessageDefault/index.tsx b/frontend/components/app-navegante/AppNaveganteStartupMessageDefault/index.tsx index d25d0049..743622e8 100644 --- a/frontend/components/app-navegante/AppNaveganteStartupMessageDefault/index.tsx +++ b/frontend/components/app-navegante/AppNaveganteStartupMessageDefault/index.tsx @@ -6,8 +6,8 @@ import { useEnvironmentContext } from '@/contexts/Environment.context'; import { URLS } from '@/settings/urls.settings'; import { Button } from '@mantine/core'; import { IconArrowBigUpLinesFilled } from '@tabler/icons-react'; -import Link from 'next/link'; import { useTranslations } from 'next-intl'; +import Link from 'next/link'; import styles from './styles.module.css'; diff --git a/frontend/components/app/AppStartupMessageDefault/index.tsx b/frontend/components/app/AppStartupMessageDefault/index.tsx index aeff98d3..3e7f067f 100644 --- a/frontend/components/app/AppStartupMessageDefault/index.tsx +++ b/frontend/components/app/AppStartupMessageDefault/index.tsx @@ -7,8 +7,8 @@ import { useEnvironmentContext } from '@/contexts/Environment.context'; import { URLS } from '@/settings/urls.settings'; import { Player } from '@lottiefiles/react-lottie-player'; import { Button } from '@mantine/core'; -import Link from 'next/link'; import { useTranslations } from 'next-intl'; +import Link from 'next/link'; import styles from './styles.module.css'; diff --git a/frontend/components/cards/Discounts/index.tsx b/frontend/components/cards/Discounts/index.tsx index 45718a23..e99ca6b4 100644 --- a/frontend/components/cards/Discounts/index.tsx +++ b/frontend/components/cards/Discounts/index.tsx @@ -1,8 +1,8 @@ /* * */ import { Surface } from '@/components/layout/Surface'; -import Link from 'next/link'; import { useTranslations } from 'next-intl'; +import Link from 'next/link'; import styles from './styles.module.css'; diff --git a/frontend/components/common/BackButton/index.tsx b/frontend/components/common/BackButton/index.tsx index 5170ea9e..317b1cef 100644 --- a/frontend/components/common/BackButton/index.tsx +++ b/frontend/components/common/BackButton/index.tsx @@ -4,9 +4,9 @@ import { useEnvironmentContext } from '@/contexts/Environment.context'; import { IconArrowLeft } from '@tabler/icons-react'; +import { useTranslations } from 'next-intl'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; -import { useTranslations } from 'next-intl'; import { useMemo } from 'react'; import styles from './styles.module.css'; diff --git a/frontend/components/common/Combobox/index.tsx b/frontend/components/common/Combobox/index.tsx index 367c337b..abe67297 100644 --- a/frontend/components/common/Combobox/index.tsx +++ b/frontend/components/common/Combobox/index.tsx @@ -1,12 +1,8 @@ +/* * */ + import { Combobox, InputBase, useCombobox } from '@mantine/core'; import { useState } from 'react'; -// Define interfaces for the data structure -interface ComboboxGroupData { - group: string - items: string[] -} - export interface ComboboxProps { data: ComboboxGroupData[] | string[] label?: string // Optional label for the combobox @@ -15,6 +11,13 @@ export interface ComboboxProps { searchable?: boolean // Enables search functionality } +interface ComboboxGroupData { + group: string + items: string[] +} + +/* * */ + const isGroupedData = (data: ComboboxGroupData[] | string[]): data is ComboboxGroupData[] => { return Array.isArray(data) && data.length > 0 && typeof data[0] === 'object' && 'group' in data[0]; }; diff --git a/frontend/components/common/LineBadgeBaseIcon/index.tsx b/frontend/components/common/LineBadgeBaseIcon/index.tsx index b26262e6..b4a50d01 100644 --- a/frontend/components/common/LineBadgeBaseIcon/index.tsx +++ b/frontend/components/common/LineBadgeBaseIcon/index.tsx @@ -1,6 +1,4 @@ -interface Variant { - variant: 'inter-regional' | 'longa' | 'mar' | 'proxima' | 'rapida' -} +/* * */ interface Fill { fill: string @@ -8,6 +6,12 @@ interface Fill { type Props = Fill | Variant; +interface Variant { + variant: 'inter-regional' | 'longa' | 'mar' | 'proxima' | 'rapida' +} + +/* * */ + export default function Component(props: Props) { let fillColor = ''; diff --git a/frontend/components/common/NextArrivals/index.tsx b/frontend/components/common/NextArrivals/index.tsx index f5f0e629..bcd43969 100644 --- a/frontend/components/common/NextArrivals/index.tsx +++ b/frontend/components/common/NextArrivals/index.tsx @@ -12,13 +12,6 @@ import styles from './styles.module.css'; /* * */ -interface Props { - allowPastArrivals?: boolean - arrivals: number[] - status: ArrivalStatus - withIcon?: boolean -} - interface NextArrival { estimated_arrival_hours: number estimated_arrival_minutes: number @@ -27,6 +20,13 @@ interface NextArrival { label: string } +interface Props { + allowPastArrivals?: boolean + arrivals: number[] + status: ArrivalStatus + withIcon?: boolean +} + /* * */ export function NextArrivals({ allowPastArrivals = true, arrivals, status, withIcon = true }: Props) { diff --git a/frontend/components/common/TimetableSchedules/index.tsx b/frontend/components/common/TimetableSchedules/index.tsx index 1ca07c8e..5091418a 100644 --- a/frontend/components/common/TimetableSchedules/index.tsx +++ b/frontend/components/common/TimetableSchedules/index.tsx @@ -10,6 +10,14 @@ import styles from './styles.module.css'; /* * */ +interface TimetableSchedulesMinuteProps { + isHighlighted: boolean + minuteData: Minute + onClick?: () => void + selectedExceptionIds: string[] + setSelectedExceptionIds: (values: string[]) => void +} + interface TimetableSchedulesProps { selectedExceptionIds: string[] setSelectedExceptionIds: (values: string[]) => void @@ -59,16 +67,6 @@ export default function TimetableSchedules({ selectedExceptionIds, setSelectedEx /* * */ -interface TimetableSchedulesMinuteProps { - isHighlighted: boolean - minuteData: Minute - onClick?: () => void - selectedExceptionIds: string[] - setSelectedExceptionIds: (values: string[]) => void -} - -/* * */ - function TimetableSchedulesMinute({ isHighlighted, minuteData, onClick, selectedExceptionIds, setSelectedExceptionIds }: TimetableSchedulesMinuteProps) { // diff --git a/frontend/components/contacts/Page/index.tsx b/frontend/components/contacts/Page/index.tsx index ce34a29e..abef2e6a 100644 --- a/frontend/components/contacts/Page/index.tsx +++ b/frontend/components/contacts/Page/index.tsx @@ -9,8 +9,8 @@ import { Surface } from '@/components/layout/Surface'; import { IconsCommon } from '@/settings/assets.settings'; import { Routes } from '@/utils/routes'; import { IconPhone, IconUmbrella } from '@tabler/icons-react'; -import Image from 'next/image'; import { useTranslations } from 'next-intl'; +import Image from 'next/image'; import styles from './styles.module.css'; diff --git a/frontend/components/footer/Footer/index.tsx b/frontend/components/footer/Footer/index.tsx index 2940c348..965d41fb 100644 --- a/frontend/components/footer/Footer/index.tsx +++ b/frontend/components/footer/Footer/index.tsx @@ -9,8 +9,8 @@ import { Section } from '@/components/layout/Section'; import { Surface } from '@/components/layout/Surface'; import { useDebugContext } from '@/contexts/Debug.context'; import { footerNavigationGroup } from '@/settings/navigation.settings'; -import Link from 'next/link'; import { useTranslations } from 'next-intl'; +import Link from 'next/link'; import styles from './styles.module.css'; diff --git a/frontend/components/helpdesks/WhereToBuy/index.tsx b/frontend/components/helpdesks/WhereToBuy/index.tsx index ab55592a..f176af6a 100644 --- a/frontend/components/helpdesks/WhereToBuy/index.tsx +++ b/frontend/components/helpdesks/WhereToBuy/index.tsx @@ -5,8 +5,8 @@ import { Section } from '@/components/layout/Section'; import { Surface } from '@/components/layout/Surface'; import { ThemeSwitch } from '@/components/responsive/ThemeSwitch'; import { Image } from '@mantine/core'; -import Link from 'next/link'; import { useTranslations } from 'next-intl'; +import Link from 'next/link'; import styles from './styles.module.css'; diff --git a/frontend/components/home/MainCarouselCard/index.tsx b/frontend/components/home/MainCarouselCard/index.tsx index 0ea31143..eacfe28d 100644 --- a/frontend/components/home/MainCarouselCard/index.tsx +++ b/frontend/components/home/MainCarouselCard/index.tsx @@ -3,8 +3,8 @@ import { ImagesCommon } from '@/settings/assets.settings'; import { Image } from '@mantine/core'; import { IconArrowRight } from '@tabler/icons-react'; -import Link from 'next/link'; import { useTranslations } from 'next-intl'; +import Link from 'next/link'; import styles from './styles.module.css'; diff --git a/frontend/components/home/MetricsSection/index.tsx b/frontend/components/home/MetricsSection/index.tsx index 91abb340..6ad0b3cf 100644 --- a/frontend/components/home/MetricsSection/index.tsx +++ b/frontend/components/home/MetricsSection/index.tsx @@ -10,8 +10,8 @@ import { Surface } from '@/components/layout/Surface'; import { MetricsDemandChart } from '@/components/metrics/MetricsDemandChart'; import { Routes } from '@/utils/routes'; import { DateTime } from 'luxon'; -import Link from 'next/link'; import { useTranslations } from 'next-intl'; +import Link from 'next/link'; import { useMemo } from 'react'; import useSWR from 'swr'; diff --git a/frontend/components/home/MetricsSectionDemandSkeleton/index.tsx b/frontend/components/home/MetricsSectionDemandSkeleton/index.tsx index 66f2cf35..58446694 100644 --- a/frontend/components/home/MetricsSectionDemandSkeleton/index.tsx +++ b/frontend/components/home/MetricsSectionDemandSkeleton/index.tsx @@ -7,7 +7,7 @@ import styles from './styles.module.css'; /* * */ -export default function Component() { +export function MetricsSectionDemandSkeleton() { return (
diff --git a/frontend/components/home/QuickSearchFavoritesBar/index.tsx b/frontend/components/home/QuickSearchFavoritesBar/index.tsx index 442a5078..e51cb55d 100644 --- a/frontend/components/home/QuickSearchFavoritesBar/index.tsx +++ b/frontend/components/home/QuickSearchFavoritesBar/index.tsx @@ -9,9 +9,9 @@ import { LineBadge } from '@/components/lines/LineBadge'; import { useAlertsContext } from '@/contexts/Alerts.context'; import { useProfileContext } from '@/contexts/Profile.context'; import { Routes, RoutesSchedule } from '@/utils/routes'; +import { useTranslations } from 'next-intl'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; -import { useTranslations } from 'next-intl'; import { useMemo } from 'react'; import useSWR from 'swr'; diff --git a/frontend/components/home/QuickSearchWidget/index.tsx b/frontend/components/home/QuickSearchWidget/index.tsx index 1d41154a..70199978 100644 --- a/frontend/components/home/QuickSearchWidget/index.tsx +++ b/frontend/components/home/QuickSearchWidget/index.tsx @@ -6,8 +6,8 @@ import { SelectLine } from '@/components/common/SelectLine'; import { SelectStop } from '@/components/common/SelectStop'; import { Routes } from '@/utils/routes'; import { SegmentedControl } from '@mantine/core'; -import { useRouter } from 'next/navigation'; import { useTranslations } from 'next-intl'; +import { useRouter } from 'next/navigation'; import { useState } from 'react'; import useSWR from 'swr'; diff --git a/frontend/components/layout/Surface/index.tsx b/frontend/components/layout/Surface/index.tsx index bea96d3b..82f15d95 100644 --- a/frontend/components/layout/Surface/index.tsx +++ b/frontend/components/layout/Surface/index.tsx @@ -8,7 +8,7 @@ interface Props { children?: React.ReactNode forceOverflow?: boolean fullHeight?: boolean - variant?: 'alerts' | 'brand' | 'brand2' | 'debug' | 'default' | 'muted' | 'persistent' | 'standout' | 'success' | 'warning' + variant?: 'alerts' | 'brand2' | 'brand' | 'debug' | 'default' | 'muted' | 'persistent' | 'standout' | 'success' | 'warning' } /* * */ diff --git a/frontend/components/lines/PathWaypointNextArrivals/index.tsx b/frontend/components/lines/PathWaypointNextArrivals/index.tsx index e179aa41..9eee407e 100644 --- a/frontend/components/lines/PathWaypointNextArrivals/index.tsx +++ b/frontend/components/lines/PathWaypointNextArrivals/index.tsx @@ -9,26 +9,6 @@ import styles from './styles.module.css'; /* * */ -function formatDelta(ms: number) { - let toReturn = ''; - const seconds = Math.floor(ms / 1000); - const minutes = Math.floor(seconds / 60); - const hours = Math.floor(minutes / 60); - if (minutes <= 0) { - return 'A chegar'; - } - - if (hours > 0) { - toReturn += `${hours} hora${hours > 1 ? 's' : ''} `; - } - if (minutes > 0) { - toReturn += `${minutes % 60} min`; - } - return toReturn; -} - -/* * */ - export function PathWaypointNextArrivals({ realtimeArrivals, scheduledArrivals }: { realtimeArrivals: { type: 'realtime' | 'scheduled', unixTs: number }[], scheduledArrivals: { type: 'realtime' | 'scheduled', unixTs: number }[] }) { // @@ -81,3 +61,23 @@ export function PathWaypointNextArrivals({ realtimeArrivals, scheduledArrivals } // } + +/* * */ + +function formatDelta(ms: number) { + let toReturn = ''; + const seconds = Math.floor(ms / 1000); + const minutes = Math.floor(seconds / 60); + const hours = Math.floor(minutes / 60); + if (minutes <= 0) { + return 'A chegar'; + } + + if (hours > 0) { + toReturn += `${hours} hora${hours > 1 ? 's' : ''} `; + } + if (minutes > 0) { + toReturn += `${minutes % 60} min`; + } + return toReturn; +} diff --git a/frontend/components/lost-and-found/OperatorSection/index.tsx b/frontend/components/lost-and-found/OperatorSection/index.tsx index f6f2e91a..2860c559 100644 --- a/frontend/components/lost-and-found/OperatorSection/index.tsx +++ b/frontend/components/lost-and-found/OperatorSection/index.tsx @@ -12,17 +12,17 @@ import styles from './styles.module.css'; /* * */ +interface LostAndFoundOperatorSectionActionProps { + href: string + type: 'email' | 'form' +} + interface LostAndFoundOperatorSectionProps { actions: LostAndFoundOperatorSectionActionProps[] description: string title: string } -interface LostAndFoundOperatorSectionActionProps { - href: string - type: 'email' | 'form' -} - /* * */ export default function Component({ actions, description, title }: LostAndFoundOperatorSectionProps) { diff --git a/frontend/components/metrics/MetricsCardByLine/index.tsx b/frontend/components/metrics/MetricsCardByLine/index.tsx index b875fcfc..6cbe8bfd 100644 --- a/frontend/components/metrics/MetricsCardByLine/index.tsx +++ b/frontend/components/metrics/MetricsCardByLine/index.tsx @@ -4,7 +4,7 @@ import type { DemandMetricsByLine } from '@carrismetropolitana/api-types/metrics'; -import MetricsSectionDemandSkeleton from '@/components/home/MetricsSectionDemandSkeleton'; +import { MetricsSectionDemandSkeleton } from '@/components/home/MetricsSectionDemandSkeleton'; import { LineBadge } from '@/components/lines/LineBadge'; import { useLinesContext } from '@/contexts/Lines.context'; import { LineChart } from '@mantine/charts'; diff --git a/frontend/components/metrics/MetricsCardByOperator/index.tsx b/frontend/components/metrics/MetricsCardByOperator/index.tsx index 641f76f9..a7d44f89 100644 --- a/frontend/components/metrics/MetricsCardByOperator/index.tsx +++ b/frontend/components/metrics/MetricsCardByOperator/index.tsx @@ -2,14 +2,14 @@ /* * */ -import MetricsSectionDemandSkeleton from '@/components/home/MetricsSectionDemandSkeleton'; +import { MetricsSectionDemandSkeleton } from '@/components/home/MetricsSectionDemandSkeleton'; import { OperatorMetrics } from '@/types/metrics.types'; import { Operators } from '@/utils/operation'; import { ActionIcon, Image, Popover } from '@mantine/core'; import { IconInfoCircleFilled } from '@tabler/icons-react'; import classNames from 'classnames'; -import Link from 'next/link'; import { useTranslations } from 'next-intl'; +import Link from 'next/link'; import styles from './styles.module.css'; diff --git a/frontend/components/metrics/MetricsCardYearToDate/index.tsx b/frontend/components/metrics/MetricsCardYearToDate/index.tsx index be14c50b..c5cc439b 100644 --- a/frontend/components/metrics/MetricsCardYearToDate/index.tsx +++ b/frontend/components/metrics/MetricsCardYearToDate/index.tsx @@ -2,7 +2,7 @@ /* * */ -import MetricsSectionDemandSkeleton from '@/components/home/MetricsSectionDemandSkeleton'; +import { MetricsSectionDemandSkeleton } from '@/components/home/MetricsSectionDemandSkeleton'; import { MonthlyMetrics } from '@/types/metrics.types'; import { Routes } from '@/utils/routes'; import { BarChart } from '@mantine/charts'; @@ -10,9 +10,8 @@ import { ActionIcon, Popover } from '@mantine/core'; import { IconInfoCircleFilled } from '@tabler/icons-react'; import classNames from 'classnames'; import { Info } from 'luxon'; -// import { DateTime } from 'luxon'; -import Link from 'next/link'; import { useTranslations } from 'next-intl'; +import Link from 'next/link'; import { useMemo } from 'react'; import useSWR from 'swr'; diff --git a/frontend/components/metrics/MetricsDemandChart/index.tsx b/frontend/components/metrics/MetricsDemandChart/index.tsx index a89117fd..93832e5b 100644 --- a/frontend/components/metrics/MetricsDemandChart/index.tsx +++ b/frontend/components/metrics/MetricsDemandChart/index.tsx @@ -2,7 +2,7 @@ /* * */ -import MetricsSectionDemandSkeleton from '@/components/home/MetricsSectionDemandSkeleton'; +import { MetricsSectionDemandSkeleton } from '@/components/home/MetricsSectionDemandSkeleton'; import { BarChart, LineChart, LineChartProps } from '@mantine/charts'; import styles from './styles.module.css'; diff --git a/frontend/components/news/NewsCard/index.tsx b/frontend/components/news/NewsCard/index.tsx index d272fe9c..6b03a925 100644 --- a/frontend/components/news/NewsCard/index.tsx +++ b/frontend/components/news/NewsCard/index.tsx @@ -4,8 +4,8 @@ import { ImagesCommon } from '@/settings/assets.settings'; import { Routes } from '@/utils/routes'; import { Image } from '@mantine/core'; import { DateTime } from 'luxon'; -import Link from 'next/link'; import { useTranslations } from 'next-intl'; +import Link from 'next/link'; import styles from './styles.module.css'; diff --git a/frontend/components/news/NewsDetailSidebar/hook.tsx b/frontend/components/news/NewsDetailSidebar/hook.tsx index 6a1299f8..f4227ae5 100644 --- a/frontend/components/news/NewsDetailSidebar/hook.tsx +++ b/frontend/components/news/NewsDetailSidebar/hook.tsx @@ -6,17 +6,17 @@ import { NewsData } from '@/types/news.types'; import { useEffect, useState } from 'react'; // Define the types for Heading and TOC item +export interface TocTreeItem extends Heading { + children: TocTreeItem[] + parent?: TocTreeItem +} + interface Heading { id: string level: number text: string } -export interface TocTreeItem extends Heading { - children: TocTreeItem[] - parent?: TocTreeItem -} - // Custom hook to parse HTML and generate TOC tree export default function useHook(news: NewsData): TocTreeItem[] { const [toc, setToc] = useState([]); diff --git a/frontend/components/planner/Partners/index.tsx b/frontend/components/planner/Partners/index.tsx index 029836be..b4ebf538 100644 --- a/frontend/components/planner/Partners/index.tsx +++ b/frontend/components/planner/Partners/index.tsx @@ -9,8 +9,8 @@ import PlannerCard from '@/components/planner/Card'; import PlannerCardSkeleton from '@/components/planner/CardSkeleton'; import { ImagesPlanner } from '@/settings/assets.settings'; import { shuffleArray } from '@/utils/shuffle'; -import Link from 'next/link'; import { useLocale, useTranslations } from 'next-intl'; +import Link from 'next/link'; import React from 'react'; import styles from './styles.module.css'; diff --git a/frontend/components/responsive/ThemeSwitch/index.js b/frontend/components/responsive/ThemeSwitch/index.js index b473b5a6..043d9c61 100644 --- a/frontend/components/responsive/ThemeSwitch/index.js +++ b/frontend/components/responsive/ThemeSwitch/index.js @@ -1,30 +1,28 @@ /* * */ /** - * Use to show children only when light theme is active. Hidden otherwise. - * @param {ReactNode} children The content to display in light theme. - * @returns {JSX.Element} The rendered ThemeLight component. + * Use to show children only when dark theme is active. Hidden otherwise. + * @param {ReactNode} children The content to display in dark theme. + * @returns {JSX.Element} The rendered ThemeDark component. */ - -export function ThemeLight({ children }) { +export function ThemeDark({ children }) { return ( - + {children} - + ); } /** - * Use to show children only when dark theme is active. Hidden otherwise. - * @param {ReactNode} children The content to display in dark theme. - * @returns {JSX.Element} The rendered ThemeDark component. + * Use to show children only when light theme is active. Hidden otherwise. + * @param {ReactNode} children The content to display in light theme. + * @returns {JSX.Element} The rendered ThemeLight component. */ - -export function ThemeDark({ children }) { +export function ThemeLight({ children }) { return ( - + {children} - + ); } diff --git a/frontend/contexts/Lines.context.tsx b/frontend/contexts/Lines.context.tsx index 10cdaa4e..02ec90fb 100644 --- a/frontend/contexts/Lines.context.tsx +++ b/frontend/contexts/Lines.context.tsx @@ -7,7 +7,7 @@ import type { DemandMetricsByLine, ServiceMetrics } from '@carrismetropolitana/a import type { Line, Route } from '@carrismetropolitana/api-types/network'; import { Routes } from '@/utils/routes'; -import { createContext, useContext } from 'react'; +import { createContext, useContext, useMemo } from 'react'; import useSWR from 'swr'; /* * */ @@ -77,7 +77,7 @@ export const LinesContextProvider = ({ children }) => { // // C. Define context value - const contextValue: LinesContextState = { + const contextValue: LinesContextState = useMemo(() => ({ actions: { getDemandMetricsByLineId, getLineDataById, @@ -93,7 +93,16 @@ export const LinesContextProvider = ({ children }) => { flags: { is_loading: allLinesLoading || allRoutesLoading || demandByLineDataLoading || serviceMetricsLoading, }, - }; + }), [ + allLinesData, + allLinesLoading, + allRoutesData, + allRoutesLoading, + demandByLineData, + demandByLineDataLoading, + serviceMetricsData, + serviceMetricsLoading, + ]); // // D. Render components diff --git a/frontend/hooks/useSearch.js b/frontend/hooks/useSearch.js deleted file mode 100644 index b93f3643..00000000 --- a/frontend/hooks/useSearch.js +++ /dev/null @@ -1,81 +0,0 @@ -'use client'; - -/* * */ - -import { transliterate } from 'inflected'; - -/* * */ - -export default function useSearch(query, data, options) { - // - - // 1. - // Define variables to hold the values - - let finalResult = data || []; - - // 2. - // Return all data if query is empty - - if (!query) return limitArraySize(finalResult, options.limitResults); - - // 3. - // Normalize the query - - const normalizedQuery = normalizeString(query, { regexMatch: true, regexReplace: options.regexReplace, toLowerCase: true, transliterate: true }); - - // 4. - // Check if 'keys' option is present - - if (options && options.keys) { - finalResult = finalResult.filter((item) => { - let hasMatch = false; - for (let key of options.keys) { - if (Object.prototype.hasOwnProperty.call(item, key)) { - const normalizedValue = normalizeString(String(item[key]), { regexReplace: options.regexReplace, toLowerCase: true, transliterate: true }); - if (normalizedQuery.test(normalizedValue)) { - hasMatch = true; - break; - } - } - } - return hasMatch; - }); - return limitArraySize(finalResult, options.limitResults); - } - - // The case where options is not defined - finalResult = finalResult.filter((item) => { - const stringifiedValue = Object.values(item).join(''); - const normalizedValue = normalizeString(stringifiedValue, { toLowerCase: true, transliterate: true }); - return normalizedValue.includes(normalizedQuery); - }); - - return limitArraySize(finalResult, options.limitResults); - - // -} - -/* * */ - -function normalizeString(rawString, options) { - // Initiate a variable to hold several normalization steps - let normalizedString = rawString; - // Convert the string to lowecase characters - if (options && options.toLowerCase) normalizedString = normalizedString.toLowerCase(); - // Use inflected to remove non-English characters - if (options && options.transliterate) normalizedString = transliterate(normalizedString); - // Check if 'regex' option is present and replace forbidden characters - if (options && options.regexReplace) normalizedString = normalizedString.replace(options.regexReplace, '').replace(/\s+/g, ' '); - // Use the join method to insert the pattern between each character - if (options && options.regexMatch) normalizedString = new RegExp(`.*${normalizedString.split(' ').join('.*')}.*`); - // Return result - return normalizedString; - // -} - -/* * */ - -function limitArraySize(array, limit) { - return array.slice(0, limit || array.length); -} diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs index f34675ac..5d876f56 100644 --- a/frontend/next.config.mjs +++ b/frontend/next.config.mjs @@ -4,10 +4,6 @@ import createNextIntlPlugin from 'next-intl/plugin' /* * */ -const withNextIntl = createNextIntlPlugin() - -/* * */ - /** @type {import('next').NextConfig} */ const nextConfig = { images: { @@ -71,4 +67,4 @@ const nextConfig = { /* * */ -export default withNextIntl(nextConfig) +export default createNextIntlPlugin()(nextConfig) diff --git a/frontend/package.json b/frontend/package.json index cab4381f..76b83cb9 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -21,14 +21,12 @@ "@mantine/notifications": "7.15.2", "@rajesh896/broprint.js": "2.1.1", "@tabler/icons-react": "3.26.0", - "@turf/turf": "7.1.0", - "@types/geojson": "7946.0.15", + "@turf/turf": "7.2.0", "classnames": "2.5.1", "dayjs": "1.11.13", "embla-carousel-autoplay": "8.5.1", "embla-carousel-react": "8.5.1", "embla-carousel-wheel-gestures": "8.0.1", - "inflected": "2.1.0", "jsonwebtoken": "9.0.2", "luxon": "3.5.0", "maplibre-gl": "4.7.1", @@ -50,7 +48,8 @@ }, "devDependencies": { "@carrismetropolitana/api-types": "20241227.1751.55", - "@carrismetropolitana/eslint": "20241024.1600.5", + "@carrismetropolitana/eslint": "20241229.44.47", + "@types/geojson": "7946.0.15", "@types/jsonwebtoken": "9.0.7", "@types/luxon": "3.4.2", "@types/node": "22.10.2", @@ -61,5 +60,9 @@ "postcss-simple-vars": "7.0.1", "typescript": "5.7.2", "typescript-plugin-css-modules": "5.1.0" + }, + "overrides": { + "react": "$react", + "react-dom": "$react-dom" } }