mcjcloud

// App component
// this component renders the entire app inside the Provider and Router
const App = (): JSX.Element => {
  const classes = useStyles()
  return (
    <Provider store={store}>
      <Router>
        <div className={classes.app}>
          {/* nav bar */}
          <Navbar />

mcjcloud

import cors from "cors"
import express from "express"
import { todoRouter } from "./routes/todo"

// create a new express app
// this will be used to add all routes and request handlers
const app = express()

// allow express to accept application/json requests
app.use(express.json())

mcjcloud

/**
 * make a request to mark a to-do item as incomplete
 */
const uncheckTodo = (todo: TodoItem): void => {
  if (!todo._id) {
    return
  }
  dispatch(uncompleteTodo(todo._id))
}

mcjcloud

export const uncompleteTodo = (guid: string) => async (dispatch: Dispatch) => {
  dispatch({ type: "TODO_UNCOMPLETED_STARTED" })
  const response = await fetch(`${API_ENDPOINT}/todo/${guid}/uncomplete`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
  }).then(r => r.json())

  if (!!response && !!response?.todo) {

mcjcloud

/**
 * make a request to add a todo item
 */
const addTodo = (): void => {
  dispatch(createTodo({
    label: `Todo ${[...completeTodos, ...incompleteTodos].length}`,
  }))
}

/**

mcjcloud

export interface TodoUncompletedStarted { type: "TODO_UNCOMPLETED_STARTED" }
export interface TodoUncompleted {
  type: "TODO_UNCOMPLETED"
  payload: {
    todo: TodoItem
  }
}

mcjcloud

const dispatch = useDispatch()

// complete and incomplete todos
// these are fetched from redux
const completeTodos = useSelector(selectCompleteTodos)
const incompleteTodos = useSelector(selectIncompleteTodos)

mcjcloud

{/* complete items */}
{completeTodos.length > 0 && (
  <>
    <div className={classes.header}>
      <Typography component="h6" variant="h4">Completed Items</Typography>
    </div>
    {completeTodos.map(todo => (
      <p key={todo._id}>{todo.label}</p>
    ))}
  </>

mcjcloud

{/* complete items */}
{completeTodos.length > 0 && (
  <>
    <div className={classes.header}>
      <Typography component="h6" variant="h4">Completed Items</Typography>
    </div>
    {completeTodos.map(todo => (
      <div key={todo._id} className={classes.todoItem}>
        <IconButton color="inherit" onClick={() => uncheckTodo(todo)}>
          <ClearIcon />

mcjcloud

// Reducer
const reducer = (state: TodoState = defaultState, action: TodoAction): TodoState => {
  switch (action.type) {

    ...

    case "TODO_UNCOMPLETED_STARTED": {
      return { ...state, isUncompletingTodo: true }
    }
    case "TODO_UNCOMPLETED": {