chore: used Link component from react-router-dom instead of a tag

This commit is contained in:
daniyal 2024-09-16 12:35:42 +05:00
parent d70e302a69
commit 22fc2b4ba3
5 changed files with 16 additions and 41 deletions

View File

@ -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>
)
}

View File

@ -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

View File

@ -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}
/>
)
})

View File

@ -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'>

View File

@ -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}
/>
)
})}