Fixed bug with column adding and referencing

ReactLearning/kanban-board/src/App.tsx

@@ -60,15 +60,20 @@ class App extends React.Component<{}, State> {
     console.log(taskInstance);
     if (this.state.columns.length > 0) {
       let taskId = this.state.taskIterator;
-      let index = -1;
+      let index = -2;
       if (taskInstance !== undefined) {
         this.setState({ taskIterator: taskId + 1 });
+        console.log(this.state.columns)
+        console.log(taskInstance.column)
         let indexObj = this.state.columns.find(
           (o) => o.id === taskInstance.column
         );
         if (indexObj) {
           index = this.state.columns.indexOf(indexObj);
         }
+        else{
+          alert("Clifford")
+        }
 
         if (index >= 0) {
           this.state.columns[index].tasks.push({
@@ -78,6 +83,12 @@ class App extends React.Component<{}, State> {
             priority: taskInstance.priority,
           });
         }
+        else{
+          alert("Error finding that column. Check it hasn't already been deleted!" + index)
+        }
+      }
+      else{
+        alert("Oh god, oh heck")
       }
     } else {
       alert("You might want to consider adding a column!");

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

@@ -36,7 +36,11 @@ class Header extends React.Component<HeaderProps, State> {
   }
 
   showModal = () => {
-    this.setState({ show: true });
+    let {show, columnNumber} = {...this.state}
+    show = true;
+    columnNumber = this.props.columns[0].id
+    this.setState({ show, columnNumber});
+ 
   };
 
   hideModal = () => {
@@ -66,6 +70,7 @@ class Header extends React.Component<HeaderProps, State> {
   }
 
   render() {
+    
     return (
       <div className="header" style={{ height: 60 }}>
         <h1
@@ -80,7 +85,7 @@ class Header extends React.Component<HeaderProps, State> {
         </h1>
         <Modal show={this.state.show} handleClose={this.hideModal}>
           <h3> Add Task</h3>
-          <p>{this.props.columns.length}</p>
+          <p>{this.props.columns[0] && this.props.columns[0].id}</p>
           <select
             value={this.state.columnNumber}
             onChange={this.handleSelectChange}

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

@@ -13,14 +13,25 @@ const defaultProps: KBColumnProps = {
   id: -1,
   onDelete: (id: number) => {},
 };
+let bgc = "#666";
 const KBColumn = (props: KBColumnProps) => {
   const { color, title, tasks, onDelete, id } = { ...defaultProps, ...props };
   return (
     <div className="KBColumn" style={{ backgroundColor: color, height: 200 }}>
       <h3>{title}</h3>
+      
+      {tasks.map((task) => (/*{
+        if (task.priority === 'urgent'){
+          bgc = "red"
+        }else if(task.priority ==="important"){
+          bgc = "yellow"
 
-      {tasks.map((task) => (
-        <div>
+        }else if (task.priority === "normal"){
+          bgc = "blue"
+        }
+      }
+        */
+        <div style={{borderColor: bgc, borderWidth: "5px"}}>
           <p> {task.title} </p>
 
           <p> {task.description} </p>