Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/interactive-supports-focus */
import {
getDefaultSearchTab,
getSearchValuesArrayAndTrimToSeven,
} from '@/components/FunctionalArea/TopBar/SearchBar/SearchBar.utils';
import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
import { targetElementLeanResponseSchema } from '@/models/targetElementLeanResponseSchema';
import { apiPath } from '@/redux/apiPath';
import { BIO_ENTITY_FETCHING_ERROR_PREFIX } from '@/redux/bioEntity/bioEntity.constants';
import { openSearchDrawerWithSelectedTab } from '@/redux/drawer/drawer.slice';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { mapModelIdSelector, mapOpenedMapsSelector } from '@/redux/map/map.selectors';
import { openMapAndSetActive, setActiveMap } from '@/redux/map/map.slice';
import { closeModal } from '@/redux/modal/modal.slice';
import { modelsNameMapSelector } from '@/redux/models/models.selectors';
import { getSearchData } from '@/redux/search/search.thunks';
import { axiosInstanceNewAPI } from '@/services/api/utils/axiosInstance';
import { PluginsEventBus } from '@/services/pluginsManager/pluginsEventBus';
import { LoadingIndicator } from '@/shared/LoadingIndicator';
import { BioEntityContent, BioEntityResponse, TargetElement } from '@/types/models';
import { getErrorMessage } from '@/utils/getErrorMessage';
import { showToast } from '@/utils/showToast';
import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema';
import { useEffect, useState } from 'react';
interface Props {
target: TargetElement;
}
export const ElementLink = ({ target }: Props): JSX.Element => {
const dispatch = useAppDispatch();
const openedMaps = useAppSelector(mapOpenedMapsSelector);
const currentModelId = useAppSelector(mapModelIdSelector);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [data, setData] = useState<BioEntityContent | undefined>(undefined);
const elementId = data?.bioEntity.elementId;
const mapsNames = useAppSelector(modelsNameMapSelector);
const isMapAlreadyOpened = (modelId: number): boolean =>
openedMaps.some(map => map.modelId === modelId);
const fetchElementLinkData = async (searchQuery: string): Promise<void> => {
try {
const response = await axiosInstanceNewAPI
.get<BioEntityResponse>(
apiPath.getBioEntityContentsStringWithQuery({
searchQuery,
isPerfectMatch: true,
}),
)
.finally(() => {
setIsLoading(false);
});
const isDataValid = validateDataUsingZodSchema(
response.data,
targetElementLeanResponseSchema,
);
if (isDataValid && response.data.content?.[FIRST_ARRAY_ELEMENT]) {
setData(response.data.content[FIRST_ARRAY_ELEMENT]);
}
} catch (error) {
const errorMessage = getErrorMessage({
error,
prefix: BIO_ENTITY_FETCHING_ERROR_PREFIX,
});
showToast({
type: 'error',
message: errorMessage,
});
}
};
const searchForElementAndOpenDrawer = (): void => {
if (!elementId) return;
const searchValues = getSearchValuesArrayAndTrimToSeven(elementId);
dispatch(getSearchData({ searchQueries: searchValues, isPerfectMatch: false }));
dispatch(openSearchDrawerWithSelectedTab(getDefaultSearchTab(searchValues)));
};
const openSubmap = (): void => {
if (isMapAlreadyOpened(target.modelId)) {
dispatch(setActiveMap({ modelId: target.modelId }));
} else {
dispatch(
openMapAndSetActive({ modelId: target.modelId, modelName: mapsNames[target.modelId] }),
);
}
if (currentModelId !== target.modelId) {
PluginsEventBus.dispatchEvent('onSubmapClose', currentModelId);
PluginsEventBus.dispatchEvent('onSubmapOpen', target.modelId);
}
};
const handleElementLinkClick = (): void => {
dispatch(closeModal());
searchForElementAndOpenDrawer();
openSubmap();
};
useEffect(() => {
fetchElementLinkData(`${target.id}`);
}, [target.id]);
if (isLoading) {
return <LoadingIndicator />;
}
return (
<div
className="inline-block cursor-pointer underline"
role="button"
onClick={handleElementLinkClick}
>
{elementId}
</div>
);
};