greaveselliott

import uuid from "web-uuid-js";

function reducer(state, action) {
  switch (action.type) {
    case "CREATE_NEW_LIST_ITEM":
      return {
        ...state,
        list: state.list.concat({
          uuid: uuid(),
          listItemValue: action.payload.listItemValue

greaveselliott

import uuid from "web-uuid-js";

function reducer(state, action) {
  switch (action.type) {
    case "CREATE_NEW_LIST_ITEM":
      return {
        ...state,
        list: state.list.concat({
          uuid: uuid(),
          listItemValue: action.payload.listItemValue

greaveselliott

export const createNewListItem = ({ dispatch, payload }) => {
  return dispatch({
    type: "CREATE_NEW_LIST_ITEM",
    payload
  });
};

export const deleteNewListItem = ({ dispatch, payload }) => {
  return dispatch({
    type: "DELETE_LIST_ITEM",

greaveselliott

import React, { useRef, useContext } from "react";

import { Store } from "./Store";
import { createNewListItem, deleteNewListItem } from "./Actions";
import "./app.scss";

export default function App() {
  const { state, dispatch } = useContext(Store);

  return (

greaveselliott

const onFormSubmit = event => {
  event.preventDefault();

  const listItemValue = input.current.value;

  if (listItemValue !== "") {
    createNewListItem({
      dispatch,
      payload: { listItemValue }
    });

greaveselliott

  return (
    <main className="app">
      <h1 className="app__title">To do list</h1>
      <form className="app__form">
        <input type="text" className="app__input"/>
        <input
          type="submit"
          className="app__input-submit"
          value="Add to list"
        />

greaveselliott

    return (<main className="app">
      <h1 className="app__title">To do list</h1>
      <form className="app__form" onSubmit={onFormSubmit}>
        <input type="text" className="app__input" ref={input} />
        <input
          type="submit"
          className="app__input-submit"
          value="Add to list"
        />
      </form>

greaveselliott

import React, { useRef, useContext } from "react";

import { Store } from "./Store";
import { createNewListItem, deleteNewListItem } from "./Actions";
import "./app.scss";

export default function App() {
  const { state, dispatch } = useContext(Store);

  const input = useRef();

greaveselliott

return (
  <main>
    <h1>To do list</h1>
    <form>
      <input type="text" ref={input} />
      <input type="submit"/>
    </form>
    
    // ...
  )

greaveselliott

import { createNewListItem } from "./Actions";

const { state, dispatch } = useContext(Store);
const input = useRef();

const onFormSubmit = event => {
  event.preventDefault();

  createNewListItem({
    dispatch,