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 '../styles/cardMod.css'
import { handleModImageError } from '../utils' import { handleModImageError } from '../utils'
@ -6,8 +7,7 @@ type ModCardProps = {
gameName: string gameName: string
summary: string summary: string
imageUrl: string imageUrl: string
link: string route: string
handleClick: () => void
} }
export const ModCard = ({ export const ModCard = ({
@ -15,18 +15,10 @@ export const ModCard = ({
gameName, gameName,
summary, summary,
imageUrl, imageUrl,
link, route
handleClick
}: ModCardProps) => { }: ModCardProps) => {
return ( return (
<a <Link className='cardModMainWrapperLink' to={route}>
className='cardModMainWrapperLink'
href={link}
onClick={(e) => {
e.preventDefault()
handleClick()
}}
>
<div className='cardModMain'> <div className='cardModMain'>
<div className='cMMPictureWrapper'> <div className='cMMPictureWrapper'>
<img <img
@ -95,6 +87,6 @@ export const ModCard = ({
</div> </div>
</div> </div>
</div> </div>
</a> </Link>
) )
} }

View File

@ -1,7 +1,7 @@
import { Event, Filter, kinds, nip19, UnsignedEvent } from 'nostr-tools' import { Event, Filter, kinds, nip19, UnsignedEvent } from 'nostr-tools'
import { QRCodeSVG } from 'qrcode.react' import { QRCodeSVG } from 'qrcode.react'
import { useState } from 'react' import { useState } from 'react'
import { useNavigate } from 'react-router-dom' import { Link } from 'react-router-dom'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import { import {
MetadataController, MetadataController,
@ -23,7 +23,6 @@ type Props = {
} }
export const ProfileSection = ({ pubkey }: Props) => { export const ProfileSection = ({ pubkey }: Props) => {
const navigate = useNavigate()
const [profile, setProfile] = useState<UserProfile>() const [profile, setProfile] = useState<UserProfile>()
useDidMount(async () => { useDidMount(async () => {
@ -60,13 +59,9 @@ export const ProfileSection = ({ pubkey }: Props) => {
<div className='IBMSMSMSSS_Author'> <div className='IBMSMSMSSS_Author'>
<div className='IBMSMSMSSS_Author_Top'> <div className='IBMSMSMSSS_Author_Top'>
<div className='IBMSMSMSSS_Author_Top_Left'> <div className='IBMSMSMSSS_Author_Top_Left'>
<a <Link
className='IBMSMSMSSS_Author_Top_Left_InsideLinkWrapper' className='IBMSMSMSSS_Author_Top_Left_InsideLinkWrapper'
href={`#${profileRoute}`} to={profileRoute}
onClick={(e) => {
e.preventDefault()
navigate(profileRoute)
}}
> >
<div className='IBMSMSMSSS_Author_Top_Left_Inside'> <div className='IBMSMSMSSS_Author_Top_Left_Inside'>
<div className='IBMSMSMSSS_Author_Top_Left_InsidePic'> <div className='IBMSMSMSSS_Author_Top_Left_InsidePic'>
@ -92,7 +87,7 @@ export const ProfileSection = ({ pubkey }: Props) => {
</div> </div>
</div> </div>
</div> </div>
</a> </Link>
<div className='IBMSMSMSSS_Author_Top_AddressWrapper'> <div className='IBMSMSMSSS_Author_Top_AddressWrapper'>
<div className='IBMSMSMSSS_Author_Top_AddressWrapped'> <div className='IBMSMSMSSS_Author_Top_AddressWrapped'>
<p <p

View File

@ -208,7 +208,6 @@ type DisplayModProps = {
} }
const DisplayMod = ({ naddr }: DisplayModProps) => { const DisplayMod = ({ naddr }: DisplayModProps) => {
const navigate = useNavigate()
const [mod, setMod] = useState<ModDetails>() const [mod, setMod] = useState<ModDetails>()
useDidMount(() => { useDidMount(() => {
@ -249,8 +248,7 @@ const DisplayMod = ({ naddr }: DisplayModProps) => {
gameName={mod.game} gameName={mod.game}
summary={mod.summary} summary={mod.summary}
imageUrl={mod.featuredImageUrl} imageUrl={mod.featuredImageUrl}
link={`#${route}`} route={route}
handleClick={() => navigate(route)}
/> />
) )
} }
@ -298,8 +296,7 @@ const DisplayLatestMods = () => {
gameName={mod.game} gameName={mod.game}
summary={mod.summary} summary={mod.summary}
imageUrl={mod.featuredImageUrl} imageUrl={mod.featuredImageUrl}
link={`#${route}`} route={route}
handleClick={() => navigate(route)}
/> />
) )
}) })

View File

@ -15,7 +15,7 @@ import {
} from 'nostr-tools' } from 'nostr-tools'
import React, { useEffect, useMemo } from 'react' import React, { useEffect, useMemo } from 'react'
import { Dispatch, SetStateAction, useState } 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 { toast } from 'react-toastify'
import { getProfilePageRoute } from 'routes' import { getProfilePageRoute } from 'routes'
import { ModDetails, UserProfile } from 'types' import { ModDetails, UserProfile } from 'types'
@ -355,8 +355,6 @@ const Filter = React.memo(
) )
const Comment = (props: CommentEvent) => { const Comment = (props: CommentEvent) => {
const navigate = useNavigate()
const [profile, setProfile] = useState<UserProfile>() const [profile, setProfile] = useState<UserProfile>()
useDidMount(async () => { useDidMount(async () => {
@ -376,19 +374,15 @@ const Comment = (props: CommentEvent) => {
<div className='IBMSMSMBSSCL_Comment'> <div className='IBMSMSMBSSCL_Comment'>
<div className='IBMSMSMBSSCL_CommentTop'> <div className='IBMSMSMBSSCL_CommentTop'>
<div className='IBMSMSMBSSCL_CommentTopPPWrapper'> <div className='IBMSMSMBSSCL_CommentTopPPWrapper'>
<a <Link
className='IBMSMSMBSSCL_CommentTopPP' className='IBMSMSMBSSCL_CommentTopPP'
href={`#${profileRoute}`} to={profileRoute}
onClick={(e) => {
e.preventDefault()
navigate(profileRoute)
}}
style={{ style={{
background: `url('${ background: `url('${
profile?.image || '' profile?.image || ''
}') center / cover no-repeat` }') center / cover no-repeat`
}} }}
></a> />
</div> </div>
<div className='IBMSMSMBSSCL_CommentTopDetailsWrapper'> <div className='IBMSMSMBSSCL_CommentTopDetailsWrapper'>
<div className='IBMSMSMBSSCL_CommentTopDetails'> <div className='IBMSMSMBSSCL_CommentTopDetails'>

View File

@ -7,7 +7,6 @@ import React, {
useMemo, useMemo,
useState useState
} from 'react' } from 'react'
import { useNavigate } from 'react-router-dom'
import { LoadingSpinner } from '../components/LoadingSpinner' import { LoadingSpinner } from '../components/LoadingSpinner'
import { ModCard } from '../components/ModCard' import { ModCard } from '../components/ModCard'
import { MetadataController } from '../controllers' import { MetadataController } from '../controllers'
@ -48,7 +47,6 @@ interface FilterOptions {
} }
export const ModsPage = () => { export const ModsPage = () => {
const navigate = useNavigate()
const [isFetching, setIsFetching] = useState(false) const [isFetching, setIsFetching] = useState(false)
const [mods, setMods] = useState<ModDetails[]>([]) const [mods, setMods] = useState<ModDetails[]>([])
const [filterOptions, setFilterOptions] = useState<FilterOptions>({ const [filterOptions, setFilterOptions] = useState<FilterOptions>({
@ -223,8 +221,7 @@ export const ModsPage = () => {
gameName={mod.game} gameName={mod.game}
summary={mod.summary} summary={mod.summary}
imageUrl={mod.featuredImageUrl} imageUrl={mod.featuredImageUrl}
link={`#${route}`} route={route}
handleClick={() => navigate(route)}
/> />
) )
})} })}