<commit_before>import React, { useState } from 'react'
import _isEmpty from 'lodash/isEmpty'
import { useIntl } from 'react-intl'
import { useMutation } from '@apollo/react-hooks'
import { Dropdown, Form, Button, Modal } from 'semantic-ui-react'
import { Formik } from 'formik'
import { object, number } from 'yup'
import FormikInput from './components/FormikInput'
import ModifyQuestionBlockMutation from '../../graphql/mutations/ModifyQuestionBlockMutation.graphql'

interface Props {
  sessionId: string
  questionBlockId: string
  initialTimeLimit?: number
}

const defaultProps = {
  initialTimeLimit: -1,
}

function BlockSettingsForm({ sessionId, questionBlockId, initialTimeLimit }: Props): React.ReactElement {
  // const intl = useIntl()

  const [isModalVisible, setIsModalVisible] = useState(false)

  const [modifyQuestionBlock] = useMutation(ModifyQuestionBlockMutation)

  const onModalOpen = (): void => setIsModalVisible(true)
  const onModalClose = (): void => setIsModalVisible(false)
  const onResetTimeLimit = ({ setFieldValue, setSubmitting }): any => async (): Promise<void> => {
    setSubmitting(true)
    await modifyQuestionBlock({ variables: { sessionId, id: questionBlockId, timeLimit: -1 } })
    setFieldValue('timeLimit', -1)
    setSubmitting(false)
  }

  return (
    <Formik
      initialValues={{
        timeLimit: initialTimeLimit,
      }}
      render={({
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        handleSubmit,
        isSubmitting,
        setSubmitting,
        setFieldValue,
      }): React.ReactElement => (
        <Modal
          open={isModalVisible}
          trigger={<Dropdown.Item icon="settings" text="Block settings" onClick={onModalOpen} />}
        >
          <Modal.Header>Block Settings</Modal.Header>
          <Modal.Content>
            <Form loading={isSubmitting}>
              <FormikInput
                autoFocus
                required
                action={<Button icon="times" onClick={onResetTimeLimit({ setFieldValue, setSubmitting })} />}
                actionPosition="left"
                error={errors.timeLimit}
                // errorMessage={intl.formatMessage(messages.emailInvalid)}
                handleBlur={handleBlur}
                handleChange={handleChange}
                inlineLabel="sec"
                label="Time limit"
                labelPosition="right"
                max={3600}
                min={-1}
                name="timeLimit"
                touched={touched.timeLimit}
                type="number"
                value={values.timeLimit}
              />
            </Form>
          </Modal.Content>
          <Modal.Actions>
            <Button content="Discard" icon="times" type="button" onClick={onModalClose} />
            <Button
              primary
              content="Save"
              disabled={isSubmitting || !_isEmpty(errors)}
              icon="save"
              type="submit"
              onClick={(): any => handleSubmit()}
            />
          </Modal.Actions>
        </Modal>
      )}
      validationSchema={object()
        .shape({
          timeLimit: number()
            .min(-1)
            .max(3600)
            .required(),
        })
        .required()}
      onSubmit={async ({ timeLimit }, { setSubmitting }): Promise<void> => {
        await modifyQuestionBlock({ variables: { sessionId, id: questionBlockId, timeLimit } })
        setSubmitting(false)
        onModalClose()
      }}
    />
  )
}

BlockSettingsForm.defaultProps = defaultProps
<commit_msg>Add translation on block settings form<commit_after>import React, { useState } from 'react'
import _isEmpty from 'lodash/isEmpty'
import { useIntl, FormattedMessage, defineMessages } from 'react-intl'
import { useMutation } from '@apollo/react-hooks'
import { Dropdown, Form, Button, Modal } from 'semantic-ui-react'
import { Formik } from 'formik'
import { object, number } from 'yup'
import FormikInput from './components/FormikInput'
import ModifyQuestionBlockMutation from '../../graphql/mutations/ModifyQuestionBlockMutation.graphql'

interface Props {
  sessionId: string
  questionBlockId: string
  initialTimeLimit?: number
}

const defaultProps = {
  initialTimeLimit: -1,
}

const messages = defineMessages({
  timeLimit: {
    id: 'form.blockSettings.timeLimit',
    defaultMessage: 'Time limit',
  },
  blockSettings: {
    id: 'form.blockSettings.header',
    defaultMessage: 'Block settings',
  },
})

function BlockSettingsForm({ sessionId, questionBlockId, initialTimeLimit }: Props): React.ReactElement {
  const intl = useIntl()

  const [isModalVisible, setIsModalVisible] = useState(false)

  const [modifyQuestionBlock] = useMutation(ModifyQuestionBlockMutation)

  const onModalOpen = (): void => setIsModalVisible(true)
  const onModalClose = (): void => setIsModalVisible(false)
  const onResetTimeLimit = ({ setFieldValue, setSubmitting }): any => async (): Promise<void> => {
    setSubmitting(true)
    await modifyQuestionBlock({ variables: { sessionId, id: questionBlockId, timeLimit: -1 } })
    setFieldValue('timeLimit', -1)
    setSubmitting(false)
  }

  return (
    <Formik
      initialValues={{
        timeLimit: initialTimeLimit,
      }}
      render={({
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        handleSubmit,
        isSubmitting,
        setSubmitting,
        setFieldValue,
      }): React.ReactElement => (
        <Modal
          open={isModalVisible}
          trigger={
            <Dropdown.Item icon="settings" text={intl.formatMessage(messages.blockSettings)} onClick={onModalOpen} />
          }
        >
          <Modal.Header>{intl.formatMessage(messages.blockSettings)}</Modal.Header>
          <Modal.Content>
            <Form loading={isSubmitting}>
              <FormikInput
                autoFocus
                required
                action={<Button icon="times" onClick={onResetTimeLimit({ setFieldValue, setSubmitting })} />}
                actionPosition="left"
                error={errors.timeLimit}
                // errorMessage={intl.formatMessage(messages.emailInvalid)}
                handleBlur={handleBlur}
                handleChange={handleChange}
                inlineLabel="sec"
                label={intl.formatMessage(messages.timeLimit)}
                labelPosition="right"
                max={3600}
                min={-1}
                name="timeLimit"
                touched={touched.timeLimit}
                type="number"
                value={values.timeLimit}
              />
            </Form>
          </Modal.Content>
          <Modal.Actions>
            <Button icon="times" type="button" onClick={onModalClose}>
              <FormattedMessage defaultMessage="Discard" id="common.button.discard" />
            </Button>
            <Button
              primary
              disabled={isSubmitting || !_isEmpty(errors)}
              icon="save"
              type="submit"
              onClick={(): any => handleSubmit()}
            >
              <FormattedMessage defaultMessage="Save" id="common.button.save" />
            </Button>
          </Modal.Actions>
        </Modal>
      )}
      validationSchema={object()
        .shape({
          timeLimit: number()
            .min(-1)
            .max(3600)
            .required(),
        })
        .required()}
      onSubmit={async ({ timeLimit }, { setSubmitting }): Promise<void> => {
        await modifyQuestionBlock({ variables: { sessionId, id: questionBlockId, timeLimit } })
        setSubmitting(false)
        onModalClose()
      }}
    />
  )
}

BlockSettingsForm.defaultProps = defaultProps

{'fraction_non_alphanumeric': 0.11607488702388638, 'fraction_numerical': 0.003357004519044545, 'mean_word_length': 2.215442092154421, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 57, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4218139', 'n_tokens_mistral': 2124, 'n_tokens_neox': 2075, 'n_words': 408}