UrgentRequest.tsx

import Markdown from 'markdown-to-jsx';
import React, { ChangeEvent, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import styles from './UrgentRequest.module.scss';

export interface UrgentRequestProps {
  sendUrgent: CallableFunction;
}

export const UrgentRequest: React.FC<UrgentRequestProps> = ({
  sendUrgent,
}: UrgentRequestProps) => {
  const [urgent, setUrgent] = useState<boolean>(false);
  const [urgentText, setUrgentText] = useState<string>('');
  const { t } = useTranslation();
  const changeUrgentText = (event: ChangeEvent<HTMLInputElement>): void => {
    setUrgentText(event.target.value);
  };

  useEffect(() => {
    setUrgent(urgentText == t('urgency.urgent'));
  }, [urgentText]);

  return (
    <fieldset className={`${styles.UrgentRequest}`}>
      <legend>{t('urgency.legend')}</legend>
      <Markdown>{t('urgency.intro')}</Markdown>
      <div className="field">
        <input
          type="text"
          value={urgentText}
          onChange={changeUrgentText}
          aria-label={t('urgency.typeUrgentHere')}
        ></input>
      </div>
      <button
        disabled={!urgent}
        className="bad"
        onClick={(event) => {
          event?.preventDefault();
          sendUrgent();
        }}
      >
        {t('urgency.submit')}
      </button>
    </fieldset>
  );
};

export default UrgentRequest;