refactor: replace the badge attribute by a useEffeect

Author: gauthier-th

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

src/components/Common/Badge/index.tsx

@@ -12,18 +12,11 @@ interface BadgeProps {
     | 'light';
   className?: string;
   href?: string;
-  replace?: boolean;
   children: React.ReactNode;
 }
 
 const Badge = (
-  {
-    badgeType = 'default',
-    className,
-    href,
-    replace = false,
-    children,
-  }: BadgeProps,
+  { badgeType = 'default', className, href, children }: BadgeProps,
   ref?: React.Ref<HTMLElement>
 ) => {
   const badgeStyle = [
@@ -100,7 +93,6 @@ const Badge = (
     return (
       <Link
         href={href}
-        replace={replace}
         className={badgeStyle.join(' ')}
         ref={ref as React.Ref<HTMLAnchorElement>}
       >

src/components/MovieDetails/index.tsx

@@ -118,9 +118,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
   const router = useRouter();
   const intl = useIntl();
   const { locale } = useLocale();
-  const [showManager, setShowManager] = useState(
-    router.query.manage == '1' ? true : false
-  );
+  const [showManager, setShowManager] = useState(false);
   const minStudios = 3;
   const [showMoreStudios, setShowMoreStudios] = useState(false);
   const [showIssueModal, setShowIssueModal] = useState(false);
@@ -158,8 +156,14 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
   );
 
   useEffect(() => {
-    setShowManager(router.query.manage == '1' ? true : false);
-  }, [router.query.manage]);
+    if (router.query.manage === '1') {
+      setShowManager(true);
+      router.replace({
+        pathname: router.pathname,
+        query: { movieId: router.query.movieId },
+      });
+    }
+  }, [router, router.query.manage]);
 
   const closeBlocklistModal = useCallback(
     () => setShowBlocklistModal(false),

src/components/StatusBadge/index.tsx

@@ -9,7 +9,6 @@ import defineMessages from '@app/utils/defineMessages';
 import { MediaStatus } from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
 import type { DownloadingItem } from '@server/lib/downloadtracker';
-import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
 
 const messages = defineMessages('components.StatusBadge', {
@@ -48,13 +47,11 @@ const StatusBadge = ({
   statusLabelOverride,
 }: StatusBadgeProps) => {
   const intl = useIntl();
-  const router = useRouter();
   const { hasPermission } = useUser();
   const settings = useSettings();
 
   let mediaLink: string | undefined;
   let mediaLinkDescription: string | undefined;
-  let mediaLinkReplace = false;
 
   const calculateDownloadProgress = (media: DownloadingItem) => {
     return Math.round(((media?.size - media?.sizeLeft) / media?.size) * 100);
@@ -98,8 +95,6 @@ const StatusBadge = ({
   } else if (hasPermission(Permission.MANAGE_REQUESTS)) {
     if (mediaType && tmdbId) {
       mediaLink = `/${mediaType}/${tmdbId}?manage=1`;
-      mediaLinkReplace =
-        router.asPath.split('?')[0] === `/${mediaType}/${tmdbId}`;
       mediaLinkDescription = intl.formatMessage(messages.managemedia, {
         mediaType: intl.formatMessage(
           mediaType === 'movie' ? globalMessages.movie : globalMessages.tvshow
@@ -174,7 +169,6 @@ const StatusBadge = ({
           <Badge
             badgeType="success"
             href={mediaLink}
-            replace={mediaLinkReplace}
             className={`${
               inProgress && 'relative !bg-gray-700/80 !px-0 hover:!bg-gray-700'
             } overflow-hidden`}
@@ -240,7 +234,6 @@ const StatusBadge = ({
           <Badge
             badgeType="success"
             href={mediaLink}
-            replace={mediaLinkReplace}
             className={`${
               inProgress && 'relative !bg-gray-700/80 !px-0 hover:!bg-gray-700'
             } overflow-hidden`}
@@ -306,7 +299,6 @@ const StatusBadge = ({
           <Badge
             badgeType="primary"
             href={mediaLink}
-            replace={mediaLinkReplace}
             className={`${
               inProgress && 'relative !bg-gray-700/80 !px-0 hover:!bg-gray-700'
             } overflow-hidden`}
@@ -361,11 +353,7 @@ const StatusBadge = ({
     case MediaStatus.PENDING:
       return (
         <Tooltip content={mediaLinkDescription}>
-          <Badge
-            badgeType="warning"
-            href={mediaLink}
-            replace={mediaLinkReplace}
-          >
+          <Badge badgeType="warning" href={mediaLink}>
             {intl.formatMessage(is4k ? messages.status4k : messages.status, {
               status: intl.formatMessage(globalMessages.pending),
             })}
@@ -376,7 +364,7 @@ const StatusBadge = ({
     case MediaStatus.BLOCKLISTED:
       return (
         <Tooltip content={mediaLinkDescription}>
-          <Badge badgeType="danger" href={mediaLink} replace={mediaLinkReplace}>
+          <Badge badgeType="danger" href={mediaLink}>
             {intl.formatMessage(is4k ? messages.status4k : messages.status, {
               status:
                 statusLabelOverride ??
@@ -400,7 +388,6 @@ const StatusBadge = ({
           <Badge
             badgeType="danger"
             href={mediaLink}
-            replace={mediaLinkReplace}
             className={`${
               inProgress && 'relative !bg-gray-700/80 !px-0 hover:!bg-gray-700'
             } overflow-hidden`}

src/components/TvDetails/index.tsx

@@ -118,7 +118,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
   const intl = useIntl();
   const { locale } = useLocale();
   const [showRequestModal, setShowRequestModal] = useState(false);
-  const [showManager, setShowManager] = useState(router.query.manage == '1');
+  const [showManager, setShowManager] = useState(false);
   const [showIssueModal, setShowIssueModal] = useState(false);
   const [isUpdating, setIsUpdating] = useState<boolean>(false);
   const [toggleWatchlist, setToggleWatchlist] = useState<boolean>(
@@ -154,8 +154,14 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
   );
 
   useEffect(() => {
-    setShowManager(router.query.manage == '1');
-  }, [router.query.manage]);
+    if (router.query.manage === '1') {
+      setShowManager(true);
+      router.replace({
+        pathname: router.pathname,
+        query: { movieId: router.query.movieId },
+      });
+    }
+  }, [router, router.query.manage]);
 
   const closeBlocklistModal = useCallback(
     () => setShowBlocklistModal(false),