Fix link related warnings

ooni · Jan 6, 2024 · d2a003a · d2a003a
1 parent 95cead3
commit d2a003a
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 151 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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