Tidied more

ReactLearning/kanban-board/src/App.tsx

@@ -1,36 +1,45 @@
 import React from "react";
-import { useState } from "react";
 import KBColumn from "./components/KBColumn";
 import "./App.css";
 import Header from "./components/Header";
+import Task from "./types/Task"
+
 type Column = {
   id: number;
   name: string;
   color: string;
+  tasks: Task[];
 };
 
+
+
 type State = {
   columns: Column[];
-  iterator: number;
+  columnIterator: number;
+  taskIterator: 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.addColumn = this.addColumn.bind(this);
+    this.addTask = this.addTask.bind(this);
     this.state = {
-      iterator: 3,
+      taskIterator: 1,
+      columnIterator: 3,
       columns: [
         {
           id: 1,
           name: "Harry",
           color: "green",
+          tasks: []
         },
         {
           id: 2,
           name: "Potter",
           color: "red",
+          tasks: []
         },
       ],
     };
@@ -42,20 +51,37 @@ class App extends React.Component<{}, State> {
     this.setState({ columns: filteredColumns });
     console.log(this.state.columns);
   }
+
   addColumn() {
-    let columnId = this.state.iterator;
-    this.setState({ iterator: columnId + 1 });
+    let columnId = this.state.columnIterator;
+    this.setState({ columnIterator: columnId + 1 });
     this.state.columns.push({
       id: columnId,
       name: "tempName" + columnId,
       color: "red",
+      tasks: []
     });
   }
 
+  addTask(){
+    
+    if (this.state.columns.length > 0){
+      let taskId = this.state.taskIterator;
+    this.setState({ taskIterator: taskId + 1})
+      this.state.columns[0].tasks.push(
+      { id: taskId,
+        title: "Task "+ taskId,
+        description: "foo",
+        priority: 'normal'        
+      }
+    )
+    }
+  }
+
   render() {
     return (
       <div className="App">
-        <Header addColumn={this.addColumn}/>
+        <Header addColumn={this.addColumn} addTask={this.addTask}/>
         {this.state.columns.map((column, index) => (
           <KBColumn
             color={column.color}
@@ -63,11 +89,11 @@ class App extends React.Component<{}, State> {
             key={index}
             onDelete={this.deleteColumn}
             id={column.id}
+            tasks={column.tasks}
           />
         ))}
       </div>
     );
   }
 }
-
-export default App;
+export default App;

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

@@ -1,7 +1,8 @@
 import * as react from 'react'
 
 type HeaderProps = {
-    addColumn: () => void
+    addColumn: () => void,
+    addTask: () => void
 }
 const Header = ( props: HeaderProps )  => {
 
@@ -9,7 +10,8 @@ const Header = ( props: HeaderProps )  => {
 
     return(
         <div className="header" style= {{backgroundColor: 'grey', height: 60 }}>
-           <button> Add task </button>
+           <h1 style={{float: 'left', margin: 0, padding: 0, verticalAlign: 'center'}}>Kango Bango</h1>
+           <button onClick={props.addTask}> Add task </button>
            <button onClick={props.addColumn}> Add column </button>
         </div>
     )

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

@@ -1,8 +1,9 @@
 import * as react from "react";
+import Task from "../types/Task"
 type KBColumnProps = {
   color?: string;
   title?: string;
-  tasks?: string[];
+  tasks: Task[];
   id: number;
   onDelete?: (id: number) => void
 };
@@ -17,7 +18,16 @@ const KBColumn = (props: KBColumnProps) => {
   const { color, title, tasks, onDelete, id } = { ...defaultProps, ...props };
   return (
     <div className="KBColumn" style={{ backgroundColor: color, height: 200 }}>
-      <h1>{title}</h1>
+      <h3>{title}</h3>
+    
+      {tasks.map((task) => (
+          <div>
+          <p> {task.title} </p>
+
+          <p> {task.description} </p>
+          </div>
+      ))}
+      
       <button onClick={() => {onDelete && onDelete(id)}}>Deleete</button>
     </div>
   );

ReactLearning/kanban-board/src/types/Task.ts

@@ -0,0 +1,8 @@
+type Task = {
+    id: number,
+    title: string,
+    description: string,
+    priority: 'normal'|'important'|'urgent'
+  }
+
+export default Task