From d2a003a2ee06edb4f10e9ef6ee63f4b17761960a Mon Sep 17 00:00:00 2001
From: majakomel <maja.komel@gmail.com>
Date: Sat, 6 Jan 2024 23:20:38 +0100
Subject: [PATCH] Fix link related warnings

---
 components/CallToActionBox.js                 | 12 ++-
 components/Chart.js                           | 10 ++-
 components/VirtualizedGrid.js                 | 74 +++++++++----------
 components/aggregation/mat/CustomTooltip.js   | 16 ++--
 components/measurement/CommonSummary.js       | 27 +++----
 .../measurement/nettests/WebConnectivity.js   | 31 ++++----
 components/search/Loader.js                   | 31 ++++----
 components/search/ResultsList.js              | 30 ++++----
 pages/404.js                                  | 12 +--
 pages/as/[probe_asn].js                       | 20 +++--
 pages/domain/[domain].js                      |  4 +-
 pages/search.js                               | 29 ++++----
 12 files changed, 145 insertions(+), 151 deletions(-)

diff --git a/components/CallToActionBox.js b/components/CallToActionBox.js
index 6e6c8e788..b51f5ec13 100644
--- a/components/CallToActionBox.js
+++ b/components/CallToActionBox.js
@@ -1,6 +1,6 @@
-import { Flex, Heading, Box, Text, Button } from 'ooni-components'
-import { FormattedMessage } from 'react-intl'
 import NLink from 'next/link'
