Moved the types out into their own type files

ReactLearning/kanban-board/src/App.css

@@ -17,22 +17,21 @@ html {
   font-size: 16pt;
   color: #ddd;
   border-style: line;
-
   background-color: #404552;
 }
- 
+
 /* For some reason, the CSS i need to use to get this to work isn't coming to me >:( */
 .KBColumn {
   text-align: center;
   display: block;
   float: left;
-  width:initial;
-  flex-grow:inherit;
+  width: initial;
+  flex-grow: inherit;
   border-color: #ddd;
   border-width: 2px;
   border-style: solid;
   color: "orange";
 }
-.panel{
+.panel {
   width: 100%;
 }

ReactLearning/kanban-board/src/App.tsx

@@ -2,20 +2,8 @@ import React from "react";
 import KBColumn from "./components/KBColumn";
 import "./App.css";
 import Header from "./components/Header";
-import Task from "./types/Task";
-type TaskPassback = {
-  title: string;
-  description: string;
-  priority: "normal" | "important" | "urgent";
-  column: number;
-};
-
-type Column = {
-  id: number;
-  name: string;
-  color: string;
-  tasks: Task[];
-};
+import Column from "./types/Column";
+import TaskPassback from "./types/TaskPassback";
 
 type State = {
   columns: Column[];

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

@@ -1,16 +1,9 @@
 import React from "react";
 import Modal from "./Modal";
-import Task from "../types/Task";
-import Column from "../types/Column"
-type TaskPassback = {
-  title: string;
-  description: string;
-  priority: priority;
-  column: number;
-};
-
+import Column from "../types/Column";
+import TaskPassback from "../types/TaskPassback";
+import Priority from "../types/Priority";
 
-type priority = "normal" | "important" | "urgent";
 type HeaderProps = {
   addColumn: () => void;
   addTask: (taskInstance?: TaskPassback) => void;
@@ -21,7 +14,7 @@ type State = {
   show: boolean;
   titleVar: string;
   descVar: string;
-  prioVar: priority;
+  prioVar: Priority;
   columnNumber: number;
 };
 
@@ -62,7 +55,7 @@ class Header extends React.Component<HeaderProps, State> {
 
   handleSelectChange(event: React.ChangeEvent<HTMLSelectElement>) {
     if (event.target.id === "prioritySelect") {
-      const selectedValue = event.target.value as priority;
+      const selectedValue = event.target.value as Priority;
       this.setState({ prioVar: selectedValue });
     }
 

ReactLearning/kanban-board/src/types/Priority.ts

@@ -0,0 +1,2 @@
+type Priority = "normal" | "important" | "urgent";
+export default Priority;

ReactLearning/kanban-board/src/types/TaskPassback.ts

@@ -0,0 +1,10 @@
+import Priority from "./Priority";
+
+type TaskPassback = {
+  title: string;
+  description: string;
+  priority: Priority;
+  column: number;
+};
+
+export default TaskPassback;