import React from 'react'; import { useTranslation } from 'react-i18next'; import Button from 'semantic-ui-react/dist/commonjs/elements/Button'; import Modal from 'semantic-ui-react/dist/commonjs/modules/Modal'; import Tab from 'semantic-ui-react/dist/commonjs/modules/Tab'; import { Type } from 'components'; import EFFECTIVENESS from 'constants/effectiveness'; import useStore from 'store'; import styles from './Effectiveness.module.scss'; const Effectiveness = React.memo(function Effectiveness() { const { t } = useTranslation('common'); const typeModal = useStore((state) => state.typeModal); const closeTypeModal = useStore((state) => state.closeTypeModal); const panes = Object.entries(EFFECTIVENESS)?.reduce((newPanes, effectEntry) => { if (!!typeModal && !!effectEntry[1][typeModal]) { newPanes.push({ menuItem: effectEntry[0], render: () => ( <Tab.Pane> <div className={styles.container}> {!!typeModal && Object.entries(effectEntry[1][typeModal])?.reduce((effects, entry) => { if (entry[1]?.length > 0) { effects.push( <div key={`${effectEntry[0]}-${entry[0]}`}> <h4>{t(entry[0])}:</h4> <div className={styles.list}> {entry[1]?.map((value) => { return ( <Type key={`${effectEntry[0]}-${entry[0]}-${value}`} type={value} /> ); })} </div> </div> ); } return effects; }, [])} </div> </Tab.Pane> ), }); } return newPanes; }, []); return ( <Modal open={!!typeModal}> <Modal.Content className={styles.content}> <h3> <Type type={typeModal} /> </h3> <Tab panes={panes} /> </Modal.Content> <Modal.Actions> <Button data-testid="effect-close" onClick={closeTypeModal}> {t('cancel')} </Button> </Modal.Actions> </Modal> ); }); export default Effectiveness;