From 0bc669921bd66374c559216c85f75005d680b538 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Thu, 6 Feb 2025 16:36:25 +0100
Subject: [PATCH] when adding overlay allow to select group
---
.../UserOverlayForm.component.test.tsx | 4 +--
.../hooks/useUserOverlayForm.ts | 1 +
.../UserOverlays/UserOverlays.component.tsx | 16 ++++++++----
src/redux/overlays/overlays.mock.ts | 2 ++
src/redux/overlays/overlays.reducers.test.ts | 4 ++-
src/redux/overlays/overlays.thunks.ts | 25 +++++++++++++------
.../addDataOverlay/addDataOverlay.test.ts | 3 +++
.../overlays/addDataOverlay/addDataOverlay.ts | 5 ++++
8 files changed, 44 insertions(+), 16 deletions(-)
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlayForm/UserOverlayForm.component.test.tsx b/src/components/Map/Drawer/OverlaysDrawer/UserOverlayForm/UserOverlayForm.component.test.tsx
index be08de75..6c34319e 100644
--- a/src/components/Map/Drawer/OverlaysDrawer/UserOverlayForm/UserOverlayForm.component.test.tsx
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlayForm/UserOverlayForm.component.test.tsx
@@ -220,7 +220,7 @@ describe('UserOverlayForm - Component', () => {
.onPost(apiPath.uploadOverlayFileContent(createdOverlayFileFixture.id))
.reply(HttpStatusCode.Ok, uploadedOverlayFileContentFixture);
- mockedAxiosClient
+ mockedAxiosNewClient
.onPost(apiPath.createOverlay(projectFixture.projectId))
.reply(HttpStatusCode.Ok, overlayFixture);
@@ -286,7 +286,7 @@ describe('UserOverlayForm - Component', () => {
.onPost(apiPath.uploadOverlayFileContent(createdOverlayFileFixture.id))
.reply(HttpStatusCode.Ok, uploadedOverlayFileContentFixture);
- mockedAxiosClient
+ mockedAxiosNewClient
.onPost(apiPath.createOverlay(projectFixture.projectId))
.reply(HttpStatusCode.Ok, overlayFixture);
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlayForm/hooks/useUserOverlayForm.ts b/src/components/Map/Drawer/OverlaysDrawer/UserOverlayForm/hooks/useUserOverlayForm.ts
index 079266ef..7f477bc9 100644
--- a/src/components/Map/Drawer/OverlaysDrawer/UserOverlayForm/hooks/useUserOverlayForm.ts
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlayForm/hooks/useUserOverlayForm.ts
@@ -114,6 +114,7 @@ export const useUserOverlayForm = (): ReturnType => {
name,
projectId,
type: type.id,
+ group,
}),
);
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlays.component.tsx b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlays.component.tsx
index 99b57046..06fad4e2 100644
--- a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlays.component.tsx
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlays.component.tsx
@@ -7,10 +7,13 @@ import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { authenticatedUserSelector, loadingUserSelector } from '@/redux/user/user.selectors';
import { Button } from '@/shared/Button';
import { userOverlaysDataSelector } from '@/redux/overlays/overlays.selectors';
+import { overlayGroupsSelector } from '@/redux/overlayGroup/overlayGroup.selectors';
+import React from 'react';
import { UserOverlaysGroup } from './UserOverlaysGroup';
export const UserOverlays = (): JSX.Element => {
const userOverlays = useAppSelector(userOverlaysDataSelector);
+ const overlayGroups = useAppSelector(overlayGroupsSelector);
const dispatch = useAppDispatch();
const loadingUser = useAppSelector(loadingUserSelector);
@@ -48,11 +51,14 @@ export const UserOverlays = (): JSX.Element => {
Add overlay
</Button>
</div>
- <UserOverlaysGroup
- groupName="Without group"
- groupId={null}
- overlays={userOverlays || []}
- />
+ {overlayGroups.map(group => (
+ <UserOverlaysGroup
+ key={group.id}
+ groupName={group.name}
+ groupId={group.id}
+ overlays={(userOverlays || []).filter(overlay => overlay.group === group.id)}
+ />
+ ))}
</>
)}
</div>
diff --git a/src/redux/overlays/overlays.mock.ts b/src/redux/overlays/overlays.mock.ts
index 7a22bee0..cc43a9ac 100644
--- a/src/redux/overlays/overlays.mock.ts
+++ b/src/redux/overlays/overlays.mock.ts
@@ -1,5 +1,6 @@
import { DEFAULT_ERROR } from '@/constants/errors';
import { MapOverlay } from '@/types/models';
+import { DEFAULT_GROUP } from '@/components/Map/Drawer/OverlaysDrawer/UserOverlayForm/UserOverlayForm.constants';
import { OverlaysState } from './overlays.types';
export const OVERLAYS_INITIAL_STATE_MOCK: OverlaysState = {
@@ -120,6 +121,7 @@ export const ADD_OVERLAY_MOCK = {
name: 'test',
projectId: 'pd',
type: 'GENERIC',
+ group: DEFAULT_GROUP,
};
export const USER_OVERLAYS_MOCK: MapOverlay[] = [
diff --git a/src/redux/overlays/overlays.reducers.test.ts b/src/redux/overlays/overlays.reducers.test.ts
index f61c7766..d1ac1b6f 100644
--- a/src/redux/overlays/overlays.reducers.test.ts
+++ b/src/redux/overlays/overlays.reducers.test.ts
@@ -139,7 +139,9 @@ describe('overlays reducer', () => {
.onPost(apiPath.uploadOverlayFileContent(123))
.reply(HttpStatusCode.Ok, uploadedOverlayFileContentFixture);
- mockedAxiosClient.onPost(apiPath.createOverlay('pd')).reply(HttpStatusCode.Ok, overlayFixture);
+ mockedAxiosNewClient
+ .onPost(apiPath.createOverlay('pd'))
+ .reply(HttpStatusCode.Ok, overlayFixture);
await store.dispatch(addOverlay(ADD_OVERLAY_MOCK));
const { loading, error } = store.getState().overlays.addOverlay;
diff --git a/src/redux/overlays/overlays.thunks.ts b/src/redux/overlays/overlays.thunks.ts
index b87588f5..94f292ae 100644
--- a/src/redux/overlays/overlays.thunks.ts
+++ b/src/redux/overlays/overlays.thunks.ts
@@ -5,7 +5,7 @@ import {
uploadedOverlayFileContentSchema,
} from '@/models/mapOverlaySchema';
import { axiosInstance, axiosInstanceNewAPI } from '@/services/api/utils/axiosInstance';
-import { CreatedOverlayFile, MapOverlay, PageOf } from '@/types/models';
+import { CreatedOverlayFile, MapOverlay, OverlayGroup, PageOf } from '@/types/models';
import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema';
import { createAsyncThunk } from '@reduxjs/toolkit';
import { z } from 'zod';
@@ -155,6 +155,7 @@ type CreatedOverlayArgs = {
name: string;
type: string;
projectId: string;
+ group: OverlayGroup;
};
const creteOverlay = async ({
@@ -163,20 +164,26 @@ const creteOverlay = async ({
type,
name,
projectId,
+ group,
}: CreatedOverlayArgs): Promise<MapOverlay | undefined> => {
const data = {
name,
description,
filename: createdFile.filename,
- type,
+ colorSchemaType: type,
fileId: createdFile.id.toString(),
+ group: group.id,
+ public: false,
+ orderIndex: 1,
};
- const overlay = new URLSearchParams(data);
-
- const response = await axiosInstance.post<MapOverlay>(apiPath.createOverlay(projectId), overlay, {
- withCredentials: true,
- });
+ const response = await axiosInstanceNewAPI.post<MapOverlay>(
+ apiPath.createOverlay(projectId),
+ data,
+ {
+ withCredentials: true,
+ },
+ );
PluginsEventBus.dispatchEvent('onAddDataOverlay', response.data);
@@ -192,12 +199,13 @@ type AddOverlayArgs = {
type: string;
name: string;
projectId: string;
+ group: OverlayGroup;
};
export const addOverlay = createAsyncThunk<undefined, AddOverlayArgs, ThunkConfig>(
'overlays/addOverlay',
async (
- { filename, content, description, name, type, projectId },
+ { filename, content, description, name, type, projectId, group },
{ dispatch },
// eslint-disable-next-line consistent-return
) => {
@@ -218,6 +226,7 @@ export const addOverlay = createAsyncThunk<undefined, AddOverlayArgs, ThunkConfi
name,
type,
projectId,
+ group,
});
await dispatch(getAllUserOverlaysByCreator());
diff --git a/src/services/pluginsManager/map/overlays/addDataOverlay/addDataOverlay.test.ts b/src/services/pluginsManager/map/overlays/addDataOverlay/addDataOverlay.test.ts
index 25e36dc9..e1bbdd74 100644
--- a/src/services/pluginsManager/map/overlays/addDataOverlay/addDataOverlay.test.ts
+++ b/src/services/pluginsManager/map/overlays/addDataOverlay/addDataOverlay.test.ts
@@ -13,6 +13,7 @@ import {
ERROR_OVERLAY_NAME_NOT_PROVIDED,
ERROR_PROJECT_ID_NOT_FOUND,
} from '@/services/pluginsManager/errorMessages';
+import { DEFAULT_GROUP } from '@/components/Map/Drawer/OverlaysDrawer/UserOverlayForm/UserOverlayForm.constants';
import { addDataOverlay } from './addDataOverlay';
import { DEFAULT_FILE_NAME, DEFAULT_TYPE } from './addDataOverlay.constants';
@@ -69,6 +70,7 @@ describe('addDataOverlay', () => {
name: overlay.name,
projectId: projectFixture.projectId,
type: overlay.type,
+ group: DEFAULT_GROUP,
});
});
@@ -119,6 +121,7 @@ describe('addDataOverlay', () => {
name: overlay.name,
projectId: projectFixture.projectId,
type: DEFAULT_TYPE,
+ group: DEFAULT_GROUP,
});
});
});
diff --git a/src/services/pluginsManager/map/overlays/addDataOverlay/addDataOverlay.ts b/src/services/pluginsManager/map/overlays/addDataOverlay/addDataOverlay.ts
index d52b3518..c74771d9 100644
--- a/src/services/pluginsManager/map/overlays/addDataOverlay/addDataOverlay.ts
+++ b/src/services/pluginsManager/map/overlays/addDataOverlay/addDataOverlay.ts
@@ -5,6 +5,8 @@ import {
ERROR_OVERLAY_NAME_NOT_PROVIDED,
ERROR_PROJECT_ID_NOT_FOUND,
} from '@/services/pluginsManager/errorMessages';
+import { OverlayGroup } from '@/types/models';
+import { DEFAULT_GROUP } from '@/components/Map/Drawer/OverlaysDrawer/UserOverlayForm/UserOverlayForm.constants';
import { DEFAULT_FILE_NAME, DEFAULT_TYPE } from './addDataOverlay.constants';
import { getOverlayContent } from './addDataOverlay.utils';
@@ -14,6 +16,7 @@ type AddDataOverlayArgs = {
filename?: string;
fileContent: string;
type?: string;
+ group?: OverlayGroup;
};
export const addDataOverlay = async ({
@@ -22,6 +25,7 @@ export const addDataOverlay = async ({
filename,
fileContent,
type,
+ group,
}: AddDataOverlayArgs): Promise<void> => {
const { dispatch, getState } = store;
const projectId = projectIdSelector(getState());
@@ -40,6 +44,7 @@ export const addDataOverlay = async ({
name,
projectId,
type: type || DEFAULT_TYPE,
+ group: group || DEFAULT_GROUP,
}),
);
};
--
GitLab