greaveselliott

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

  const listItemValue = input.current.value;

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

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

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 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

import React, { createContext, useReducer } from "react";
import reducer from "./reducer";

export const Store = createContext();

const initialState = {
  list: []
};

export function StoreProvider({ children }) {

greaveselliott

import React, { createContext, useReducer, useDebugValue } from "react";
import reducer from "./reducer";

export const Store = createContext();

const initialState = {
  list: []
};

export function StoreProvider(props) {

greaveselliott

import { createContext } from "react";

export const Store = createContext();

const initialState = {
  list: []
};

greaveselliott

import { createContext } from "react";

export const Store = createContext();

greaveselliott

import React from "react";

import "./app.scss";

export default function App() {
  return (
    <main className="app">
      <h1 className="app__title">To do list</h1>
      <form className="app__form">
        <input type="text" className="app__input" />