AnnouncementEditModal.jsx

import React, { useState } from "react";

import Button from "components/Button";
import { Card, CardActions, CardBody, CardHeadline } from "components/cards";
import ErrorMessage from "components/ErrorMessage";
import Modal from "components/modals/Modal";

const AnnouncementEditModal = ({
  announcement,
  onCancel,
  onConfirm,
  confirming,
  error,
  ...props
}) => {
  const [text, setText] = useState(announcement.content);

  const onTextInput = (evt) => {
    setText(evt.target.value);
  };

  const confirm = (evt) => {
    if (!!text) {
      onConfirm(text);
    }
  };

  return (
    <Modal containerClassName="max-w-md" onRequestClose={onCancel} {...props}>
      <Card>
        <CardBody>
          <div className="flex items-center justify-between mb-4">
            <CardHeadline>Upravit oznámení</CardHeadline>
            <button onClick={onCancel}>
              <i className="ico--close"></i>
            </button>
          </div>
          <div className="form-field">
            <label className="form-field__label" htmlFor="field">
              Nový text oznámení
            </label>
            <div className="form-field__wrapper form-field__wrapper--shadowed">
              <textarea
                className="text-input form-field__control text-base"
                value={text}
                rows="8"
                placeholder="Vyplňte text oznámení"
                onChange={onTextInput}
              ></textarea>
            </div>
          </div>
          {error && (
            <ErrorMessage className="mt-2">
              Při editaci došlo k problému: {error}
            </ErrorMessage>
          )}
        </CardBody>
        <CardActions right className="space-x-1">
          <Button
            hoverActive
            color="blue-300"
            className="text-sm"
            loading={confirming}
            onClick={confirm}
          >
            Uložit
          </Button>
          <Button
            hoverActive
            color="red-600"
            className="text-sm"
            onClick={onCancel}
          >
            Zrušit
          </Button>
        </CardActions>
      </Card>
    </Modal>
  );
};

export default AnnouncementEditModal;