From 22fc2b4ba3b8f83fb2196db130bd1f62f0d4af27 Mon Sep 17 00:00:00 2001
From: daniyal <daniyal@nostrdev.com>
Date: Mon, 16 Sep 2024 12:35:42 +0500
Subject: [PATCH] chore: used Link component from react-router-dom instead of a
 tag

---
 src/components/ModCard.tsx               | 18 +++++-------------
 src/components/ProfileSection.tsx        | 13 ++++---------
 src/pages/home.tsx                       |  7 ++-----
 src/pages/mod/internal/comment/index.tsx | 14 ++++----------
 src/pages/mods.tsx                       |  5 +----
 5 files changed, 16 insertions(+), 41 deletions(-)

diff --git a/src/components/ModCard.tsx b/src/components/ModCard.tsx
index fe9f678..0ceb5d5 100644
--- a/src/components/ModCard.tsx
+++ b/src/components/ModCard.tsx
@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom'
 import '../styles/cardMod.css'
 import { handleModImageError } from '../utils'
 
@@ -6,8 +7,7 @@ type ModCardProps = {
   gameName: string
   summary: string
   imageUrl: string
-  link: string
-  handleClick: () => void
+  route: string
 }
 
 export const ModCard = ({
@@ -15,18 +15,10 @@ export const ModCard = ({
   gameName,
   summary,
   imageUrl,
-  link,
-  handleClick
+  route
 }: ModCardProps) => {
   return (
-    <a
-      className='cardModMainWrapperLink'
-      href={link}
-      onClick={(e) => {
-        e.preventDefault()
-        handleClick()
-      }}
-    >
+    <Link className='cardModMainWrapperLink' to={route}>
       <div className='cardModMain'>
         <div className='cMMPictureWrapper'>
           <img
@@ -95,6 +87,6 @@ export const ModCard = ({
           </div>
         </div>
       </div>
-    </a>
+    </Link>
   )
 }
diff --git a/src/components/ProfileSection.tsx b/src/components/ProfileSection.tsx
index 3051b1f..b441582 100644
--- a/src/components/ProfileSection.tsx
+++ b/src/components/ProfileSection.tsx
@@ -1,7 +1,7 @@
 import { Event, Filter, kinds, nip19, UnsignedEvent } from 'nostr-tools'
 import { QRCodeSVG } from 'qrcode.react'
 import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import {
   MetadataController,
@@ -23,7 +23,6 @@ type Props = {
 }
 
 export const ProfileSection = ({ pubkey }: Props) => {
-  const navigate = useNavigate()
   const [profile, setProfile] = useState<UserProfile>()
 
   useDidMount(async () => {
@@ -60,13 +59,9 @@ export const ProfileSection = ({ pubkey }: Props) => {
           <div className='IBMSMSMSSS_Author'>
             <div className='IBMSMSMSSS_Author_Top'>
               <div className='IBMSMSMSSS_Author_Top_Left'>
-                <a
+                <Link
                   className='IBMSMSMSSS_Author_Top_Left_InsideLinkWrapper'
-                  href={`#${profileRoute}`}
-                  onClick={(e) => {
-                    e.preventDefault()
-                    navigate(profileRoute)
-                  }}
+                  to={profileRoute}
                 >
                   <div className='IBMSMSMSSS_Author_Top_Left_Inside'>
                     <div className='IBMSMSMSSS_Author_Top_Left_InsidePic'>
@@ -92,7 +87,7 @@ export const ProfileSection = ({ pubkey }: Props) => {
                       </div>
                     </div>
                   </div>
-                </a>
+                </Link>
                 <div className='IBMSMSMSSS_Author_Top_AddressWrapper'>
                   <div className='IBMSMSMSSS_Author_Top_AddressWrapped'>
                     <p
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 944ba23..8795283 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -208,7 +208,6 @@ type DisplayModProps = {
 }
 
 const DisplayMod = ({ naddr }: DisplayModProps) => {
-  const navigate = useNavigate()
   const [mod, setMod] = useState<ModDetails>()
 
   useDidMount(() => {
@@ -249,8 +248,7 @@ const DisplayMod = ({ naddr }: DisplayModProps) => {
       gameName={mod.game}
       summary={mod.summary}
       imageUrl={mod.featuredImageUrl}
-      link={`#${route}`}
-      handleClick={() => navigate(route)}
+      route={route}
     />
   )
 }
@@ -298,8 +296,7 @@ const DisplayLatestMods = () => {
                 gameName={mod.game}
                 summary={mod.summary}
                 imageUrl={mod.featuredImageUrl}
-                link={`#${route}`}
-                handleClick={() => navigate(route)}
+                route={route}
               />
             )
           })
diff --git a/src/pages/mod/internal/comment/index.tsx b/src/pages/mod/internal/comment/index.tsx
index 93ea146..f42a94b 100644
--- a/src/pages/mod/internal/comment/index.tsx
+++ b/src/pages/mod/internal/comment/index.tsx
@@ -15,7 +15,7 @@ import {
 } from 'nostr-tools'
 import React, { useEffect, useMemo } from 'react'
 import { Dispatch, SetStateAction, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { getProfilePageRoute } from 'routes'
 import { ModDetails, UserProfile } from 'types'
@@ -355,8 +355,6 @@ const Filter = React.memo(
 )
 
 const Comment = (props: CommentEvent) => {
-  const navigate = useNavigate()
-
   const [profile, setProfile] = useState<UserProfile>()
 
   useDidMount(async () => {
@@ -376,19 +374,15 @@ const Comment = (props: CommentEvent) => {
     <div className='IBMSMSMBSSCL_Comment'>
       <div className='IBMSMSMBSSCL_CommentTop'>
         <div className='IBMSMSMBSSCL_CommentTopPPWrapper'>
-          <a
+          <Link
             className='IBMSMSMBSSCL_CommentTopPP'
-            href={`#${profileRoute}`}
-            onClick={(e) => {
-              e.preventDefault()
-              navigate(profileRoute)
-            }}
+            to={profileRoute}
             style={{
               background: `url('${
                 profile?.image || ''
               }') center / cover no-repeat`
             }}
-          ></a>
+          />
         </div>
         <div className='IBMSMSMBSSCL_CommentTopDetailsWrapper'>
           <div className='IBMSMSMBSSCL_CommentTopDetails'>
diff --git a/src/pages/mods.tsx b/src/pages/mods.tsx
index ef8b62b..55c609b 100644
--- a/src/pages/mods.tsx
+++ b/src/pages/mods.tsx
@@ -7,7 +7,6 @@ import React, {
   useMemo,
   useState
 } from 'react'
-import { useNavigate } from 'react-router-dom'
 import { LoadingSpinner } from '../components/LoadingSpinner'
 import { ModCard } from '../components/ModCard'
 import { MetadataController } from '../controllers'
@@ -48,7 +47,6 @@ interface FilterOptions {
 }
 
 export const ModsPage = () => {
-  const navigate = useNavigate()
   const [isFetching, setIsFetching] = useState(false)
   const [mods, setMods] = useState<ModDetails[]>([])
   const [filterOptions, setFilterOptions] = useState<FilterOptions>({
@@ -223,8 +221,7 @@ export const ModsPage = () => {
                       gameName={mod.game}
                       summary={mod.summary}
                       imageUrl={mod.featuredImageUrl}
-                      link={`#${route}`}
-                      handleClick={() => navigate(route)}
+                      route={route}
                     />
                   )
                 })}