Upgrade nextjs, react

ooni · Dec 21, 2023 · 6e586db · 6e586db
1 parent f1d46ef
commit 6e586db
Show file tree

Hide file tree

Showing 8 changed files with 163 additions and 172 deletions.
diff --git a/components/Chart.js b/components/Chart.js
@@ -26,21 +26,19 @@ export const MATLink = ({ query }) => {
     <Flex mt={3} justifyContent='space-between' alignItems='center'>
       <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>
         </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>

diff --git a/components/NavBar.js b/components/NavBar.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import NLink from 'next/link'
 import styled from 'styled-components'
@@ -10,7 +10,7 @@ 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'>

diff --git a/components/aggregation/mat/labels.js b/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

diff --git a/next.config.js b/next.config.js
@@ -71,18 +71,22 @@ module.exports = withSentryConfig({
     )
 
     // SVG
-    config.module.rules.push({
-      test: /\.svg$/,
-      issuer: /\.js?$/,
-      include: [options.dir],
-      use: [
-        'next-swc-loader',
-        {
-          loader: '@svgr/webpack',
-          options: { babel: false }
-        }
-      ],
-    })
+    // Grab the existing rule that handles SVG imports
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test?.test?.('.svg'),
+    )
+
+    config.module.rules.push(
+      // Convert all *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        use: ['@svgr/webpack'],
+      },
+    )
+
+    // Modify the file loader rule to ignore *.svg, since we have it handled
+    fileLoaderRule.exclude = /\.svg$/i
 
     // whyDidYouRender
     if (options.dev && !options.isServer) {

diff --git a/package.json b/package.json
@@ -30,15 +30,15 @@
     "lodash.debounce": "^4.0.8",
     "lru-cache": "^7.14.1",
     "markdown-to-jsx": "^7.3.2",
-    "next": "12.3.4",
+    "next": "^14.0.4",
     "nprogress": "^0.2.0",
     "ooni-components": "0.6.0-alpha.3",
     "pretty-ms": "^8.0.0",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
+    "react": "^18.2.0",
     "react-content-loader": "^6.2.0",
     "react-day-picker": "^8.6.0",
-    "react-dom": "17.0.2",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "react-icons": "^4.11.0",
     "react-intl": "6.4.7",
@@ -52,7 +52,7 @@
     "react-virtual": "^2.10.4",
     "react-virtualized": "^9.22.3",
     "react-window": "^1.8.7",
-    "styled-components": "^6.0.8",
+    "styled-components": "^6.1.2",
     "swr": "^2.2.2",
     "use-clipboard-copy": "^0.2.0",
     "victory": "^32.0.2",

diff --git a/pages/index.js b/pages/index.js
@@ -291,9 +291,7 @@ const LandingPage = ({ measurementCount, asnCount, countryCount}) => {
               <FormattedMessage 
                 id="Home.Highlights.CTA"
                 values={{'link-to-search': (string) => (
-                  <NLink href='/search' passHref>
-                    <Link color='blue7'>{string}</Link>
-                  </NLink>
+                  <NLink href='/search'>{string}</NLink>
                   )
                 }}
               />

diff --git a/pages/login.js b/pages/login.js
@@ -83,7 +83,7 @@ const Login = () => {
           {error &&
             <Box width={[1, 1 / 3]} mx='auto' textAlign={'center'}>
               <Box mb={3} p={4} bg='red1'>{error}</Box>
-              <NLink href='/login' passHref><a><FormattedMessage id="Login.Failure" /></a></NLink>
+              <NLink href='/login'><FormattedMessage id="Login.Failure" /></NLink>
             </Box>
           }
         </Flex>