diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.component.tsx index e5a09813c9b7797235b789fada4f49afdb78ff5a..9ce500cf316b75bbc4616efe6afe1246d58b87e6 100644 --- a/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.component.tsx +++ b/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.component.tsx @@ -1,16 +1,11 @@ +import { STEP } from '@/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.constants'; +import { BIO_ENTITY, DRUGS_CHEMICALS_MIRNA } from '@/constants'; import { currentStepDrawerStateSelector, valueTypeDrawerSelector, } from '@/redux/drawer/drawer.selectors'; import { useSelector } from 'react-redux'; -const BIO_ENTITY = 'bioEntity'; -const DRUGS_CHEMICALS_MIRNA = ['drugs', 'chemicals', 'mirna']; - -const FIRST_STEP = 1; -const SECOND_STEP = 2; -const THIRD_STEP = 3; - export const SearchDrawerWrapper = (): JSX.Element => { const currentStep = useSelector(currentStepDrawerStateSelector); const valueType = useSelector(valueTypeDrawerSelector); @@ -18,26 +13,24 @@ export const SearchDrawerWrapper = (): JSX.Element => { const isBioEntityType = valueType === BIO_ENTITY; const isChemicalsDrugsOrMirnaType = DRUGS_CHEMICALS_MIRNA.includes(valueType); - const isFirstStep = currentStep === FIRST_STEP; - const isSecondStep = currentStep === SECOND_STEP; - const isThirdStep = currentStep === THIRD_STEP; - return ( <div> {/* first step for displaying search results, drawers etc */} - {isFirstStep && <div data-testid="search-first-step">The first step</div>} + {currentStep === STEP.FIRST && <div data-testid="search-first-step">The first step</div>} {/* 2nd step for bioEntities aka content */} - {isSecondStep && isBioEntityType && ( + {currentStep === STEP.SECOND && isBioEntityType && ( <div data-testid="search-second-step">The second step</div> )} {/* 2nd step for drugs,chemicals,mirna */} - {isSecondStep && isChemicalsDrugsOrMirnaType && ( + {currentStep === STEP.SECOND && isChemicalsDrugsOrMirnaType && ( <div data-testid="search-second-step">The second step</div> )} {/* last step for bioentity */} - {isThirdStep && isBioEntityType && <div data-testid="search-third-step">The third step</div>} + {currentStep === STEP.THIRD && isBioEntityType && ( + <div data-testid="search-third-step">The third step</div> + )} {/* last step for drugs,chemicals,mirna */} - {isThirdStep && isChemicalsDrugsOrMirnaType && ( + {currentStep === STEP.THIRD && isChemicalsDrugsOrMirnaType && ( <div data-testid="search-third-step">The third step</div> )} </div> diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.constants.ts b/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.constants.ts new file mode 100644 index 0000000000000000000000000000000000000000..fc1b7da72a652c9b0b755f71034b61cd477c6ccd --- /dev/null +++ b/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.constants.ts @@ -0,0 +1,5 @@ +export const STEP = { + FIRST: 1, + SECOND: 2, + THIRD: 3, +}; diff --git a/src/constants/index.ts b/src/constants/index.ts index 43423ae1b1478dfd342c37c5488a44cc09703006..16e892f07522e3d15e68ac4d0e802f290a406b8c 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -1,3 +1,5 @@ export const BASE_API_URL = process.env.NEXT_PUBLIC_BASE_API_URL || ''; export const PROJECT_ID = process.env.NEXT_PUBLIC_PROJECT_ID || ''; export const ZOD_SEED = 997; +export const BIO_ENTITY = 'bioEntity'; +export const DRUGS_CHEMICALS_MIRNA = ['drugs', 'chemicals', 'mirna'];