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 IndustryModal({

  show = false,

  industries = {},

  industry = '',

  groupId,

  onClose = () => {},

  onConfirm = () => {}

}) {

  const industryId = useMemo(

    () => Object.values(industries).find((value) => value === industry) || '',

    [industries, industry]

  );

  const industriesOptions = useMemo(

    () => Object.entries(industries).map(([value, name]) => ({ name, value })),

    [industries]

  );

  const dispatch = useDispatch();

  const {

    control,

    handleSubmit,

    formState: { errors, isSubmitting }

  } = useForm({

    defaultValues: {

      industry_id: ''

    },

    values: {

      industry_id: industryId

    }

  });

  const onSubmit = handleSubmit(async ({ industry_id }) => {

    const url = `/group/my-groups/industry/${groupId}`;

    const formData = new FormData();

    formData.append('industry_id', industry_id);

    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='Industria'

      show={show}

      onClose={onClose}

      onAccept={onSubmit}

      loading={isSubmitting}

    >

      <Select

        name='industry_id'

        control={control}

        placeholder='Industria'

        rules={{

          required: 'Por favor eliga una industria'

        }}

        error={errors.industry_id?.message}

        options={industriesOptions}

      />

    </Modal>

  );

}