From f7bf65c845597b8ea205fa80a2de75cb37758601 Mon Sep 17 00:00:00 2001
From: daniyal <daniyal@nostrdev.com>
Date: Wed, 25 Sep 2024 21:12:42 +0500
Subject: [PATCH] fix: in mod detail page fixed navigation for game route and
 edit mod

---
 src/components/GameCard.tsx | 13 +++++--------
 src/pages/mod/index.tsx     | 20 +++++++++++---------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/GameCard.tsx b/src/components/GameCard.tsx
index 1b34432..0d76af9 100644
--- a/src/components/GameCard.tsx
+++ b/src/components/GameCard.tsx
@@ -1,7 +1,7 @@
-import { useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
+import { getGamePageRoute } from 'routes'
 import '../styles/cardGames.css'
 import { handleGameImageError } from '../utils'
-import { getGamePageRoute } from 'routes'
 
 type GameCardProps = {
   title: string
@@ -9,13 +9,10 @@ type GameCardProps = {
 }
 
 export const GameCard = ({ title, imageUrl }: GameCardProps) => {
-  const navigate = useNavigate()
+  const route = getGamePageRoute(title)
 
   return (
-    <div
-      className='cardGameMainWrapperLink'
-      onClick={() => navigate(getGamePageRoute(title))}
-    >
+    <Link className='cardGameMainWrapperLink' to={route}>
       <div className='cardGameMainWrapper'>
         <img
           src={imageUrl}
@@ -26,6 +23,6 @@ export const GameCard = ({ title, imageUrl }: GameCardProps) => {
       <div className='cardGameMainTitle'>
         <p>{title}</p>
       </div>
-    </div>
+    </Link>
   )
 }
diff --git a/src/pages/mod/index.tsx b/src/pages/mod/index.tsx
index bcce8bd..ac1636f 100644
--- a/src/pages/mod/index.tsx
+++ b/src/pages/mod/index.tsx
@@ -5,7 +5,7 @@ import { formatDate } from 'date-fns'
 import FsLightbox from 'fslightbox-react'
 import { Filter, kinds, nip19, UnsignedEvent } from 'nostr-tools'
 import { useEffect, useRef, useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
+import { Link as ReactRouterLink, useParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { BlogCard } from '../../components/BlogCard'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
@@ -16,7 +16,7 @@ import {
   UserRelaysType
 } from '../../controllers'
 import { useAppSelector, useDidMount } from '../../hooks'
-import { getModsEditPageRoute } from '../../routes'
+import { getGamePageRoute, getModsEditPageRoute } from '../../routes'
 import '../../styles/comments.css'
 import '../../styles/downloads.css'
 import '../../styles/innerPage.css'
@@ -41,9 +41,9 @@ import {
   sendDMUsingRandomKey,
   signAndPublish
 } from '../../utils'
+import { Comments } from './internal/comment'
 import { Reactions } from './internal/reactions'
 import { Zap } from './internal/zap'
-import { Comments } from './internal/comment'
 
 export const ModPage = () => {
   const { naddr } = useParams()
@@ -214,7 +214,6 @@ type GameProps = {
 }
 
 const Game = ({ naddr, game, author, aTag }: GameProps) => {
-  const navigate = useNavigate()
   const userState = useAppSelector((state) => state.user)
   const [isLoading, setIsLoading] = useState(false)
   const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
@@ -510,15 +509,18 @@ const Game = ({ naddr, game, author, aTag }: GameProps) => {
     userState.user?.npub &&
     userState.user.npub === import.meta.env.VITE_REPORTING_NPUB
 
+  const gameRoute = getGamePageRoute(game)
+  const editRoute = getModsEditPageRoute(naddr)
+
   return (
     <>
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
       <div className='IBMSMSMBSSModFor'>
         <p className='IBMSMSMBSSModForPara'>
           Mod for:&nbsp;
-          <a className='IBMSMSMBSSModForLink' href='search.html'>
+          <ReactRouterLink className='IBMSMSMBSSModForLink' to={gameRoute}>
             {game}
-          </a>
+          </ReactRouterLink>
         </p>
         <div className='dropdown dropdownMain' style={{ flexGrow: 'unset' }}>
           <button
@@ -544,9 +546,9 @@ const Game = ({ naddr, game, author, aTag }: GameProps) => {
           </button>
           <div className={`dropdown-menu dropdown-menu-end dropdownMainMenu`}>
             {userState.auth && userState.user?.pubkey === author && (
-              <a
+              <ReactRouterLink
                 className='dropdown-item dropdownMainMenuItem'
-                onClick={() => navigate(getModsEditPageRoute(naddr))}
+                to={editRoute}
               >
                 <svg
                   xmlns='http://www.w3.org/2000/svg'
@@ -559,7 +561,7 @@ const Game = ({ naddr, game, author, aTag }: GameProps) => {
                   <path d='M362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32zM421.7 220.3L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3z'></path>
                 </svg>
                 Edit
-              </a>
+              </ReactRouterLink>
             )}
 
             <a