Linting fixes

components/Flag.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import styled from 'styled-components'
 
-var supportedCountryCodes = [
+const supportedCountryCodes = [
   'ad',
   'ae',
   'af',

components/Header.js

@@ -7,7 +7,7 @@ const Header = () => {
   const { asPath, locale, defaultLocale } = useRouter()
 
   const lang = locale === defaultLocale ? '' : `/${locale}`
-  const canonical = 'https://explorer.ooni.org' + lang + asPath.split('?')[0]
+  const canonical = `https://explorer.ooni.org${lang}${asPath.split('?')[0]}`
 
   const intl = useIntl()
   const description = intl.formatMessage({ id: 'Home.Meta.Description' })

components/MATChart.js

@@ -101,10 +101,10 @@ const MATChart = ({ query, showFilters = true }) => {
             <>
               {data?.data?.result?.length > 0 ? (
                 <Box>
-                  {data && data.data.dimension_count == 0 && (
+                  {data && data.data.dimension_count === 0 && (
                     <FunnelChart data={data.data.result} />
                   )}
-                  {data && data.data.dimension_count == 1 && (
+                  {data && data.data.dimension_count === 1 && (
                     <StackedBarChart data={data.data.result} query={query} />
                   )}
                   {data && data.data.dimension_count > 1 && (

components/NavBar.js

@@ -144,6 +144,7 @@ export const NavBar = ({ color }) => {
     logout()
   }
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     setShowMenu(false)
   }, [pathname])

components/ThirdPartyDataChart.js

@@ -58,6 +58,7 @@ const ThirdPartyDataChart = ({ since, until, country, asn, ...props }) => {
     return [from, to]
   }, [since, until])
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   const cloudflareData = useEffect(() => {
     if (!since && !until) return
 

components/aggregation/Debug.js

@@ -113,7 +113,10 @@ export const Debug = ({ query, children, ...rest }) => {
               </Bold>
             </Box>
             <Box>
-              <button onClick={() => updateNoOpState(performance.now())}>
+              <button
+                type="button"
+                onClick={() => updateNoOpState(performance.now())}
+              >
                 refresh
               </button>
 

components/aggregation/DebugContext.js

@@ -1,10 +1,10 @@
 import React, {
-  useState,
   createContext,
-  useContext,
   useCallback,
+  useContext,
   useEffect,
   useRef,
+  useState,
 } from 'react'
 
 export const DebugContext = createContext()
@@ -58,6 +58,7 @@ export const DebugProvider = ({ children }) => {
     scrollStartRef.current = timestamp
   }, [])
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     // when API query is initiated, reset timestamps
     console.debug('Query changed. Resetting timers')

components/aggregation/mat/ChartHeader.js

@@ -2,10 +2,10 @@ import { Box, Flex, Heading, Text } from 'ooni-components'
 import OONILogo from 'ooni-components/svgs/logos/OONI-HorizontalMonochrome.svg'
 import { useIntl } from 'react-intl'
 
-import { testGroups, testNames } from '/components/test-info'
 import CountryNameLabel from './CountryNameLabel'
 import { useMATContext } from './MATContext'
 import { colorMap } from './colorMap'
+import { testGroups, testNames } from '/components/test-info'
 
 const Legend = ({ label, color }) => {
   return (
@@ -29,9 +29,9 @@ const getTestNameGroupName = (testNameArray) => {
     return [testNames[testNameArray[0]]?.id || testNameArray[0]]
 
   const testGroup = new Set()
-  testNameArray.forEach((t) => {
+  for (const t of testNameArray) {
     testNames[t]?.group && testGroup.add(testNames[t]?.group)
-  })
+  }
   // if all test names belong to a single group, show group name
   if (testGroup.size === 1) {
     const testGroupName = testGroups[[...testGroup][0]].id
@@ -50,9 +50,9 @@ export const SubtitleStr = ({ query }) => {
       ? query.test_name
       : [query.test_name]
     const testNames = getTestNameGroupName(testNameQuery)
-    testNames.forEach((testName) => {
+    for (const testName of testNames) {
       params.add(intl.formatMessage({ id: testName, defaultMessage: '' }))
-    })
+    }
   }
   if (query.domain) {
     params.add(query.domain.split(',').join(', '))
@@ -104,25 +104,25 @@ export const ChartHeader = ({ options = {} }) => {
             <Flex justifyContent="center" my={2} flexWrap="wrap">
               <Legend
                 label={intl.formatMessage({ id: 'MAT.Table.Header.ok_count' })}
-                color={colorMap['ok_count']}
+                color={colorMap.ok_count}
               />
               <Legend
                 label={intl.formatMessage({
                   id: 'MAT.Table.Header.confirmed_count',
                 })}
-                color={colorMap['confirmed_count']}
+                color={colorMap.confirmed_count}
               />
               <Legend
                 label={intl.formatMessage({
                   id: 'MAT.Table.Header.anomaly_count',
                 })}
-                color={colorMap['anomaly_count']}
+                color={colorMap.anomaly_count}
               />
               <Legend
                 label={intl.formatMessage({
                   id: 'MAT.Table.Header.failure_count',
                 })}
-                color={colorMap['failure_count']}
+                color={colorMap.failure_count}
               />
             </Flex>
           )}

components/aggregation/mat/CustomTooltip.js

@@ -60,7 +60,7 @@ export const generateSearchQuery = (data, query) => {
     if (query.time_grain !== 'hour') {
       untilFilter = untilFilter.split('T')[0]
     } else {
-      untilFilter = untilFilter.split('.')[0] + 'Z'
+      untilFilter = `${untilFilter.split('.')[0]}Z`
     }
   }
 

components/aggregation/mat/Filters.js

@@ -354,7 +354,7 @@ const Filters = ({ data = [], tableData, setDataForCharts, query }) => {
   ])
 
   useEffect(() => {
-    if (state.globalFilter == undefined && resetTableRef.current === true) {
+    if (state.globalFilter === undefined && resetTableRef.current === true) {
       resetTableRef.current = false
       toggleAllRowsSelected(false)
     }
@@ -387,10 +387,12 @@ const Filters = ({ data = [], tableData, setDataForCharts, query }) => {
           <Table {...getTableProps()}>
             <TableHeader>
               {headerGroups.map((headerGroup, i) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
                 <TableRow key={i} {...headerGroup.getHeaderGroupProps()}>
                   {headerGroup.headers.map((column, i) => {
                     return (
                       <Cell
+                        // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
                         key={i}
                         {...column.getHeaderProps([
                           {
@@ -457,6 +459,7 @@ const Filters = ({ data = [], tableData, setDataForCharts, query }) => {
                       {row.cells.map((cell, i) => {
                         return (
                           <Cell
+                            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
                             key={i}
                             {...cell.getCellProps([
                               {

components/aggregation/mat/Form.js

@@ -95,6 +95,7 @@ const filterAxisOptions = (
     .map(([option]) => option)
 }
 
+// biome-ignore lint/style/useDefaultParameterLast: <explanation>
 function isValidFilterForTestname(testName = 'XX', arrayWithMapping) {
   // whether the dependent filter is valid to show along with `testName`
   return arrayWithMapping.includes(testName)
@@ -138,17 +139,17 @@ export const Form = ({ onSubmit, query }) => {
     }
   }, [defaultValues, reset, router.isReady])
 
-  const [since, setSince] = useState(defaultValues['since'])
-  const [until, setUntil] = useState(defaultValues['until'])
-  const [countryValue, setCountryValue] = useState(defaultValues['probe_cc'])
-  const [testNameValue, setTestNameValue] = useState(defaultValues['test_name'])
+  const [since, setSince] = useState(defaultValues.since)
+  const [until, setUntil] = useState(defaultValues.until)
+  const [countryValue, setCountryValue] = useState(defaultValues.probe_cc)
+  const [testNameValue, setTestNameValue] = useState(defaultValues.test_name)
 
   useEffect(() => {
     const subscription = watch((value, { name, type }) => {
-      if (name === 'since') setSince(value['since'])
-      if (name === 'until') setUntil(value['until'])
-      if (name === 'probe_cc') setCountryValue(value['probe_cc'])
-      if (name === 'test_name') setTestNameValue(value['test_name'])
+      if (name === 'since') setSince(value.since)
+      if (name === 'until') setUntil(value.until)
+      if (name === 'probe_cc') setCountryValue(value.probe_cc)
+      if (name === 'test_name') setTestNameValue(value.test_name)
     })
     return () => subscription.unsubscribe()
   }, [watch])
@@ -258,12 +259,14 @@ export const Form = ({ onSubmit, query }) => {
       if (!availableValues.includes(getValues('time_grain')))
         setValue('time_grain', 'hour')
       return availableValues
-    } else if (diff >= 8 && diff < 31) {
+    }
+    if (diff >= 8 && diff < 31) {
       const availableValues = ['day', 'week']
       if (!availableValues.includes(getValues('time_grain')))
         setValue('time_grain', 'day')
       return availableValues
-    } else if (diff >= 31) {
+    }
+    if (diff >= 31) {
       const availableValues = ['day', 'week', 'month']
       if (!availableValues.includes(getValues('time_grain')))
         setValue('time_grain', 'day')
@@ -296,6 +299,7 @@ export const Form = ({ onSubmit, query }) => {
                   {intl.formatMessage({ id: 'MAT.Form.AllCountries' })}
                 </option>
                 {sortedCountries.map((c, idx) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
                   <option key={idx} value={c.iso3166_alpha2}>
                     {c.localisedCountryName}
                   </option>
@@ -372,6 +376,7 @@ export const Form = ({ onSubmit, query }) => {
                 width={1}
               >
                 {timeGrainOptions.map((option, idx) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
                   <option key={idx} value={option}>
                     {intl.formatMessage(messages[option])}
                   </option>
@@ -391,6 +396,7 @@ export const Form = ({ onSubmit, query }) => {
                 width={1}
               >
                 {xAxisOptionsFiltered.map((option, idx) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
                   <option key={idx} value={option}>
                     {option.length > 0
                       ? intl.formatMessage(messages[option])
@@ -412,6 +418,7 @@ export const Form = ({ onSubmit, query }) => {
                 width={1}
               >
                 {yAxisOptionsFiltered.map((option, idx) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
                   <option key={idx} value={option}>
                     {option.length > 0
                       ? intl.formatMessage(messages[option])
@@ -484,6 +491,7 @@ export const Form = ({ onSubmit, query }) => {
                     {categoryCodes
                       .sort((a, b) => (a[1] < b[1] ? -1 : a[1] > b[1] ? 1 : 0))
                       .map(([code, label], idx) => (
+                        // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
                         <option key={idx} value={code}>
                           {intl.formatMessage({
                             id: `CategoryCode.${code}.Name`,

components/aggregation/mat/GridChart.js

@@ -45,7 +45,7 @@ export const prepareDataForGridChart = (data, query, locale) => {
   const rowLabels = {}
   const reshapedData = {}
 
-  data.forEach((item) => {
+  for (const item of data) {
     // Convert non-string keys (e.g `probe_asn`) to string
     // because they get casted to strings during Object transformations
     const key = String(item[query.axis_y])
@@ -56,7 +56,7 @@ export const prepareDataForGridChart = (data, query, locale) => {
       reshapedData[key] = [item]
       rowLabels[key] = getRowLabel(key, query.axis_y, locale)
     }
-  })
+  }
 
   const reshapedDataWithoutHoles = fillDataHoles(reshapedData, query)
 

components/aggregation/mat/HeatMapChart.js

@@ -76,20 +76,21 @@ const CustomHeatMapCell = ({
   let prevHeight = 0
 
   return (
+    // biome-ignore lint/a11y/useKeyWithMouseEvents: <explanation>
     <g
       transform={`translate(${x}, ${y}) scale(1, -1)`}
       onMouseOver={onHover}
       onMouseLeave={onLeave}
     >
       {value !== undefined &&
         barsData.map(([barLabel, barColor], index) => {
-          const barHeight =
-            height * (value[barLabel] / value['measurement_count']) // ((index + 1) / 10)
+          const barHeight = height * (value[barLabel] / value.measurement_count) // ((index + 1) / 10)
           const barY =
             prevHeight === 0 ? height * -0.5 : height * -0.5 + prevHeight
           prevHeight = prevHeight + barHeight
           return (
             <rect
+              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
               key={index}
               x={width * -0.5}
               y={barY}

components/aggregation/mat/MATContext.js

@@ -54,6 +54,7 @@ export const MATContextProvider = ({
     [initialContext],
   )
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     stateReducer(MATquery)
   }, [MATquery])

components/aggregation/mat/TableView.js

@@ -30,11 +30,11 @@ const prepareDataforTable = (data, query, locale) => {
       measurement_count: 0,
     }
 
-    rowData.forEach((d) => {
-      countKeys.forEach((countKey) => {
+    for (const d of rowData) {
+      for (const countKey of countKeys) {
         row[countKey] = row[countKey] + d[countKey]
-      })
-    })
+      }
+    }
 
     table.push(row)
   }

components/aggregation/mat/XAxis.js

@@ -26,7 +26,7 @@ export const XAxis = ({ data }) => {
 
   return (
     <StyledFlex>
-      <Box width={2 / 16}></Box>
+      <Box width={2 / 16} />
       <Box className="xAxis" sx={{ width: '100%', height: '62px' }}>
         <ResponsiveBar
           data={data}

components/aggregation/mat/computations.js

@@ -6,13 +6,13 @@ const categoryCodesMap = getCategoryCodesMap()
 
 export function getDatesBetween(startDate, endDate, timeGrain) {
   const dateSet = new Set()
-  var currentDate = startDate
+  let currentDate = startDate
   while (currentDate < endDate) {
     if (timeGrain === 'hour') {
       let startOfDay = dayjs(currentDate).utc().startOf('day')
       const nextDay = startOfDay.add(1, 'day')
       while (startOfDay.toDate() < nextDay.toDate()) {
-        dateSet.add(startOfDay.toISOString().split('.')[0] + 'Z')
+        dateSet.add(`${startOfDay.toISOString().split('.')[0]}Z`)
         startOfDay = startOfDay.utc().add(1, 'hours')
       }
       currentDate = dayjs(currentDate).utc().add(1, 'day')
@@ -63,7 +63,7 @@ export function fillRowHoles(data, query, locale) {
   const sampleDataPoint = { ...newData[0] }
 
   // Add empty datapoints for columns where measurements are not available
-  missingCols.forEach((col) => {
+  for (const col of missingCols) {
     // use any (first) column data to popuplate yAxis value e.g `input` | `probe_cc`
     // and then overwrite with zero-data for that missing date
     newData.splice([...domain].indexOf(col), 0, {
@@ -75,7 +75,7 @@ export function fillRowHoles(data, query, locale) {
       measurement_count: 0,
       ok_count: 0,
     })
-  })
+  }
 
   return newData
 }