From 7f7f020d91b7ccbe1dea7ff012ae5fd5093d050b Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <git@tilmanvatteroth.de>
Date: Sun, 6 Nov 2022 16:15:57 +0100
Subject: [PATCH] fix: Remove a tag childs from NextJS link components

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 src/components/common/redirect.tsx            |  5 +---
 .../editor-page/app-bar/navbar-branding.tsx   | 14 +++++-----
 .../app-bar/read-only-mode-button.tsx         | 18 ++++++-------
 .../editor-page/app-bar/slide-mode-button.tsx | 18 ++++++-------
 .../history-card/history-card.tsx             | 26 +++++++++----------
 .../history-table/history-table-row.tsx       |  6 ++---
 .../navigation/header-bar/header-nav-link.tsx |  6 ++---
 7 files changed, 39 insertions(+), 54 deletions(-)

diff --git a/src/components/common/redirect.tsx b/src/components/common/redirect.tsx
index 78e550866..6b616179c 100644
--- a/src/components/common/redirect.tsx
+++ b/src/components/common/redirect.tsx
@@ -32,10 +32,7 @@ export const Redirect: React.FC<RedirectProps> = ({ to }) => {
 
   return (
     <span {...testId('redirect')}>
-      Redirecting to{' '}
-      <Link href={to}>
-        <a>{to}</a>
-      </Link>
+      Redirecting to <Link href={to}>{to}</Link>
     </span>
   )
 }
