diff --git a/ReactLearning/kanban-board/src/App.tsx b/ReactLearning/kanban-board/src/App.tsx index 21d1361..aabe00d 100644 --- a/ReactLearning/kanban-board/src/App.tsx +++ b/ReactLearning/kanban-board/src/App.tsx @@ -2,7 +2,7 @@ import React from "react"; import KBColumn from "./components/KBColumn"; import "./App.css"; import Header from "./components/Header"; -import Task from "./types/Task" +import Task from "./types/Task"; type Column = { id: number; @@ -11,8 +11,6 @@ type Column = { tasks: Task[]; }; - - type State = { columns: Column[]; columnIterator: number; @@ -33,13 +31,13 @@ class App extends React.Component<{}, State> { id: 1, name: "Harry", color: "green", - tasks: [] + tasks: [], }, { id: 2, name: "Potter", color: "red", - tasks: [] + tasks: [], }, ], }; @@ -59,29 +57,27 @@ class App extends React.Component<{}, State> { id: columnId, name: "tempName" + columnId, color: "red", - tasks: [] + tasks: [], }); } - addTask(){ - - if (this.state.columns.length > 0){ + 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, + this.setState({ taskIterator: taskId + 1 }); + this.state.columns[0].tasks.push({ + id: taskId, + title: "Task " + taskId, description: "foo", - priority: 'normal' - } - ) + priority: "normal", + }); } } render() { return (
-
+
{this.state.columns.map((column, index) => ( { ); } } -export default App; \ No newline at end of file +export default App; diff --git a/ReactLearning/kanban-board/src/components/Header.tsx b/ReactLearning/kanban-board/src/components/Header.tsx index 00572df..739092d 100644 --- a/ReactLearning/kanban-board/src/components/Header.tsx +++ b/ReactLearning/kanban-board/src/components/Header.tsx @@ -1,19 +1,25 @@ -import * as react from 'react' +import * as react from "react"; type HeaderProps = { - addColumn: () => void, - addTask: () => void -} -const Header = ( props: HeaderProps ) => { - - - - return( -
-

Kango Bango

- - -
- ) -} -export default Header \ No newline at end of file + addColumn: () => void; + addTask: () => void; +}; +const Header = (props: HeaderProps) => { + return ( +
+

+ Kango Bango +

+ + +
+ ); +}; +export default Header; diff --git a/ReactLearning/kanban-board/src/components/KBColumn.tsx b/ReactLearning/kanban-board/src/components/KBColumn.tsx index 77b5e91..e744815 100644 --- a/ReactLearning/kanban-board/src/components/KBColumn.tsx +++ b/ReactLearning/kanban-board/src/components/KBColumn.tsx @@ -1,35 +1,41 @@ import * as react from "react"; -import Task from "../types/Task" +import Task from "../types/Task"; type KBColumnProps = { color?: string; title?: string; tasks: Task[]; id: number; - onDelete?: (id: number) => void + onDelete?: (id: number) => void; }; const defaultProps: KBColumnProps = { color: "#00cc00", title: "waah", tasks: [], id: -1, - onDelete: (id: number) => {} + onDelete: (id: number) => {}, }; const KBColumn = (props: KBColumnProps) => { const { color, title, tasks, onDelete, id } = { ...defaultProps, ...props }; return (

{title}

- + {tasks.map((task) => ( -
+

{task.title}

{task.description}

-
+
))} - - + +
); }; -export default KBColumn; \ No newline at end of file +export default KBColumn; diff --git a/ReactLearning/kanban-board/src/index.css b/ReactLearning/kanban-board/src/index.css index 352ce44..4a1df4d 100644 --- a/ReactLearning/kanban-board/src/index.css +++ b/ReactLearning/kanban-board/src/index.css @@ -1,15 +1,13 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } - - diff --git a/ReactLearning/kanban-board/src/types/Task.ts b/ReactLearning/kanban-board/src/types/Task.ts index 760d30c..04b588d 100644 --- a/ReactLearning/kanban-board/src/types/Task.ts +++ b/ReactLearning/kanban-board/src/types/Task.ts @@ -1,8 +1,7 @@ type Task = { - id: number, - title: string, - description: string, - priority: 'normal'|'important'|'urgent' - } - -export default Task \ No newline at end of file + id: number; + title: string; + description: string; + priority: "normal" | "important" | "urgent"; +}; +export default Task; diff --git a/ReactLearning/kanban-board/tsconfig.json b/ReactLearning/kanban-board/tsconfig.json index a273b0c..9d379a3 100644 --- a/ReactLearning/kanban-board/tsconfig.json +++ b/ReactLearning/kanban-board/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, @@ -20,7 +16,5 @@ "noEmit": true, "jsx": "react-jsx" }, - "include": [ - "src" - ] + "include": ["src"] }