Converted KBColumn to class. Have initialization state now

ReactLearning/kanban-board/src/App.tsx

@@ -5,6 +5,7 @@ import Header from "./components/Header";
 import Column from "./types/Column";
 import TaskPassback from "./types/TaskPassback";
 import ColumnPassback from "./types/ColumnPassback";
+import initState from "./state_examples/kbstate";
 
 type State = {
   columns: Column[];
@@ -19,14 +20,17 @@ class App extends React.Component<{}, State> {
     this.addColumn = this.addColumn.bind(this);
     this.addTask = this.addTask.bind(this);
     this.state = {
-      taskIterator: 1,
-      columnIterator: 1,
-      columns: [],
+      taskIterator: initState.taskIterator,
+      columnIterator: initState.columnIterator,
+      columns: initState.columns as Column[],
     };
   }
 
   deleteColumn(id: number) {
+
+
     const { columns } = { ...this.state };
+
     const filteredColumns = columns.filter((column) => column.id !== id);
     this.setState({ columns: filteredColumns });
     console.log(this.state.columns);
@@ -82,6 +86,7 @@ class App extends React.Component<{}, State> {
     } else {
       alert("You might want to consider adding a column!");
     }
+    console.log(this.state);
   }
 
   render() {

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

@@ -231,4 +231,5 @@ class Header extends React.Component<HeaderProps, State> {
     );
   }
 }
+
 export default Header;

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

@@ -1,23 +1,22 @@
 import Task from "../types/Task";
+import React from 'react';
 type KBColumnProps = {
-  color?: string;
-  title?: string;
+  color: string;
+  title: string;
   tasks: Task[];
   id: number;
   onDelete?: (id: number) => void;
 };
-const defaultProps: KBColumnProps = {
-  color: "#404552",
-  title: "waah",
-  tasks: [],
-  id: -1,
-  onDelete: (id: number) => {},
-};
-let bgc = "#666";
-const KBColumn = (props: KBColumnProps) => {
-  const { color, title, tasks, onDelete, id } = { ...defaultProps, ...props };
 
-  let colTasks = tasks.map((task) => {
+
+
+
+let bgc = "hotpink";
+class KBColumn extends React.Component<KBColumnProps> {
+  
+      
+  getTaskRender = () =>{
+  return this.props.tasks.map((task) => {
     if (task.priority === "urgent") {
       bgc = "red";
     } else if (task.priority === "important") {
@@ -25,7 +24,8 @@ const KBColumn = (props: KBColumnProps) => {
     } else if (task.priority === "normal") {
       bgc = "blue";
     }
-
+    
+  
     return (
       <div
         style={{
@@ -49,19 +49,23 @@ const KBColumn = (props: KBColumnProps) => {
       </div>
     );
   });
-
+};
+  
+render() {
   return (
-    <div className="KBColumn" style={{ backgroundColor: color }}>
-      <h3>{title}</h3>
-      {colTasks}
+    <div className="KBColumn" style={{ backgroundColor: this.props.color }}>
+      <h3>{this.props.title} </h3>
+      {this.getTaskRender()}
       <button
         onClick={() => {
-          onDelete && onDelete(id);
+          this.props.onDelete && this.props.onDelete(this.props.id);
         }}
       >
-        Deleete
+        Delete
       </button>
     </div>
   );
-};
+      }
+    }
+
 export default KBColumn;

ReactLearning/kanban-board/src/state_examples/kbstate.ts

@@ -0,0 +1,27 @@
+
+let initState = {
+    taskIterator: 6,
+    columnIterator: 7,
+    columns: [
+        {
+            id: 1,
+            name: "To Do",
+            color: "Grey",
+            tasks: [
+                {id: 1,
+                title: "Impliment Drag and Drop",
+                description: "Impliment some drag and drop functionality so that tasks can actually be moved from one column to another ",
+                priority: "important"
+                },
+                {id: 2,
+                    title: "Remove Task",
+                    description: "Impliment some functionality to remove tasks ",
+                    priority: "urgent"
+                    }
+            ]
+
+        }
+    ]    
+
+}
+export default initState