diff --git a/ReactLearning/kanban-board/src/App.tsx b/ReactLearning/kanban-board/src/App.tsx
index 4a23bd8..7560422 100644
--- a/ReactLearning/kanban-board/src/App.tsx
+++ b/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 (
-
- {this.state.columns.map((column, index) => (
-
- ))}
-
+
+ {this.state.columns.map((column, index) => (
+
+ ))}
+
);
}
diff --git a/ReactLearning/kanban-board/src/components/Header.tsx b/ReactLearning/kanban-board/src/components/Header.tsx
index 0a9143d..bad363c 100644
--- a/ReactLearning/kanban-board/src/components/Header.tsx
+++ b/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 {
+ 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{
-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) {
- 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) {
+ 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){
-
- event.target.value === 'normal' ? this.setState({prioVar: 'normal'})
- : event.target.value === 'important' ? this.setState({prioVar: 'important'})
- : this.setState({prioVar: 'urgent'})
-
-}
+ handleSelectChange(event: React.ChangeEvent) {
+ const selectedValue = event.target.value as priority;
+ this.setState({ prioVar: selectedValue });
+ }
-render(){
- return (
-
-
+ );
+ }
}
export default Header;