Added Progression and Regression of tasks in the kanban via buttons

ReactLearning/kanban-board/src/App.tsx

@@ -49,7 +49,6 @@ class App extends React.Component<{}, State> {
     );
     columnsNew[corrIndex] = alteredColumn;
     this.setState({ columns: columnsNew });
-    alert("Deleted Task" + taskID + "from Col" + columnID);
   };
 
   /* Deletes a column with a specific ID 
@@ -89,6 +88,70 @@ class App extends React.Component<{}, State> {
       });
     }
   };
+  /* Progresses the task to the column immediately to the right
+    @param columnId: The column which the task is originally hosted at
+    @param taskId: The UID for the task
+    @return void
+
+    Bugs: None that I am aware of
+
+    Last Edited: 2020/04/30 10:30
+  */
+  progressTask = (columnId: number, taskId: number) => {
+    let columns = this.state.columns;
+    let fromColumn = columns.find((column) => column.id === columnId);
+    if (!fromColumn) {
+      alert("Initial Column not found. State bad");
+      return;
+    }
+    let fromColumnIndex = columns.indexOf(fromColumn);
+    if (!columns[fromColumnIndex + 1]) {
+      alert("There is no column to progress to. Voiding action");
+      return;
+    }
+    let toColumn = columns[fromColumnIndex + 1];
+    let movingTask = fromColumn.tasks.find((task) => task.id === taskId);
+    if (!movingTask) {
+      alert("Moving task not found. Voiding action");
+      return;
+    }
+    toColumn.tasks.push(movingTask);
+    this.deleteTask(columnId, taskId);
+    columns[fromColumnIndex + 1] = toColumn;
+    this.setState({ columns: columns });
+  };
+ /* Regresses the task to the column immediately to the left
+    @param columnId: The column which the task is originally hosted at
+    @param taskId: The UID for the task
+    @return void
+
+    Bugs: None that I am aware of
+
+    Last Edited: 2020/04/30 10:50
+  */
+  regressTask = (columnId: number, taskId: number) => {
+    let columns = this.state.columns;
+    let fromColumn = columns.find((column) => column.id === columnId);
+    if (!fromColumn) {
+      alert("Initial Column not found. State bad");
+      return;
+    }
+    let fromColumnIndex = columns.indexOf(fromColumn);
+    if (!columns[fromColumnIndex - 1]) {
+      alert("There is no column to regress to. Voiding action");
+      return;
+    }
+    let toColumn = columns[fromColumnIndex - 1];
+    let movingTask = fromColumn.tasks.find((task) => task.id === taskId);
+    if (!movingTask) {
+      alert("Moving task not found. Voiding action");
+      return;
+    }
+    toColumn.tasks.push(movingTask);
+    this.deleteTask(columnId, taskId);
+    columns[fromColumnIndex - 1] = toColumn;
+    this.setState({ columns: columns });
+  };
 
   /* Adds a task to a specified column
     @param taskInstance: Data passed back from the modal which contains the necessary information to create the task
@@ -98,6 +161,7 @@ class App extends React.Component<{}, State> {
 
     Last Edited 2020/04/29 15:00
   */
