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 HobbiesModal = ({
  show = false,
  hobbies: userHobbies = [],
  onClose = () => {},
  onConfirm = () => {}
}) => {
  const { data: hobbies = [] } = useFetchHelper('hobbies');

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

  const currentValues = useMemo(() => {
    return userHobbies?.map(({ value }) => value) || [];
  }, [userHobbies]);

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

  useEffect(() => {
    register('hobbies');
  }, [register]);

  useEffect(() => {
    show ? setValue('hobbies', currentValues) : setValue('hobbies', ['']);
  }, [show, currentValues]);

  return (
    <Modal title='Hobbies' show={show} onClose={onClose} onAccept={handleConfirm}>
      <TagsInput
        label='Seleccionar hobbies'
        name='hobbies'
        options={hobbies}
        defaultValues={currentValues}
        onChange={(tags) => setValue('hobbies', tags)}
      />
    </Modal>
  );
};

export default HobbiesModal;