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'

                  type='submit'

                  form={`${uuid}_progress-form`}

                >

                  Enviar

                </Button>

              </LoadingWrapper>

            </Form>

          </AccordionDetails>

        </Accordion>

      </Widget.Body>

    </Widget>

  )

}