Prettier

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 (
       <div className="App">
-        <Header addColumn={this.addColumn} addTask={this.addTask}/>
+        <Header addColumn={this.addColumn} addTask={this.addTask} />
         {this.state.columns.map((column, index) => (
           <KBColumn
             color={column.color}
@@ -96,4 +92,4 @@ class App extends React.Component<{}, State> {
     );
   }
 }
-export default App;
+export default App;

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(
-        <div className="header" style= {{backgroundColor: 'grey', height: 60 }}>
-           <h1 style={{float: 'left', margin: 0, padding: 0, verticalAlign: 'center'}}>Kango Bango</h1>
-           <button onClick={props.addTask}> Add task </button>
-           <button onClick={props.addColumn}> Add column </button>
-        </div>
-    )
-}
-export default Header
+  addColumn: () => void;
+  addTask: () => void;
+};
+const Header = (props: HeaderProps) => {
+  return (
+    <div className="header" style={{ backgroundColor: "grey", height: 60 }}>
+      <h1
+        style={{
+          float: "left",
+          margin: 0,
+          padding: 0,
+          verticalAlign: "center",
+        }}
+      >
+        Kango Bango
+      </h1>
+      <button onClick={props.addTask}> Add task </button>
+      <button onClick={props.addColumn}> Add column </button>
+    </div>
+  );
+};
+export default Header;

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 (
     <div className="KBColumn" style={{ backgroundColor: color, height: 200 }}>
       <h3>{title}</h3>
-    
+
       {tasks.map((task) => (
-          <div>
+        <div>
           <p> {task.title} </p>
 
           <p> {task.description} </p>
-          </div>
+        </div>
       ))}
-      
-      <button onClick={() => {onDelete && onDelete(id)}}>Deleete</button>
+
+      <button
+        onClick={() => {
+          onDelete && onDelete(id);
+        }}
+      >
+        Deleete
+      </button>
     </div>
   );
 };
-export default KBColumn;
+export default KBColumn;

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;
 }
-
-

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
+  id: number;
+  title: string;
+  description: string;
+  priority: "normal" | "important" | "urgent";
+};
+export default Task;

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"]
 }