Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

import { useParams } from 'react-router-dom'

import { useDispatch } from 'react-redux'

import { useForm } from 'react-hook-form'

import { Button } from '@mui/material'

import { useMyProgress } from '@hooks'

import { saveProgress } from '@services/habits/habits'

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

import PageHeader from '@components/common/page-header'

import Form from '@components/common/form'

import LoadingWrapper from '@components/common/loading-wrapper'

import Input from '@components/UI/inputs/Input'

import Ckeditor from '@components/common/ckeditor/Ckeditor'

export default function AddHabitProgress() {

  const { id } = useParams()

  const dispatch = useDispatch()

  const { getHabitById } = useMyProgress()

  const currentHabit = getHabitById(id)

  const {

    control,

    formState: { errors, isSubmitting },

    handleSubmit

  } = useForm()

  const 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(currentHabit.link_add, {

        ...data,

        date

      })

      console.log(response)

    } catch (error) {

      dispatch(addNotification({ style: 'danger', msg: error.message }))

    }

  })

  return (

    <>

      <PageHeader title='' />

      <Form onSubmit={onSubmit}>

        <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'>

            Enviar

          </Button>

        </LoadingWrapper>

      </Form>

    </>

  )

}