fix: resolve remaining 59 SonarCloud issues

Applied all mechanical fixes that were missed in the first pass:
- Readonly<> on 18 component prop types
- globalThis over window (8 files)
- Number.parseInt, Number.isNaN, replaceAll, codePointAt, .some(), .at()
- ??= and ?? for cleaner assignments
- useMemo for Context provider values
- Extracted 3 inner components to top level
- Added role/tabIndex/onKeyDown for accessibility
- Changed <a> to <button> where used as button
- Destructured useState, converted to top-level await

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

Author: eran132

src/App.tsx

@@ -5,10 +5,12 @@ import router from './routes'
 import Preloader from './shared/Preloader'
 
 if ('serviceWorker' in navigator) {
-  navigator.serviceWorker
-    .register('/service-worker.js')
-    .then((reg) => console.log('Service Worker Registered', reg))
-    .catch((err) => console.error('Service Worker Registration Failed', err))
+  try {
+    const reg = await navigator.serviceWorker.register('/service-worker.js')
+    console.log('Service Worker Registered', reg)
+  } catch (err) {
+    console.error('Service Worker Registration Failed', err)
+  }
 }
 
 export const RoutedApp = () => {

src/api/agencyList.ts

@@ -23,8 +23,6 @@ async function fetchAgencyList() {
 }
 
 export function getAgencyList() {
-  if (!agencyListPromise) {
-    agencyListPromise = fetchAgencyList()
-  }
+  agencyListPromise ??= fetchAgencyList()
   return agencyListPromise
 }

src/api/gapsService.ts

@@ -26,7 +26,7 @@ export const getGapsAsync = (
     dateTo: new Date(toTimestamp),
     limit,
     lineRef,
-    operatorRef: parseInt(operatorId),
+    operatorRef: Number.parseInt(operatorId),
   }).then((gaps) =>
     gaps.map((gap) => {
       return {

src/api/groupByService.ts

@@ -58,10 +58,10 @@ export function useGroupBy({
   dateFrom: number
   groupBy: groupByFields
 }) {
-  const { isLoading, isError, data, error } = useQuery({
+  const { isLoading, data, error } = useQuery({
     queryKey: ['groupBy', dateFrom, dateTo, groupBy],
     queryFn: () => fetchGroupBy({ dateFrom, dateTo, groupBy }),
   })
 
-  return [data ? data : [], isLoading, isError ? error : null] as const
+  return [data ?? [], isLoading, error ?? null] as const
 }

src/api/gtfsService.ts

@@ -70,7 +70,7 @@ export async function getStopsForRouteAsync(
       rideStops.map(async (rideStop) => {
         if (
           !rideStop.gtfsStopId ||
-          stops.find((b) => b.code === rideStop.gtfsStopCode?.toString())
+          stops.some((b) => b.code === rideStop.gtfsStopCode?.toString())
         ) {
           return
         }

src/hooks/useConstrainedFloatingButton.ts

@@ -96,21 +96,21 @@ export function useConstrainedFloatingButton(
       intersectionObserver.observe(mapContainerRef.current)
     }
 
-    window.document
+    globalThis.document
       .getElementsByClassName('ant-layout-content')
       .item(0)
       ?.addEventListener('scroll', updateButtonPosition)
-    window.addEventListener('resize', updateButtonPosition)
+    globalThis.addEventListener('resize', updateButtonPosition)
 
     return () => {
       if (intersectionObserver) {
         intersectionObserver.disconnect()
       }
-      window.document
+      globalThis.document
         .getElementsByClassName('ant-layout-content')
         .item(0)
         ?.removeEventListener('scroll', updateButtonPosition)
-      window.removeEventListener('resize', updateButtonPosition)
+      globalThis.removeEventListener('resize', updateButtonPosition)
     }
   }, [mapContainerRef, buttonRef, isExpanded])
 }

src/hooks/useSingleLineData.ts

@@ -21,7 +21,7 @@ export const useSingleLineData = (
 ) => {
   const { search, setSearch } = useContext(SearchContext)
   const [routes, setRoutes] = useState<BusRoute[] | undefined>(search.routes)
-  const [routeKey, _setRouteKey] = useState<string | undefined>(search.routeKey)
+  const [routeKey, setRouteKeyState] = useState<string | undefined>(search.routeKey)
   const [filteredPositions, setFilteredPositions] = useState<Point[]>([])
   const [plannedRouteStops, setPlannedRouteStops] = useState<BusStop[]>([])
   const [options, setOptions] = useState<{ value: string; label: string }[]>([])
@@ -37,7 +37,7 @@ export const useSingleLineData = (
 
   const setRouteKey = useCallback(
     (routeKey?: string) => {
-      _setRouteKey(routeKey)
+      setRouteKeyState(routeKey)
       setSearch((prev) => ({ ...prev, routeKey }))
     },
     [setSearch],

src/index.tsx

@@ -9,7 +9,7 @@ import './locale/allTranslations'
 import './index.scss'
 
 const persister = createAsyncStoragePersister({
-  storage: window.localStorage,
+  storage: globalThis.localStorage,
 })
 
 const queryClient = new QueryClient({

src/layout/LayoutContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, FC, PropsWithChildren, useState } from 'react'
+import { createContext, FC, PropsWithChildren, useMemo, useState } from 'react'
 
 export interface LayoutContextInterface {
   setDrawerOpen: (isOpen: boolean) => void
@@ -7,6 +7,7 @@ export interface LayoutContextInterface {
 export const LayoutCtx = createContext({} as LayoutContextInterface)
 const LayoutContext: FC<PropsWithChildren> = ({ children }) => {
   const [drawerOpen, setDrawerOpen] = useState(false)
-  return <LayoutCtx.Provider value={{ drawerOpen, setDrawerOpen }}>{children}</LayoutCtx.Provider>
+  const value = useMemo(() => ({ drawerOpen, setDrawerOpen }), [drawerOpen])
+  return <LayoutCtx.Provider value={value}>{children}</LayoutCtx.Provider>
 }
 export default LayoutContext

src/layout/ThemeContext.tsx

@@ -32,7 +32,7 @@ const ThemeContext = createContext<ThemeContextInterface>({} as ThemeContextInte
 export const ThemeProvider = ({ children }: PropsWithChildren) => {
   const [isDarkTheme, setIsDarkTheme] = useLocalStorage<boolean>(
     'isDarkTheme',
-    window.matchMedia('(prefers-color-scheme: dark)').matches,
+    globalThis.matchMedia('(prefers-color-scheme: dark)').matches,
   )
   const [language, setLanguage] = useLocalStorage<string>('language', 'he')
   const { i18n } = useTranslation()