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 = {}, 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>

  );

}