fix(overview-images): add directory to path in useOverviewImageUrl

src/components/FunctionalArea/Modal/OverviewImagesModal/OverviewImagesModal.component.test.tsx

@@ -18,6 +18,8 @@ jest.mock('./utils/useOverviewImageSize', () => ({
   })),
 }));
 
+const PROJECT_DIRECTORY = 'directory';
+
 const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
   const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
 
@@ -42,6 +44,7 @@ describe('OverviewImagesModal - component', () => {
             ...projectFixture,
             overviewImageViews: [],
             topOverviewImage: PROJECT_OVERVIEW_IMAGE_MOCK,
+            directory: PROJECT_DIRECTORY,
           },
           loading: 'succeeded',
           error: { message: '', name: '' },
@@ -70,6 +73,7 @@ describe('OverviewImagesModal - component', () => {
             ...projectFixture,
             overviewImageViews: [PROJECT_OVERVIEW_IMAGE_MOCK],
             topOverviewImage: PROJECT_OVERVIEW_IMAGE_MOCK,
+            directory: PROJECT_DIRECTORY,
           },
           loading: 'succeeded',
           error: { message: '', name: '' },
@@ -91,7 +95,7 @@ describe('OverviewImagesModal - component', () => {
 
     it('should render image with valid src', () => {
       const imageElement = screen.getByAltText('overview');
-      const result = `${BASE_MAP_IMAGES_URL}/map_images/${PROJECT_OVERVIEW_IMAGE_MOCK.filename}`;
+      const result = `${BASE_MAP_IMAGES_URL}/map_images/${PROJECT_DIRECTORY}/${PROJECT_OVERVIEW_IMAGE_MOCK.filename}`;
       expect(imageElement.getAttribute('src')).toBe(result);
     });
 

src/components/FunctionalArea/Modal/OverviewImagesModal/utils/useOverviewImage.test.ts

@@ -7,6 +7,8 @@ import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithSto
 import { renderHook } from '@testing-library/react';
 import { useOverviewImage } from './useOverviewImage';
 
+const PROJECT_DIRECTORY = 'directory';
+
 describe('useOverviewImage - hook', () => {
   describe('when image data is invalid', () => {
     const { Wrapper } = getReduxWrapperWithStore({
@@ -15,6 +17,7 @@ describe('useOverviewImage - hook', () => {
           ...projectFixture,
           overviewImageViews: [],
           topOverviewImage: PROJECT_OVERVIEW_IMAGE_MOCK,
+          directory: PROJECT_DIRECTORY,
         },
         loading: 'succeeded',
         error: { message: '', name: '' },
@@ -48,6 +51,7 @@ describe('useOverviewImage - hook', () => {
           ...projectFixture,
           overviewImageViews: [PROJECT_OVERVIEW_IMAGE_MOCK],
           topOverviewImage: PROJECT_OVERVIEW_IMAGE_MOCK,
+          directory: PROJECT_DIRECTORY,
         },
         loading: 'succeeded',
         error: { message: '', name: '' },
@@ -66,7 +70,7 @@ describe('useOverviewImage - hook', () => {
     });
 
     it('should return default size of image and valid imageUrl', () => {
-      const imageUrl = `${BASE_MAP_IMAGES_URL}/map_images/${PROJECT_OVERVIEW_IMAGE_MOCK.filename}`;
+      const imageUrl = `${BASE_MAP_IMAGES_URL}/map_images/${PROJECT_DIRECTORY}/${PROJECT_OVERVIEW_IMAGE_MOCK.filename}`;
 
       expect(result.current).toMatchObject({
         imageUrl,
@@ -88,6 +92,7 @@ describe('useOverviewImage - hook', () => {
             },
           ],
           topOverviewImage: PROJECT_OVERVIEW_IMAGE_MOCK,
+          directory: PROJECT_DIRECTORY,
         },
         loading: 'succeeded',
         error: { message: '', name: '' },
@@ -109,7 +114,7 @@ describe('useOverviewImage - hook', () => {
     );
 
     it('should return size of image and valid imageUrl', () => {
-      const imageUrl = `${BASE_MAP_IMAGES_URL}/map_images/${PROJECT_OVERVIEW_IMAGE_MOCK.filename}`;
+      const imageUrl = `${BASE_MAP_IMAGES_URL}/map_images/${PROJECT_DIRECTORY}/${PROJECT_OVERVIEW_IMAGE_MOCK.filename}`;
 
       expect(result.current).toMatchObject({
         imageUrl,

src/components/FunctionalArea/Modal/OverviewImagesModal/utils/useOverviewImageUrl.test.ts

@@ -6,6 +6,8 @@ import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithSto
 import { renderHook } from '@testing-library/react';
 import { useOverviewImageUrl } from './useOverviewImageUrl';
 
+const PROJECT_DIRECTORY = 'directory';
+
 describe('useOverviewImageUrl - hook', () => {
   describe('when currentImage data is valid', () => {
     const { Wrapper } = getReduxWrapperWithStore({
@@ -14,6 +16,7 @@ describe('useOverviewImageUrl - hook', () => {
           ...projectFixture,
           overviewImageViews: [],
           topOverviewImage: PROJECT_OVERVIEW_IMAGE_MOCK,
+          directory: PROJECT_DIRECTORY,
         },
         loading: 'succeeded',
         error: { message: '', name: '' },
@@ -41,6 +44,7 @@ describe('useOverviewImageUrl - hook', () => {
           ...projectFixture,
           overviewImageViews: [PROJECT_OVERVIEW_IMAGE_MOCK],
           topOverviewImage: PROJECT_OVERVIEW_IMAGE_MOCK,
+          directory: PROJECT_DIRECTORY,
         },
         loading: 'succeeded',
         error: { message: '', name: '' },
@@ -58,7 +62,7 @@ describe('useOverviewImageUrl - hook', () => {
       const { result } = renderHook(() => useOverviewImageUrl(), { wrapper: Wrapper });
 
       expect(result.current).toBe(
-        `${BASE_MAP_IMAGES_URL}/map_images/${PROJECT_OVERVIEW_IMAGE_MOCK.filename}`,
+        `${BASE_MAP_IMAGES_URL}/map_images/${PROJECT_DIRECTORY}/${PROJECT_OVERVIEW_IMAGE_MOCK.filename}`,
       );
     });
   });

src/components/FunctionalArea/Modal/OverviewImagesModal/utils/useOverviewImageUrl.ts

 import { BASE_MAP_IMAGES_URL } from '@/constants';
-import { currentOverviewImageSelector } from '@/redux/project/project.selectors';
+import {
+  currentOverviewImageSelector,
+  projectDirectorySelector,
+} from '@/redux/project/project.selectors';
 import { useSelector } from 'react-redux';
 
 export const useOverviewImageUrl = (): string => {
   const currentImage = useSelector(currentOverviewImageSelector);
-
-  if (!currentImage) {
+  const directory = useSelector(projectDirectorySelector);
+  if (!currentImage || !directory) {
     return '';
   }
 
-  return `${BASE_MAP_IMAGES_URL}/map_images/${currentImage.filename}`;
+  return `${BASE_MAP_IMAGES_URL}/map_images/${directory}/${currentImage.filename}`;
 };