diff --git a/src/features/TaskCard/NewTaskCardPrompt.js b/src/features/TaskCard/NewTaskCardPrompt.js
new file mode 100644
index 0000000..c5264f9
--- /dev/null
+++ b/src/features/TaskCard/NewTaskCardPrompt.js
@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+import { createTask } from "../../storeSlices/boardSlice";
+
+import styles from "./TaskCard.module.css";
+
+export function NewTaskCardPrompt({ listID }) {
+ const dispatch = useDispatch();
+
+ const [newCardText, setNewCardText] = useState("");
+
+ return (
+
+ setNewCardText(e.target.value)}
+ onKeyPress={e => {
+ if (newCardText.trim().length > 0 && e.key === "Enter") {
+ dispatch(createTask({ text: newCardText, listID }));
+
+ setNewCardText("");
+ }
+ }}
+ >
+
+ );
+}
diff --git a/src/features/TaskList/TaskList.js b/src/features/TaskList/TaskList.js
index d81b798..ffde950 100644
--- a/src/features/TaskList/TaskList.js
+++ b/src/features/TaskList/TaskList.js
@@ -4,6 +4,7 @@ import { useSelector, useDispatch } from "react-redux";
import { createList } from "../../storeSlices/boardSlice";
import { TaskCard } from "../TaskCard/TaskCard";
+import { NewTaskCardPrompt } from "../TaskCard/NewTaskCardPrompt";
import styles from "./TaskList.module.css";
@@ -14,10 +15,10 @@ export function TaskList({ listData }) {
{listData.name}
- {/* Refactor to card component */}
{listData.cards.map(cardData => (
))}
+
);
diff --git a/src/storeSlices/boardSlice.js b/src/storeSlices/boardSlice.js
index a5c0714..ad8c1a4 100644
--- a/src/storeSlices/boardSlice.js
+++ b/src/storeSlices/boardSlice.js
@@ -48,10 +48,20 @@ export const slice = createSlice({
name,
cards: []
});
+ },
+
+ createTask: (state, action) => {
+ const { text: cardText, listID: parentListID } = action.payload;
+
+ const parentList = state.lists.find(({ id }) => id === parentListID);
+ parentList.cards.push({
+ id: `Card #${generateID()}`,
+ text: cardText
+ });
}
}
});
-export const { createList } = slice.actions;
+export const { createList, createTask } = slice.actions;
export default slice.reducer;