Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useDispatch } from 'react-redux'
import { useForm } from 'react-hook-form'
import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Button,
  Typography
} from '@mui/material'
import { ExpandMore } from '@mui/icons-material'

import { saveProgress } from '@services/habits/habits'
import { addNotification } from '@store/notification/notification.actions'

import Widget from '@components/UI/Widget'
import Form from '@components/common/form'
import Input from '@components/UI/inputs/Input'
import Ckeditor from '@components/common/ckeditor/Ckeditor'
import LoadingWrapper from '@components/common/loading-wrapper'

export default function ProgressItem({ habit }) {
  const dispatch = useDispatch()

  const { uuid, name, link } = habit

  const {
    handleSubmit,
    control,
    formState: { errors, isSubmitting }
  } = useForm({
    defaultValues: {}
  })

  function getCurrentDate() {
    const date = new Date()
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0') // Enero es 0
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  }

  const onSubmit = handleSubmit(async (data) => {
    try {
      const date = getCurrentDate()
      const response = await saveProgress(link, { ...data, date })
      console.log(response)
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }))
    }
  })

  return (
    <Widget>
      <Widget.Body>
        <Accordion
          sx={{
            border: 'none',
            width: '100%',
            boxShadow: 'none',
            padding: 0,
            '&::before': {
              display: 'none'
            }
          }}
        >
          <AccordionSummary
            sx={{ padding: '0.5rem 0 !important' }}
            expandIcon={<ExpandMore />}
          >
            <Typography variant='h2'>{name}</Typography>
          </AccordionSummary>

          <AccordionDetails sx={{ padding: 0 }}>
            <Form onSubmit={onSubmit} id={`${uuid}_progress-form`}>
              <LoadingWrapper loading={isSubmitting} displayChildren>
                <Input
                  control={control}
                  label='Valor cuantitativo:'
                  name='quantitative_value'
                  type='number'
                  rules={{ required: 'El valor es requerido' }}
                  error={errors.quantitative_value?.message}
                />

                <Ckeditor
                  control={control}
                  name='qualitative_description'
                  error={errors.qualitative_description?.message}
                  rules={{ required: 'La descripción es requerida' }}
                  label='Descripción cualitativa:'
                />

                <Button color='primary' form={`${uuid}_progress-form`}>
                  Enviar
                </Button>
              </LoadingWrapper>
            </Form>
          </AccordionDetails>
        </Accordion>
      </Widget.Body>
    </Widget>
  )
}