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'>
-        {this.state.columns.map((column, index) => (
-          <KBColumn
-            color={column.color}
-            title={column.name}
-            key={index}
-            onDelete={this.deleteColumn}
-            id={column.id}
-            tasks={column.tasks}
-          />
-        ))}
-          </div>
+        <div className="panel">
+          {this.state.columns.map((column, index) => (
+            <KBColumn
+              color={column.color}
+              title={column.name}
+              key={index}
+              onDelete={this.deleteColumn}
+              id={column.id}
+              tasks={column.tasks}
+            />
+          ))}
+        </div>
       </div>
     );
   }

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

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