Lesson 5: Set up the TodoList component

In this lesson, we'll create a TodoList React component that will be able to:

Create a new to-do item.
Delete the whole to-do list.
Display to-do items we have built in the previous lesson.

We'll create the React component file under web-src/src/components/ and name it TodoList.js.

Import React Spectrum components

This component will make use of several React Spectrum components:

View a generic container.
Well a generic pre-styled container which will contain the todo list.
Flex for the layout.
Form to submit the todo.
TextField the input field for the todo value.
ActionButton to trigger form submission.
AlertDialog to warn the user before deleting a todo list.
DialogTrigger to open the AlertDialog.

import { View, Flex, Form, TextField, ActionButton, AlertDialog, DialogTrigger, Well } from '@adobe/react-spectrum';
Copied to your clipboard
import { View, Flex, Form, TextField, ActionButton, AlertDialog, DialogTrigger, Well } from '@adobe/react-spectrum';

Component properties

The component will accept three properties:

todoList which corresponds to the to-do list object which holds the todo list name and to-do items.
onDelete the callback function to delete a to-do list.
onUpdate the callback function to update a to-do list.

function TodoList({ todoList, onDelete, onUpdate }) {
  const { name, todos } = todoList;
  // ...
}
Copied to your clipboard
function TodoList({ todoList, onDelete, onUpdate }) {
  const { name, todos } = todoList;
  // ...
}

Spectrum Icons

We'll add React Spectrum Workflow Icons to the TodoList component. The icons are simply SVGs packed as React components.

To import icons, you need the @spectrum-icons/workflow dependency. It's pre-installed if you initialize the App Builder app with the React Spectrum template.

Each icon must be imported individually with a single statement:

import TaskList from '@spectrum-icons/workflow/TaskList';
import Close from '@spectrum-icons/workflow/Close';
import Add from '@spectrum-icons/workflow/Add';
Copied to your clipboard
import TaskList from '@spectrum-icons/workflow/TaskList';
import Close from '@spectrum-icons/workflow/Close';
import Add from '@spectrum-icons/workflow/Add';

A searchable list of workflow icons is available on the Spectrum website. The name of the icon without any whitespace matches the import in React Spectrum.

Displaying the to-do list name

React Spectrum has made available a set of components . Unfortunately, some components are not available in React Spectrum but available in Spectrum CSS which is the CSS framework used by React Spectrum to style components. Fortunately, we can use React Spectrum together with Spectrum CSS to fill in missing components.

In this case, we're going to install the Spectrum CSS Typography dependency to render Spectrum headings. Since React Spectrum already defines the Spectrum CSS variables, you'll need to install only the Spectrum CSS Typography package:

npm i --save @spectrum-css/typography
Copied to your clipboard
npm i --save @spectrum-css/typography

Then you can import the CSS:

import '@spectrum-css/typography';
Copied to your clipboard
import '@spectrum-css/typography';

Now you can use Spectrum CSS Heading classes to render the to-do list name.

<h2 className="spectrum-Heading spectrum-Heading--sizeM spectrum-Heading--serif">{name}</h2>
Copied to your clipboard
<h2 className="spectrum-Heading spectrum-Heading--sizeM spectrum-Heading--serif">{name}</h2>

Rendering to-do items

Once again, we're going to use the State hook useState to declare a state variable which will hold a list of to-do items. This list will be updated whenever a new to-do item is created. By default, it's initialized with the todos from the todoList prop:

const [todoItems, setTodoItems] = useState(todos);
Copied to your clipboard
const [todoItems, setTodoItems] = useState(todos);

Next we'll iterate over the todoItems array using the map() function to render each item as Todo component.

<View marginTop="size-100">
  {todoItems.map((todo) => (
    <Todo key={todo.id} name={name} todo={todo} onUpdate={onUpdate} />
  ))}
</View>
Copied to your clipboard
<View marginTop="size-100">
  {todoItems.map((todo) => (
    <Todo key={todo.id} name={name} todo={todo} onUpdate={onUpdate} />
  ))}
</View>