+
   addTask = (taskInstance?: TaskPassback) => {
     if (this.state.columns.length === 0) {
       alert("You might want to consider adding a column!");
@@ -147,6 +211,8 @@ class App extends React.Component<{}, State> {
               key={index}
               onDelete={this.deleteColumn}
               deleteTask={this.deleteTask}
+              progressTask={this.progressTask}
+              regressTask={this.regressTask}
               id={column.id}
               tasks={column.tasks}
             />

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

@@ -1,7 +1,10 @@
 import Task from "../types/Task";
-import React from 'react';
+import React from "react";
-import { FaTimes } from 'react-icons/fa'
+import {
-
+  FaTimes,
+  FaLongArrowAltRight,
+  FaLongArrowAltLeft,
+} from "react-icons/fa";
 
 type KBColumnProps = {
   color: string;
@@ -9,19 +12,13 @@ type KBColumnProps = {
   tasks: Task[];
   id: number;
   onDelete?: (id: number) => void;
+  progressTask?: (cId: number, tId: number) => void;
+  regressTask?: (cId: number, tId: number) => void;
   deleteTask?: (cId: number, tId: number) => void;
 };
 
-
-
-
 let bgc = "hotpink";
 class KBColumn extends React.Component<KBColumnProps> {
-
-
-
-
-  
   /* Creates the JSX for all the tasks in the tasks array
     @param None
     @return A JSX.Element[] containing each of the Divs for the task
@@ -31,61 +28,79 @@ class KBColumn extends React.Component<KBColumnProps> {
     Last Edited: XXXX-XX-XX XX:XX
 
   */
-  getTaskRender = () =>{
+  getTaskRender = () => {
-  return this.props.tasks.map((task) => {
+    return this.props.tasks.map((task) => {
-    if (task.priority === "urgent") {
+      if (task.priority === "urgent") {
-      bgc = "red";
+        bgc = "red";
-    } else if (task.priority === "important") {
+      } else if (task.priority === "important") {
-      bgc = "yellow";
+        bgc = "yellow";
-    } else if (task.priority === "normal") {
+      } else if (task.priority === "normal") {
-      bgc = "blue";
+        bgc = "blue";
-    }
+      }
 
-  
+      return (
-    return (
-      <div
-        style={{
-          borderColor: "#ccc",
-          borderWidth: "1px",
-          borderStyle: "solid",
-          margin: "10px",
-        }}
-        className="taskWrapper"
-      >
         <div
-          style={{ backgroundColor: bgc, display: "inline" }}
+          style={{
-          className="prioBlock"
+            borderColor: "#ccc",
-          title={task.priority}
+            borderWidth: "1px",
-        ></div>
+            borderStyle: "solid",
-        <div className="taskText">
+            margin: "10px",
-          <h3> {task.title} </h3>
+          }}
+          className="taskWrapper"
+        >
+          <div
+            style={{ backgroundColor: bgc, display: "inline" }}
+            className="prioBlock"
+            title={task.priority}
+          ></div>
+          <div className="taskText">
+            <h3> {task.title} </h3>
 
-          <p> {task.description} </p>
+            <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)
+              }
+            />
+            <FaLongArrowAltRight
+              style={{ color: "red", cursor: "pointer" }}
+              onClick={() =>
+                this.props.progressTask &&
+                this.props.progressTask(this.props.id, task.id)
+              }
+            />
+            <FaLongArrowAltLeft
+              style={{ color: "red", cursor: "pointer" }}
+              onClick={() =>
+                this.props.regressTask &&
+                this.props.regressTask(this.props.id, task.id)
+              }
+            />
+          </div>
         </div>
-        <div className="actionBlock">
+      );
-        <FaTimes  style={{color: 'red', cursor: 'pointer'}} onClick={() => this.props.deleteTask && this.props.deleteTask(this.props.id, task.id)} />
+    });
+  };
 
-        </div>
+  render() {
+    return (
+      <div className="KBColumn" style={{ backgroundColor: this.props.color }}>
+        <h3>{this.props.title} </h3>
+        {this.getTaskRender()}
+        <button
+          onClick={() => {
+            this.props.onDelete && this.props.onDelete(this.props.id);
+          }}
+        >
+          Delete
+        </button>
       </div>
     );
-  });
+  }
-};
+}
-  
-render() {
-  return (
-    <div className="KBColumn" style={{ backgroundColor: this.props.color }}>
-      <h3>{this.props.title} </h3>
-      {this.getTaskRender()}
-      <button
-        onClick={() => {
-          this.props.onDelete && this.props.onDelete(this.props.id);
-        }}
-      >
-        Delete
-      </button>
-    </div>
-  );
-      }
-    }
 
 export default KBColumn;