refactor: Clean up React lint issues (#1561)

Author: AvivAbachi

src/api/gtfsService.ts

@@ -149,7 +149,7 @@ export async function getAllRoutesList(operatorId: string, date: Date, signal?:
       dateFrom: date,
       dateTo: date,
       orderBy: 'route_long_name asc',
-      limit: -1,
+      limit: 15000,
     },
     { signal },
   )

src/layout/header/LanguageToggleButton.tsx

@@ -3,27 +3,27 @@ import { Dropdown, type MenuProps } from 'antd'
 import { useTranslation } from 'react-i18next'
 import { useTheme } from '../ThemeContext'
 
-export const LanguageToggleButton = () => {
-  const { setLanguage, currentLanguage } = useTheme()
-  const { t } = useTranslation()
+const languages = [
+  { key: 'he', label: 'עברית' },
+  { key: 'en', label: 'English' },
+  { key: 'ru', label: 'Русский' },
+  { key: 'ar', label: 'العربية' },
+]
 
-  const languages = [
-    { key: 'he', label: 'עברית' },
-    { key: 'en', label: 'English' },
-    { key: 'ru', label: 'Русский' },
-    { key: 'ar', label: 'العربية' },
-  ]
+const LangLabel = ({ label }: { label: string }) => (
+  <div aria-label={label}>
+    <span>{label}</span>
+  </div>
+)
 
-  const LangLabel = ({ label }: { label: string }) => (
-    <div aria-label={label}>
-      <span>{label}</span>
-    </div>
-  )
+const languageOptions: MenuProps['items'] = languages.map(({ key, label }) => ({
+  key,
+  label: <LangLabel label={label} />,
+}))
 
-  const languageOptions: MenuProps['items'] = languages.map(({ key, label }) => ({
-    key,
-    label: <LangLabel label={label} />,
-  }))
+export const LanguageToggleButton = () => {
+  const { setLanguage, currentLanguage } = useTheme()
+  const { t } = useTranslation()
 
   const handleLanguageChange: MenuProps['onClick'] = ({ key }) => {
     setLanguage(key)

src/layout/sidebar/menu/Menu.tsx

@@ -103,16 +103,16 @@ const MainMenu = ({ collapsed = false }: MainMenuProps) => {
 
   const items = collapsed ? flatItems : groupedItems
 
-  const location = useLocation()
-  const [current, setCurrent] = useState(getPathWithoutLang(location.pathname) || '/')
+  const { pathname } = useLocation()
+  const [current, setCurrent] = useState(getPathWithoutLang(pathname) || '/')
 
   useEffect(() => {
-    const nextPath = getPathWithoutLang(location.pathname) || '/'
+    const nextPath = getPathWithoutLang(pathname) || '/'
 
     if (current !== nextPath) {
       setCurrent(nextPath)
     }
-  }, [location.pathname, current])
+  }, [pathname, current])
 
   const handleClick: MenuProps['onClick'] = ({ key }) => {
     setCurrent(key)

src/pages/about/index.tsx

@@ -190,8 +190,8 @@ const Contributors = () => {
         </Trans>
       </p>
       <ol className="contributions">
-        {isLoading && <p>Loading...</p>}
-        {isError && <p>Error...</p>}
+        {isLoading && <p>Loading&hellip;</p>}
+        {isError && <p>Error&hellip;</p>}
         {contributors &&
           contributors.map((author) => (
             <li key={author.id}>

src/pages/components/YoutubeModal.tsx

@@ -1,4 +1,3 @@
-// import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; //TODO:
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { Typography } from '@mui/material'
 import { Modal } from 'antd'
@@ -36,7 +35,7 @@ const InfoYoutubeModal = ({ videoUrl, label, title }: InfoYoutubeModalProps) =>
           {title}
         </Typography>
         <div className="modal-iframe-container">
-          <iframe allowFullScreen src={videoUrl} />
+          <iframe allowFullScreen src={videoUrl} title={title} />
         </div>
       </Modal>
     </>

src/pages/components/map-related/MapContent.tsx

@@ -128,7 +128,7 @@ export function MapContent({ positions, plannedRouteStops, showNavigationButtons
             <Marker key={stop.key} position={[latitude, longitude]} icon={plannedRouteStopMarker} />
           )
         })}
-      {positions.length && (
+      {positions.length > 0 && (
         <Polyline
           pathOptions={{ color: actualRouteLineColor }}
           positions={positions.map((position) => position.loc)}

src/pages/components/utils/index.ts

@@ -22,7 +22,7 @@ const bySeverityHandler = (a: HourlyData, b: HourlyData) => {
 }
 
 export const sortByMode = (hourlyData: HourlyData[] = [], sortingMode: string) => {
-  return [...hourlyData].sort(sortingMode === 'hour' ? byHourHandler : bySeverityHandler)
+  return hourlyData.toSorted(sortingMode === 'hour' ? byHourHandler : bySeverityHandler)
 }
 
 export const mapColorByExecution = (planned: number, actual: number) => {

src/pages/lineProfile/LineProfileDetails.tsx

@@ -44,7 +44,11 @@ export const LineProfileDetails = ({
       title={
         <Grid container alignItems="center" flexDirection="column">
           <Link to={'/operator?operatorId=' + operatorRef} style={{ lineHeight: 0 }}>
-            <img src={`../operators-logos/${operatorRef}.svg`} height={60} />
+            <img
+              src={`../operators-logos/${operatorRef}.svg`}
+              alt={`logo of operator ${agencyName}`}
+              height={60}
+            />
           </Link>
           <Link to={'/operator?operatorId=' + operatorRef} style={{ lineHeight: 0 }}>
             <Typography variant="h6" marginBottom="21.5px">

src/pages/operator/OperatorInfo.tsx

@@ -35,7 +35,11 @@ export const OperatorInfo = ({ operatorId }: { operatorId?: string }) => {
             }
           />
         </InfoTable>
-        <img src={`../operators-logos/${operator?.ref}.svg`} height={96} />
+        <img
+          src={`../operators-logos/${operator?.ref}.svg`}
+          alt={`logo of operator ${operator?.eng_name}`}
+          height={96}
+        />
       </Stack>
     </Widget>
   )

src/pages/velocityHeatmap/components/VelocityHeatmapRectangles.tsx

@@ -1,5 +1,5 @@
 import type { SiriVelocityAggregationPydanticModel } from '@hasadna/open-bus-api-client'
-import React, { useContext } from 'react'
+import { useContext, useEffect } from 'react'
 import { Popup, Rectangle } from 'react-leaflet'
 import dayjs from 'src/dayjs'
 import { SearchContext } from '../../../model/pageState'
@@ -33,6 +33,7 @@ function getRedOpacityColor(value: number, minV = 0, maxV = 1): string {
 
 interface VelocityHeatmapRectanglesProps {
   visMode: VisMode
+  setMinMax?: (min: number, max: number) => void
 }
 
 const DEFAULT_BOUNDS = {
@@ -42,11 +43,10 @@ const DEFAULT_BOUNDS = {
   maxLon: 35.7,
 }
 
-export const VelocityHeatmapRectangles: React.FC<
-  VelocityHeatmapRectanglesProps & {
-    setMinMax?: (min: number, max: number) => void
-  }
-> = ({ visMode, setMinMax }) => {
+export const VelocityHeatmapRectangles = ({
+  visMode,
+  setMinMax,
+}: VelocityHeatmapRectanglesProps) => {
   const { search } = useContext(SearchContext)
   const zoom = useZoomLevel()
   const { data, loading, error, currZoom } = useVelocityAggregationData(
@@ -79,8 +79,8 @@ export const VelocityHeatmapRectangles: React.FC<
     }
   }
   // Pass min/max to parent for legend
-  React.useEffect(() => {
-    if (setMinMax) setMinMax(minV, maxV)
+  useEffect(() => {
+    setMinMax?.(minV, maxV)
   }, [minV, maxV, setMinMax])
 
   return (