The key property is necessary in React to uniquely identify the to-do item. In this case, we use the todo id. You can read more about React lists and keys here.

We're also passing the name, todo and onUpdate props down to the Todo component.

Creating a to-do item

In lesson 2, we defined a MAX_TODO_ITEMS value within a global configuration file defaults.json at the root of the App Builder App. Now we'll use it to block the user from creating too many to-do items inside a to-do list. We can import the value in a way similar to what we did in the Runtime action:

import { MAX_TODO_ITEMS } from '../../defaults.json';
Copied to your clipboard
import { MAX_TODO_ITEMS } from '../../defaults.json';

Now we'll use the React hook useState again to bind it to the TextField to create a new to-do item the way we did in the previous lesson:

const [newTodo, setNewTodo] = useState('');
Copied to your clipboard
const [newTodo, setNewTodo] = useState('');

But this time we will disable the input once we reach the count of MAX_TODO_ITEMS by setting the isDisabled prop:

<TextField
  autoComplete="off"
  isDisabled={todoItems.length >= MAX_TODO_ITEMS}
  aria-label="New todo"
  width="100%"
  value={newTodo}
  onChange={(value) => {
    setNewTodo(value);
  }}
  placeholder="Todo"
  minLength={1}
  maxLength={140}
/>
<ActionButton type="submit" isDisabled={todoItems.length >= MAX_TODO_ITEMS}>
  <Add />
</ActionButton>
Copied to your clipboard
<TextField
  autoComplete="off"
  isDisabled={todoItems.length >= MAX_TODO_ITEMS}
  aria-label="New todo"
  width="100%"
  value={newTodo}
  onChange={(value) => {
    setNewTodo(value);
  }}
  placeholder="Todo"
  minLength={1}
  maxLength={140}
/>
<ActionButton type="submit" isDisabled={todoItems.length >= MAX_TODO_ITEMS}>
  <Add />
</ActionButton>

Finally, we'll wrap the TextField and the submit ActionButton with a Form component so we can invoke the onUpdate callback function on form submission. We'll prevent default form submission behavior with event.preventDefault() and create a new to-do item object that we pass to the callback function. Additionally, we're clearing the value of TextField:

<Form
  onSubmit={async (event) => {
    event.preventDefault();

    const index = todoItems.length;
    const newTodoItem = { name, id: index, value: newTodo, done: false };
    setTodoItems([newTodoItem, ...todoItems]);
    setNewTodo('');

    onUpdate && (await onUpdate(name, newTodoItem));
  }}>
Copied to your clipboard
<Form
  onSubmit={async (event) => {
    event.preventDefault();

    const index = todoItems.length;
    const newTodoItem = { name, id: index, value: newTodo, done: false };
    setTodoItems([newTodoItem, ...todoItems]);
    setNewTodo('');

    onUpdate && (await onUpdate(name, newTodoItem));
  }}>

Deleting a to-do list

Next to the to-do list name, we'll add a trigger to delete the list. The trigger will open an AlertDialog to warn the user about the action. Confirming the operation calls the onDelete callback function passing it the name of the to-do list. The dialog will close itself automatically.

<DialogTrigger>
    <ActionButton isQuiet>
      <Close />
    </ActionButton>
    <AlertDialog
      title="Clear todo list"
      variant="destructive"
      primaryActionLabel="Delete"
      secondaryActionLabel="Cancel"
      onPrimaryAction={async () => {
        onDelete && (await onDelete(name));
      }}>
      This action will clear the todo list <strong>{name}</strong>. Are you sure you want to continue ?
    </AlertDialog>
</DialogTrigger>
Copied to your clipboard
<DialogTrigger>
    <ActionButton isQuiet>
      <Close />
    </ActionButton>
    <AlertDialog
      title="Clear todo list"
      variant="destructive"
      primaryActionLabel="Delete"
      secondaryActionLabel="Cancel"
      onPrimaryAction={async () => {
        onDelete && (await onDelete(name));
      }}>
      This action will clear the todo list <strong>{name}</strong>. Are you sure you want to continue ?
    </AlertDialog>
</DialogTrigger>