fix: resolve all 125 SonarCloud issues

Comprehensive code quality cleanup based on SonarCloud static analysis:

- Refactored async constructor to static factory (useVehicleLocations)
- Fixed JSX value leaks with proper boolean checks (BusToolTip, MapContent)
- Fixed dead code from always-truthy template literal (WorstLinesChart)
- Replaced deprecated APIs (Ant Design Option, MUI PaperProps)
- Added Readonly<> to 18 component prop types
- Replaced window with globalThis (6 files)
- Used modern JS APIs (replaceAll, Number.parseInt, Number.isNaN, .at(),
  .some(), .toSorted(), codePointAt)
- Fixed accessibility issues (aria-labels, button vs anchor, keyboard)
- Removed commented-out code, redundant fragments, unused exports
- Wrapped Context provider values in useMemo to prevent re-renders
- Extracted nested components, ternaries, and template literals
- Fixed array index keys with data-based keys

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: eran132

src/api/siriService.ts

@@ -50,7 +50,9 @@ export async function getSiriStopHitTimesAsync(
   const locationsByRideId = locations.reduce(
     (acc, location) => {
       if (location.siriRideId) {
-        ;(acc[location.siriRideId.toString()] ||= []).push({
+        const key = location.siriRideId.toString()
+        acc[key] ??= []
+        acc[key].push({
           ...location,
           longitude: location.lon || 0,
           latitude: location.lat || 0,
@@ -67,6 +69,10 @@ export async function getSiriStopHitTimesAsync(
   const diffFromTargetStart = (location: EnrichedLocation): number =>
     Math.abs(timestamp.diff(dayjs(location.recordedAtTime), 'second'))
 
-  const closestInTimeHits = stopHits.sort((a, b) => diffFromTargetStart(a) - diffFromTargetStart(b))
-  return closestInTimeHits.sort((a, b) => a.recordedAtTime!.getTime() - b.recordedAtTime!.getTime())
+  const closestInTimeHits = stopHits.toSorted(
+    (a, b) => diffFromTargetStart(a) - diffFromTargetStart(b),
+  )
+  return closestInTimeHits.toSorted(
+    (a, b) => a.recordedAtTime!.getTime() - b.recordedAtTime!.getTime(),
+  )
 }

src/hooks/useSingleLineData.ts

@@ -46,8 +46,8 @@ export const useSingleLineData = (
   useEffect(() => {
     if (!operatorId || !lineNumber) {
       setRoutes(undefined)
-      setRouteKey(undefined)
-      setStartTime(undefined)
+      setRouteKey()
+      setStartTime()
       setError(undefined)
       setSearch((prev) => ({
         ...prev,
@@ -71,7 +71,7 @@ export const useSingleLineData = (
         if (err?.cause?.name !== 'AbortError') {
           setRoutes(undefined)
           setSearch((prev) => ({ ...prev, routes: undefined }))
-          setRouteKey(undefined)
+          setRouteKey()
           setError(err instanceof Error ? err.message : 'Failed to fetch routes')
         }
       })

src/hooks/useVehicleLocations.ts

@@ -41,16 +41,18 @@ const loadedLocations = new Map<
  * it also caches the data, so if the same interval is requested again, it will not load it again.
  */
 class LocationObservable {
-  constructor(query: VehicleLocationQuery) {
-    this.#loadData(query)
+  static create(query: VehicleLocationQuery) {
+    const instance = new LocationObservable()
+    void instance.#loadData(query)
+    return instance
   }
 
   data: SiriVehicleLocationWithRelatedPydanticModel[] = []
   loading = true
 
   async #loadData(querys: VehicleLocationQuery) {
     let offset = 0
-    for (let i = 1; this.loading; i++) {
+    while (this.loading) {
       const data = await fetchWithQueue(querys, offset)
       if (!data || data.length === 0) {
         this.loading = false
@@ -139,7 +141,10 @@ function getLocations(
 ) {
   const key = `${formatTime(from)}-${formatTime(to)}-${operatorRef}-${lineRef}-${vehicleRef}`
   if (!loadedLocations.has(key)) {
-    loadedLocations.set(key, new LocationObservable({ from, to, lineRef, vehicleRef, operatorRef }))
+    loadedLocations.set(
+      key,
+      LocationObservable.create({ from, to, lineRef, vehicleRef, operatorRef }),
+    )
   }
   const observable = loadedLocations.get(key)!
   return observable.observe(onUpdate)
@@ -171,6 +176,24 @@ export default function useVehicleLocations({
 }) {
   const [locations, setLocations] = useState<SiriVehicleLocationWithRelatedPydanticModel[]>([])
   const [isLoading, setIsLoading] = useState<boolean[]>([])
+
+  const handleFinished = (i: number) => {
+    setIsLoading((prev) => {
+      const newIsLoading = [...prev]
+      newIsLoading[i] = false
+      return newIsLoading
+    })
+  }
+
+  const handleData = (data: SiriVehicleLocationWithRelatedPydanticModel[]) => {
+    setLocations((prev) =>
+      uniqBy<SiriVehicleLocationWithRelatedPydanticModel>(
+        [...prev, ...data].sort((a, b) => (a.id || 0) - (b.id || 0)),
+        (loc) => loc.id,
+      ),
+    )
+  }
+
   useEffect(() => {
     if (pause) return
     const range = split ? getMinutesInRange(from, to, split) : [{ from, to }]
@@ -184,18 +207,9 @@ export default function useVehicleLocations({
         operatorRef,
         onUpdate: (data) => {
           if ('finished' in data) {
-            setIsLoading((prev) => {
-              const newIsLoading = [...prev]
-              newIsLoading[i] = false
-              return newIsLoading
-            })
+            handleFinished(i)
           } else {
-            setLocations((prev) =>
-              uniqBy<SiriVehicleLocationWithRelatedPydanticModel>(
-                [...prev, ...data].sort((a, b) => (a.id || 0) - (b.id || 0)),
-                (loc) => loc.id,
-              ),
-            )
+            handleData(data)
           }
         },
       }),
@@ -208,8 +222,6 @@ export default function useVehicleLocations({
   }, [from, to, lineRef, vehicleRef, split])
   return {
     locations,
-    isLoading: isLoading.some((loading) => loading),
+    isLoading: isLoading.some(Boolean),
   }
 }
-
-export {}

src/pages/DataResearch/DataResearch.tsx

@@ -183,7 +183,7 @@ const StackedResearchChart = ({
     }
 
     return {
-      data: result.sort((a, b) => a.ts - b.ts),
+      data: result.toSorted((a, b) => a.ts - b.ts),
       operators: Array.from(operatorSet),
     }
   }, [filteredGraphData, field])

src/pages/about/index.tsx

@@ -75,8 +75,8 @@ const Privacy = () => {
     <Widget title={t('privacy')}>
       <p>
         <Trans i18nKey="aboutPage.privacyText">
-          <a href={googlAnalyticsUrl}></a>
-          <a href={googleAnaliticsPrivacyUrl}></a>
+          <a href={googlAnalyticsUrl} aria-label="Google Analytics"></a>
+          <a href={googleAnaliticsPrivacyUrl} aria-label="Google Analytics Privacy"></a>
         </Trans>
       </p>
     </Widget>
@@ -93,8 +93,8 @@ const License = () => {
         <Trans
           i18nKey="aboutPage.licenseInfo.text"
           values={{ licenseName: t('aboutPage.licenseInfo.licenseName') }}>
-          <a href={licenseLink}></a>
-          <a href={licenseOrgLink}></a>
+          <a href={licenseLink} aria-label="Creative Commons License"></a>
+          <a href={licenseOrgLink} aria-label="Creative Commons"></a>
         </Trans>
       </p>
     </Widget>
@@ -186,24 +186,25 @@ const Contributors = () => {
         {t('aboutPage.contributorsText')}
         <br />
         <Trans i18nKey="aboutPage.contributorsReadMore">
-          <a href="https://github.com/hasadna/open-bus-map-search/blob/main/CONTRIBUTING.md"></a>
+          <a
+            href="https://github.com/hasadna/open-bus-map-search/blob/main/CONTRIBUTING.md"
+            aria-label="Contributing guide"></a>
         </Trans>
       </p>
       <ol className="contributions">
         {isLoading && <p>Loading...</p>}
         {isError && <p>Error...</p>}
-        {contributors &&
-          contributors.map((author) => (
-            <li key={author.id}>
-              <a href={author.html_url}>
-                <h2>{author.login}</h2>
-                <img src={author.avatar_url} alt={author.login} />
-                <p>
-                  {author.contributions} {t('aboutPage.contributions')}
-                </p>
-              </a>
-            </li>
-          ))}
+        {contributors?.map((author) => (
+          <li key={author.id}>
+            <a href={author.html_url}>
+              <h2>{author.login}</h2>
+              <img src={author.avatar_url} alt={author.login} />
+              <p>
+                {author.contributions} {t('aboutPage.contributions')}
+              </p>
+            </a>
+          </li>
+        ))}
       </ol>
     </Widget>
   )
@@ -263,7 +264,7 @@ function useContributions() {
       .filter((a) => a.type === 'User')
       // sort by contributions
       .sort((a: Author, b: Author) => b.contributions - a.contributions)
-      .reduce(combineAuthor, [] as Author[])
+      .reduce((authors, author) => combineAuthor(authors, author), [] as Author[])
     return { contributors, isLoading, isError }
   } catch (error) {
     console.error(error)
@@ -274,10 +275,10 @@ function useContributions() {
 // sum contributions of the same user
 function combineAuthor(authors: Author[], author: Author) {
   const sameUser = authors.find((a) => a.login === author.login)
-  if (!sameUser) {
-    authors.push(author)
-  } else {
+  if (sameUser) {
     sameUser.contributions += author.contributions
+  } else {
+    authors.push(author)
   }
   return authors
 }

src/pages/bugReport/BugReportForm.tsx

@@ -14,15 +14,12 @@ import './BugReportForm.scss'
 const BugReportForm = () => {
   const { t, i18n } = useTranslation()
   const [form] = Form.useForm<CreateIssuePostRequest>()
-  // const [fileList, setFileList] = useState<UploadFile[]>([])
-
   const mutation = useMutation({
     mutationFn: (values: CreateIssuePostRequest) =>
       ISSUES_API.issuesCreatePost({ createIssuePostRequest: values }),
     onSuccess: (response) => {
       if (response.data?.state === 'open') {
         form.resetFields()
-        // setFileList([])
       }
     },
     onError: (error) => {
@@ -35,10 +32,6 @@ const BugReportForm = () => {
     mutation.mutate(values)
   }
 
-  // const onFileChange = (info: UploadChangeParam) => {
-  //   setFileList(info.fileList)
-  // }
-
   const options = useMemo(() => {
     return [
       { value: 'always', label: t('bug_frequency.always') },
@@ -82,15 +75,16 @@ const BugReportForm = () => {
         onFinish={(values) => {
           onFinish(values)
         }}
-        // onFinishFailed={onFinishFailed}
         labelCol={{ span: 6 }}
         wrapperCol={{ span: 18 }}>
         <Form.Item label={t('bug_type')} name="type" rules={[{ required: true }]}>
-          <Select>
-            <Select.Option value="bug">{t('bug_type_bug')}</Select.Option>
-            <Select.Option value="feature">{t('bug_type_feature')}</Select.Option>
-            <Select.Option value="other">{t('bug_type_other')}</Select.Option>
-          </Select>
+          <Select
+            options={[
+              { value: 'bug', label: t('bug_type_bug') },
+              { value: 'feature', label: t('bug_type_feature') },
+              { value: 'other', label: t('bug_type_other') },
+            ]}
+          />
         </Form.Item>
 
         <Form.Item
@@ -146,13 +140,7 @@ const BugReportForm = () => {
           label={t('bug_reproducibility')}
           name="reproducibility"
           rules={[{ required: true, min: 1, max: 100 }]}>
-          <Select>
-            {options.map((option) => (
-              <Select.Option key={option.value} value={option.value}>
-                {option.label}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select options={options} />
         </Form.Item>
 
         <EasterEgg code="debug" autohide={false} onShow={() => form.setFieldValue('debug', true)}>
@@ -161,20 +149,6 @@ const BugReportForm = () => {
           </Form.Item>
         </EasterEgg>
 
-        {/* <Form.Item label={t('bug_attachments')} name="attachments">
-          <Upload
-            multiple
-            maxCount={10}
-            beforeUpload={() => false}
-            listType="picture"
-            fileList={fileList}
-            onChange={onFileChange}>
-            <Button icon={<FileUploadOutlined fontSize="small" />}>
-              {t('bug_attachments_upload_button')}
-            </Button>
-          </Upload>
-        </Form.Item> */}
-
         <Form.Item>
           <Button type="primary" htmlType="submit" loading={mutation.isPending} dir={i18n.dir()}>
             {t('bug_submit')}

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

@@ -96,7 +96,7 @@ export function MapContent({ positions, plannedRouteStops, showNavigationButtons
             }}
             position={pos.loc}
             icon={icon}
-            key={i}>
+            key={pos.point?.id ?? `pos-${i}`}>
             <Popup minWidth={300} maxWidth={700}>
               <BusToolTip position={pos} icon={busIconPath(pos.operator!)}>
                 {showNavigationButtons && (
@@ -112,7 +112,7 @@ export function MapContent({ positions, plannedRouteStops, showNavigationButtons
         )
       })}
 
-      {plannedRouteStops?.length && (
+      {!!plannedRouteStops?.length && (
         <Polyline
           pathOptions={{ color: plannedRouteLineColor }}
           positions={plannedRouteStops.map((stop) => [
@@ -121,14 +121,14 @@ export function MapContent({ positions, plannedRouteStops, showNavigationButtons
           ])}
         />
       )}
-      {plannedRouteStops?.length &&
+      {!!plannedRouteStops?.length &&
         plannedRouteStops.map((stop) => {
           const { latitude, longitude } = stop.location
           return (
             <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/map-related/MapLayers/BusToolTip.tsx

@@ -171,7 +171,7 @@ export function BusToolTip({ position, icon, children }: BusToolTipProps) {
                   data={position}
                   name={t('line')}
                 />
-                {route?.id && (
+                {route?.id != null && (
                   <CustomTreeView<GtfsRoutePydanticModel>
                     id={route?.id.toString()}
                     data={route}