From e9b700865a44fb89b5dd4b9e0915c6d612887f05 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Fri, 9 Aug 2024 22:06:19 +0200
Subject: [PATCH] refactor: use link helper over Gatsby's Link (#55767)

---
 client/src/client-only-routes/show-update-email.tsx  |  3 +--
 client/src/components/FourOhFour/index.tsx           |  3 +--
 client/src/components/helpers/button-link.tsx        | 12 ++++--------
 client/src/components/settings/certification.tsx     |  4 ++--
 client/src/components/settings/email.tsx             |  2 +-
 .../templates/Introduction/components/challenges.tsx |  2 +-
 6 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/client/src/client-only-routes/show-update-email.tsx b/client/src/client-only-routes/show-update-email.tsx
index e79f5f300b7..c664e8defd6 100644
--- a/client/src/client-only-routes/show-update-email.tsx
+++ b/client/src/client-only-routes/show-update-email.tsx
@@ -1,4 +1,3 @@
-import { Link } from 'gatsby';
 import React, {
   useState,
   useEffect,
@@ -21,7 +20,7 @@ import {
 } from '@freecodecamp/ui';
 
 import envData from '../../config/env.json';
-import { Spacer, Loader } from '../components/helpers';
+import { Spacer, Loader, Link } from '../components/helpers';
 import './show-update-email.css';
 import { isSignedInSelector, userSelector } from '../redux/selectors';
 import { hardGoTo as navigate } from '../redux/actions';
diff --git a/client/src/components/FourOhFour/index.tsx b/client/src/components/FourOhFour/index.tsx
index 4dcfd8b676d..0e6aff212a9 100644
--- a/client/src/components/FourOhFour/index.tsx
+++ b/client/src/components/FourOhFour/index.tsx
@@ -1,12 +1,11 @@
 import { RouteComponentProps } from '@reach/router';
-import { Link } from 'gatsby';
 import React from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
 import notFoundLogo from '../../assets/images/freeCodeCamp-404.svg';
 import { randomQuote } from '../../utils/get-words';
-import { Spacer } from '../helpers';
+import { Spacer, Link } from '../helpers';
 
 import './404.css';
 
diff --git a/client/src/components/helpers/button-link.tsx b/client/src/components/helpers/button-link.tsx
index 8287bd12697..18cf3e93811 100644
--- a/client/src/components/helpers/button-link.tsx
+++ b/client/src/components/helpers/button-link.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { Link as GatsbyLink } from 'gatsby';
 import { Button } from '@freecodecamp/ui';
 
+import Link from './link';
+
 export type ButtonSize = 'small' | 'medium' | 'large';
 
 interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -67,13 +68,8 @@ export const ButtonLink = ({
   }
 
   return (
-    <GatsbyLink
-      className={gatsbyLinkCls}
-      to={href}
-      target={target}
-      onClick={onClick}
-    >
+    <Link className={gatsbyLinkCls} to={href} target={target} onClick={onClick}>
       {children}
-    </GatsbyLink>
+    </Link>
   );
 };
diff --git a/client/src/components/settings/certification.tsx b/client/src/components/settings/certification.tsx
index f2c597f9b49..9b8c32f9495 100644
--- a/client/src/components/settings/certification.tsx
+++ b/client/src/components/settings/certification.tsx
@@ -1,4 +1,4 @@
-import { Link, navigate } from 'gatsby';
+import { navigate } from 'gatsby';
 import { find } from 'lodash-es';
 import React, { MouseEvent, useState } from 'react';
 import { withTranslation } from 'react-i18next';
@@ -21,7 +21,7 @@ import {
 } from '../../../config/cert-and-project-map';
 import { FlashMessages } from '../Flash/redux/flash-messages';
 import ProjectModal from '../SolutionViewer/project-modal';
-import { FullWidthRow, Spacer } from '../helpers';
+import { FullWidthRow, Spacer, Link } from '../helpers';
 import { SolutionDisplayWidget } from '../solution-display-widget';
 import {
   Certification,
diff --git a/client/src/components/settings/email.tsx b/client/src/components/settings/email.tsx
index efc59d2efaa..1c6c102602f 100644
--- a/client/src/components/settings/email.tsx
+++ b/client/src/components/settings/email.tsx
@@ -7,7 +7,6 @@ import {
   ControlLabel,
   Button
 } from '@freecodecamp/ui';
-import { Link } from 'gatsby';
 import React, { useState } from 'react';
 import type { TFunction } from 'i18next';
 import { Trans, withTranslation } from 'react-i18next';
@@ -22,6 +21,7 @@ import { maybeEmailRE } from '../../utils';
 import BlockSaveButton from '../helpers/form/block-save-button';
 import FullWidthRow from '../helpers/full-width-row';
 import Spacer from '../helpers/spacer';
+import Link from '../helpers/link';
 import SectionHeader from './section-header';
 import ToggleButtonSetting from './toggle-button-setting';
 
diff --git a/client/src/templates/Introduction/components/challenges.tsx b/client/src/templates/Introduction/components/challenges.tsx
index 59e6ad339b9..97adebbe8f7 100644
--- a/client/src/templates/Introduction/components/challenges.tsx
+++ b/client/src/templates/Introduction/components/challenges.tsx
@@ -1,4 +1,3 @@
-import { Link } from 'gatsby';
 import React from 'react';
 import { withTranslation, useTranslation } from 'react-i18next';
 
@@ -7,6 +6,7 @@ import GreenPass from '../../../assets/icons/green-pass';
 import { ChallengeWithCompletedNode } from '../../../redux/prop-types';
 import { SuperBlocks } from '../../../../../shared/config/curriculum';
 import { challengeTypes } from '../../../../../shared/config/challenge-types';
+import { Link } from '../../../components/helpers';
 import { ButtonLink } from '../../../components/helpers/button-link';
 
 const getStepNumber = (dashedName: string) => {