From 0c2ecf9e1a7c410fa29d966db95072eb88d0bb68 Mon Sep 17 00:00:00 2001
From: "Brady J. Garvin" <bgarvin@cse.unl.edu>
Date: Thu, 24 Aug 2023 15:34:02 -0500
Subject: [PATCH] Implemented a basic to-do list app.

---
 to-do-list/src/features/toDo/toDo.js      | 54 ++++++++++++++++++++---
 to-do-list/src/features/toDo/toDoSlice.js | 37 +++++++++++++++-
 2 files changed, 82 insertions(+), 9 deletions(-)

diff --git a/to-do-list/src/features/toDo/toDo.js b/to-do-list/src/features/toDo/toDo.js
index afe4715..c5fe283 100644
--- a/to-do-list/src/features/toDo/toDo.js
+++ b/to-do-list/src/features/toDo/toDo.js
@@ -1,19 +1,59 @@
-// import { useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 // import PropTypes from 'prop-types';
 
-// import classNames from 'classnames';
-// import styles from './toDo.module.css';
+import classNames from 'classnames';
+import styles from './toDo.module.css';
 
 import {
+  selectDraft,
+  selectItems,
+  setDraft,
+  addItem,
+  setDone,
 } from './toDoSlice.js';
 
 function Item(props) {
-  return null;
+  const dispatch = useDispatch();
+
+  const classes = classNames({
+    [styles.done]: props.done,
+  });
+
+  const onClick = () => dispatch(setDone({
+    index: props.index,
+    done: !props.done,
+  }));
+
+  return (
+    <div className={styles.item}>
+      <span className={classes}>#{props.index} {props.text}</span>
+      <button onClick={onClick}>Done</button>
+    </div>
+  );
 }
 
-Item.propTypes = {
-};
+// Item.propTypes = {
+// };
 
 export function List() {
-  return null;
+  const draft = useSelector(selectDraft);
+  const items = useSelector(selectItems);
+  const dispatch = useDispatch();
+
+  const onChange = (event) => dispatch(setDraft({
+    draft: event.target.value,
+  }));
+  const onClick = () => dispatch(addItem());
+
+  return (
+    <>
+      {items.map((item, index) =>
+        <Item key={index} index={index} text={item.text} done={item.done} />,
+      )}
+      <div className={styles.draft}>
+        <input type={'text'} className={styles.wide} value={draft} onChange={onChange} />
+        <button onClick={onClick}>+</button>
+      </div>
+    </>
+  );
 }
diff --git a/to-do-list/src/features/toDo/toDoSlice.js b/to-do-list/src/features/toDo/toDoSlice.js
index ee3e11d..1e2aa83 100644
--- a/to-do-list/src/features/toDo/toDoSlice.js
+++ b/to-do-list/src/features/toDo/toDoSlice.js
@@ -3,11 +3,44 @@ import { createSlice } from '@reduxjs/toolkit';
 const toDoSlice = createSlice({
   name: 'toDo',
   initialState: {
+    draft: '',
+    items: [],
   },
   reducers: {
+    setDraft: (toDo, action) => {
+      const {
+        draft,
+      } = action.payload;
+      toDo.draft = draft;
+    },
+    addItem: (toDo) => {
+      toDo.items.push({
+        text: toDo.draft,
+        done: false,
+      });
+      toDo.draft = '';
+    },
+    setDone: (toDo, action) => {
+      const {
+        index,
+        done,
+      } = action.payload;
+      toDo.items[index].done = done;
+    },
   },
 });
 export default toDoSlice;
 
-// export const {
-// } = toDoSlice.actions;
+export const {
+  setDraft,
+  addItem,
+  setDone,
+} = toDoSlice.actions;
+
+export function selectDraft(state) {
+  return state.toDo.draft;
+}
+
+export function selectItems(state) {
+  return state.toDo.items;
+}
-- 
GitLab