Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo } from 'react';

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

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

export function QuestionForm({ question = null, categories = {}, onSubmit = () => {} }) {
  const handleSubmit = (data) => {
    onSubmit(data);
  };

  const defaultValues = useMemo(() => {
    if (!question)
      return {
        title: '',
        category_id: [],
        description: ''
      };

    const categoryIds = Object.entries(categories)
      .filter(([, cat]) => question.categories.includes(cat))
      .map(([key]) => key);

    return {
      title: question.title,
      category_id: categoryIds,
      description: question.description
    };
  }, [question, categories]);

  return (
    <Form onSubmit={handleSubmit} defaultValues={defaultValues} reset>
      <FormInput
        name='title'
        label='Título'
        rules={{ required: 'Este campo es requerido.' }}
        placeholder='Ingrese el título de la pregunta'
      />

      <FormSelect
        label='Categorías'
        name='category_id'
        multiple
        options={parseHelperToSelect(categories)}
        placeholder='Seleccione una categoría'
        rules={{
          required: 'Este campo es requerido.',
          validate: (val) => val.length > 0 || 'Por favor, seleccione una categoria.'
        }}
      />

      <FormRichEditor
        name='description'
        label='Descripción'
        rules={{ required: 'Este campo es requerido.' }}
      />

      <FormButton type='submit'>Guardar</FormButton>
    </Form>
  );
}