From a8c0518d4369ad58482072c20e1909b6afde6a50 Mon Sep 17 00:00:00 2001
From: iankbovard <you@example.com>
Date: Wed, 31 Oct 2018 14:05:57 -0500
Subject: [PATCH] TaskFormLayer now a seperate file

---
 src/Components/TaskFormLayer/index.js  | 38 +++++++++++++++++++++++++
 src/Components/TaskFormLayer/styles.js |  0
 src/Components/TaskManager/index.js    | 39 ++------------------------
 3 files changed, 41 insertions(+), 36 deletions(-)
 create mode 100644 src/Components/TaskFormLayer/index.js
 create mode 100644 src/Components/TaskFormLayer/styles.js

diff --git a/src/Components/TaskFormLayer/index.js b/src/Components/TaskFormLayer/index.js
new file mode 100644
index 0000000..7334b07
--- /dev/null
+++ b/src/Components/TaskFormLayer/index.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Layer, Box, TextArea, Select, Button } from 'grommet';
+import { FormAdd, FormClose } from 'grommet-icons'; 
+
+const TaskFormLayer = ({value, description, onDropChange, onClose, onChange, onSubmit, onEdit, edit }) => (
+	<Layer
+		position="center"
+		onClickOutside={onClose}
+		onEsc={onClose}
+    margin="large"
+    modal={true}
+	>
+		<Box margin="medium" direction="column">
+			<TextArea
+        placeholder="Enter the description of your task here"
+        onChange={onChange}
+        style={{ "resize": "none" }}
+        value= {description}
+			>
+			</TextArea>
+      <Box direction="row" justify="center">
+        <Select
+          placeholder="Status"
+          margin="small"
+          size="xsmall"
+          options={['Unassigned', 'In Progress', 'Completed']}
+          value={value}
+          onChange={onDropChange}
+        >
+        </Select>
+        <Button icon={<FormAdd />} onClick={edit ? onEdit : onSubmit}></Button>
+        <Button icon={<FormClose />}onClick={ onClose }></Button>
+      </Box>
+		</Box>
+	</Layer>
+);
+
+export default TaskFormLayer;
\ No newline at end of file
diff --git a/src/Components/TaskFormLayer/styles.js b/src/Components/TaskFormLayer/styles.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/Components/TaskManager/index.js b/src/Components/TaskManager/index.js
index 5a294b3..c4c2d86 100644
--- a/src/Components/TaskManager/index.js
+++ b/src/Components/TaskManager/index.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
-import { Box, Button, Layer, TextArea, Select, Paragraph } from 'grommet';
-import { Add, FormSubtract, FormClose, FormAdd, FormEdit  } from 'grommet-icons';
+import { Box, Button, Paragraph } from 'grommet';
+import { Add, FormSubtract, FormEdit  } from 'grommet-icons';
+import TaskFormLayer from '../TaskFormLayer';
 
 class TaskManager extends Component {
   constructor(props) {
@@ -226,37 +227,3 @@ class TaskManager extends Component {
 }
 
 export default TaskManager;
-
-/* Task form layer  */
-const TaskFormLayer = ({value, description, onDropChange, onClose, onChange, onSubmit, onEdit, edit }) => (
-	<Layer
-		position="center"
-		onClickOutside={onClose}
-		onEsc={onClose}
-    margin="large"
-    modal={true}
-	>
-		<Box margin="medium" direction="column">
-			<TextArea
-        placeholder="Enter the description of your task here"
-        onChange={onChange}
-        style={{ "resize": "none" }}
-        value= {description}
-			>
-			</TextArea>
-      <Box direction="row" justify="center">
-        <Select
-          placeholder="Status"
-          margin="small"
-          size="xsmall"
-          options={['Unassigned', 'In Progress', 'Completed']}
-          value={value}
-          onChange={onDropChange}
-        >
-        </Select>
-        <Button icon={<FormAdd />} onClick={edit ? onEdit : onSubmit}></Button>
-        <Button icon={<FormClose />}onClick={ onClose }></Button>
-      </Box>
-		</Box>
-	</Layer>
-);
\ No newline at end of file