Proyectos de Subversion LeadersLinked - SPA

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(() => {
    console.log(currentValue);
    console.log(userLanguages);
    if (show) setValue('languages', currentValue);
  }, [show]);

  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;