diff --git a/src/components/editor-page/app-bar/navbar-branding.tsx b/src/components/editor-page/app-bar/navbar-branding.tsx
index efc10c618..c4404bcf5 100644
--- a/src/components/editor-page/app-bar/navbar-branding.tsx
+++ b/src/components/editor-page/app-bar/navbar-branding.tsx
@@ -23,14 +23,12 @@ export const NavbarBranding: React.FC = () => {
 
   return (
     <Navbar.Brand>
-      <Link href='/intro'>
-        <a className='text-secondary text-decoration-none d-flex align-items-center'>
-          <HedgeDocLogoWithText
-            logoType={darkModeActivated ? HedgeDocLogoType.WB_HORIZONTAL : HedgeDocLogoType.BW_HORIZONTAL}
-            size={HedgeDocLogoSize.SMALL}
-          />
-          <Branding inline={true} />
-        </a>
+      <Link href='/intro' className='text-secondary text-decoration-none d-flex align-items-center'>
+        <HedgeDocLogoWithText
+          logoType={darkModeActivated ? HedgeDocLogoType.WB_HORIZONTAL : HedgeDocLogoType.BW_HORIZONTAL}
+          size={HedgeDocLogoSize.SMALL}
+        />
+        <Branding inline={true} />
       </Link>
     </Navbar.Brand>
   )
diff --git a/src/components/editor-page/app-bar/read-only-mode-button.tsx b/src/components/editor-page/app-bar/read-only-mode-button.tsx
index 9eb5850a0..31eeabfe9 100644
--- a/src/components/editor-page/app-bar/read-only-mode-button.tsx
+++ b/src/components/editor-page/app-bar/read-only-mode-button.tsx
@@ -19,16 +19,14 @@ export const ReadOnlyModeButton: React.FC = () => {
   const noteIdentifier = useApplicationState((state) => state.noteDetails.primaryAddress)
 
   return (
-    <Link href={`/s/${noteIdentifier}`}>
-      <a target='_blank'>
-        <Button
-          title={t('editor.documentBar.readOnlyMode')}
-          className='ms-2 text-secondary'
-          size='sm'
-          variant='outline-light'>
-          <ForkAwesomeIcon icon='file-text-o' />
-        </Button>
-      </a>
+    <Link href={`/s/${noteIdentifier}`} target='_blank'>
+      <Button
+        title={t('editor.documentBar.readOnlyMode')}
+        className='ms-2 text-secondary'
+        size='sm'
+        variant='outline-light'>
+        <ForkAwesomeIcon icon='file-text-o' />
+      </Button>
     </Link>
   )
 }
diff --git a/src/components/editor-page/app-bar/slide-mode-button.tsx b/src/components/editor-page/app-bar/slide-mode-button.tsx
index 657f4538d..061879c80 100644
--- a/src/components/editor-page/app-bar/slide-mode-button.tsx
+++ b/src/components/editor-page/app-bar/slide-mode-button.tsx
@@ -19,16 +19,14 @@ export const SlideModeButton: React.FC = () => {
   const noteIdentifier = useApplicationState((state) => state.noteDetails.primaryAddress)
 
   return (
-    <Link href={`/p/${noteIdentifier}`}>
-      <a target='_blank'>
-        <Button
-          title={t('editor.documentBar.slideMode')}
-          className='ms-2 text-secondary'
-          size='sm'
-          variant='outline-light'>
-          <ForkAwesomeIcon icon='television' />
-        </Button>
-      </a>
+    <Link href={`/p/${noteIdentifier}`} target='_blank'>
+      <Button
+        title={t('editor.documentBar.slideMode')}
+        className='ms-2 text-secondary'
+        size='sm'
+        variant='outline-light'>
+        <ForkAwesomeIcon icon='television' />
+      </Button>
     </Link>
   )
 }
diff --git a/src/components/history-page/history-card/history-card.tsx b/src/components/history-page/history-card/history-card.tsx
index d7f9a57c8..0cdcd0be6 100644
--- a/src/components/history-page/history-card/history-card.tsx
+++ b/src/components/history-page/history-card/history-card.tsx
@@ -64,22 +64,20 @@ export const HistoryCard: React.FC<HistoryEntryProps & HistoryEventHandlers> = (
           <div className={'d-flex flex-column'}>
             <PinButton isDark={false} isPinned={entry.pinStatus} onPinClick={onPinEntry} />
           </div>
-          <Link href={`/n/${entry.identifier}`}>
-            <a className='text-decoration-none flex-fill text-dark'>
-              <div className={'d-flex flex-column justify-content-between'}>
-                <Card.Title className='m-0 mt-1dot5' {...cypressId('history-entry-title')}>
-                  {entryTitle}
-                </Card.Title>
-                <div>
-                  <div className='text-black-50 mt-2'>
-                    <ForkAwesomeIcon icon='clock-o' /> {DateTime.fromISO(entry.lastVisitedAt).toRelative()}
-                    <br />
-                    {lastVisited}
-                  </div>
-                  <div className={`${styles['card-footer-min-height']} p-0`}>{tags}</div>
+          <Link href={`/n/${entry.identifier}`} className='text-decoration-none flex-fill text-dark'>
+            <div className={'d-flex flex-column justify-content-between'}>
+              <Card.Title className='m-0 mt-1dot5' {...cypressId('history-entry-title')}>
+                {entryTitle}
+              </Card.Title>
+              <div>
+                <div className='text-black-50 mt-2'>
+                  <ForkAwesomeIcon icon='clock-o' /> {DateTime.fromISO(entry.lastVisitedAt).toRelative()}
+                  <br />
+                  {lastVisited}
                 </div>
+                <div className={`${styles['card-footer-min-height']} p-0`}>{tags}</div>
               </div>
-            </a>
+            </div>
           </Link>
           <div className={'d-flex flex-column'}>
             <EntryMenu
diff --git a/src/components/history-page/history-table/history-table-row.tsx b/src/components/history-page/history-table/history-table-row.tsx
index 3ca4e70b8..fd2e5787b 100644
--- a/src/components/history-page/history-table/history-table-row.tsx
+++ b/src/components/history-page/history-table/history-table-row.tsx
@@ -45,10 +45,8 @@ export const HistoryTableRow: React.FC<HistoryEntryProps & HistoryEventHandlers>
   return (
     <tr>
       <td>
-        <Link href={`/n/${entry.identifier}`}>
-          <a className='text-light' {...cypressId('history-entry-title')}>
-            {entryTitle}
-          </a>
+        <Link href={`/n/${entry.identifier}`} className='text-light' {...cypressId('history-entry-title')}>
+          {entryTitle}
         </Link>
       </td>
       <td>{formatHistoryDate(entry.lastVisitedAt)}</td>
diff --git a/src/components/landing-layout/navigation/header-bar/header-nav-link.tsx b/src/components/landing-layout/navigation/header-bar/header-nav-link.tsx
index 7eb53f625..4736420a7 100644
--- a/src/components/landing-layout/navigation/header-bar/header-nav-link.tsx
+++ b/src/components/landing-layout/navigation/header-bar/header-nav-link.tsx
@@ -33,10 +33,8 @@ export const HeaderNavLink: React.FC<PropsWithChildren<HeaderNavLinkProps>> = ({
 
   return (
     <Nav.Item>
-      <Link href={to} passHref={true}>
-        <a className={`nav-link text-light ${activeClass} ${styles['nav-link']}`} href={to} {...cypressId(props)}>
-          {children}
-        </a>
+      <Link href={to} className={`nav-link text-light ${activeClass} ${styles['nav-link']}`} {...cypressId(props)}>
+        {children}
       </Link>
     </Nav.Item>
   )