🐛 External URL being '' in media requests (#1355)

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

src/server/api/routers/media-request.ts

@@ -7,6 +7,7 @@ import { MediaRequest, Users } from '~/widgets/media-requests/media-request-type
 
 import { createTRPCRouter, publicProcedure } from '../trpc';
 import { MediaRequestStatsWidget } from '~/widgets/media-requests/MediaRequestStatsTile';
+import { removeTrailingSlash } from 'next/dist/shared/lib/router/utils/remove-trailing-slash';
 
 export const mediaRequestsRouter = createTRPCRouter({
   allMedia: publicProcedure
@@ -32,10 +33,12 @@ export const mediaRequestsRouter = createTRPCRouter({
         })
           .then(async (response) => {
             const body = (await response.json()) as OverseerrResponse;
-            const appUrl = input.widget.properties.replaceLinksWithExternalHost
+            let appUrl = input.widget.properties.replaceLinksWithExternalHost && app.behaviour.externalUrl?.length > 0
               ? app.behaviour.externalUrl
               : app.url;
 
+            appUrl = removeTrailingSlash(appUrl);
+
             const requests = await Promise.all(
               body.results.map(async (item): Promise<MediaRequest> => {
                 const genericItem = await retrieveDetailsForItem(

src/widgets/media-requests/MediaRequestListTile.tsx

@@ -1,5 +1,5 @@
 import {
-  ActionIcon,
+  ActionIcon, Anchor,
   Badge,
   Card,
   Center,
@@ -155,15 +155,9 @@ function MediaRequestListTile({ widget }: MediaRequestListWidgetProps) {
                     {item.airDate && <Text>{item.airDate.split('-')[0]}</Text>}
                     <MediaRequestStatusBadge status={item.status} />
                   </Group>
-                  <Text
-                    sx={{ cursor: 'pointer', '&:hover': { textDecoration: 'underline' } }}
-                    lineClamp={1}
-                    weight="bold"
-                    component="a"
-                    href={item.href}
-                  >
+                  <Anchor href={item.href}>
                     {item.name}
-                  </Text>
+                  </Anchor>
                 </Stack>
               </Flex>
               <Stack justify="center">