Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useMemo } from 'react';

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 AptitudesModal = ({

  show = false,

  aptitudes: userAptitudes = [],

  onClose = () => {},

  onConfirm = () => {}

}) => {

  const { data: aptitudes = [] } = useFetchHelper('aptitudes');

  const { register, handleSubmit, setValue } = useForm();

  const currentValues = useMemo(() => {

    return userAptitudes?.map(({ value }) => value) || [];

  }, [userAptitudes]);

  const handleConfirm = handleSubmit((data) => onConfirm?.(data));

  useEffect(() => {

    register('aptitudes');

  }, [register]);

  useEffect(() => {

    show ? setValue('aptitudes', currentValues) : setValue('aptitudes', ['']);

  }, [show, currentValues]);

  return (

    <Modal title='Aptitudes' show={show} onClose={onClose} onAccept={handleConfirm}>

      <TagsInput

        label='Seleccionar aptitudes'

        name='aptitudes'

        options={aptitudes}

        defaultValues={currentValues}

        onChange={(tags) => setValue('aptitudes', tags)}

      />

    </Modal>

  );

};

export default AptitudesModal;