import { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { ApplicationState } from '../../../ducks';
import { MapInstance, MapInstancePaletteColorBar } from '../../../model';
export type ClientPalette = {
id: number;
clientId: number;
paletteId: number;
};
export type PaletteOption = {
id: number;
stopColor: string;
offset: number;
};
type PaletteColorBar = {
stops: PaletteOption[];
};
type UsePaletteBar = {
paletteOptions: PaletteOption[];
clientsPalettes: ClientPalette[];
handleRadio(event: number): void;
};
type UsePaletteBarState = {
mapInstances: MapInstance[];
selectedMapId: number;
selectedMapTypeId: number;
};
const isValidColorBar = (configMap: MapInstancePaletteColorBar): boolean =>
!!configMap && typeof configMap.paletteColorBar === 'string';
export const useConfigMap = (): UsePaletteBar => {
const { mapInstances, selectedMapId, selectedMapTypeId } = useSelector<
ApplicationState,
UsePaletteBarState
>(state => ({
mapInstances: state.map.mapInstances,
selectedMapId: state.map.selectedMapId,
selectedMapTypeId: state.map.selectedMapInstanceTypeId,
}));
const configMap = useMemo(() => {
if (selectedMapId > 0 && selectedMapTypeId > 0) {
return mapInstances.find(
m =>
m.mapInstanceType.id === selectedMapTypeId &&
m.mapInstanceType.map.id === selectedMapId,
)?.mapInstancePaletteColorBar;
}
return undefined;
}, [mapInstances, selectedMapId, selectedMapTypeId]);
const { clientsPalettes, paletteOptions, handleRadio } = useMemo(() => {
if (!configMap || !isValidColorBar(configMap)) {
return {
clientsPalettes,
paletteOptions: [],
handleRadio: null,
};
}
const pallete = JSON.parse(configMap.paletteColorBar) as PaletteColorBar;
return {
paletteOptions: pallete.stops.map(item => ({
...item,
id: item.id,
offset: !Number.isNaN(Number(item.offset)) ? Number(item.offset) : 1,
})),
clientsPalettes: clientsPalettes.map(
(item: { id: 1; clientId: 19; paletteId: 1 }) => {
return {
id: item.id,
clientId: item.clientId,
paletteId: item.paletteId,
};
},
),
};
}, [configMap]);
return {
clientsPalettes,
paletteOptions,
handleRadio,
};
};
'clientsPalettes' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.