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>

    </>

  )

}