From b8504c47befc66bc47a97a6baa5919bec0727c4a Mon Sep 17 00:00:00 2001
From: Davide Cavestro <davide.cavestro@gmail.com>
Date: Fri, 29 Mar 2024 14:49:50 +0100
Subject: [PATCH] Fix UI not serving media and tests expecting localhost:3000
 as base URL (#874)

* fix UI tests expecting localhost:3000 as base URL

* fix: avoid prefixing UI domain when serving media URLs
---
 .../Pages/PeoplePage/FaceCircleImage.test.tsx |  4 ++--
 ui/src/Pages/PeoplePage/PeoplePage.test.tsx   |  4 ++--
 .../SingleFaceGroup/SingleFaceGroup.test.tsx  |  8 ++++----
 .../photoGallery/MediaGallery.test.tsx        |  4 ++--
 .../photoGallery/ProtectedMedia.tsx           |  5 +----
 .../MediaSidebar/MediaSidebar.test.tsx        |  8 ++++----
 .../timelineGalleryReducer.test.ts            | 20 +++++++++----------
 .../timelineGallery/timelineTestData.ts       | 20 +++++++++----------
 8 files changed, 35 insertions(+), 38 deletions(-)

diff --git a/ui/src/Pages/PeoplePage/FaceCircleImage.test.tsx b/ui/src/Pages/PeoplePage/FaceCircleImage.test.tsx
index f0a23a1..99c6389 100644
--- a/ui/src/Pages/PeoplePage/FaceCircleImage.test.tsx
+++ b/ui/src/Pages/PeoplePage/FaceCircleImage.test.tsx
@@ -13,7 +13,7 @@ test('face circle image', () => {
       title: 'my_image.jpg',
       thumbnail: {
         __typename: 'MediaURL',
-        url: 'http://localhost:4001/photo/thumbnail_my_image_jpg_p9x8dLWr.jpg',
+        url: '/photo/thumbnail_my_image_jpg_p9x8dLWr.jpg',
         width: 1024,
         height: 641,
       },
@@ -32,6 +32,6 @@ test('face circle image', () => {
   expect(screen.getByRole('img')).toBeInTheDocument()
   expect(screen.getByRole('img')).toHaveAttribute(
     'src',
-    imageFace.media.thumbnail!.url
+    'http://localhost:3000/photo/thumbnail_my_image_jpg_p9x8dLWr.jpg'
   )
 })
diff --git a/ui/src/Pages/PeoplePage/PeoplePage.test.tsx b/ui/src/Pages/PeoplePage/PeoplePage.test.tsx
index 00c6835..ffeeaba 100644
--- a/ui/src/Pages/PeoplePage/PeoplePage.test.tsx
+++ b/ui/src/Pages/PeoplePage/PeoplePage.test.tsx
@@ -48,7 +48,7 @@ describe('PeoplePage component', () => {
                     title: 'image.jpg',
                     thumbnail: {
                       __typename: 'MediaURL',
-                      url: 'http://localhost:4001/photo/thumbnail_image_jpg_p9x8dLWr.jpg',
+                      url: '/photo/thumbnail_image_jpg_p9x8dLWr.jpg',
                       width: 1024,
                       height: 641,
                     },
@@ -119,7 +119,7 @@ describe('FaceDetails component', () => {
           id: '63',
           title: 'image.jpg',
           thumbnail: {
-            url: 'http://localhost:4001/photo/thumbnail_image_jpg_p9x8dLWr.jpg',
+            url: '/photo/thumbnail_image_jpg_p9x8dLWr.jpg',
             width: 1024,
             height: 641,
             __typename: 'MediaURL',
diff --git a/ui/src/Pages/PeoplePage/SingleFaceGroup/SingleFaceGroup.test.tsx b/ui/src/Pages/PeoplePage/SingleFaceGroup/SingleFaceGroup.test.tsx
index 7e6c9b5..6b3f072 100644
--- a/ui/src/Pages/PeoplePage/SingleFaceGroup/SingleFaceGroup.test.tsx
+++ b/ui/src/Pages/PeoplePage/SingleFaceGroup/SingleFaceGroup.test.tsx
@@ -37,13 +37,13 @@ test('single face group', async () => {
                   title: '122A2785-2.jpg',
                   thumbnail: {
                     __typename: 'MediaURL',
-                    url: 'http://localhost:4001/photo/thumbnail_122A2785-2_jpg_lFmZcaN5.jpg',
+                    url: '/photo/thumbnail_122A2785-2_jpg_lFmZcaN5.jpg',
                     width: 1024,
                     height: 1024,
                   },
                   highRes: {
                     __typename: 'MediaURL',
-                    url: 'http://localhost:4001/photo/122A2785-2_e4nCeMHU.jpg',
+                    url: '/photo/122A2785-2_e4nCeMHU.jpg',
                   },
                   favorite: false,
                 },
@@ -65,13 +65,13 @@ test('single face group', async () => {
                   title: 'image.png',
                   thumbnail: {
                     __typename: 'MediaURL',
-                    url: 'http://localhost:4001/photo/thumbnail_image_png_OwTDG5fM.jpg',
+                    url: '/photo/thumbnail_image_png_OwTDG5fM.jpg',
                     width: 1024,
                     height: 699,
                   },
                   highRes: {
                     __typename: 'MediaURL',
-                    url: 'http://localhost:4001/photo/image_A2YB0x3z.png',
+                    url: '/photo/image_A2YB0x3z.png',
                   },
                   favorite: false,
                 },
diff --git a/ui/src/components/photoGallery/MediaGallery.test.tsx b/ui/src/components/photoGallery/MediaGallery.test.tsx
index c735597..529b025 100644
--- a/ui/src/components/photoGallery/MediaGallery.test.tsx
+++ b/ui/src/components/photoGallery/MediaGallery.test.tsx
@@ -19,7 +19,7 @@ test('photo gallery with media', () => {
         id: '165',
         type: MediaType.Photo,
         thumbnail: {
-          url: 'http://localhost:4001/photo/thumbnail_3666760020_jpg_x76GG5pS.jpg',
+          url: '/photo/thumbnail_3666760020_jpg_x76GG5pS.jpg',
           width: 768,
           height: 1024,
           __typename: 'MediaURL',
@@ -96,7 +96,7 @@ describe('photo gallery presenting', () => {
           id: '165',
           type: MediaType.Photo,
           thumbnail: {
-            url: 'http://localhost:4001/photo/thumbnail_3666760020_jpg_x76GG5pS.jpg',
+            url: '/photo/thumbnail_3666760020_jpg_x76GG5pS.jpg',
             width: 768,
             height: 1024,
             __typename: 'MediaURL',
diff --git a/ui/src/components/photoGallery/ProtectedMedia.tsx b/ui/src/components/photoGallery/ProtectedMedia.tsx
index 5b50bdd..305f16d 100644
--- a/ui/src/components/photoGallery/ProtectedMedia.tsx
+++ b/ui/src/components/photoGallery/ProtectedMedia.tsx
@@ -13,10 +13,7 @@ const placeholder =
 const getProtectedUrl = (url?: string) => {
   if (url == undefined) return undefined
 
-  const imgUrl = new URL(
-    `${import.meta.env.BASE_URL}${url}`.replace(/\/\//g, '/'),
-    location.origin
-  )
+  const imgUrl = new URL(url, location.origin)
 
   const tokenRegex = location.pathname.match(/^\/share\/([\d\w]+)(\/?.*)$/)
   if (tokenRegex) {
diff --git a/ui/src/components/sidebar/MediaSidebar/MediaSidebar.test.tsx b/ui/src/components/sidebar/MediaSidebar/MediaSidebar.test.tsx
index 808bd6f..88bf446 100644
--- a/ui/src/components/sidebar/MediaSidebar/MediaSidebar.test.tsx
+++ b/ui/src/components/sidebar/MediaSidebar/MediaSidebar.test.tsx
@@ -19,13 +19,13 @@ describe('MediaSidebar', () => {
     type: MediaType.Photo,
     thumbnail: {
       __typename: 'MediaURL',
-      url: 'http://localhost:4001/photo/thumbnail.jpg',
+      url: '/photo/thumbnail.jpg',
       width: 1024,
       height: 839,
     },
     highRes: {
       __typename: 'MediaURL',
-      url: 'http://localhost:4001/photo/highres.jpg',
+      url: '/photo/highres.jpg',
       width: 5322,
       height: 4362,
     },
@@ -51,7 +51,7 @@ describe('MediaSidebar', () => {
     expect(screen.getByText('122A6069.jpg')).toBeInTheDocument()
     expect(screen.getByRole('img')).toHaveAttribute(
       'src',
-      'http://localhost:4001/photo/highres.jpg'
+      'http://localhost:3000/photo/highres.jpg'
     )
 
     expect(
@@ -74,7 +74,7 @@ describe('MediaSidebar', () => {
     expect(screen.getByText('122A6069.jpg')).toBeInTheDocument()
     expect(screen.getByRole('img')).toHaveAttribute(
       'src',
-      'http://localhost:4001/photo/highres.jpg'
+      'http://localhost:3000/photo/highres.jpg'
     )
 
     expect(screen.getByText('Set as album cover photo')).toBeInTheDocument()
diff --git a/ui/src/components/timelineGallery/timelineGalleryReducer.test.ts b/ui/src/components/timelineGallery/timelineGalleryReducer.test.ts
index b08f659..df82b41 100644
--- a/ui/src/components/timelineGallery/timelineGalleryReducer.test.ts
+++ b/ui/src/components/timelineGallery/timelineGalleryReducer.test.ts
@@ -49,14 +49,14 @@ describe('timeline gallery reducer', () => {
                   highRes: {
                     __typename: 'MediaURL',
                     height: 4480,
-                    url: 'http://localhost:4001/photo/122A2876_5cSPMiKL.jpg',
+                    url: '/photo/122A2876_5cSPMiKL.jpg',
                     width: 6720,
                   },
                   id: '1058',
                   thumbnail: {
                     __typename: 'MediaURL',
                     height: 682,
-                    url: 'http://localhost:4001/photo/thumbnail_122A2876_jpg_Kp1U80vD.jpg',
+                    url: '/photo/thumbnail_122A2876_jpg_Kp1U80vD.jpg',
                     width: 1024,
                   },
                   title: '122A2876.jpg',
@@ -87,14 +87,14 @@ describe('timeline gallery reducer', () => {
                   highRes: {
                     __typename: 'MediaURL',
                     height: 4118,
-                    url: 'http://localhost:4001/photo/122A2630-Edit_ySQWFAgE.jpg',
+                    url: '/photo/122A2630-Edit_ySQWFAgE.jpg',
                     width: 6177,
                   },
                   id: '1059',
                   thumbnail: {
                     __typename: 'MediaURL',
                     height: 682,
-                    url: 'http://localhost:4001/photo/thumbnail_122A2630-Edit_jpg_pwjtMkpy.jpg',
+                    url: '/photo/thumbnail_122A2630-Edit_jpg_pwjtMkpy.jpg',
                     width: 1024,
                   },
                   title: '122A2630-Edit.jpg',
@@ -113,14 +113,14 @@ describe('timeline gallery reducer', () => {
                   highRes: {
                     __typename: 'MediaURL',
                     height: 884,
-                    url: 'http://localhost:4001/photo/122A2785-2_mCnWjLdb.jpg',
+                    url: '/photo/122A2785-2_mCnWjLdb.jpg',
                     width: 884,
                   },
                   id: '1060',
                   thumbnail: {
                     __typename: 'MediaURL',
                     height: 1024,
-                    url: 'http://localhost:4001/photo/thumbnail_122A2785-2_jpg_CevmxEXf.jpg',
+                    url: '/photo/thumbnail_122A2785-2_jpg_CevmxEXf.jpg',
                     width: 1024,
                   },
                   title: '122A2785-2.jpg',
@@ -145,14 +145,14 @@ describe('timeline gallery reducer', () => {
                   highRes: {
                     __typename: 'MediaURL',
                     height: 4118,
-                    url: 'http://localhost:4001/photo/122A2630-Edit_em9g89qg.jpg',
+                    url: '/photo/122A2630-Edit_em9g89qg.jpg',
                     width: 6177,
                   },
                   id: '1056',
                   thumbnail: {
                     __typename: 'MediaURL',
                     height: 682,
-                    url: 'http://localhost:4001/photo/thumbnail_122A2630-Edit_jpg_aJPCSDDl.jpg',
+                    url: '/photo/thumbnail_122A2630-Edit_jpg_aJPCSDDl.jpg',
                     width: 1024,
                   },
                   title: '122A2630-Edit.jpg',
@@ -177,13 +177,13 @@ describe('timeline gallery reducer', () => {
                   type: MediaType.Photo,
                   thumbnail: {
                     __typename: 'MediaURL',
-                    url: 'http://localhost:4001/photo/thumbnail_122A2559_jpg_MsOJtPi8.jpg',
+                    url: '/photo/thumbnail_122A2559_jpg_MsOJtPi8.jpg',
                     width: 1024,
                     height: 712,
                   },
                   highRes: {
                     __typename: 'MediaURL',
-                    url: 'http://localhost:4001/photo/122A2559_FDsQHuBN.jpg',
+                    url: '/photo/122A2559_FDsQHuBN.jpg',
                     width: 6246,
                     height: 4346,
                   },
diff --git a/ui/src/components/timelineGallery/timelineTestData.ts b/ui/src/components/timelineGallery/timelineTestData.ts
index 2163220..f08d33b 100644
--- a/ui/src/components/timelineGallery/timelineTestData.ts
+++ b/ui/src/components/timelineGallery/timelineTestData.ts
@@ -9,13 +9,13 @@ export const timelineData: myTimeline_myTimeline[] = [
     type: MediaType.Photo,
     thumbnail: {
       __typename: 'MediaURL',
-      url: 'http://localhost:4001/photo/thumbnail_122A2876_jpg_Kp1U80vD.jpg',
+      url: '/photo/thumbnail_122A2876_jpg_Kp1U80vD.jpg',
       width: 1024,
       height: 682,
     },
     highRes: {
       __typename: 'MediaURL',
-      url: 'http://localhost:4001/photo/122A2876_5cSPMiKL.jpg',
+      url: '/photo/122A2876_5cSPMiKL.jpg',
       width: 6720,
       height: 4480,
     },
@@ -32,13 +32,13 @@ export const timelineData: myTimeline_myTimeline[] = [
     type: MediaType.Photo,
     thumbnail: {
       __typename: 'MediaURL',
-      url: 'http://localhost:4001/photo/thumbnail_122A2630-Edit_jpg_pwjtMkpy.jpg',
+      url: '/photo/thumbnail_122A2630-Edit_jpg_pwjtMkpy.jpg',
       width: 1024,
       height: 682,
     },
     highRes: {
       __typename: 'MediaURL',
-      url: 'http://localhost:4001/photo/122A2630-Edit_ySQWFAgE.jpg',
+      url: '/photo/122A2630-Edit_ySQWFAgE.jpg',
       width: 6177,
       height: 4118,
     },
@@ -55,13 +55,13 @@ export const timelineData: myTimeline_myTimeline[] = [
     type: MediaType.Photo,
     thumbnail: {
       __typename: 'MediaURL',
-      url: 'http://localhost:4001/photo/thumbnail_122A2785-2_jpg_CevmxEXf.jpg',
+      url: '/photo/thumbnail_122A2785-2_jpg_CevmxEXf.jpg',
       width: 1024,
       height: 1024,
     },
     highRes: {
       __typename: 'MediaURL',
-      url: 'http://localhost:4001/photo/122A2785-2_mCnWjLdb.jpg',
+      url: '/photo/122A2785-2_mCnWjLdb.jpg',
       width: 884,
       height: 884,
     },
@@ -78,13 +78,13 @@ export const timelineData: myTimeline_myTimeline[] = [
     type: MediaType.Photo,
     thumbnail: {
       __typename: 'MediaURL',
-      url: 'http://localhost:4001/photo/thumbnail_122A2630-Edit_jpg_aJPCSDDl.jpg',
+      url: '/photo/thumbnail_122A2630-Edit_jpg_aJPCSDDl.jpg',
       width: 1024,
       height: 682,
     },
     highRes: {
       __typename: 'MediaURL',
-      url: 'http://localhost:4001/photo/122A2630-Edit_em9g89qg.jpg',
+      url: '/photo/122A2630-Edit_em9g89qg.jpg',
       width: 6177,
       height: 4118,
     },
@@ -101,13 +101,13 @@ export const timelineData: myTimeline_myTimeline[] = [
     type: MediaType.Photo,
     thumbnail: {
       __typename: 'MediaURL',
-      url: 'http://localhost:4001/photo/thumbnail_122A2559_jpg_MsOJtPi8.jpg',
+      url: '/photo/thumbnail_122A2559_jpg_MsOJtPi8.jpg',
       width: 1024,
       height: 712,
     },
     highRes: {
       __typename: 'MediaURL',
-      url: 'http://localhost:4001/photo/122A2559_FDsQHuBN.jpg',
+      url: '/photo/122A2559_FDsQHuBN.jpg',
       width: 6246,
       height: 4346,
     },
