feat: add map API communication
Context:
In !43 (merged) we've prepared full map data management but without covering aspect of communication with API. !43 (merged) creates only solution for handling and fetching backend data.
Objective:
This PR adds API communication of the map, which means simply using actions and data in the components.
It includes:
- initializing map with backend data
- pushing all fetched data to the store
- middleware that watched for changes in map/modelId and rebuilds local map data
- unit tests of the above
Additionally:
- Prettier config upgrade
Merge request reports
Activity
assigned to @AdrianOrlow
44 49 new TileLayer({ 45 50 visible: true, 46 51 source: new XYZ({ 47 url: 'https://pdmap.uni.lu/map_images/9d4911bdeeea752f076e57a91d9b1f45/_nested0/{z}/{x}/{y}.PNG', 48 // TODO: build url from data in redux 52 url: `${BASE_MAP_IMAGES_URL}/map_images/${project?.directory}/${currentBackgroundImagePath}/{z}/{x}/{y}.PNG`, changed this line in version 4 of the diff
added 48 commits
-
dd6156ed...77c58674 - 47 commits from branch
development - 3143b390 - Merge branch 'development' into feature/MIN-103-map-api-comm
-
dd6156ed...77c58674 - 47 commits from branch
added 2 commits
28 29 export const store = configureStore({ 29 30 reducer: reducers, 30 31 devTools: true, 32 enhancers: [applyMiddleware(mapMiddleware)], -
https://redux-toolkit.js.org/api/other-exports/#applymiddleware
Redux's applyMiddleware. You should not need to use this directly.
@teoMiesiac I don't understand this statement.
applyMiddlewareis used directly in the docs, [here]changed this line in version 6 of the diff
- src/redux/map/middleware/map.middleware.ts 0 → 100644
1 import { getUpdatedMapData } from '@/utils/map/getUpdatedMapData'; 2 import { Middleware, MiddlewareAPI } from '@reduxjs/toolkit'; 3 import type { AppDispatch, RootState } from '../../store'; 4 import { setMapData } from '../map.slice'; 5 import { MiddlewareAllowedAction } from '../map.types'; 6 import { checkIfIsActionValid } from './checkIfIsActionValid'; 7 import { getUpdatedModel } from './getUpdatedModel'; 8 9 /* prettier-ignore */ 10 export const mapMiddleware: Middleware = 11 ({ getState, dispatch }: MiddlewareAPI<AppDispatch, RootState>) => 12 (next: AppDispatch) => 13 // eslint-disable-next-line consistent-return 14 (action: MiddlewareAllowedAction) => { changed this line in version 6 of the diff
1 import type { RootState } from '@/redux/store'; 2 import { MIDDLEWARE_ALLOWED_ACTIONS } from '../map.constants'; 3 import { MiddlewareAllowedAction } from '../map.types'; 4 5 export const checkIfIsActionValid = ( 6 action: MiddlewareAllowedAction, 7 state: RootState, 8 ): boolean => { 9 const isAllowedAction = MIDDLEWARE_ALLOWED_ACTIONS.some(allowedAction => changed this line in version 6 of the diff
1 import type { RootState } from '@/redux/store'; 2 import { MIDDLEWARE_ALLOWED_ACTIONS } from '../map.constants'; 3 import { MiddlewareAllowedAction } from '../map.types'; 4 5 export const checkIfIsActionValid = ( 6 action: MiddlewareAllowedAction, 7 state: RootState, 8 ): boolean => { 9 const isAllowedAction = MIDDLEWARE_ALLOWED_ACTIONS.some(allowedAction => 10 action.type.includes(allowedAction), 11 ); 12 13 const { modelId: currentModelId } = state.map.data; changed this line in version 6 of the diff
- src/redux/map/middleware/map.middleware.ts 0 → 100644
1 import { getUpdatedMapData } from '@/utils/map/getUpdatedMapData'; 2 import { Middleware, MiddlewareAPI } from '@reduxjs/toolkit'; 3 import type { AppDispatch, RootState } from '../../store'; 4 import { setMapData } from '../map.slice'; 5 import { MiddlewareAllowedAction } from '../map.types'; 6 import { checkIfIsActionValid } from './checkIfIsActionValid'; 7 import { getUpdatedModel } from './getUpdatedModel'; 8 9 /* prettier-ignore */ 10 export const mapMiddleware: Middleware = 11 ({ getState, dispatch }: MiddlewareAPI<AppDispatch, RootState>) => 12 (next: AppDispatch) => 13 // eslint-disable-next-line consistent-return 14 (action: MiddlewareAllowedAction) => { 15 const state = getState(); 16 const isActionValid = checkIfIsActionValid(action, state); -
If you use createListenerMiddleware you would have such logic out of the box. https://redux-toolkit.js.org/api/createListenerMiddleware you have access to store and dispatch https://redux-toolkit.js.org/api/createListenerMiddleware#overall-purpose it would probably let you get rid of lot of code
-
@teoMiesiac
createListenerMiddlewarewas my first way to go but I had weird issues with this solution regarding dependency cycles. I'll try it again but if it take me a lot of time, I'll stick around with the current solution changed this line in version 6 of the diff
added 1 commit
- ec7c962f - feat: rewrite map middleware with use of RTK util
mentioned in commit ed22d825
