fix(react links): changed every <Link> instance containing a <a> to only a <Link>

Ported Links to work for the new React version installed
pull/3800/head
Anatole Sot 1 month ago
parent 468bd25e59
commit d750d736fa

@ -166,10 +166,9 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
<Link
href={`/discover/movies/genre/${genreId}`}
key={`genre-${genreId}`}
className="hover:underline"
>
<a className="hover:underline">
{genres.find((g) => g.id === genreId)?.name}
</a>
</Link>
))
.reduce((prev, curr) => (

@ -93,13 +93,12 @@ const Badge = (
);
} else if (href) {
return (
<Link href={href}>
<a
<Link
href={href}
className={badgeStyle.join(' ')}
ref={ref as React.Ref<HTMLAnchorElement>}
>
{children}
</a>
</Link>
);
} else {

@ -55,15 +55,14 @@ const SettingsLink = ({
}
return (
<Link href={route}>
<a
<Link
href={route}
className={`${linkClasses} ${
currentPath.match(regex) ? activeLinkColor : inactiveLinkColor
}`}
aria-current="page"
>
{children}
</a>
</Link>
);
};

@ -12,8 +12,8 @@ const CompanyCard = ({ image, url, name }: CompanyCardProps) => {
const [isHovered, setHovered] = useState(false);
return (
<Link href={url}>
<a
<Link
href={url}
className={`relative flex h-32 w-56 transform-gpu cursor-pointer items-center justify-center p-8 shadow ring-1 transition duration-300 ease-in-out sm:h-36 sm:w-72 ${
isHovered
? 'scale-105 bg-gray-700 ring-gray-500'
@ -45,7 +45,6 @@ const CompanyCard = ({ image, url, name }: CompanyCardProps) => {
isHovered ? 'from-gray-800' : 'from-gray-900'
}`}
/>
</a>
</Link>
);
};

@ -57,8 +57,8 @@ const DiscoverWatchlist = () => {
<Header
subtext={
router.query.userId ? (
<Link href={`/users/${user?.id}`}>
<a className="hover:underline">{user?.displayName}</a>
<Link href={`/users/${user?.id}`} className="hover:underline">
{user?.displayName}
</Link>
) : (
''

@ -25,11 +25,9 @@ const MovieGenreSlider = () => {
return (
<>
<div className="slider-header">
<Link href="/discover/movies/genres">
<a className="slider-title">
<Link href="/discover/movies/genres" className="slider-title">
<span>{intl.formatMessage(messages.moviegenres)}</span>
<ArrowRightCircleIcon />
</a>
</Link>
</div>
<Slider

@ -40,11 +40,9 @@ const PlexWatchlistSlider = () => {
return (
<>
<div className="slider-header">
<Link href="/discover/watchlist">
<a className="slider-title">
<Link href="/discover/watchlist" className="slider-title">
<span>{intl.formatMessage(messages.plexwatchlist)}</span>
<ArrowRightCircleIcon />
</a>
</Link>
</div>
<Slider

@ -24,11 +24,9 @@ const RecentRequestsSlider = () => {
return (
<>
<div className="slider-header">
<Link href="/requests?filter=all">
<a className="slider-title">
<Link href="/requests?filter=all" className="slider-title">
<span>{intl.formatMessage(sliderTitles.recentrequests)}</span>
<ArrowRightCircleIcon />
</a>
</Link>
</div>
<Slider

@ -25,11 +25,9 @@ const TvGenreSlider = () => {
return (
<>
<div className="slider-header">
<Link href="/discover/tv/genres">
<a className="slider-title">
<Link href="/discover/tv/genres" className="slider-title">
<span>{intl.formatMessage(messages.tvgenres)}</span>
<ArrowRightCircleIcon />
</a>
</Link>
</div>
<Slider

@ -14,8 +14,8 @@ const GenreCard = ({ image, url, name, canExpand = false }: GenreCardProps) => {
const [isHovered, setHovered] = useState(false);
return (
<Link href={url}>
<a
<Link
href={url}
className={`relative flex h-32 items-center justify-center sm:h-36 ${
canExpand ? 'w-full' : 'w-56 sm:w-72'
} transform-gpu cursor-pointer p-8 shadow ring-1 transition duration-300 ease-in-out ${
@ -44,7 +44,6 @@ const GenreCard = ({ image, url, name, canExpand = false }: GenreCardProps) => {
<div className="relative z-20 w-full truncate whitespace-normal text-center text-2xl font-bold text-white sm:text-3xl">
{name}
</div>
</a>
</Link>
);
};

@ -45,10 +45,9 @@ const IssueBlock = ({ issue }: IssueBlockProps) => {
? '/profile'
: `/users/${issue.createdBy.id}`
}
className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline"
>
<a className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline">
{issue.createdBy.displayName}
</a>
</Link>
</span>
</div>

@ -84,13 +84,11 @@ const IssueComment = ({
</Modal>
</Transition>
<Link href={isActiveUser ? '/profile' : `/users/${comment.user.id}`}>
<a>
<img
src={comment.user.avatar}
alt=""
className="h-10 w-10 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
/>
</a>
</Link>
<div className="relative flex-1">
<div className="w-full rounded-md shadow ring-1 ring-gray-500">
@ -242,10 +240,9 @@ const IssueComment = ({
href={
isActiveUser ? '/profile' : `/users/${comment.user.id}`
}
className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline"
>
<a className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline">
{comment.user.displayName}
</a>
</Link>
),
relativeTime: (

@ -251,8 +251,9 @@ const IssueDetails = () => {
href={`/${
issueData.media.mediaType === MediaType.MOVIE ? 'movie' : 'tv'
}/${data.id}`}
className="hover:underline"
>
<a className="hover:underline">{title}</a>
{title}
</Link>{' '}
{releaseYear && (
<span className="media-year">({releaseYear.slice(0, 4)})</span>
@ -268,8 +269,8 @@ const IssueDetails = () => {
? '/profile'
: `/users/${issueData.createdBy.id}`
}
className="group ml-1 inline-flex h-full items-center xl:ml-1.5"
>
<a className="group ml-1 inline-flex h-full items-center xl:ml-1.5">
<img
className="mr-0.5 h-5 w-5 scale-100 transform-gpu rounded-full object-cover transition duration-300 group-hover:scale-105 xl:mr-1 xl:h-6 xl:w-6"
src={issueData.createdBy.avatar}
@ -278,7 +279,6 @@ const IssueDetails = () => {
<span className="font-semibold text-gray-100 transition duration-300 group-hover:text-white group-hover:underline">
{issueData.createdBy.displayName}
</span>
</a>
</Link>
),
relativeTime: (

@ -133,8 +133,8 @@ const IssueItem = ({ issue }: IssueItemProps) => {
? `/movie/${issue.media.tmdbId}`
: `/tv/${issue.media.tmdbId}`
}
className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105"
>
<a className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105">
<CachedImage
src={
title.posterPath
@ -147,7 +147,6 @@ const IssueItem = ({ issue }: IssueItemProps) => {
height={900}
objectFit="cover"
/>
</a>
</Link>
<div className="flex flex-col justify-center overflow-hidden pl-2 xl:pl-4">
<div className="pt-0.5 text-xs text-white sm:pt-1">
@ -162,10 +161,9 @@ const IssueItem = ({ issue }: IssueItemProps) => {
? `/movie/${issue.media.tmdbId}`
: `/tv/${issue.media.tmdbId}`
}
className="mr-2 min-w-0 truncate text-lg font-bold text-white hover:underline xl:text-xl"
>
<a className="mr-2 min-w-0 truncate text-lg font-bold text-white hover:underline xl:text-xl">
{isMovie(title) ? title.title : title.name}
</a>
</Link>
{problemSeasonEpisodeLine.length > 0 && (
<div className="card-field">
@ -222,8 +220,10 @@ const IssueItem = ({ issue }: IssueItemProps) => {
/>
),
user: (
<Link href={`/users/${issue.createdBy.id}`}>
<a className="group flex items-center truncate">
<Link
href={`/users/${issue.createdBy.id}`}
className="group flex items-center truncate"
>
<img
src={issue.createdBy.avatar}
alt=""
@ -232,7 +232,6 @@ const IssueItem = ({ issue }: IssueItemProps) => {
<span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
{issue.createdBy.displayName}
</span>
</a>
</Link>
),
})}

@ -151,8 +151,9 @@ const MobileMenu = () => {
{filteredLinks.map((link) => {
const isActive = router.pathname.match(link.activeRegExp);
return (
<Link key={`mobile-menu-link-${link.href}`} href={link.href}>
<a
<Link
key={`mobile-menu-link-${link.href}`}
href={link.href}
className={`flex items-center space-x-2 ${
isActive ? 'text-indigo-500' : ''
}`}
@ -169,7 +170,6 @@ const MobileMenu = () => {
className: 'h-5 w-5',
})}
<span>{link.content}</span>
</a>
</Link>
);
})}
@ -182,8 +182,9 @@ const MobileMenu = () => {
const isActive =
router.pathname.match(link.activeRegExp) && !isOpen;
return (
<Link key={`mobile-menu-link-${link.href}`} href={link.href}>
<a
<Link
key={`mobile-menu-link-${link.href}`}
href={link.href}
className={`flex flex-col items-center space-y-1 ${
isActive ? 'text-indigo-500' : ''
}`}
@ -194,7 +195,6 @@ const MobileMenu = () => {
className: 'h-6 w-6',
}
)}
</a>
</Link>
);
})}

@ -176,8 +176,6 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
key={`mobile-${sidebarLink.messagesKey}`}
href={sidebarLink.href}
as={sidebarLink.as}
>
<a
onClick={() => setClosed()}
onKeyDown={(e) => {
if (e.key === 'Enter') {
@ -188,9 +186,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
tabIndex={0}
className={`flex items-center rounded-md px-2 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out focus:outline-none
${
router.pathname.match(
sidebarLink.activeRegExp
)
router.pathname.match(sidebarLink.activeRegExp)
? 'bg-gradient-to-br from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500'
: 'hover:bg-gray-700 focus:bg-gray-700'
}
@ -201,7 +197,6 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
{intl.formatMessage(
menuMessages[sidebarLink.messagesKey]
)}
</a>
</Link>
);
})}
@ -246,13 +241,9 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
key={`desktop-${sidebarLink.messagesKey}`}
href={sidebarLink.href}
as={sidebarLink.as}
>
<a
className={`group flex items-center rounded-md px-2 py-2 text-lg font-medium leading-6 text-white transition duration-150 ease-in-out focus:outline-none
${
router.pathname.match(
sidebarLink.activeRegExp
)
router.pathname.match(sidebarLink.activeRegExp)
? 'bg-gradient-to-br from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500'
: 'hover:bg-gray-700 focus:bg-gray-700'
}
@ -263,7 +254,6 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
{intl.formatMessage(
menuMessages[sidebarLink.messagesKey]
)}
</a>
</Link>
);
})}

@ -24,10 +24,8 @@ const ForwardedLink = forwardRef<
LinkProps & React.ComponentPropsWithoutRef<'a'>
>(({ href, children, ...rest }, ref) => {
return (
<Link href={href}>
<a ref={ref} {...rest}>
<Link href={href} ref={ref} {...rest}>
{children}
</a>
</Link>
);
});

@ -39,8 +39,8 @@ const VersionStatus = ({ onClick }: VersionStatusProps) => {
: intl.formatMessage(messages.streamstable);
return (
<Link href="/settings/about">
<a
<Link
href="/settings/about"
onClick={onClick}
onKeyDown={(e) => {
if (e.key === 'Enter' && onClick) {
@ -81,7 +81,6 @@ const VersionStatus = ({ onClick }: VersionStatusProps) => {
</span>
</div>
{data.updateAvailable && <ArrowUpCircleIcon className="h-6 w-6" />}
</a>
</Link>
);
};

@ -275,8 +275,8 @@ const ManageSlideOver = ({
: `/users/${user.id}`
}
key={`watch-user-${user.id}`}
className="z-0 mb-1 -mr-2 shrink-0 hover:z-50"
>
<a className="z-0 mb-1 -mr-2 shrink-0 hover:z-50">
<Tooltip
key={`watch-user-${user.id}`}
content={user.displayName}
@ -287,7 +287,6 @@ const ManageSlideOver = ({
className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
/>
</Tooltip>
</a>
</Link>
))}
</span>
@ -401,8 +400,8 @@ const ManageSlideOver = ({
: `/users/${user.id}`
}
key={`watch-user-${user.id}`}
className="z-0 mb-1 -mr-2 shrink-0 hover:z-50"
>
<a className="z-0 mb-1 -mr-2 shrink-0 hover:z-50">
<Tooltip
key={`watch-user-${user.id}`}
content={user.displayName}
@ -413,7 +412,6 @@ const ManageSlideOver = ({
className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
/>
</Tooltip>
</a>
</Link>
))}
</span>

@ -30,8 +30,8 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
}
return (
<Link href={url}>
<a
<Link
href={url}
className={'w-36 sm:w-36 md:w-44'}
onMouseEnter={() => {
setHovered(true);
@ -102,7 +102,6 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
</div>
</div>
</div>
</a>
</Link>
);
};

@ -148,11 +148,9 @@ const MediaSlider = ({
<>
<div className="slider-header">
{linkUrl ? (
<Link href={linkUrl}>
<a className="slider-title min-w-0 pr-16">
<Link href={linkUrl} className="slider-title min-w-0 pr-16">
<span className="truncate">{title}</span>
<ArrowRightCircleIcon />
</a>
</Link>
) : (
<div className="slider-title">

@ -34,8 +34,8 @@ const MovieCast = () => {
<div className="mt-1 mb-5">
<Header
subtext={
<Link href={`/movie/${data.id}`}>
<a className="hover:underline">{data.title}</a>
<Link href={`/movie/${data.id}`} className="hover:underline">
{data.title}
</Link>
}
>

@ -34,8 +34,8 @@ const MovieCrew = () => {
<div className="mt-1 mb-5">
<Header
subtext={
<Link href={`/movie/${data.id}`}>
<a className="hover:underline">{data.title}</a>
<Link href={`/movie/${data.id}`} className="hover:underline">
{data.title}
</Link>
}
>

@ -44,8 +44,8 @@ const MovieRecommendations = () => {
<div className="mt-1 mb-5">
<Header
subtext={
<Link href={`/movie/${movieData?.id}`}>
<a className="hover:underline">{movieData?.title}</a>
<Link href={`/movie/${movieData?.id}`} className="hover:underline">
{movieData?.title}
</Link>
}
>

@ -42,8 +42,8 @@ const MovieSimilar = () => {
<div className="mt-1 mb-5">
<Header
subtext={
<Link href={`/movie/${movieData?.id}`}>
<a className="hover:underline">{movieData?.title}</a>
<Link href={`/movie/${movieData?.id}`} className="hover:underline">
{movieData?.title}
</Link>
}
>

@ -233,8 +233,12 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
movieAttributes.push(
data.genres
.map((g) => (
<Link href={`/discover/movies?genre=${g.id}`} key={`genre-${g.id}`}>
<a className="hover:underline">{g.name}</a>
<Link
href={`/discover/movies?genre=${g.id}`}
key={`genre-${g.id}`}
className="hover:underline"
>
{g.name}
</Link>
))
.reduce((prev, curr) => (
@ -448,18 +452,19 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
{sortedCrew.slice(0, 6).map((person) => (
<li key={`crew-${person.job}-${person.id}`}>
<span>{person.job}</span>
<Link href={`/person/${person.id}`}>
<a className="crew-name">{person.name}</a>
<Link href={`/person/${person.id}`} className="crew-name">
{person.name}
</Link>
</li>
))}
</ul>
<div className="mt-4 flex justify-end">
<Link href={`/movie/${data.id}/crew`}>
<a className="flex items-center text-gray-400 transition duration-300 hover:text-gray-100">
<Link
href={`/movie/${data.id}/crew`}
className="flex items-center text-gray-400 transition duration-300 hover:text-gray-100"
>
<span>{intl.formatMessage(messages.viewfullcrew)}</span>
<ArrowRightCircleIcon className="ml-1.5 inline-block h-5 w-5" />
</a>
</Link>
</div>
</>
@ -470,10 +475,9 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
<Link
href={`/discover/movies?keywords=${keyword.id}`}
key={`keyword-id-${keyword.id}`}
className="mb-2 mr-2 inline-flex last:mr-0"
>
<a className="mb-2 mr-2 inline-flex last:mr-0">
<Tag>{keyword.name}</Tag>
</a>
</Link>
))}
</div>
@ -483,7 +487,6 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
{data.collection && (
<div className="mb-6">
<Link href={`/collection/${data.collection.id}`}>
<a>
<div className="group relative z-0 scale-100 transform-gpu cursor-pointer overflow-hidden rounded-lg bg-gray-800 bg-cover bg-center shadow-md ring-1 ring-gray-700 transition duration-300 hover:scale-105 hover:ring-gray-500">
<div className="absolute inset-0 z-0">
<CachedImage
@ -507,7 +510,6 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
</Button>
</div>
</div>
</a>
</Link>
</div>
)}
@ -704,7 +706,6 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
<Link
href={`/discover/movies/language/${data.originalLanguage}`}
>
<a>
{intl.formatDisplayName(data.originalLanguage, {
type: 'language',
fallback: 'none',
@ -712,7 +713,6 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
data.spokenLanguages.find(
(lng) => lng.iso_639_1 === data.originalLanguage
)?.name}
</a>
</Link>
</span>
</div>
@ -768,8 +768,9 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
<Link
href={`/discover/movies/studio/${s.id}`}
key={`studio-${s.id}`}
className="block"
>
<a className="block">{s.name}</a>
{s.name}
</Link>
);
})}
@ -827,11 +828,13 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
{data.credits.cast.length > 0 && (
<>
<div className="slider-header">
<Link href="/movie/[movieId]/cast" as={`/movie/${data.id}/cast`}>
<a className="slider-title">
<Link
href="/movie/[movieId]/cast"
as={`/movie/${data.id}/cast`}
className="slider-title"
>
<span>{intl.formatMessage(messages.cast)}</span>
<ArrowRightCircleIcon />
</a>
</Link>
</div>
<Slider

@ -264,10 +264,9 @@ const ArtistDetails = ({ artist }: ArtistDetailsProp) => {
<Link
href={`/discover/music?keywords=${keyword}`}
key={`keyword-id-${idx}`}
className="mb-2 mr-2 inline-flex last:mr-0"
>
<a className="mb-2 mr-2 inline-flex last:mr-0">
<Tag>{keyword}</Tag>
</a>
</Link>
))}
</div>

@ -168,8 +168,11 @@ const ReleaseDetails = ({ release }: ReleaseDetailsProp) => {
{data.artist.map((artist, index) => (
<div key={`artist-${index}`}>
{' '}
<Link href={`/music/artist/${artist.id}`}>
<a className="hover:underline">{artist.name}</a>
<Link
href={`/music/artist/${artist.id}`}
className="hover:underline"
>
{artist.name}
</Link>
{index < data.artist.length - 1 ? ', ' : ''}
</div>
@ -212,10 +215,9 @@ const ReleaseDetails = ({ release }: ReleaseDetailsProp) => {
<Link
href={`/discover/music?keywords=${keyword}`}
key={`keyword-id-${idx}`}
className="mb-2 mr-2 inline-flex last:mr-0"
>
<a className="mb-2 mr-2 inline-flex last:mr-0">
<Tag>{keyword}</Tag>
</a>
</Link>
))}
</div>

@ -21,8 +21,8 @@ const PersonCard = ({
const [isHovered, setHovered] = useState(false);
return (
<Link href={`/person/${personId}`}>
<a
<Link
href={`/person/${personId}`}
className={canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'}
onMouseEnter={() => {
setHovered(true);
@ -61,9 +61,7 @@ const PersonCard = ({
<UserCircleIcon className="h-full" />
)}
</div>
<div className="w-full truncate text-center font-bold">
{name}
</div>
<div className="w-full truncate text-center font-bold">{name}</div>
{subName && (
<div
className="overflow-hidden whitespace-normal text-center text-sm text-gray-300"
@ -85,7 +83,6 @@ const PersonCard = ({
</div>
</div>
</div>
</a>
</Link>
);
};

@ -101,10 +101,9 @@ const RequestBlock = ({ request, onUpdate }: RequestBlockProps) => {
? '/profile'
: `/users/${request.requestedBy.id}`
}
className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline"
>
<a className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline">
{request.requestedBy.displayName}
</a>
</Link>
</span>
</div>
@ -120,10 +119,9 @@ const RequestBlock = ({ request, onUpdate }: RequestBlockProps) => {
? '/profile'
: `/users/${request.modifiedBy.id}`
}
className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline"
>
<a className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline">
{request.modifiedBy.displayName}
</a>
</Link>
</span>
</div>

@ -131,8 +131,10 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
{ type: 'or' }
) && (
<div className="card-field !hidden sm:!block">
<Link href={`/users/${requestData.requestedBy.id}`}>
<a className="group flex items-center">
<Link
href={`/users/${requestData.requestedBy.id}`}
className="group flex items-center"
>
<img
src={requestData.requestedBy.avatar}
alt=""
@ -141,7 +143,6 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
<span className="truncate group-hover:underline">
{requestData.requestedBy.displayName}
</span>
</a>
</Link>
</div>
)}
@ -409,18 +410,19 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
? `/tv/${requestData.media.tmdbId}`
: `/music/${requestData.media.secondaryType}/${requestData.media.mbId}`
}
className="overflow-hidden overflow-ellipsis whitespace-nowrap text-base font-bold text-white hover:underline sm:text-lg"
>
<a className="overflow-hidden overflow-ellipsis whitespace-nowrap text-base font-bold text-white hover:underline sm:text-lg">
{isMovie(title) || isRelease(title) ? title.title : title.name}
</a>
</Link>
{hasPermission(
[Permission.MANAGE_REQUESTS, Permission.REQUEST_VIEW],
{ type: 'or' }
) && (
<div className="card-field">
<Link href={`/users/${requestData.requestedBy.id}`}>
<a className="group flex items-center">
<Link
href={`/users/${requestData.requestedBy.id}`}
className="group flex items-center"
>
<img
src={requestData.requestedBy.avatar}
alt=""
@ -429,7 +431,6 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
<span className="truncate font-semibold group-hover:text-white group-hover:underline">
{requestData.requestedBy.displayName}
</span>
</a>
</Link>
</div>
)}
@ -633,8 +634,8 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
? `/tv/${requestData.media.tmdbId}`
: `/music/${requestData.media.secondaryType}/${requestData.media.mbId}`
}
className="w-20 flex-shrink-0 scale-100 transform-gpu cursor-pointer overflow-hidden rounded-md shadow-sm transition duration-300 hover:scale-105 hover:shadow-md sm:w-28"
>
<a className="w-20 flex-shrink-0 scale-100 transform-gpu cursor-pointer overflow-hidden rounded-md shadow-sm transition duration-300 hover:scale-105 hover:shadow-md sm:w-28">
<CachedImage
src={
isMovie(title) || isTv(title)
@ -650,7 +651,6 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
width={isMovie(title) || isTv(title) ? 600 : 900}
height={900}
/>
</a>
</Link>
</div>
</>

@ -205,8 +205,10 @@ const RequestItemError = ({
/>
),
user: (
<Link href={`/users/${requestData.requestedBy.id}`}>
<a className="group flex items-center truncate">
<Link
href={`/users/${requestData.requestedBy.id}`}
className="group flex items-center truncate"
>
<img
src={requestData.requestedBy.avatar}
alt=""
@ -215,7 +217,6 @@ const RequestItemError = ({
<span className="truncate text-sm group-hover:underline">
{requestData.requestedBy.displayName}
</span>
</a>
</Link>
),
})}
@ -259,8 +260,10 @@ const RequestItemError = ({
/>
),
user: (
<Link href={`/users/${requestData.modifiedBy.id}`}>
<a className="group flex items-center truncate">
<Link
href={`/users/${requestData.modifiedBy.id}`}
className="group flex items-center truncate"
>
<img
src={requestData.modifiedBy.avatar}
alt=""
@ -269,7 +272,6 @@ const RequestItemError = ({
<span className="truncate text-sm group-hover:underline">
{requestData.modifiedBy.displayName}
</span>
</a>
</Link>
),
})}
@ -431,8 +433,8 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
? `/tv/${requestData.media.tmdbId}`
: `/music/${requestData.secondaryType}/${requestData.media.mbId}`
}
className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105"
>
<a className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105">
<CachedImage
src={
title.posterPath && (isMovie(title) || isTv(title))
@ -446,7 +448,6 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
height={900}
objectFit="cover"
/>
</a>
</Link>
<div className="flex flex-col justify-center overflow-hidden pl-2 xl:pl-4">
<div className="pt-0.5 text-xs font-medium text-white sm:pt-1">
@ -467,12 +468,9 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
? `/tv/${requestData.media.tmdbId}`
: `/music/${requestData.secondaryType}/${requestData.media.mbId}`
}
className="mr-2 min-w-0 truncate text-lg font-bold text-white hover:underline xl:text-xl"
>
<a className="mr-2 min-w-0 truncate text-lg font-bold text-white hover:underline xl:text-xl">
{isMovie(title) || isRelease(title)
? title.title
: title.name}
</a>
{isMovie(title) || isRelease(title) ? title.title : title.name}
</Link>
{isTv(title) && request.seasons.length > 0 && (
<div className="card-field">
@ -570,8 +568,10 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
/>
),
user: (
<Link href={`/users/${requestData.requestedBy.id}`}>
<a className="group flex items-center truncate">
<Link
href={`/users/${requestData.requestedBy.id}`}
className="group flex items-center truncate"
>
<img
src={requestData.requestedBy.avatar}
alt=""
@ -580,7 +580,6 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
<span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
{requestData.requestedBy.displayName}
</span>
</a>
</Link>
),
})}
@ -624,8 +623,10 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
/>
),
user: (
<Link href={`/users/${requestData.modifiedBy.id}`}>
<a className="group flex items-center truncate">
<Link
href={`/users/${requestData.modifiedBy.id}`}
className="group flex items-center truncate"
>
<img
src={requestData.modifiedBy.avatar}
alt=""
@ -634,7 +635,6 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
<span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
{requestData.modifiedBy.displayName}
</span>
</a>
</Link>
),
})}

@ -122,12 +122,12 @@ const RequestList = () => {
<Header
subtext={
router.pathname.startsWith('/profile') ? (
<Link href={`/profile`}>
<a className="hover:underline">{currentUser?.displayName}</a>
<Link href={`/profile`} className="hover:underline">
{currentUser?.displayName}
</Link>
) : router.query.userId ? (
<Link href={`/users/${user?.id}`}>
<a className="hover:underline">{user?.displayName}</a>
<Link href={`/users/${user?.id}`} className="hover:underline">
{user?.displayName}
</Link>
) : (
''

@ -133,10 +133,9 @@ const QuotaDisplay = ({
ProfileLink: (msg: React.ReactNode) => (
<Link
href={userOverride ? `/users/${userOverride}` : '/profile'}
className="text-white transition duration-300 hover:underline"
>
<a className="text-white transition duration-300 hover:underline">
{msg}
</a>
</Link>
),
}

@ -212,8 +212,6 @@ const TitleCard = ({
? `/${mediaType}/${id}`
: `/music/${mediaType}/${id as string}`
}
>
<a
className="absolute inset-0 h-full w-full cursor-pointer overflow-hidden text-left"
style={{
background:
@ -229,9 +227,7 @@ const TitleCard = ({
: 'pb-11'
}`}
>
{year && (
<div className="text-sm font-medium">{year}</div>
)}
{year && <div className="text-sm font-medium">{year}</div>}
<h1
className="whitespace-normal text-xl font-bold leading-tight"
@ -265,7 +261,6 @@ const TitleCard = ({
</div>
</div>
</div>
</a>
</Link>
<div className="absolute bottom-0 left-0 right-0 flex justify-between px-2 py-2">

@ -34,8 +34,8 @@ const TvCast = () => {
<div className="mt-1 mb-5">
<Header
subtext={
<Link href={`/tv/${data.id}`}>
<a className="hover:underline">{data.name}</a>
<Link href={`/tv/${data.id}`} className="hover:underline">
{data.name}
</Link>
}
>

@ -34,8 +34,8 @@ const TvCrew = () => {
<div className="mt-1 mb-5">
<Header
subtext={
<Link href={`/tv/${data.id}`}>
<a className="hover:underline">{data.name}</a>
<Link href={`/tv/${data.id}`} className="hover:underline">
{data.name}
</Link>
}
>

@ -40,8 +40,8 @@ const TvRecommendations = () => {
<div className="mt-1 mb-5">
<Header
subtext={
<Link href={`/tv/${tvData?.id}`}>
<a className="hover:underline">{tvData?.name}</a>
<Link href={`/tv/${tvData?.id}`} className="hover:underline">
{tvData?.name}
</Link>
}
>

@ -38,8 +38,8 @@ const TvSimilar = () => {
<div className="mt-1 mb-5">
<Header
subtext={
<Link href={`/tv/${tvData?.id}`}>
<a className="hover:underline">{tvData?.name}</a>
<Link href={`/tv/${tvData?.id}`} className="hover:underline">
{tvData?.name}
</Link>
}
>

@ -214,8 +214,12 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
seriesAttributes.push(
data.genres
.map((g) => (
<Link href={`/discover/tv?genre=${g.id}`} key={`genre-${g.id}`}>
<a className="hover:underline">{g.name}</a>
<Link
href={`/discover/tv?genre=${g.id}`}
key={`genre-${g.id}`}
className="hover:underline"
>
{g.name}
</Link>
))
.reduce((prev, curr) => (
@ -487,18 +491,19 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
.map((person) => (
<li key={`crew-${person.job}-${person.id}`}>
<span>{person.job}</span>
<Link href={`/person/${person.id}`}>
<a className="crew-name">{person.name}</a>
<Link href={`/person/${person.id}`} className="crew-name">
{person.name}
</Link>
</li>
))}
</ul>
<div className="mt-4 flex justify-end">
<Link href={`/tv/${data.id}/crew`}>
<a className="flex items-center text-gray-400 transition duration-300 hover:text-gray-100">
<Link
href={`/tv/${data.id}/crew`}
className="flex items-center text-gray-400 transition duration-300 hover:text-gray-100"
>
<span>{intl.formatMessage(messages.viewfullcrew)}</span>
<ArrowRightCircleIcon className="ml-1.5 inline-block h-5 w-5" />
</a>
</Link>
</div>
</>
@ -509,10 +514,9 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
<Link
href={`/discover/tv?keywords=${keyword.id}`}
key={`keyword-id-${keyword.id}`}
className="mb-2 mr-2 inline-flex last:mr-0"
>
<a className="mb-2 mr-2 inline-flex last:mr-0">
<Tag>{keyword.name}</Tag>
</a>
</Link>
))}
</div>
@ -887,7 +891,6 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
<span>{intl.formatMessage(messages.originallanguage)}</span>
<span className="media-fact-value">
<Link href={`/discover/tv/language/${data.originalLanguage}`}>
<a>
{intl.formatDisplayName(data.originalLanguage, {
type: 'language',
fallback: 'none',
@ -895,7 +898,6 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
data.spokenLanguages.find(
(lng) => lng.iso_639_1 === data.originalLanguage
)?.name}
</a>
</Link>
</span>
</div>
@ -945,7 +947,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
href={`/discover/tv/network/${n.id}`}
key={`network-${n.id}`}
>
<a>{n.name}</a>
{n.name}
</Link>
))
.reduce((prev, curr) => (
@ -989,11 +991,13 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
{data.credits.cast.length > 0 && (
<>
<div className="slider-header">
<Link href="/tv/[tvId]/cast" as={`/tv/${data.id}/cast`}>
<a className="slider-title">
<Link
href="/tv/[tvId]/cast"
as={`/tv/${data.id}/cast`}
className="slider-title"
>
<span>{intl.formatMessage(messages.cast)}</span>
<ArrowRightCircleIcon />
</a>
</Link>
</div>
<Slider

@ -579,23 +579,23 @@ const UserList = () => {
</Table.TD>
<Table.TD>
<div className="flex items-center">
<Link href={`/users/${user.id}`}>
<a className="h-10 w-10 flex-shrink-0">
<Link
href={`/users/${user.id}`}
className="h-10 w-10 flex-shrink-0"
>
<img
className="h-10 w-10 rounded-full object-cover"
src={user.avatar}
alt=""
/>
</a>
</Link>
<div className="ml-4">
<Link href={`/users/${user.id}`}>
<a
<Link
href={`/users/${user.id}`}
className="text-base font-bold leading-5 transition duration-300 hover:underline"
data-testid="user-list-username-link"
>
{user.displayName}
</a>
</Link>
{user.displayName.toLowerCase() !== user.email && (
<div className="text-sm leading-5 text-gray-300">
@ -611,10 +611,11 @@ const UserList = () => {
[Permission.MANAGE_REQUESTS, Permission.REQUEST_VIEW],
{ type: 'or' }
) ? (
<Link href={`/users/${user.id}/requests`}>
<a className="text-sm leading-5 transition duration-300 hover:underline">
<Link
href={`/users/${user.id}/requests`}
className="text-sm leading-5 transition duration-300 hover:underline"
>
{user.requestCount}
</a>
</Link>
) : (
user.requestCount

@ -57,10 +57,9 @@ const ProfileHeader = ({ user, isSettingsPage }: ProfileHeaderProps) => {
href={
user.id === loggedInUser?.id ? '/profile' : `/users/${user.id}`
}
className="text-overseerr text-lg font-bold hover:to-purple-200 sm:text-2xl"
>
<a className="text-overseerr text-lg font-bold hover:to-purple-200 sm:text-2xl">
{user.displayName}
</a>
</Link>
{user.email && user.displayName.toLowerCase() !== user.email && (
<span className="text-sm text-gray-400 sm:ml-2 sm:text-lg">

@ -159,7 +159,7 @@ const UserProfile = () => {
: `/users/${user?.id}/requests?filter=all`
}
>
<a>{intl.formatNumber(user.requestCount)}</a>
{intl.formatNumber(user.requestCount)}
</Link>
</dd>
</div>
@ -291,11 +291,10 @@ const UserProfile = () => {
? '/profile/requests?filter=all'
: `/users/${user?.id}/requests?filter=all`
}
className="slider-title"
>
<a className="slider-title">
<span>{intl.formatMessage(messages.recentrequests)}</span>
<ArrowRightCircleIcon />
</a>
</Link>
</div>
<Slider
@ -332,11 +331,10 @@ const UserProfile = () => {
? '/profile/watchlist'
: `/users/${user?.id}/watchlist`
}
className="slider-title"
>
<a className="slider-title">
<span>{intl.formatMessage(messages.plexwatchlist)}</span>
<ArrowRightCircleIcon />
</a>
</Link>
</div>
<Slider

@ -21,11 +21,9 @@ const Custom404 = () => {
error: intl.formatMessage(messages.pagenotfound),
})}
</div>
<Link href="/">
<a className="mt-2 flex">
<Link href="/" className="mt-2 flex">
{intl.formatMessage(messages.returnHome)}
<ArrowRightCircleIcon className="ml-2 h-6 w-6" />
</a>
</Link>
</div>
);

@ -44,11 +44,9 @@ const Error: NextPage<ErrorProps> = ({ statusCode }) => {
})
: getErrorMessage(statusCode)}
</div>
<Link href="/">
<a className="mt-2 flex">
<Link href="/" className="mt-2 flex">
{intl.formatMessage(messages.returnHome)}
<ArrowRightCircleIcon className="ml-2 h-6 w-6" />
</a>
</Link>
</div>
);

Loading…
Cancel
Save