Javascript: Модальные окна

App.jsx

Реализуйте и экспортируйте по умолчанию компонент, который реализует приложение "записная книжка".

В этом приложении можно добавлять, удалять и редактировать задачи с помощью модальных окон. На любое действие возникает модальное окно, внутри которого можно выполнять разные действия.

Примеры

Начальный HTML:

<div class="mb-3">
  <button data-testid="item-add" class="btn btn-secondary">add</button>
</div>

После клика на добавление:

<div class="mb-3">
  <button type="button" data-testid="item-add" class="btn btn-secondary">add</button>
</div>
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <div class="modal-title h4">Add</div>
      <button class="close" type="button">
        <span aria-hidden="true">×</span>
        <span class="sr-only">Close</span>
      </button>
    </div>
    <div class="modal-body">
      <form>
        <div class="form-group">
          <input class="form-control" data-testid="input-body" name="body" required="" value="" />
        </div>
        <input class="btn btn-primary" type="submit" value="submit" />
      </form>
    </div>
  </div>
</div>

После добавления первой задачи:

<div class="mb-3">
  <button type="button" data-testid="item-add" class="btn btn-secondary">add</button>
</div>
<div>
  <span class="mr-3">first task!</span>
  <button type="button" class="border-0 btn-link mr-3 p-0" data-testid="item-rename">rename</button>
  <button type="button" class="border-0 btn-link p-0" data-testid="item-remove">remove</button>
</div>

Клик по переименованию:

<div class="mb-3">
  <button type="button" data-testid="item-add" class="btn btn-secondary">add</button>
</div>
<div>
  <span class="mr-3">first task!</span>
  <button type="button" class="border-0 btn-link mr-3 p-0" data-testid="item-rename">rename</button>
  <button type="button" class="border-0 btn-link p-0" data-testid="item-remove">remove</button>
</div>
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <div class="modal-title h4">Rename</div>
      <button class="close" type="button">
        <span aria-hidden="true">×</span>
        <span class="sr-only">Close</span>
      </button>
    </div>
    <div class="modal-body">
      <form>
        <div class="form-group">
          <input class="form-control" data-testid="input-body" name="body" required="" value="first task!" />
        </div>
        <input class="btn btn-primary" type="submit" value="submit" />
      </form>
    </div>
  </div>
</div>

После переименования все возвращается к предыдущему HTML, но с новым именем.

Клик по удалению:

<div class="mb-3">
  <button type="button" data-testid="item-add" class="btn btn-secondary">add</button>
</div>
<div>
  <span class="mr-3">changed name!</span>
  <button type="button" class="border-0 btn-link mr-3 p-0" data-testid="item-rename">rename</button>
  <button type="button" class="border-0 btn-link p-0" data-testid="item-remove">remove</button>
</div>
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <div class="modal-title h4">Remove</div>
      <button class="close" type="button">
        <span aria-hidden="true">×</span>
        <span class="sr-only">Close</span>
      </button>
    </div>
    <div class="modal-body">
      <form>
        <div class="form-group">
          <input class="btn btn-danger" type="submit" value="remove" />
        </div>
      </form>
    </div>
  </div>
</div>

После удаления, запись пропадает.

modals/Add.jsx

Реализуйте модальное окно для добавления задачи. Сделайте так, чтобы при появлении окна происходила фокусировка на поле для ввода. Это важно с точки зрения удобства.

modals/Rename.jsx

Реализуйте модальное окно для обновления названия задачи. Сделайте так, чтобы при появлении окна происходила фокусировка на поле для ввода и при этом выделялся весь текст. Это важно с точки зрения удобства.

modals/Remove.jsx

Реализуйте модальное окно для удаления задачи.