Actually remembered to bind one of the button presses

ReactLearning/kanban-board/src/App.tsx

@@ -8,7 +8,7 @@ type TaskPassback = {
   title: string;
   description: string;
   priority: "normal" | "important" | "urgent";
-}
+};
 
 type Column = {
   id: number;
@@ -67,28 +67,21 @@ class App extends React.Component<{}, State> {
     });
   }
 
-  addTask(taskInstance? :TaskPassback) {
+  addTask(taskInstance?: TaskPassback) {
     if (this.state.columns.length > 0) {
       let taskId = this.state.taskIterator;
 
-      if (taskInstance !== undefined){
+      if (taskInstance !== undefined) {
         this.setState({ taskIterator: taskId + 1 });
         this.state.columns[0].tasks.push({
           id: taskId,
           title: taskInstance.title,
           description: taskInstance.description,
-          priority: taskInstance.priority
+          priority: taskInstance.priority,
         });
       }
-      
+    } else {
-      
+      alert("You might want to consider adding a column!");
-
-
-
-
-    }
-    else{
-      alert("You might want to consider adding a column!")
     }
   }
 
@@ -96,18 +89,18 @@ class App extends React.Component<{}, State> {
     return (
       <div className="App">
         <Header addColumn={this.addColumn} addTask={this.addTask} />
-        <div className='panel'>
+        <div className="panel">
-        {this.state.columns.map((column, index) => (
+          {this.state.columns.map((column, index) => (
-          <KBColumn
+            <KBColumn
-            color={column.color}
+              color={column.color}
-            title={column.name}
+              title={column.name}
-            key={index}
+              key={index}
-            onDelete={this.deleteColumn}
+              onDelete={this.deleteColumn}
-            id={column.id}
+              id={column.id}
-            tasks={column.tasks}
+              tasks={column.tasks}
-          />
+            />
-        ))}
+          ))}
-          </div>
+        </div>
       </div>
     );
   }

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

@@ -1,12 +1,12 @@
 import React from "react";
-import Modal from "./Modal"
+import Modal from "./Modal";
-import { Component } from 'react';
+import { Component } from "react";
 
 type TaskPassback = {
   title: string;
   description: string;
   priority: priority;
-}
+};
 
 type priority = "normal" | "important" | "urgent";
 type HeaderProps = {
@@ -15,104 +15,120 @@ type HeaderProps = {
 };
 
 type State = {
-  show: boolean
+  show: boolean;
-  titleVar: string,
+  titleVar: string;
-  descVar: string,
+  descVar: string;
-  prioVar: 'normal'|'important'|'urgent',
+  prioVar: priority;
 };
 
+class Header extends React.Component<HeaderProps, State> {
+  constructor(props: HeaderProps) {
+    super(props);
+    this.showModal = this.showModal.bind(this);
+    this.hideModal = this.hideModal.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleSelectChange = this.handleSelectChange.bind(this);
 
+    this.state = {
+      show: false,
+      titleVar: "",
+      descVar: "",
+      prioVar: "normal",
+    };
+  }
 
-class Header extends React.Component<HeaderProps, State>{
+  showModal = () => {
-constructor(props: HeaderProps) {
+    this.setState({ show: true });
-  super(props);
-  this.showModal = this.showModal.bind(this);
-  this.hideModal = this.hideModal.bind(this);
-  this.handleInputChange = this.handleInputChange.bind(this);
-  
-  this.state = {
-    show: false,
-    titleVar: "",
-    descVar: "",
-    prioVar: 'normal'
   };
-}
 
+  hideModal = () => {
+    this.setState({ show: false });
+  };
 
-showModal = () => {
+  handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
-  this.setState({ show: true });
+    const target = event.target.id;
-};
+    if (target === "titleInput") {
-
+      let hold = this.state.titleVar;
-hideModal = () => {
+      this.setState({ titleVar: event.target.value });
-  this.setState({ show: false });
+    }
-};
+    if (target === "descInput") {
-
+      let hold = this.state.descVar;
-handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+      this.setState({ descVar: event.target.value });
-  const target = event.target.id
+    }
-  if (target === "titleInput"){
-    let hold = this.state.titleVar
-    this.setState({titleVar: event.target.value})
   }
-  if (target === "descInput"){
+
-    let hold = this.state.descVar
+  handleSelectChange(event: React.ChangeEvent<HTMLSelectElement>) {
-    this.setState({descVar: event.target.value})
+    const selectedValue = event.target.value as priority;
+    this.setState({ prioVar: selectedValue });
   }
-}
 
-handleSelectChange(event: React.ChangeEvent<HTMLSelectElement>){
+  render() {
-  
+    return (
-  event.target.value === 'normal' ? this.setState({prioVar: 'normal'})
+      <div className="header" style={{ height: 60 }}>
-  : event.target.value === 'important' ? this.setState({prioVar: 'important'})
+        <h1
-  : this.setState({prioVar: 'urgent'})
+          style={{
-
+            float: "left",
-}
+            margin: 0,
-
+            padding: 0,
-
+            verticalAlign: "center",
-render(){
+          }}
-  return (
+        >
-    
+          Kango Bango
-    <div className="header" style={{  height: 60 }}>
-      <h1
-        style={{
-          float: "left",
-          margin: 0,
-          padding: 0,
-          verticalAlign: "center",
-        }}
-      >
-        Kango Bango
         </h1>
-      <Modal show={this.state.show} handleClose={this.hideModal}>
+        <Modal show={this.state.show} handleClose={this.hideModal}>
-        
+          <label>
-          <label> Title: 
+            {" "}
-            <input type="text" id="titleInput" value={this.state.titleVar} onChange={this.handleInputChange} />
+            Title:
+            <input
+              type="text"
+              id="titleInput"
+              value={this.state.titleVar}
+              onChange={this.handleInputChange}
+            />
           </label>
-          <br/>
+          <br />
-          <label> Description: 
+          <label>
-            <input type="text" id='descInput' value={this.state.descVar} onChange={this.handleInputChange} />
+            {" "}
+            Description:
+            <input
+              type="text"
+              id="descInput"
+              value={this.state.descVar}
+              onChange={this.handleInputChange}
+            />
           </label>
-          
+
-          <br/>
+          <br />
-          <label> Priority: 
+          <label>
-            <select value={this.state.prioVar} onChange={this.handleSelectChange}>
+            {" "}
-            <option value='normal'>Normal</option>
+            Priority:
-            <option value='important'>Important</option>
+            <select
-            <option value='urgent'>Urgent</option>
+              value={this.state.prioVar}
+              onChange={this.handleSelectChange}
+            >
+              <option value="normal">Normal</option>
+              <option value="important">Important</option>
+              <option value="urgent">Urgent</option>
             </select>
           </label>
 
-          <button onClick={() => this.props.addTask({title: this.state.titleVar, description: this.state.descVar, priority: this.state.prioVar})}> AHHHHH </button>
+          <button
-
+            onClick={() =>
-
+              this.props.addTask({
-        
+                title: this.state.titleVar,
-      </Modal>
+                description: this.state.descVar,
-      <button onClick={this.showModal}> Add task </button>
+                priority: this.state.prioVar,
-      <button onClick={this.props.addColumn}> Add column </button>
+              })
-      
+            }
-    
+          >
-    </div>
+            {" "}
-
+            AHHHHH{" "}
-  );
+          </button>
-};
+        </Modal>
+        <button onClick={this.showModal}> Add task </button>
+        <button onClick={this.props.addColumn}> Add column </button>
+      </div>
+    );
+  }
 }
 export default Header;