Adding and deleting of columns working now

ReactLearning/kanban-board/src/App.tsx

@@ -11,12 +11,16 @@ type Column = {
 
 type State = {
   columns: Column[];
+  iterator: number;
 };
 
 class App extends React.Component<{}, State> {
   constructor(props: any) {
     super(props);
+    this.deleteColumn = this.deleteColumn.bind(this);
+    this.addColumn = this.addColumn.bind(this)
     this.state = {
+      iterator: 3,
       columns: [
         {
           id: 1,
@@ -25,7 +29,7 @@ class App extends React.Component<{}, State> {
         },
         {
           id: 2,
-          name: 'Potter',
+          name: "Potter",
           color: "red",
         },
       ],
@@ -34,16 +38,32 @@ class App extends React.Component<{}, State> {
 
   deleteColumn(id: number) {
     const { columns } = { ...this.state };
-    columns.filter((column) => column.id !== id);
-    this.setState({ columns });
+    const filteredColumns = columns.filter((column) => column.id !== id);
+    this.setState({ columns: filteredColumns });
+    console.log(this.state.columns);
+  }
+  addColumn() {
+    let columnId = this.state.iterator;
+    this.setState({ iterator: columnId + 1 });
+    this.state.columns.push({
+      id: columnId,
+      name: "tempName" + columnId,
+      color: "red",
+    });
   }
 
   render() {
     return (
       <div className="App">
-        <Header />
+        <Header addColumn={this.addColumn}/>
         {this.state.columns.map((column, index) => (
-          <KBColumn color={column.color} title={column.name} key={index} />
+          <KBColumn
+            color={column.color}
+            title={column.name}
+            key={index}
+            onDelete={this.deleteColumn}
+            id={column.id}
+          />
         ))}
       </div>
     );

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

@@ -1,12 +1,16 @@
 import * as react from 'react'
 
-const Header = ()  => {
+type HeaderProps = {
+    addColumn: () => void
+}
+const Header = ( props: HeaderProps )  => {
+
 
 
     return(
         <div className="header" style= {{backgroundColor: 'grey', height: 60 }}>
            <button> Add task </button>
-           <button> Add column </button>
+           <button onClick={props.addColumn}> Add column </button>
         </div>
     )
 }

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

@@ -1,22 +1,25 @@
-import * as react from 'react'
+import * as react from "react";
 type KBColumnProps = {
-    color?: string,
-    title?: string,
-    tasks?: string[]
-}
-const defaultProps :KBColumnProps = {
-    color: '#00cc00',
-    title: "waah",
-    tasks: []
-}
-const KBColumn = ( props  :KBColumnProps)  => {
-
-    const {color, title, tasks} = { ...defaultProps, ...props}
-
-    return(
-        <div className="KBColumn" style= {{backgroundColor: color, height: 200 }}>
-            <h1>{title}</h1>
-        </div>
-    )
-}
-export default KBColumn
+  color?: string;
+  title?: string;
+  tasks?: string[];
+  id: number;
+  onDelete?: (id: number) => void
+};
+const defaultProps: KBColumnProps = {
+  color: "#00cc00",
+  title: "waah",
+  tasks: [],
+  id: -1,
+  onDelete: (id: number) => {}
+};
+const KBColumn = (props: KBColumnProps) => {
+  const { color, title, tasks, onDelete, id } = { ...defaultProps, ...props };
+  return (
+    <div className="KBColumn" style={{ backgroundColor: color, height: 200 }}>
+      <h1>{title}</h1>
+      <button onClick={() => {onDelete && onDelete(id)}}>Deleete</button>
+    </div>
+  );
+};
+export default KBColumn;