Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import { useApi } from '@shared/hooks';
import { parseHelperToSelect } from '@shared/utils';
import { getGroupTypes, getIndustries } 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
  });

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

  return (
    <Form onSubmit={onSubmit} 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>
  );
};