From 1770328ad887fa34c6b704b3e0da447a22ebef0c Mon Sep 17 00:00:00 2001
From: bendtherules <abhasbhattacharya2@gmail.com>
Date: Mon, 30 Mar 2020 17:11:45 +0530
Subject: [PATCH] Refactor Board into separate TaskList and Taskcard

---
 src/features/Board/Board.js                | 22 ++++++----------
 src/features/TaskCard/TaskCard.js          | 15 +++++++++++
 src/features/TaskCard/TaskCard.module.css  |  0
 src/features/TaskList/NewTaskListPrompt.js | 29 ++++++++++++++++++++++
 src/features/TaskList/TaskList.js          | 24 ++++++++++++++++++
 src/features/TaskList/TaskList.module.css  |  0
 src/storeSlices/boardSlice.js              |  5 ----
 7 files changed, 76 insertions(+), 19 deletions(-)
 create mode 100644 src/features/TaskCard/TaskCard.js
 create mode 100644 src/features/TaskCard/TaskCard.module.css
 create mode 100644 src/features/TaskList/NewTaskListPrompt.js
 create mode 100644 src/features/TaskList/TaskList.js
 create mode 100644 src/features/TaskList/TaskList.module.css

diff --git a/src/features/Board/Board.js b/src/features/Board/Board.js
index 5890996..62e9855 100644
--- a/src/features/Board/Board.js
+++ b/src/features/Board/Board.js
@@ -1,29 +1,23 @@
 import React, { useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import { createList, selectBoard } from "../../storeSlices/boardSlice";
+import { useSelector } from "react-redux";
+
+import { TaskList } from "../TaskList/TaskList";
+import { NewTaskListPrompt } from "../TaskList/NewTaskListPrompt";
 
 import styles from "./Board.module.css";
 
 export function Board() {
-  const boardData = useSelector(selectBoard);
-  const dispatch = useDispatch();
+  const selectBoardData = state => state.board;
+  const boardData = useSelector(selectBoardData);
 
   return (
     <div>
       <div className={styles.boardName}>{boardData.name}</div>
       <div className={styles.listsContainer}>
         {boardData.lists.map(listData => (
-          <div key={listData.id} className={styles.listContainer}>
-            <div className={styles.listName}>{listData.name}</div>
-            <div className={styles.cardsContainer}>
-              {listData.cards.map(cardData => (
-                <div key={cardData.id} className={styles.cardContainer}>
-                  {cardData.text}
-                </div>
-              ))}
-            </div>
-          </div>
+          <TaskList key={listData.id} listData={listData} />
         ))}
+        <NewTaskListPrompt key="newListPrompt" />
       </div>
     </div>
   );
diff --git a/src/features/TaskCard/TaskCard.js b/src/features/TaskCard/TaskCard.js
new file mode 100644
index 0000000..a203c1a
--- /dev/null
+++ b/src/features/TaskCard/TaskCard.js
@@ -0,0 +1,15 @@
+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { createList } from "../../storeSlices/boardSlice";
+
+import styles from "./TaskCard.module.css";
+
+export function TaskCard({ cardData }) {
+  const dispatch = useDispatch();
+
+  return (
+    <div className={styles.cardContainer}>
+      {cardData.text}
+    </div>
+  );
+}
diff --git a/src/features/TaskCard/TaskCard.module.css b/src/features/TaskCard/TaskCard.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/features/TaskList/NewTaskListPrompt.js b/src/features/TaskList/NewTaskListPrompt.js
new file mode 100644
index 0000000..00b1efa
--- /dev/null
+++ b/src/features/TaskList/NewTaskListPrompt.js
@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+import { createList } from "../../storeSlices/boardSlice";
+
+import styles from "./TaskList.module.css";
+
+export function NewTaskListPrompt() {
+  const dispatch = useDispatch();
+
+  const [newListname, setNewListname] = useState("");
+
+  return (
+    <div className={styles.listContainer}>
+      <input
+        type="text"
+        placeholder="Create list"
+        value={newListname}
+        onChange={e => setNewListname(e.target.value)}
+        onKeyPress={e => {
+          if (newListname.trim().length > 0 && e.key === "Enter") {
+            dispatch(createList({ name: newListname }));
+
+            setNewListname("");
+          }
+        }}
+      ></input>
+    </div>
+  );
+}
diff --git a/src/features/TaskList/TaskList.js b/src/features/TaskList/TaskList.js
new file mode 100644
index 0000000..d81b798
--- /dev/null
+++ b/src/features/TaskList/TaskList.js
@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+
+import { createList } from "../../storeSlices/boardSlice";
+
+import { TaskCard } from "../TaskCard/TaskCard";
+
+import styles from "./TaskList.module.css";
+
+export function TaskList({ listData }) {
+  const dispatch = useDispatch();
+
+  return (
+    <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} />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/TaskList/TaskList.module.css b/src/features/TaskList/TaskList.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/storeSlices/boardSlice.js b/src/storeSlices/boardSlice.js
index e476d55..a5c0714 100644
--- a/src/storeSlices/boardSlice.js
+++ b/src/storeSlices/boardSlice.js
@@ -54,9 +54,4 @@ export const slice = createSlice({
 
 export const { createList } = slice.actions;
 
-// The function below is called a selector and allows us to select a value from
-// the state. Selectors can also be defined inline where they're used instead of
-// in the slice file. For example: `useSelector((state) => state.counter.value)`
-export const selectBoard = state => state.board;
-
 export default slice.reducer;