JavaScript: Modal windows

App.jsx

Implement and export as default the component that represents the notebook application.

In this application, you can add, delete, and edit tasks using modal windows. Each action produces a modal window where you can perform different actions.

To complete the challenge, you will need to master new hooks and use built-in Bootstrap components. We recommend that you take this challenge after completing the previous.

Examples

Initial HTML:

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

After clicking "add":

<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 type="button" class="btn-close" aria-label="Close"></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>

After adding the first task:

<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 btn-link mr-3 text-decoration-none" data-testid="item-rename">rename</button>
  <button type="button" class="border-0 btn btn-link text-decoration-none" data-testid="item-remove">remove</button>
</div>

After clicking "rename":

<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 btn-link mr-3 text-decoration-none" data-testid="item-rename">rename</button>
  <button type="button" class="border-0 btn btn-link text-decoration-none" 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 type="button" class="btn-close" aria-label="Close"></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>

After renaming, the previous HTML returns, but with a new name.

After clicking "remove":

<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 btn-link mr-3 text-decoration-none" data-testid="item-rename">rename</button>
  <button type="button" class="border-0 btn btn-link text-decoration-none" 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 type="button" class="btn-close" aria-label="Close"></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>

Notebook entry disappears after removing.

modals/Add.jsx

Implement a modal window for adding a task. Make sure to cast focus on the input field when the window appears. This is important for usability.

modals/Rename.jsx

Implement a modal window for renaming a task. Make sure to cast focus on the input field and select the text in it when the window appears. This is important for usability.

modals/Remove.jsx

Implement a modal window for removing a task.

Tips

• Docs for built-in hooks: useState, useEffect, useRef
• Docs for third-party hooks: useImmer, useFormik
• React Bootstrap docs
• useImmer() is used for point-by-point updates in a mutable style, while retaining the advantage of immutable data structures. It is especially suited for making changes to complex data structures, for example, when you need to find an object in a list and change its property. useState() is suitable for managing a simple state.
• Layout may vary