Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo } from 'react';
import { useDispatch } from 'react-redux';
import { useForm } from 'react-hook-form';

import { axios } from '@utils';
import { addNotification } from '@store/notification/notification.actions';

import Modal from '@components/UI/modal/Modal';
import Select from '@components/UI/inputs/Select';

export default function PrivacyModal({
  show = false,
  privacies = {},
  privacy,
  groupId = '',
  onClose = () => {},
  onConfirm = () => {}
}) {
  const privacyId = useMemo(() => {
    const privaciesEntries = Object.entries(privacies);
    const currentPrivacy = privaciesEntries.find((priv) => priv[1] === privacy);
    return currentPrivacy?.[0] || '';
  }, [privacies, privacy]);

  const privaciesOptions = useMemo(
    () => Object.entries(privacies).map(([value, name]) => ({ name, value })),
    [privacies]
  );
  const dispatch = useDispatch();

  const {
    control,
    handleSubmit,
    formState: { errors, isSubmitting }
  } = useForm({
    defaultValues: {
      privacy: ''
    },
    values: {
      privacy: privacyId
    }
  });

  const onSubmit = handleSubmit(async ({ privacy }) => {
    const url = `/group/my-groups/privacy/${groupId}`;
    const formData = new FormData();
    formData.append('privacy', privacy);

    try {
      const response = await axios.post(url, formData);
      const { data, success } = response.data;

      if (!success) {
        throw new Error('Error al editar el tipo de grupo');
      }

      onConfirm(data);
      onClose();
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }));
    }
  });

  return (
    <Modal
      title='Privacidad'
      show={show}
      onClose={onClose}
      onAccept={onSubmit}
      loading={isSubmitting}
    >
      <Select
        name='privacy'
        control={control}
        placeholder='Privacidad'
        rules={{
          required: 'Por favor eliga una privacidad'
        }}
        error={errors.privacy?.message}
        options={privaciesOptions}
      />
    </Modal>
  );
}