Using theme-ui and React useReducer to implement a todo application

Chris Biscardi: [0:00] We have a dashboard but it doesn't really do anything. It only shows us whether we're logged in or not. What we need is for this to be a dashboard where we can add todos and see the to-dos that we've already added. To start, we'll take the dashboard and we'll move it to its own file.

[0:14] Now that we've put the dashboard out into its own file, we'll import another couple Theme UI components. The intention here is to have an input at the top that we can submit through that will create additional todos. We'll pull in input and label for that purpose.

[0:28] What we've done here is added a label in the input, and a submit button. When we add a to-do and hit enter, we get an alert that gives the value of the input. We've done this by using the Button, Input, and Label components from Theme UI and a useRef for the input.

[0:46] We display our Flex container as a form, and then the onSubmit, we take the inputRef and we check the current value. Otherwise, it's a fairly standard form with a label wrapping the input component and a submit button.

[1:00] Now that we also use the SX prop to add some additional styles, we force add todo to nor break by including a non-breaking space.

[1:09] Next, we'll setup some state. Now whenever we get a todo, we prepend it to the list of current todos. Note that we've structured the state of our todos as objects where we can tell if they're done or not and also what value we should be rendering.

[1:44] Next, we've added a list of all of the todos with their check state and the value. Note that these checkboxes are controlled components. We can't toggle them yet because we haven't added that logic. Also note that there are lists styling slightly off. We'll take the listStyleType off the UL. We'll change our LI elements to Flex type render as LI. This gives us a nicer list.

[2:08] Now, because we used useState with an empty array, it's hard for us to get at the values of the checked or unchecked todos. There are two problems currently. One is that when we submit, the input should clear. The other is that not only do the checkboxes not work, but it's hard for us to get at the checkboxes inside of the useState. We're going to move that to useReducer.

[2:32] Now that we've taken the inputRef's current reference, which is the input tag in the HTML and set the value to an empty string after we've submitted this todo, when we add a new todo, the input box clears. This is a much nicer user experience.

[2:46] UseReducer gives us a dispatch function instead of a setState function. We also need to write a function called todosReducer to handle the logic the dispatch function gives us. We set the initial state to an empty array again.

[3:02] In our todosReducer, we get two arguments. One is the current state and the second is the action and the payload. They're currently being dispatched action. We'll check action.type for a variety of actions.

[3:14] Add todo is where we'll take the form logic that we currently have and move it. Not that we've made a change here when we moved the logic up. We now reference action.payload when we also spread state.

[3:26] ToggleTodo is slightly different. We're going to have to reach into the todos list and change the done property from true to false or false to true. First, we'll clone the old state so that we're not modifying the original state. Then, we'll set the new state = newState of the todo. Then, we'll return newState.

[3:48] Now we have two dispatchable actions, addTodo and toggleTodo done. Now our app works as before, except we're using useReducer now, instead of useState. Let's hook up the toggle function. We'll need the current index and the array. We'll add that to the map function. Now what we're telling it to do is toggle to be done on the index.

[4:10] In this case, we want the onClick to fire no matter if we're clicking on it or using the space bar with keyword navigation. We'll put the onClick on the LI element, so that if we click the name, it also fires.

[4:23] Now we've added the toggle ability. We added it to the LI element as an onClick handler, so that it works for when we click it, when we tab to it and press space, or when we click the span.

[4:36] That's it for our todos dashboard for now.