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 { useFetch, 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 { data, isLoading } = useFetch(currentHabit?.link)

  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 (progress) => {
    try {
      const date = getCurrentDate()
      const response = await saveProgress(data.link_add, {
        ...progress,
        date
      })
      console.log(response)
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }))
    }
  })

  return (
    <>
      <PageHeader
        title={`${currentHabit?.name ?? ''} - Agregar progreso`}
        goBack
      />
      <LoadingWrapper loading={isLoading}>
        <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>
      </LoadingWrapper>
    </>
  )
}