Improve linter

.eslintrc.json

@@ -23,6 +23,8 @@
   "plugins": ["react", "@typescript-eslint"],
   "rules": {
     "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "react/react-in-jsx-scope": "off",
     "prettier/prettier": [
       "error",
       {

.github/workflows/lint.yml

@@ -13,3 +13,6 @@ jobs:
       run: yarn
     - name: Run lint
       run: yarn lint
+    - name: find circular dependencies
+      run: yarn madge --extensions js,ts --circular .
+

package.json

@@ -18,6 +18,7 @@
     "i18next": "^23.5.1",
     "leaflet": "^1.8.0",
     "lodash.debounce": "^4.0.8",
+    "madge": "^6.1.0",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.43",
     "open-bus-stride-client": "0.1.2",

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import 'antd/dist/antd.min.css'
 import './App.scss'
 import TimelinePage from 'src/pages/TimelinePage'

src/api/groupByService.ts

@@ -35,7 +35,7 @@ example response
   }
 ]
 */
-export type GroupByResponse = {
+type GroupByResponse = {
   gtfs_route_date: string
   gtfs_route_hour: string
   operator_ref: number
@@ -130,5 +130,3 @@ export function useGroupBy({
 
   return [data, loading, error] as const
 }
-
-export default groupbyAsync

src/pages/About.tsx

@@ -1,5 +1,4 @@
 import styled from 'styled-components'
-import React from 'react'
 import { TEXT_KEYS } from 'src/resources/texts'
 import SlackIcon from '../resources/slack-icon.svg'
 import { useTranslation } from 'react-i18next'

src/pages/GapsPage.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { PageContainer } from './components/PageContainer'
 import { Row } from './components/Row'
 import { Label } from './components/Label'

src/pages/GapsPatternsPage.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import './GapsPatternsPage.scss'
 import { Moment } from 'moment'
 import { Skeleton, Spin } from 'antd'

src/pages/RealtimeMapPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { MapContainer, Marker, Polyline, Popup, TileLayer, useMap } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-cluster'
 import { TEXTS } from 'src/resources/texts'
@@ -37,15 +37,6 @@ interface Path {
   vehicleRef: number
 }
 
-export function numberToColorHsl(i: number, max: number) {
-  const ratio = i / max
-  // 0 - black. 1 - red
-  const hue = 0
-  const saturation = ratio * 100
-  const lightness = ratio * 50
-  return `hsl(${hue}, ${saturation}%, ${lightness}%)`
-}
-
 const fiveMinutesAgo = moment().subtract(5, 'minutes')
 const fourMinutesAgo = moment().subtract(4, 'minutes')
 
@@ -189,7 +180,7 @@ export default function RealtimeMapPage() {
   )
 }
 
-export function Markers({ positions }: { positions: Point[] }) {
+function Markers({ positions }: { positions: Point[] }) {
   const map = useMap()
   const [agencyList, setAgencyList] = useState<Agency[]>([])
 

src/pages/SingleLineMapPage.tsx

@@ -1,5 +1,5 @@
 import moment from 'moment'
-import React, { useContext, useEffect, useMemo, useState } from 'react'
+import { useContext, useEffect, useMemo, useState } from 'react'
 import { MapContainer, Marker, Polyline, Popup, TileLayer } from 'react-leaflet'
 import { getRoutesAsync } from 'src/api/gtfsService'
 import useVehicleLocations from 'src/api/useVehicleLocations'

src/pages/TimelinePage.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import LineNumberSelector from 'src/pages/components/LineSelector'
 import OperatorSelector from 'src/pages/components/OperatorSelector'
 import { Row } from 'src/pages/components/Row'

src/pages/components/ClearButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { CloseOutlined as ClearIcon } from '@ant-design/icons'
 import './ClearButton.scss'
 

src/pages/components/DateSelector.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { useState } from 'react'
 import { DatePicker } from '@mui/x-date-pickers/DatePicker'
 import { TEXTS } from 'src/resources/texts'
 import { DataAndTimeSelectorProps } from './utils/dateAndTime'
@@ -10,7 +10,7 @@ const Error = styled.div`
 `
 
 export function DateSelector({ time, onChange, customLabel }: DataAndTimeSelectorProps) {
-  const [error, setError] = React.useState<DateValidationError | null>(null)
+  const [error, setError] = useState<DateValidationError | null>(null)
   return (
     <>
       <DatePicker

src/pages/components/DateTimePicker.tsx

@@ -1,20 +1,5 @@
-import moment, { Moment } from 'moment'
+import { Moment } from 'moment'
 import React, { useCallback } from 'react'
-import { DatePicker } from 'antd'
-import { TEXTS } from 'src/resources/texts'
-
-type DateTimePicker = {
-  timestamp: Moment | undefined
-  setDateTime: (timestamp: Moment) => void
-  showTime?: boolean
-}
-
-const JAN_FIRST_2022 = 1641038400000
-
-function isDateDisabled(date: Moment) {
-  const END_OF_TODAY = moment().endOf('day')
-  return date.isAfter(END_OF_TODAY) || date.isBefore(moment(JAN_FIRST_2022))
-}
 
 export function useDate(initialValue: Moment) {
   const [date, setDate] = React.useState<Moment>(initialValue)
@@ -25,20 +10,3 @@ export function useDate(initialValue: Moment) {
   }, [])
   return [date, onChange] as const
 }
-
-const DateTimePicker = ({ timestamp, setDateTime, showTime }: DateTimePicker) => (
-  <DatePicker
-    value={timestamp}
-    onChange={(nextTimestamp) => nextTimestamp && setDateTime(nextTimestamp)}
-    format={showTime ? TEXTS.datetime_format : TEXTS.date_format}
-    showTime={
-      showTime && {
-        defaultValue: moment('00:00:00', 'HH:mm:ss'),
-        format: 'HH:mm',
-      }
-    }
-    disabledDate={(date) => isDateDisabled(date)}
-  />
-)
-
-export default DateTimePicker

src/pages/components/DisplayGapsPercentage.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { TEXTS } from '../../resources/texts'
 import './DisplayGapsPercentage.scss'
 import { Row } from './Row'

src/pages/components/FilterPositionsByStartTimeSelector.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { TEXTS } from 'src/resources/texts'
 import { Autocomplete, TextField } from '@mui/material'
 

src/pages/components/Label.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components'
 
 const StyledDiv = styled.div`

src/pages/components/LineSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useLayoutEffect, useState } from 'react'
+import { useCallback, useLayoutEffect, useState } from 'react'
 import { TEXTS } from 'src/resources/texts'
 import debounce from 'lodash.debounce'
 import { TextField } from '@mui/material'

src/pages/components/MapLayers/BusToolTip.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Point } from 'src/pages/RealtimeMapPage'
 import { Button } from '@mui/material'
 import moment from 'moment-timezone'

src/pages/components/MinuteSelector.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { TEXTS } from 'src/resources/texts'
 import { TextField } from '@mui/material'
 import ClearButton from './ClearButton'

src/pages/components/OperatorSelector.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { useEffect, useState } from 'react'
 import { TEXTS } from 'src/resources/texts'
 import { Operator, RELEVANT_OPERATORS } from 'src/model/operator'
 import { Autocomplete, TextField } from '@mui/material'
@@ -14,9 +14,8 @@ const OperatorSelector = ({
   setOperatorId,
   onlyMajorOperators = false,
 }: OperatorSelectorProps) => {
-  const [operators, setOperators] = React.useState<Operator[]>([])
-
-  React.useEffect(() => {
+  const [operators, setOperators] = useState<Operator[]>([])
+  useEffect(() => {
     const majorOperatorsIds = ['3', '5', '15', '18', '25']
     RELEVANT_OPERATORS.then((resultObj) =>
       setOperators(

src/pages/components/RouteSelector.tsx

@@ -1,5 +1,4 @@
 import { formatted, TEXTS } from 'src/resources/texts'
-import React from 'react'
 import { BusRoute } from 'src/model/busRoute'
 import { Autocomplete, TextField } from '@mui/material'