Rev 3047 | Rev 3641 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useEffect, useMemo } from 'react';
import { useSelector } from 'react-redux';
import { useForm } from 'react-hook-form';
import { useFetchHelper } from '@hooks';
import Modal from '@app/components/UI/modal/Modal';
import TagsInput from '@app/components/UI/TagsInput';
const LanguagesModal = ({
show = false,
languages: userLanguages = [],
onClose = () => null,
onConfirm = () => null
}) => {
const { data: languages } = useFetchHelper('languages');
const labels = useSelector(({ intl }) => intl.labels);
const { register, handleSubmit, setValue } = useForm();
const onSubmit = handleSubmit((data) => onConfirm(data));
const currentValue = useMemo(() => {
if (!userLanguages.length) return [''];
return userLanguages.map(({ value }) => value);
}, [userLanguages]);
useEffect(() => {
register('languages');
}, []);
useEffect(() => {
setValue('languages', currentValue);
}, [currentValue]);
return (
<Modal title={labels.languages} show={show} onClose={onClose} onAccept={onSubmit}>
<TagsInput
suggestions={languages}
defaultValue={currentValue}
onChange={(tags) => setValue('languages', tags)}
/>
</Modal>
);
};
export default LanguagesModal;