components.form.task.window.TaskSave.tsx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of gears-frontend Show documentation

GEARS Frontend

There is a newer version: 0.80.3

import { PanePageButton } from 'components/wm';
import Report from 'helpers/report';
import { useTaskId } from 'hooks/form';
import { useNotifier } from 'hooks/notification';
import { FormikType } from 'hooks/submit';
import { useTranslator } from 'hooks/translator';
import { SAVE_TASK } from 'queries/task';
import { MutableRefObject, SyntheticEvent, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { extractFiles } from 'utils/utils';

import { useMutation } from '@apollo/client';

type FormikRef = MutableRefObject

const TaskSave = ({formikRef}: {formikRef: FormikRef}) => {
  const { t }                   = useTranslation()
  const [disabled, setDisabled] = useState(false)
  const {translator}            = useTranslator()
  const [loading, setLoading]   = useState(false)
  const [doSaveTask]            = useMutation(SAVE_TASK)
  const id                      = useTaskId()
  const notifier                = useNotifier()

  const handleSave = (e: SyntheticEvent) => {
    const formik = formikRef?.current
    const values = formik?.values
    const [rValues, files]  = extractFiles(values)
    
    console.log("handleSave: id=%o, values=%o files=%o", id, rValues, files)
    setDisabled(true)
    setLoading(true)
    doSaveTask({ variables: { id, values: rValues, files }})
      .then(
        result => {
          setLoading(false)
        },
        (error: any)  => {
          setLoading(false)
          setDisabled(false)
          const report = Report.from(error, translator, { category: Report.backend})
          report.addToNotifier(notifier)
          console.error("Save error: %s", report.verboseMessage)
        }
      )
  }

  useEffect(() => {
    if (!disabled)
      return

    const timeout = 5000
    const timer   = setTimeout(() => {
      setDisabled(false);
    }, timeout);

    return () => {clearTimeout(timer)}
  }, [disabled]);

  return 
}

export default TaskSave