Deletion of Tasks working. Rewrite and a tidy is needed still

ReactLearning/kanban-board/package-lock.json

@@ -1192,6 +1192,35 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
+      "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
+      "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
+      "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+      "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -6617,6 +6646,11 @@
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz",
       "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA=="
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -12445,6 +12479,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "react-icons": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz",
+      "integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ=="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

ReactLearning/kanban-board/package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
@@ -10,8 +13,10 @@
     "@types/node": "^12.20.10",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
+    "font-awesome": "^4.7.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.2.0",
     "react-modal": "^3.13.1",
     "react-scripts": "4.0.3",
     "typescript": "^4.2.4",

ReactLearning/kanban-board/src/App.css

@@ -62,6 +62,13 @@ html {
   flex: 5;
   height: 100%;
 }
+.actionBlock{
+  order: 10;
+  flex: 1;
+  display: flex;
+  background-color: purple;
+
+}
 
 .panel {
   display: flex;

ReactLearning/kanban-board/src/App.tsx

@@ -17,6 +17,7 @@ class App extends React.Component<{}, State> {
   constructor(props: any) {
     super(props);
     this.deleteColumn = this.deleteColumn.bind(this);
+    this.deleteTask = this.deleteTask.bind(this);
     this.addColumn = this.addColumn.bind(this);
     this.addTask = this.addTask.bind(this);
     this.state = {
@@ -26,9 +27,25 @@ class App extends React.Component<{}, State> {
     };
   }
 
-  deleteColumn(id: number) {
+  deleteTask(cId: number, tId: number) {
+    /* Find Column */
+    const correctColunm = this.state.columns.filter(
+      (column) => column.id === cId //Grabs the correct column according to the column ID
+    );
 
+    let columnsNew = this.state.columns; //Clones columns. Should be done earlier???????
+    const corrIndex = columnsNew.indexOf(correctColunm[0]); //Grabs the index of the correct column. [0] is bad programming, but makes sense due to IDs being unique
 
+    /* Find and Remove Task from Found Column */
+    let alteredColumn = columnsNew[corrIndex]; //Collects a copt of the correct column. Again... unsure if timing is correct
+    alteredColumn.tasks = alteredColumn.tasks.filter((task) => task.id !== tId); //Filter all the tasks to allow all except from the wanted. Maybe could be more efficient
+                                                                                // Unsure how TS works under the hood
+    columnsNew[corrIndex] = alteredColumn; //Input the altered column into the cloned list of columns
+    this.setState({ columns: columnsNew }); //Push the cloned list with the altered column into the state
+    alert("Deleted Task" + tId + "from Col" + cId); // Test for column numbers and IDs
+  }
+
+  deleteColumn(id: number) {
     const { columns } = { ...this.state };
 
     const filteredColumns = columns.filter((column) => column.id !== id);
@@ -104,6 +121,7 @@ class App extends React.Component<{}, State> {
               title={column.name}
               key={index}
               onDelete={this.deleteColumn}
+              deleteTask={this.deleteTask}
               id={column.id}
               tasks={column.tasks}
             />

ReactLearning/kanban-board/src/components/KBColumn.tsx

@@ -1,11 +1,15 @@
 import Task from "../types/Task";
 import React from 'react';
+import { FaTimes } from 'react-icons/fa'
+
+
 type KBColumnProps = {
   color: string;
   title: string;
   tasks: Task[];
   id: number;
   onDelete?: (id: number) => void;
+  deleteTask?: (cId: number, tId: number) => void;
 };
 
 
@@ -13,6 +17,10 @@ type KBColumnProps = {
 
 let bgc = "hotpink";
 class KBColumn extends React.Component<KBColumnProps> {
+
+
+
+
   
       
   getTaskRender = () =>{
@@ -46,6 +54,10 @@ class KBColumn extends React.Component<KBColumnProps> {
 
           <p> {task.description} </p>
         </div>
+        <div className="actionBlock">
+        <FaTimes  style={{color: 'red', cursor: 'pointer'}} onClick={() => this.props.deleteTask && this.props.deleteTask(this.props.id, task.id)} />
+
+        </div>
       </div>
     );
   });