Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import { useAlert, useApi } from '@shared/hooks';

import { parseHelperToSelect } from '@shared/utils';

import { getGroupTypes, getIndustries, saveGroup } from '@groups/services';

import { Form, FormButton, FormInput, FormSelect, Spinner } from '@shared/components';

export const AddGroupForm = ({ onSubmit }) => {

  const { data: groupTypes, loading: loadingGroupTypes } = useApi(getGroupTypes, {

    autoFetch: true

  });

  const { data: industries, loading: loadingIndustries } = useApi(getIndustries, {

    autoFetch: true

  });

  const { showError, showSuccess } = useAlert();

  const { execute } = useApi(saveGroup, {

    onSuccess: (message) => {

      showSuccess(message);

      onSubmit();

    },

    onError: (error) => {

      showError(error.message);

    }

  });

  if (loadingGroupTypes || loadingIndustries || !groupTypes || !industries) return <Spinner />;

  return (

    <Form onSubmit={execute} defaultValues={{ name: '', type_id: '', industry_id: '' }} reset>

      <FormInput

        name='name'

        label='Nombre'

        placeholder='Nombre del grupo'

        rules={{ required: 'Este campo es requerido' }}

      />

      <FormSelect

        label='Industria'

        name='type_id'

        rules={{ required: 'Por favor eliga un tipo' }}

        options={parseHelperToSelect(groupTypes)}

      />

      <FormSelect

        label='Tipo'

        name='industry_id'

        rules={{ required: 'Por favor eliga un tipo' }}

        options={parseHelperToSelect(industries)}

      />

      <FormButton type='submit'>Crear grupo</FormButton>

    </Form>

  );

};