From 04ad79d89f9113dc121e9d3ccc4841577586fc51 Mon Sep 17 00:00:00 2001
From: bendtherules <abhasbhattacharya2@gmail.com>
Date: Mon, 30 Mar 2020 17:21:51 +0530
Subject: [PATCH] Add newTaskcardPrompt to create new task

---
 src/features/TaskCard/NewTaskCardPrompt.js | 29 ++++++++++++++++++++++
 src/features/TaskList/TaskList.js          |  3 ++-
 src/storeSlices/boardSlice.js              | 12 ++++++++-
 3 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/features/TaskCard/NewTaskCardPrompt.js

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 (
+    <div className={styles.listContainer}>
+      <input
+        type="text"
+        placeholder="Create task"
+        value={newCardText}
+        onChange={e => setNewCardText(e.target.value)}
+        onKeyPress={e => {
+          if (newCardText.trim().length > 0 && e.key === "Enter") {
+            dispatch(createTask({ text: newCardText, listID }));
+
+            setNewCardText("");
+          }
+        }}
+      ></input>
+    </div>
+  );
+}
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 }) {
     <div className={styles.listContainer}>
       <div className={styles.listName}>{listData.name}</div>
       <div className={styles.cardsContainer}>
-        {/* Refactor to card component */}
         {listData.cards.map(cardData => (
           <TaskCard key={cardData.id} cardData={cardData} />
         ))}
+        <NewTaskCardPrompt listID={listData.id} />
       </div>
     </div>
   );
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;