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 ( - -
-

- Kango Bango + render() { + return ( +
+

+ Kango Bango

- - -
- - ); -}; + + + + +

+ ); + } } export default Header;