+import { Box, Button, Flex, Heading, Text } from 'ooni-components'
+import { FormattedMessage } from 'react-intl'
 
 const CallToActionBox = ({title, text}) => {
   return (
@@ -16,11 +16,9 @@ const CallToActionBox = ({title, text}) => {
       <Flex alignItems='center' mx={4} my={4} flexDirection={['column', 'row']}>
         <Box mr={4} mb={[3, 0]}>
           <NLink href='https://ooni.org/install'>
-            <a>
-              <Button>
-                <FormattedMessage id='Country.Overview.NoData.Button.InstallProbe' />
-              </Button>
-            </a>
+            <Button>
+              <FormattedMessage id='Country.Overview.NoData.Button.InstallProbe' />
+            </Button>
           </NLink>
         </Box>
       </Flex>
diff --git a/components/Chart.js b/components/Chart.js
index 9d799870f..1e3bd7ea3 100644
--- a/components/Chart.js
+++ b/components/Chart.js
@@ -2,7 +2,7 @@ import GridChart, { prepareDataForGridChart } from 'components/aggregation/mat/G
 import { MATContextProvider } from 'components/aggregation/mat/MATContext'
 import { DetailsBox } from 'components/measurement/DetailsBox'
 import NLink from 'next/link'
-import { Box, Flex, Heading, Link } from 'ooni-components'
+import { Box, Flex } from 'ooni-components'
 import React, { useEffect, useMemo } from 'react'
 import { MdBarChart, MdOutlineFileDownload } from 'react-icons/md'
 import { FormattedMessage, useIntl } from 'react-intl'
@@ -34,9 +34,11 @@ export const MATLink = ({ query }) => {
         }
       </Box>
       <Box>
-        <NLink passHref href={apiUrl}>
-          <Link mr={3}>{intl.formatMessage({id: 'MAT.Charts.DownloadJSONData'})} <MdOutlineFileDownload style={{verticalAlign: 'bottom'}} size={20} /></Link>
-        </NLink>
+        <Box mr={3}>
+          <NLink href={apiUrl}>
+            {intl.formatMessage({id: 'MAT.Charts.DownloadJSONData'})} <MdOutlineFileDownload style={{verticalAlign: 'bottom'}} size={20} />
+          </NLink>
+        </Box>
         <NLink href={`${apiUrl}&format=CSV`}>
           {intl.formatMessage({id: 'MAT.Charts.DownloadCSVData'})} <MdOutlineFileDownload style={{verticalAlign: 'bottom'}} size={20} />
         </NLink>
diff --git a/components/VirtualizedGrid.js b/components/VirtualizedGrid.js
index daffdd1f7..49118c6da 100644
--- a/components/VirtualizedGrid.js
+++ b/components/VirtualizedGrid.js
@@ -1,13 +1,11 @@
-import React from 'react'
-import debounce from 'lodash.debounce'
-import styled from 'styled-components'
 import NLink from 'next/link'
-import { Container, Text, Box, Flex, Link, Heading } from 'ooni-components'
-import Head from 'next/head'
+import { Box, Flex, Text } from 'ooni-components'
+import React from 'react'
 import { FormattedMessage } from 'react-intl'
-import { List, WindowScroller, AutoSizer, Table, Column } from 'react-virtualized'
+import { AutoSizer, List, WindowScroller } from 'react-virtualized'
+import styled from 'styled-components'
 
-const StyledLink = styled(Link)`
+const StyledLink = styled(NLink)`
 &:hover {
   filter: none;
 }
@@ -34,38 +32,36 @@ export const GridBox = ({ title, count = null, href, tag, multiCount = null }) =
   const hasCount = Number.isInteger(count)
   return (
     <Box>
-      <NLink passHref href={href}>
-        <StyledLink>
-          <StyledFlex p={3} justifyContent='space-between' minHeight={150}>
-            <Box>
-              <StyledName fontSize={1} fontWeight={600} >{title}</StyledName>
-            </Box>
-            {(hasCount || tag) && 
-              <Text fontSize={12}>
-                {tag && 
-                  <Box mb={2}>{tag}</Box>
-                }
-                {hasCount && 
-                  <FormattedMessage
-                    id='Network.Summary.Country.Measurements'
-                    values={{measurementsTotal: <Text as='span' fontWeight={600} color='blue5'>{count}</Text>}} 
-                  />
-                }
-              </Text>
-            }
-            {multiCount && 
-              <Text fontSize={12}>
-                {Object.entries(multiCount).map(([key, value]) => (
-                  <Box mb={1} key={key}>
-                    <Text as='span' fontWeight={600} color='blue5'>{value} </Text>
-                    <FormattedMessage id={`Domain.CountriesBlocking.CountryList.${key}`} />
-                  </Box>
-                ))}
-              </Text>
-            }
-          </StyledFlex>
-        </StyledLink>
-      </NLink>
+      <StyledLink href={href}>
+        <StyledFlex p={3} justifyContent='space-between' minHeight={150}>
+          <Box>
+            <StyledName fontSize={1} fontWeight={600} >{title}</StyledName>
+          </Box>
+          {(hasCount || tag) && 
+            <Text fontSize={12}>
+              {tag && 
+                <Box mb={2}>{tag}</Box>
+              }
+              {hasCount && 
+                <FormattedMessage
+                  id='Network.Summary.Country.Measurements'
+                  values={{measurementsTotal: <Text as='span' fontWeight={600} color='blue5'>{count}</Text>}} 
+                />
+              }
+            </Text>
+          }
+          {multiCount && 
+            <Text fontSize={12}>
+              {Object.entries(multiCount).map(([key, value]) => (
+                <Box mb={1} key={key}>
+                  <Text as='span' fontWeight={600} color='blue5'>{value} </Text>
+                  <FormattedMessage id={`Domain.CountriesBlocking.CountryList.${key}`} />
+                </Box>
+              ))}
+            </Text>
+          }
+        </StyledFlex>
+      </StyledLink>
     </Box>
   )
 }
diff --git a/components/aggregation/mat/CustomTooltip.js b/components/aggregation/mat/CustomTooltip.js
index c38a78fbb..591ff38a9 100644
--- a/components/aggregation/mat/CustomTooltip.js
+++ b/components/aggregation/mat/CustomTooltip.js
@@ -1,13 +1,13 @@
-import React, { useMemo } from 'react'
-import { Chip } from '@nivo/tooltip'
 import { useTheme } from '@nivo/core'
-import { Box, Flex, Text, Link, theme } from 'ooni-components'
+import { Chip } from '@nivo/tooltip'
 import NLink from 'next/link'
+import { Box, Flex, Text, theme } from 'ooni-components'
+import React, { useMemo } from 'react'
 
-import { colorMap } from './colorMap'
 import { MdClear } from 'react-icons/md'
 import { useIntl } from 'react-intl'
 import { useMATContext } from './MATContext'
+import { colorMap } from './colorMap'
 
 export const themeForInvisibleTooltip = {
   tooltip: {
@@ -126,9 +126,11 @@ const CustomToolTip = React.memo(({ data, onClose, title, link = true }) => {
         ))}
       </Flex>
       {link &&
-        <NLink passHref href={linkToMeasurements}>
-          <Link target='_blank' my={2} ml='auto' pr={3}>{intl.formatMessage({id: 'MAT.CustomTooltip.ViewMeasurements'})} &gt;</Link>
-        </NLink>
+        <Box my={2} ml='auto' pr={3}>
+          <NLink target='_blank' href={linkToMeasurements}>
+            {intl.formatMessage({id: 'MAT.CustomTooltip.ViewMeasurements'})} &gt;
+          </NLink>
+        </Box>
       }
     </Flex>
   )
diff --git a/components/measurement/CommonSummary.js b/components/measurement/CommonSummary.js
index 27a5c290c..ef873d972 100644
--- a/components/measurement/CommonSummary.js
+++ b/components/measurement/CommonSummary.js
@@ -1,18 +1,15 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import NLink from 'next/link'
 import {
-  Flex,
-  Container,
   Box,
-  Text,
-  Link,
+  Container,
+  Flex,
+  Text
 } from 'ooni-components'
-import { useIntl } from 'react-intl'
-import dayjs from 'services/dayjs'
+import PropTypes from 'prop-types'
+import React from 'react'
 import { MdOutlineFactCheck } from 'react-icons/md'
-import { BiShareAlt } from 'react-icons/bi'
+import { useIntl } from 'react-intl'
+import styled from 'styled-components'
 
 import Flag from '../Flag'
 
@@ -65,7 +62,7 @@ const CommonSummary = ({
           {hero}
           <Flex mt={2} sx={{textDecoration:'underline'}}>
             <Box width={[1, 1, 1/2]}>
-              <NLink href={`/country/${countryCode}`} passHref><Link color='white'>
+              <NLink href={`/country/${countryCode}`}>
                 <Flex alignItems='center'>
                   <Box mr={2}>
                     <Flag countryCode={countryCode} size={33} />
@@ -74,12 +71,10 @@ const CommonSummary = ({
                     {country}
                   </Box>
                 </Flex>
-              </Link></NLink>
+              </NLink>
               <Text fontSize={1}>
-                <NLink href={`/as/${network}`} passHref>
-                  <Link color='white'>
-                    <Text mb={2} mt={2}>{network} {networkName}</Text>
-                  </Link>
+                <NLink href={`/as/${network}`}>
+                  <Text mb={2} mt={2}>{network} {networkName}</Text>
                 </NLink>
               </Text>
             </Box>
diff --git a/components/measurement/nettests/WebConnectivity.js b/components/measurement/nettests/WebConnectivity.js
index 80f874f7f..16eef8d65 100644
--- a/components/measurement/nettests/WebConnectivity.js
+++ b/components/measurement/nettests/WebConnectivity.js
@@ -1,18 +1,17 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import bufferFrom from 'buffer-from'
-import url from 'url'
 import NLink from 'next/link'
 import {
-  Heading,
-  Flex,
   Box,
-  Text,
-  Link,
+  Flex,
+  Heading,
+  Text
 } from 'ooni-components'
+import PropTypes from 'prop-types'
+import React from 'react'
+import url from 'url'
 
-import { Tick, Cross } from 'ooni-components/icons'
 import deepmerge from 'deepmerge'
+import { Cross, Tick } from 'ooni-components/icons'
 import styled from 'styled-components'
 
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl'
@@ -350,7 +349,7 @@ const WebConnectivityDetails = ({
       id='Measurement.SummaryText.Websites.Failed'
       values={{
         date,
-        WebsiteURL: <NLink href={getSearchHref(input)}><a dir='ltr'>{input}</a></NLink>,
+        WebsiteURL: <Box dir='ltr'><NLink href={getSearchHref(input)}>{input}</NLink></Box>,
         network: probe_asn,
         country
       }}
@@ -361,7 +360,7 @@ const WebConnectivityDetails = ({
       id='Measurement.SummaryText.Websites.ConfirmedBlocked'
       values={{
         date,
-        WebsiteURL: <NLink href={getSearchHref(input)}><a dir='ltr'>{input}</a></NLink>,
+        WebsiteURL: <Box dir='ltr'><NLink href={getSearchHref(input)}>{input}</NLink></Box>,
         network: probe_asn,
         country
       }}
@@ -385,7 +384,7 @@ const WebConnectivityDetails = ({
       id='Measurement.SummaryText.Websites.Anomaly'
       values={{
         date,
-        WebsiteURL: <NLink href={getSearchHref(input)}><a dir='ltr'>{input}</a></NLink>,
+        WebsiteURL: <Box dir='ltr'><NLink href={getSearchHref(input)}>{input}</NLink></Box>,
         'link-to-docs': (string) => (<a href="https://ooni.org/support/faq/#why-do-false-positives-occur">{string}</a>),
         network: probe_asn,
         country,
@@ -410,7 +409,7 @@ const WebConnectivityDetails = ({
       id='Measurement.SummaryText.Websites.Accessible'
       values={{
         date,
-        WebsiteURL: <NLink href={getSearchHref(input)}><a dir='ltr'>{input}</a></NLink>,
+        WebsiteURL: <Box dir='ltr'><NLink href={getSearchHref(input)}>{input}</NLink></Box>,
         network: probe_asn,
         country
       }}
@@ -433,7 +432,7 @@ const WebConnectivityDetails = ({
       id='Measurement.SummaryText.Websites.Down'
       values={{
         date,
-        WebsiteURL: <NLink href={getSearchHref(input)}><a dir='ltr'>{input}</a></NLink>,
+        WebsiteURL: <Box dir='ltr'><NLink href={getSearchHref(input)}>{input}</NLink></Box>,
         network: probe_asn,
         country
       }}
@@ -457,7 +456,7 @@ const WebConnectivityDetails = ({
       id='Measurement.SummaryText.Websites.Failed'
       values={{
         date,
-        WebsiteURL: <NLink href={getSearchHref(input)}><a dir='ltr'>{input}</a></NLink>,
+        WebsiteURL: <Box dir='ltr'><NLink href={getSearchHref(input)}>{input}</NLink></Box>,
         network: probe_asn,
         country
       }}
@@ -490,8 +489,8 @@ const WebConnectivityDetails = ({
         status: status,
         statusInfo: <StatusInfo 
           title={
-            <NLink passHref href={`/domain/${hostname}`}>
-              <Link sx={{textDecoration: 'underline'}} color='white'>{input}</Link>
+            <NLink href={`/domain/${hostname}`}>
+              {input}
             </NLink>
           }
           message={reason} 
diff --git a/components/search/Loader.js b/components/search/Loader.js
index 4ae57e862..d18e5f120 100644
--- a/components/search/Loader.js
+++ b/components/search/Loader.js
@@ -1,25 +1,24 @@
-import React from 'react'
+import { theme } from 'ooni-components'
 import PropTypes from 'prop-types'
 import ContentLoader from 'react-content-loader'
-import { theme } from 'ooni-components'
 
 export const LoaderRow = (props) => {
   const isWide = (Math.random() * 100) > 70
   const random = Math.random() * (1 - 0.7) + 0.7
   return (
-  <ContentLoader
-    height={40}
-    width={450}
-    speed={1}
-    primarycolor={theme.colors.gray3}
-    secondarycolor={theme.colors.gray5}
-    {...props}
-  >
-    <rect x="0" y="15" rx="5" ry="5" width="30" height="10" />
-    <circle x="30" cx="45" cy="20" r="8" />
-    {<rect x="60" y="15" rx="5" ry="5" width={200*random} height="10" />}
-    {isWide && <rect x="280" y="15" rx="5" ry="5" width="120" height="10" />}
-  </ContentLoader>
+    <ContentLoader
+      height={40}
+      width={450}
+      speed={1}
+      primarycolor={theme.colors.gray3}
+      secondarycolor={theme.colors.gray5}
+      {...props}
+    >
+      <rect x="0" y="15" rx="5" ry="5" width="30" height="10" />
+      <circle x="30" cx="45" cy="20" r="8" />
+      <rect x="60" y="15" rx="5" ry="5" width={200*random} height="10" />
+      {isWide && <rect x="280" y="15" rx="5" ry="5" width="120" height="10" />}
+    </ContentLoader>
   )
 }
 
@@ -38,3 +37,5 @@ export const Loader = ({ rows = 10 }) => (
 Loader.propTypes = {
   rows: PropTypes.number
 }
+
+export default Loader
diff --git a/components/search/ResultsList.js b/components/search/ResultsList.js
index 1a1ca99be..b59866a65 100644
--- a/components/search/ResultsList.js
+++ b/components/search/ResultsList.js
@@ -1,24 +1,24 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import url from 'url'
-import dayjs from 'services/dayjs'
 import NLink from 'next/link'
-import styled from 'styled-components'
-import { useIntl, defineMessages } from 'react-intl'
 import {
-  Flex, Box,
-  Link,
+  Box,
+  Flex,
   Text
 } from 'ooni-components'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { defineMessages, useIntl } from 'react-intl'
+import dayjs from 'services/dayjs'
+import styled from 'styled-components'
+import url from 'url'
 
-import { testNames } from '/components/test-info'
+import Flag from '../Flag'
 import {
-  colorNormal,
-  colorError,
+  colorAnomaly,
   colorConfirmed,
-  colorAnomaly
+  colorError,
+  colorNormal
 } from '../colors'
-import Flag from '../Flag'
+import { testNames } from '/components/test-info'
 
 const StyledResultTag = styled.div`
   border-radius: 16px;
@@ -221,7 +221,7 @@ ASNBox.propTypes = {
 }
 
 // XXX add this to the design system
-const StyledViewDetailsLink = styled(Link)`
+const StyledViewDetailsLink = styled.span`
   cursor: pointer;
   text-decoration: none;
   color: ${props => props.theme.colors.blue5};
@@ -235,7 +235,7 @@ const ViewDetailsLink = ({measurementUid, children}) => {
 
   return (
     <NLink href={href}>
-      <StyledViewDetailsLink href={href}>{children}</StyledViewDetailsLink>
+      <StyledViewDetailsLink>{children}</StyledViewDetailsLink>
     </NLink>
   )
 }
diff --git a/pages/404.js b/pages/404.js
index 3b27f36db..0b45a8756 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,14 +1,14 @@
-import React from 'react'
 import Head from 'next/head'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import {
-  Container,
   Box,
+  Container,
   Flex,
-  Text,
-  Heading
+  Heading,
+  Text
 } from 'ooni-components'
+import React from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 
 import NavBar from '../components/NavBar'
@@ -35,10 +35,10 @@ const Custom404 = () => {
                 defaultMessage='We could not find the content you were looking for. Maybe try {measurmentLink} or look at {homePageLink}.'
                 values={{
                   measurmentLink: <FormattedMessage id='Error.404.MeasurmentLinkText'>
-                    {message => <Link href='/countries'><a>{message}</a></Link>}
+                    {message => <Link href='/countries'>{message}</Link>}
                   </FormattedMessage>,
                   homePageLink: <FormattedMessage id='Error.404.HomepageLinkText'>
-                    {message => <Link href='/'><a>{message}</a></Link>}
+                    {message => <Link href='/'>{message}</Link>}
                   </FormattedMessage>
                 }}
               />
diff --git a/pages/as/[probe_asn].js b/pages/as/[probe_asn].js
index 95ed398f7..25ea85794 100644
--- a/pages/as/[probe_asn].js
+++ b/pages/as/[probe_asn].js
@@ -1,14 +1,14 @@
 import axios from 'axios'
-import Calendar from 'components/as/Calendar'
-import Loader from 'components/as/Loader'
 import CallToActionBox from 'components/CallToActionBox'
 import Chart from 'components/Chart'
 import CountryList from 'components/CountryBox'
-import Form from 'components/domain/Form'
 import NavBar from 'components/NavBar'
-import ResultsList from 'components/search/ResultsList'
 import { StyledHollowButton, StyledSticky } from 'components/SharedStyledComponents'
 import ThirdPartyDataChart from 'components/ThirdPartyDataChart'
+import Calendar from 'components/as/Calendar'
+import Loader from 'components/as/Loader'
+import Form from 'components/domain/Form'
+import ResultsList from 'components/search/ResultsList'
 import Head from 'next/head'
 import NLink from 'next/link'
 import { useRouter } from 'next/router'
@@ -120,13 +120,11 @@ export const RecentMeasurements = ({ recentMeasurements, query }) => {
         {intl.formatMessage({ id: 'Domain.RecentMeasurements.Title' })}
       </Heading>
       <ResultsList results={recentMeasurements} />
-      <NLink href={`/search?${new URLSearchParams(query)}`} passHref>
-        <a>
-          <StyledHollowButton hollow mt={3} mb={5}>
-            {intl.formatMessage({ id: 'Domain.Button.SearchResults' })}{' '}
-            <MdOutlineSearch size={20} style={{ verticalAlign: 'bottom' }} />
-          </StyledHollowButton>
-        </a>
+      <NLink href={`/search?${new URLSearchParams(query)}`}>
+        <StyledHollowButton hollow mt={3} mb={5}>
+          {intl.formatMessage({ id: 'Domain.Button.SearchResults' })}{' '}
+          <MdOutlineSearch size={20} style={{ verticalAlign: 'bottom' }} />
+        </StyledHollowButton>
       </NLink>
     </>
   )
diff --git a/pages/domain/[domain].js b/pages/domain/[domain].js
index 10e3e3313..f04fc1749 100644
--- a/pages/domain/[domain].js
+++ b/pages/domain/[domain].js
@@ -6,11 +6,11 @@ import { useMemo, useState } from 'react'
 import { useIntl } from 'react-intl'
 
 import TestGroupBadge, { CategoryBadge } from 'components/Badge'
-import Form from 'components/domain/Form'
 import Chart from 'components/DomainChart'
 import NavBar from 'components/NavBar'
 import { StyledSticky } from 'components/SharedStyledComponents'
 import { GridBox } from 'components/VirtualizedGrid'
+import Form from 'components/domain/Form'
 import Head from 'next/head'
 import NLink from 'next/link'
 import { RecentMeasurements } from 'pages/as/[probe_asn]'
@@ -126,7 +126,7 @@ const Canonical = ({ canonicalDomain }) => {
         { id: 'Domain.Canonical' },
         {
           canonicalDomain: (
-            <NLink passHref href={`/domain/${canonicalDomain}`}>
+            <NLink href={`/domain/${canonicalDomain}`}>
               {canonicalDomain}
             </NLink>
           ),
diff --git a/pages/search.js b/pages/search.js
index 4c627dc8e..682d6ae49 100644
--- a/pages/search.js
+++ b/pages/search.js
@@ -1,26 +1,30 @@
-import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
+import axios from 'axios'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
-import axios from 'axios'
-import styled from 'styled-components'
 import {
-  Flex, Box,
-  Container,
+  Box,
   Button,
+  Container,
+  Flex,
   Heading,
   Text
 } from 'ooni-components'
+import PropTypes from 'prop-types'
+import React, { useEffect, useState } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 import dayjs from 'services/dayjs'
+import styled from 'styled-components'
 
 import NavBar from '/components/NavBar'
 
-import ResultsList from '/components/search/ResultsList'
-import FilterSidebar, { queryToFilterMap } from '/components/search/FilterSidebar'
-import { Loader } from '/components/search/Loader'
 import FormattedMarkdown from '/components/FormattedMarkdown'
+import FilterSidebar, { queryToFilterMap } from '/components/search/FilterSidebar'
+// import { Loader } from '/components/search/Loader'
+import ResultsList from '/components/search/ResultsList'
+
+const Loader = dynamic(() => import('/components/search/Loader'), { ssr: false })
 
+import dynamic from 'next/dynamic'
 import { sortByKey } from '../utils'
 
 export const getServerSideProps = async ({query}) => {
@@ -165,18 +169,17 @@ const Search = ({ countries, query: queryProp }) => {
   const [nextURL, setNextURL] = useState(null)
   const [loading, setLoading] = useState(true)
   const [results, setResults] = useState([])
-  const [filters, setFilters] = useState({})
   const [error, setError] = useState(null)
 
   useEffect(() => {
-    const query = query || queryProp
+    const q = query || queryProp
     const href = {
       pathname: '/search',
-      query: query
+      query: q
     }
     replace(href, href, { shallow: true })
 
-    getMeasurements(query)
+    getMeasurements(q)
       .then(({ data: { results, metadata: { next_url } } }) => {
         setLoading(false)
         setResults(results)