Upgrade dependencies and fix errors/warnings (#899)

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>

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'
@@ -23,26 +23,24 @@ export const MATLink = ({ query }) => {
   const showMATButton = !Array.isArray(query.test_name)
 
   return (
-    <Flex mt={3} justifyContent='space-between' alignItems='center'>
+    <Flex mt={3} justifyContent='space-between' alignItems='center' flexWrap="wrap" sx={{gap: 3}}>
       <Box>
         {showMATButton &&
-          <NLink href={`/chart/mat?${queryToSearchParams}`}passHref>
-            <a>
-              <StyledHollowButton>
-                {intl.formatMessage({id: 'MAT.Charts.SeeOnMAT'})} <MdBarChart size={20} style={{verticalAlign: 'bottom'}} />
-              </StyledHollowButton>
-            </a>
+          <NLink href={`/chart/mat?${queryToSearchParams}`}>
+            <StyledHollowButton>
+              {intl.formatMessage({id: 'MAT.Charts.SeeOnMAT'})} <MdBarChart size={20} style={{verticalAlign: 'bottom'}} />
+            </StyledHollowButton>
           </NLink>
         }
       </Box>
-      <Box>
-        <NLink passHref href={apiUrl}>
-          <Link mr={3}>{intl.formatMessage({id: 'MAT.Charts.DownloadJSONData'})} <MdOutlineFileDownload style={{verticalAlign: 'bottom'}} size={20} /></Link>
+      <Flex sx={{gap: 3}} flexWrap="wrap">
+        <NLink href={apiUrl}>
+          {intl.formatMessage({id: 'MAT.Charts.DownloadJSONData'})} <MdOutlineFileDownload style={{verticalAlign: 'bottom'}} size={20} />
         </NLink>
-        <NLink passHref href={`${apiUrl}&format=CSV`}>
-          <Link>{intl.formatMessage({id: 'MAT.Charts.DownloadCSVData'})} <MdOutlineFileDownload style={{verticalAlign: 'bottom'}} size={20} /></Link>
+        <NLink href={`${apiUrl}&format=CSV`}>
+          {intl.formatMessage({id: 'MAT.Charts.DownloadCSVData'})} <MdOutlineFileDownload style={{verticalAlign: 'bottom'}} size={20} />
         </NLink>
-      </Box>
+      </Flex>
     </Flex>
   )
 }

components/Footer.js

@@ -1,10 +1,9 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styled from 'styled-components'
-import { Flex, Box, Container, Link } from 'ooni-components'
+import { Box, Container, Flex, Link } from 'ooni-components'
 import ExplorerLogo from 'ooni-components/svgs/logos/OONI-HorizontalMonochromeInverted.svg'
+import PropTypes from 'prop-types'
+import React from 'react'
 import { useIntl } from 'react-intl'
-import dayjs from 'dayjs'
+import styled from 'styled-components'
 
 const StyledFooter = styled.footer`
   background-color: ${(props) => props.theme.colors.blue9};

components/Layout.js

@@ -1,14 +1,14 @@
-import React, { useEffect } from 'react'
-import PropTypes from 'prop-types'
 import { MatomoProvider, createInstance } from '@datapunt/matomo-tracker-react'
-import { createGlobalStyle, ThemeProvider } from 'styled-components'
 import { theme } from 'ooni-components'
+import PropTypes from 'prop-types'
+import React, { useEffect } from 'react'
+import { ThemeProvider, createGlobalStyle } from 'styled-components'
 
-import Header from './Header'
-import Footer from './Footer'
-import { useIntl } from 'react-intl'
 import { getDirection } from 'components/withIntl'
 import { UserProvider } from 'hooks/useUser'
+import { useIntl } from 'react-intl'
+import Footer from './Footer'
+import Header from './Header'
 
 theme.maxWidth = 1024
 
@@ -21,7 +21,6 @@ const GlobalStyle = createGlobalStyle`
     // direction: ${props => props.direction};
     margin: 0;
     padding: 0;
-    font-family: "Fira Sans";
     font-size: 14px;
     height: 100%;
     background-color: #ffffff;

components/NavBar.js

@@ -1,16 +1,16 @@
-import React, { useState } from 'react'
-import { useRouter } from 'next/router'
+import useUser from 'hooks/useUser'
 import NLink from 'next/link'
-import styled from 'styled-components'
+import { useRouter } from 'next/router'
+import { Box, Container, Flex } from 'ooni-components'
+import ExplorerLogo from 'ooni-components/svgs/logos/Explorer-HorizontalMonochromeInverted.svg'
+import React, { useEffect, useState } from 'react'
+import { MdClose, MdMenu } from 'react-icons/md'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { MdMenu, MdClose } from 'react-icons/md'
+import styled from 'styled-components'
 import { getLocalisedLanguageName } from 'utils/i18nCountries'
-import ExplorerLogo from 'ooni-components/svgs/logos/Explorer-HorizontalMonochromeInverted.svg'
-import { Link, Flex, Box, Container } from 'ooni-components'
-import useUser from 'hooks/useUser'
 import { getDirection } from './withIntl'
 
-const StyledNavItem = styled.a`
+const StyledNavItem = styled(NLink)`
   position: relative;
   color: ${(props) => props.theme.colors.white};
   cursor: pointer;
@@ -50,12 +50,14 @@ const LanguageSelect = styled.select`
 
 const NavItem = ({ label, href }) => {
   const { pathname } = useRouter()
-  const active = pathname === href
+  const [isActive, setIsActive] = useState(false)
+
+  useEffect(() => {
+    setIsActive(pathname === href)
+  }, [pathname, href])
 
   return (
-    <NLink href={href} passHref>
-      <StyledNavItem $active={active}>{label}</StyledNavItem>
-    </NLink>
+    <StyledNavItem href={href} $active={isActive}>{label}</StyledNavItem>
   )
 }
 
@@ -143,10 +145,8 @@ export const NavBar = ({ color }) => {
       <Container>
         <Flex flexDirection='row' justifyContent='space-between' alignItems='end'>
           <Box style={{ zIndex: 1 }}>
-            <NLink href='/' passHref>
-              <Link>
-                <ExplorerLogo height='26px' />
-              </Link>
+            <NLink href='/'>
+              <ExplorerLogo height='26px' />
             </NLink>
           </Box>
           <StyledResponsiveMenu color='white'>
@@ -166,7 +166,7 @@ export const NavBar = ({ color }) => {
                 <NavItem label={<FormattedMessage id="Navbar.Domains" />} href="/domains" />
                 <NavItem label={<FormattedMessage id="Navbar.Findings" />} href="/findings" />
                 {user?.logged_in && (
-                  <StyledNavItem onClick={logoutUser}><FormattedMessage id="General.Logout" /></StyledNavItem>
+                  <StyledNavItem href="" onClick={logoutUser}><FormattedMessage id="General.Logout" /></StyledNavItem>
                 )}
                 <LanguageSelect onChange={handleLocaleChange} value={locale}>
                   {languages.map((c) => (

components/VictoryTheme.js

@@ -1,4 +1,5 @@
 import { theme } from 'ooni-components'
+import { firaSans } from '../pages/_app'
 
 const colors = theme.colors
 // Color scale
@@ -15,7 +16,7 @@ const colorScale = [
 const primaryColor = colors.base
 
 // Typography
-export const sansSerif = '"Fira Sans", sans-serif'
+export const sansSerif = `${firaSans.style.fontFamily}, sans-serif`
 const letterSpacing = 'normal'
 const fontSize = 8
 

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>
   )
 }

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>
   )

components/aggregation/mat/labels.js

@@ -1,11 +1,9 @@
 import PropTypes from 'prop-types'
 import { Box } from 'ooni-components'
-import NLink from 'next/link'
 
 import { testNames } from '../../test-info'
 import { getCategoryCodesMap } from '../../utils/categoryCodes'
 import { getLocalisedRegionName } from 'utils/i18nCountries'
-import { FormattedMessage, useIntl } from 'react-intl'
 
 const InputRowLabel = ({ input }) => {
   const truncatedInput = input

components/country/Tooltip.js

@@ -1,11 +1,12 @@
 import React from 'react'
 
 import {
-  VictoryTooltip,
-  VictoryLabel
+  VictoryLabel,
+  VictoryTooltip
 } from 'victory'
 
 import { theme } from 'ooni-components'
+import { firaSans } from '../../pages/_app'
 
 const Tooltip = (props) => (
   <VictoryTooltip
@@ -14,7 +15,7 @@ const Tooltip = (props) => (
       <VictoryLabel
         style={{
           fill: theme.colors.white,
-          fontFamily: '"Fira Sans", sans-serif',
+          fontFamily: `${firaSans.style.fontFamily}, sans-serif`,
           fontSize: props.fontSize || 8
         }}
       />

components/landing/HighlightsSection.js

@@ -1,10 +1,10 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Flex, Box, Text, Button } from 'ooni-components'
 import NLink from 'next/link'
-import HighlightBox from './HighlightBox'
-import { styled } from 'styled-components'
+import { Box, Button, Flex, Text } from 'ooni-components'
+import PropTypes from 'prop-types'
+import React from 'react'
 import { useIntl } from 'react-intl'
+import { styled } from 'styled-components'
+import HighlightBox from './HighlightBox'
 
 const StyledGrid = styled(Box)`
 display: grid;
@@ -54,9 +54,9 @@ const HighlightSection = ({
                   }
                   {item.report && 
                     <Box>
-                      <a href={item.report}>
+                      <NLink href={item.report}>
                         <Button type='button' hollow size='small'>{intl.formatMessage({id: 'Home.Highlights.ReadReport'})}</Button>
-                      </a>
+                      </NLink>
                     </Box>
                   }
                 </Flex>

components/login/LoginForm.js

@@ -1,13 +1,12 @@
-import React, { useState, useCallback, useEffect } from 'react'
-import { useForm, Controller } from 'react-hook-form'
-import { Flex, Box, Input, Button, Modal, Text, Heading, Container } from 'ooni-components'
+import { Box, Button, Flex, Input } from 'ooni-components'
+import React, { useCallback, useEffect, useState } from 'react'
+import { Controller, useForm } from 'react-hook-form'
 import styled from 'styled-components'
-import NLink from 'next/link'
 
-import { registerUser } from '/lib/api'
+import SpinLoader from 'components/vendor/SpinLoader'
 import { useRouter } from 'next/router'
 import { FormattedMessage } from 'react-intl'
-import SpinLoader from 'components/vendor/SpinLoader'
+import { registerUser } from '/lib/api'
 
 const StyledError = styled.small`
   color: ${props => props.theme.colors.red5};