From 5248cd6510ea6b361c69de7e4d53a7415c804339 Mon Sep 17 00:00:00 2001
From: Allison <allison.lee124@gmail.com>
Date: Sat, 29 Jun 2019 11:32:40 -0700
Subject: [PATCH 1/7] Create ToDoList and ToDoListEditor files. Modify
 ContentMapping and ContentSingularData to include ToDoList.

---
 .../ContentMapping/ContentMapping.ts          |  9 +++++++-
 .../ContentWidgets/ToDoList/ToDoList.tsx      | 23 +++++++++++++++++++
 .../ToDoList/ToDoListEditor.tsx               | 22 ++++++++++++++++++
 src/components/_data/ContentSingularData.ts   |  4 ++--
 4 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ContentWidgets/ToDoList/ToDoList.tsx
 create mode 100644 src/components/ContentWidgets/ToDoList/ToDoListEditor.tsx

diff --git a/src/components/ContentMapping/ContentMapping.ts b/src/components/ContentMapping/ContentMapping.ts
index d5b6db9..47dd8d9 100644
--- a/src/components/ContentMapping/ContentMapping.ts
+++ b/src/components/ContentMapping/ContentMapping.ts
@@ -5,6 +5,8 @@ import { Stub, StubEditor } from '../ContentWidgets/_Stub/Stub';
 import { ContentSingularData } from '../_data/ContentSingularData';
 import { ExampleImage } from '../ContentWidgets/ExampleImage/ExampleImage';
 import { ExampleImageEditor } from '../ContentWidgets/ExampleImage/ExampleImageEditor';
+import { ToDoList } from '../ContentWidgets/ToDoList/ToDoList';
+import { ToDoListEditor } from '../ContentWidgets/ToDoList/ToDoListEditor';
 
 export type WidgetEditorProps = {
     originalContent: ContentSingularData,
@@ -22,7 +24,8 @@ type ContentMappingType = {
 export enum WidgetTypes {
     PLAIN_TEXT = "PLAIN_TEXT",
     STUB = "STUB",
-    EXAMPLE_IMAGE = "EXAMPLE_IMAGE"
+    EXAMPLE_IMAGE = "EXAMPLE_IMAGE",
+    TO_DO_LIST = "TO_DO_LIST"
 }
 
 export const ContentMapping: ContentMappingType = {
@@ -37,5 +40,9 @@ export const ContentMapping: ContentMappingType = {
     EXAMPLE_IMAGE: {
         widget: ExampleImage,
         editor: ExampleImageEditor
+    },
+    TO_DO_LIST: {
+        widget: ToDoList,
+        editor: ToDoListEditor
     }
 }
\ No newline at end of file
diff --git a/src/components/ContentWidgets/ToDoList/ToDoList.tsx b/src/components/ContentWidgets/ToDoList/ToDoList.tsx
new file mode 100644
index 0000000..83cdb81
--- /dev/null
+++ b/src/components/ContentWidgets/ToDoList/ToDoList.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { ContentSingularData } from "../../_data/ContentSingularData";
+
+/** 
+ * A to-do list widget
+ * 
+ * Last Modified
+ * Allison Lee
+ * June 28, 2019
+**/
+export const ToDoList: React.FC<ContentSingularData> = ({
+    list
+}) => {
+    if (!list) {
+        return <></>
+    }
+
+    let items = list.map((item) => {
+        return <li>{item}</li>;
+    })
+
+    return <ul>{items}</ul>
+}
\ No newline at end of file
diff --git a/src/components/ContentWidgets/ToDoList/ToDoListEditor.tsx b/src/components/ContentWidgets/ToDoList/ToDoListEditor.tsx
new file mode 100644
index 0000000..be15424
--- /dev/null
+++ b/src/components/ContentWidgets/ToDoList/ToDoListEditor.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { WidgetEditorProps } from '../../ContentMapping/ContentMapping';
+
+export const ToDoListEditor: React.FC<WidgetEditorProps> = ({
+    originalContent, 
+    editedContent,
+    setEditedContentOnChange
+}) => {
+    let list = editedContent.list || [];
+
+    let items = list.map((item) => {
+        return <li>{item}</li>;
+    })
+
+    return <>
+        <ul>
+            items
+        </ul>
+        <h3>Add New To-Do Item</h3>
+        <input type="text" onChange={(e) => setEditedContentOnChange("list", e.target.value)}/>
+    </>
+}
\ No newline at end of file
diff --git a/src/components/_data/ContentSingularData.ts b/src/components/_data/ContentSingularData.ts
index 0f957b0..63e196f 100644
--- a/src/components/_data/ContentSingularData.ts
+++ b/src/components/_data/ContentSingularData.ts
@@ -1,6 +1,6 @@
 export type ContentSingularData = {
     plainText_content?: string
-    exampleImage_imageLink?: string
-    exampleImage_percentageSize?: number
+    list?: string[]
+    completed?: string[]
     [idx: string]: any
 }
\ No newline at end of file

From 4a607b5ebdc36dad180808c3987099c614a33913 Mon Sep 17 00:00:00 2001
From: Allison <allison.lee124@gmail.com>
Date: Sun, 7 Jul 2019 00:46:44 -0700
Subject: [PATCH 2/7] Add ability to add new To-Do items in editor

---
 .../ContentWidgets/ToDoList/ToDoList.css      |  3 +++
 .../ContentWidgets/ToDoList/ToDoList.tsx      |  6 ++---
 .../ToDoList/ToDoListEditor.tsx               | 25 ++++++++++++++++---
 src/components/_data/ContentSingularData.ts   |  3 +--
 4 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 src/components/ContentWidgets/ToDoList/ToDoList.css

diff --git a/src/components/ContentWidgets/ToDoList/ToDoList.css b/src/components/ContentWidgets/ToDoList/ToDoList.css
new file mode 100644
index 0000000..5593e1a
--- /dev/null
+++ b/src/components/ContentWidgets/ToDoList/ToDoList.css
@@ -0,0 +1,3 @@
+ul {
+    list-style-type: none;
+}
\ No newline at end of file
diff --git a/src/components/ContentWidgets/ToDoList/ToDoList.tsx b/src/components/ContentWidgets/ToDoList/ToDoList.tsx
index 83cdb81..2208710 100644
--- a/src/components/ContentWidgets/ToDoList/ToDoList.tsx
+++ b/src/components/ContentWidgets/ToDoList/ToDoList.tsx
@@ -9,13 +9,13 @@ import { ContentSingularData } from "../../_data/ContentSingularData";
  * June 28, 2019
 **/
 export const ToDoList: React.FC<ContentSingularData> = ({
-    list
+    toDoList
 }) => {
-    if (!list) {
+    if (!toDoList) {
         return <></>
     }
 
-    let items = list.map((item) => {
+    let items = toDoList.map((item) => {
         return <li>{item}</li>;
     })
 
diff --git a/src/components/ContentWidgets/ToDoList/ToDoListEditor.tsx b/src/components/ContentWidgets/ToDoList/ToDoListEditor.tsx
index be15424..63548ff 100644
--- a/src/components/ContentWidgets/ToDoList/ToDoListEditor.tsx
+++ b/src/components/ContentWidgets/ToDoList/ToDoListEditor.tsx
@@ -1,12 +1,26 @@
-import React from 'react';
+import React, { FormEvent, ChangeEvent } from 'react';
 import { WidgetEditorProps } from '../../ContentMapping/ContentMapping';
+import './ToDoList.css';
 
 export const ToDoListEditor: React.FC<WidgetEditorProps> = ({
     originalContent, 
     editedContent,
     setEditedContentOnChange
 }) => {
-    let list = editedContent.list || [];
+    let list = editedContent.toDoList || [];
+    let title = "";
+
+    let handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        console.log(e.target.value);
+        title = e.target.value;
+    }
+
+    let addToDo = (e: FormEvent) => {
+        e.preventDefault()
+        let newList = [...list];
+        newList.push(title);
+        setEditedContentOnChange("toDoList", newList);
+    }
 
     let items = list.map((item) => {
         return <li>{item}</li>;
@@ -14,9 +28,12 @@ export const ToDoListEditor: React.FC<WidgetEditorProps> = ({
 
     return <>
         <ul>
-            items
+            {items}
         </ul>
         <h3>Add New To-Do Item</h3>
-        <input type="text" onChange={(e) => setEditedContentOnChange("list", e.target.value)}/>
+        <form onSubmit={(e) => addToDo(e)}>
+            <input type="text" placeholder="Task" onChange={(e) => handleChange(e)}/>
+            <button type="submit"> Add Task </button>
+        </form>
     </>
 }
\ No newline at end of file
diff --git a/src/components/_data/ContentSingularData.ts b/src/components/_data/ContentSingularData.ts
index 63e196f..eda9cc9 100644
--- a/src/components/_data/ContentSingularData.ts
+++ b/src/components/_data/ContentSingularData.ts
@@ -1,6 +1,5 @@
 export type ContentSingularData = {
     plainText_content?: string
-    list?: string[]
-    completed?: string[]
+    toDoList?: String[]
     [idx: string]: any
 }
\ No newline at end of file

From 19bb2c8dbc9c9081490dd2b95e8db305431ddc6b Mon Sep 17 00:00:00 2001
From: Allison <allison.lee124@gmail.com>
Date: Sun, 7 Jul 2019 19:31:51 -0700
Subject: [PATCH 3/7] Complete to-do list functionality

---
 .../ContentWidgets/ToDoList/ToDoList.tsx      |  2 +-
 .../ToDoList/ToDoListEditor.tsx               | 35 +++++++++++++------
 src/components/_data/ContentSingularData.ts   |  2 +-
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/components/ContentWidgets/ToDoList/ToDoList.tsx b/src/components/ContentWidgets/ToDoList/ToDoList.tsx
index 2208710..8a224a6 100644
--- a/src/components/ContentWidgets/ToDoList/ToDoList.tsx
+++ b/src/components/ContentWidgets/ToDoList/ToDoList.tsx
@@ -16,7 +16,7 @@ export const ToDoList: React.FC<ContentSingularData> = ({
     }
 
     let items = toDoList.map((item) => {
-        return <li>{item}</li>;
+        return <li key={item.index}>{item.task}</li>;
     })
 
     return <ul>{items}</ul>
diff --git a/src/components/ContentWidgets/ToDoList/ToDoListEditor.tsx b/src/components/ContentWidgets/ToDoList/ToDoListEditor.tsx
index 63548ff..7855702 100644
--- a/src/components/ContentWidgets/ToDoList/ToDoListEditor.tsx
+++ b/src/components/ContentWidgets/ToDoList/ToDoListEditor.tsx
@@ -8,32 +8,45 @@ export const ToDoListEditor: React.FC<WidgetEditorProps> = ({
     setEditedContentOnChange
 }) => {
     let list = editedContent.toDoList || [];
-    let title = "";
+    let task_text = "";
 
-    let handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        console.log(e.target.value);
-        title = e.target.value;
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        task_text = e.target.value;
     }
 
-    let addToDo = (e: FormEvent) => {
-        e.preventDefault()
+    const addToDo = (e: FormEvent) => {
+        e.preventDefault();
         let newList = [...list];
-        newList.push(title);
+        newList.push({index: newList.length, task: task_text});
+        setEditedContentOnChange("toDoList", newList);
+    }
+
+    const removeToDo = (indexToRemove: number) => {
+        let newList = [...list];
+        newList.splice(indexToRemove, 1);
+        for (let i = indexToRemove; i < newList.length; i++) {
+            newList[i].index = i;
+        }
         setEditedContentOnChange("toDoList", newList);
     }
 
     let items = list.map((item) => {
-        return <li>{item}</li>;
+        return (
+            <li key={item.index}>{item.task}
+                <button onClick={() => removeToDo(item.index!)}>&times;</button>
+            </li>
+        );
     })
-
+    
     return <>
         <ul>
             {items}
         </ul>
         <h3>Add New To-Do Item</h3>
+        {console.log(task_text)}
         <form onSubmit={(e) => addToDo(e)}>
-            <input type="text" placeholder="Task" onChange={(e) => handleChange(e)}/>
-            <button type="submit"> Add Task </button>
+            <input type="text" placeholder="Type task to do..." onChange={(e) => handleChange(e)}/>
+            <button type="submit">Add Task</button>
         </form>
     </>
 }
\ No newline at end of file
diff --git a/src/components/_data/ContentSingularData.ts b/src/components/_data/ContentSingularData.ts
index eda9cc9..223afa8 100644
--- a/src/components/_data/ContentSingularData.ts
+++ b/src/components/_data/ContentSingularData.ts
@@ -1,5 +1,5 @@
 export type ContentSingularData = {
     plainText_content?: string
-    toDoList?: String[]
+    toDoList?: {index?: number, task?: string}[]
     [idx: string]: any
 }
\ No newline at end of file

From 061c3f9fe442b5e60f1cae297cb0e860aafa2317 Mon Sep 17 00:00:00 2001
From: Allison Lee <allison.lee124@gmail.com>
Date: Thu, 11 Jul 2019 16:43:06 -0700
Subject: [PATCH 4/7] Create ToDoList type and integrate hash for item keys

---
 .../ContentWidgets/ToDoList/ToDoList.tsx      | 27 ++++++---
 .../ToDoList/ToDoListEditor.tsx               | 60 ++++++++++++-------
 src/components/_data/ContentSingularData.ts   |  6 +-
 3 files changed, 61 insertions(+), 32 deletions(-)

diff --git a/src/components/ContentWidgets/ToDoList/ToDoList.tsx b/src/components/ContentWidgets/ToDoList/ToDoList.tsx
index 8a224a6..fa50dc5 100644
--- a/src/components/ContentWidgets/ToDoList/ToDoList.tsx
+++ b/src/components/ContentWidgets/ToDoList/ToDoList.tsx
@@ -1,23 +1,34 @@
 import React from 'react';
 import { ContentSingularData } from "../../_data/ContentSingularData";
 
+export type ToDoListItem = {
+    toDoListItem_hash: string
+    toDoListItem_task: string
+}
+
 /** 
  * A to-do list widget
  * 
  * Last Modified
  * Allison Lee
- * June 28, 2019
+ * July 11, 2019
 **/
 export const ToDoList: React.FC<ContentSingularData> = ({
-    toDoList
+    toDoList_content
 }) => {
-    if (!toDoList) {
+    if (!toDoList_content) {
         return <></>
     }
 
-    let items = toDoList.map((item) => {
-        return <li key={item.index}>{item.task}</li>;
-    })
-
-    return <ul>{items}</ul>
+    return (
+        <ul>
+            {toDoList_content.map((item) => {
+                return (
+                    <li key={item.toDoListItem_hash}>
+                        {item.toDoListItem_task}
+                    </li>
+                )
+            })}
+        </ul>
+    )
 }
\ No newline at end of file
diff --git a/src/components/ContentWidgets/ToDoList/ToDoListEditor.tsx b/src/components/ContentWidgets/ToDoList/ToDoListEditor.tsx
index 7855702..592e912 100644
--- a/src/components/ContentWidgets/ToDoList/ToDoListEditor.tsx
+++ b/src/components/ContentWidgets/ToDoList/ToDoListEditor.tsx
@@ -1,49 +1,63 @@
 import React, { FormEvent, ChangeEvent } from 'react';
 import { WidgetEditorProps } from '../../ContentMapping/ContentMapping';
 import './ToDoList.css';
+import { ToDoListItem } from './ToDoList';
 
 export const ToDoListEditor: React.FC<WidgetEditorProps> = ({
     originalContent, 
     editedContent,
     setEditedContentOnChange
 }) => {
-    let list = editedContent.toDoList || [];
-    let task_text = "";
+    let toDoList_content = editedContent.toDoList_content || [];
+    let taskText = "";
+    
+    const generateHash: () => string = () => {
+        const lengthOfGeneratedHash = 24;
+    
+        let randomInt8s = new Uint8Array(lengthOfGeneratedHash / 2);
+        window.crypto.getRandomValues(randomInt8s);
+        return randomInt8s.reduce((accumulator, randomInt) => {
+            return accumulator + ('0' + randomInt.toString(16)).substr(2)
+        }, "")
+    }
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        task_text = e.target.value;
+        taskText = e.target.value;
     }
 
     const addToDo = (e: FormEvent) => {
         e.preventDefault();
-        let newList = [...list];
-        newList.push({index: newList.length, task: task_text});
-        setEditedContentOnChange("toDoList", newList);
+        let listCopy = [...toDoList_content];
+        let newKey = generateHash();
+        listCopy.push({toDoListItem_hash: newKey, toDoListItem_task: taskText});
+        setEditedContentOnChange("toDoList_content", listCopy);
     }
 
-    const removeToDo = (indexToRemove: number) => {
-        let newList = [...list];
-        newList.splice(indexToRemove, 1);
-        for (let i = indexToRemove; i < newList.length; i++) {
-            newList[i].index = i;
-        }
-        setEditedContentOnChange("toDoList", newList);
-    }
+    const removeToDo = (hashToRemove: string) => {
+        let listCopy = [...toDoList_content];
+        let newList: ToDoListItem[] = [];
 
-    let items = list.map((item) => {
-        return (
-            <li key={item.index}>{item.task}
-                <button onClick={() => removeToDo(item.index!)}>&times;</button>
-            </li>
-        );
-    })
+        listCopy.forEach(item => {
+            if (item.toDoListItem_hash !== hashToRemove) {
+                newList.push(item)
+            }
+        });
+        setEditedContentOnChange("toDoList_content", newList);
+    }
     
     return <>
         <ul>
-            {items}
+            {
+                toDoList_content.map((item) => {
+                    return (
+                        <li key={item.toDoListItem_hash}>{item.toDoListItem_task}
+                            <button onClick={() => removeToDo(item.toDoListItem_hash)}>&times;</button>
+                        </li>
+                    );
+                })
+            }
         </ul>
         <h3>Add New To-Do Item</h3>
-        {console.log(task_text)}
         <form onSubmit={(e) => addToDo(e)}>
             <input type="text" placeholder="Type task to do..." onChange={(e) => handleChange(e)}/>
             <button type="submit">Add Task</button>
diff --git a/src/components/_data/ContentSingularData.ts b/src/components/_data/ContentSingularData.ts
index 223afa8..9e2e770 100644
--- a/src/components/_data/ContentSingularData.ts
+++ b/src/components/_data/ContentSingularData.ts
@@ -1,5 +1,9 @@
+import { ToDoListItem } from '../ContentWidgets/ToDoList/ToDoList';
+
 export type ContentSingularData = {
     plainText_content?: string
-    toDoList?: {index?: number, task?: string}[]
+    exampleImage_imageLink?: string
+    exampleImage_percentageSize?: number
+    toDoList_content?: ToDoListItem[]
     [idx: string]: any
 }
\ No newline at end of file

From bdb273d853afa3d60d54014147af7d1215be6a24 Mon Sep 17 00:00:00 2001
From: Allison Lee <allison.lee124@gmail.com>
Date: Thu, 18 Jul 2019 21:59:54 -0700
Subject: [PATCH 5/7] Add Homepage related files for the editor

---
 .../ContentMapping/ContentMapping.ts          |  9 +++-
 .../ContentWidgets/Homepage/Homepage.css      | 26 ++++++++++
 .../ContentWidgets/Homepage/Homepage.tsx      | 49 +++++++++++++++++++
 .../Homepage/HomepageEditor.tsx               | 43 ++++++++++++++++
 src/components/_data/ContentSingularData.ts   |  2 +
 5 files changed, 128 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ContentWidgets/Homepage/Homepage.css
 create mode 100644 src/components/ContentWidgets/Homepage/Homepage.tsx
 create mode 100644 src/components/ContentWidgets/Homepage/HomepageEditor.tsx

diff --git a/src/components/ContentMapping/ContentMapping.ts b/src/components/ContentMapping/ContentMapping.ts
index 47dd8d9..c52cca2 100644
--- a/src/components/ContentMapping/ContentMapping.ts
+++ b/src/components/ContentMapping/ContentMapping.ts
@@ -7,6 +7,8 @@ import { ExampleImage } from '../ContentWidgets/ExampleImage/ExampleImage';
 import { ExampleImageEditor } from '../ContentWidgets/ExampleImage/ExampleImageEditor';
 import { ToDoList } from '../ContentWidgets/ToDoList/ToDoList';
 import { ToDoListEditor } from '../ContentWidgets/ToDoList/ToDoListEditor';
+import { Homepage } from '../ContentWidgets/Homepage/Homepage';
+import { HomepageEditor } from '../ContentWidgets/Homepage/HomepageEditor';
 
 export type WidgetEditorProps = {
     originalContent: ContentSingularData,
@@ -25,7 +27,8 @@ export enum WidgetTypes {
     PLAIN_TEXT = "PLAIN_TEXT",
     STUB = "STUB",
     EXAMPLE_IMAGE = "EXAMPLE_IMAGE",
-    TO_DO_LIST = "TO_DO_LIST"
+    TO_DO_LIST = "TO_DO_LIST",
+    HOMEPAGE = "HOMEPAGE"
 }
 
 export const ContentMapping: ContentMappingType = {
@@ -44,5 +47,9 @@ export const ContentMapping: ContentMappingType = {
     TO_DO_LIST: {
         widget: ToDoList,
         editor: ToDoListEditor
+    },
+    HOMEPAGE: {
+        widget: Homepage,
+        editor: HomepageEditor
     }
 }
\ No newline at end of file
diff --git a/src/components/ContentWidgets/Homepage/Homepage.css b/src/components/ContentWidgets/Homepage/Homepage.css
new file mode 100644
index 0000000..bd90c58
--- /dev/null
+++ b/src/components/ContentWidgets/Homepage/Homepage.css
@@ -0,0 +1,26 @@
+* {
+    box-sizing: border-box;
+}
+
+body, html {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+h1, h2 {
+    text-align: center;
+    color: white
+}
+
+.outer {
+    width: 100%;
+    height: 100%;
+    background-image: url(http://2018.igem.org/wiki/images/f/f8/T--Washington--PhotoCollage.jpg);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-color: rgba(77, 77, 77, 0.6);
+    background-position: center;
+    filter: blur(2px);
+}
diff --git a/src/components/ContentWidgets/Homepage/Homepage.tsx b/src/components/ContentWidgets/Homepage/Homepage.tsx
new file mode 100644
index 0000000..307336c
--- /dev/null
+++ b/src/components/ContentWidgets/Homepage/Homepage.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { ContentSingularData } from "../../_data/ContentSingularData";
+
+/*
+    Examples of Parameters
+    let p = this.props.params;
+    let bgLightness = p.BACKGROUNDLIGHTNESS ? p.BACKGROUNDLIGHTNESS : 0;
+    let bg = p.BACKGROUND ? p.BACKGROUND : this.defaultImage;
+    let bgOpacity = p.BACKGROUNDOPACITY ? p.BACKGROUNDOPACITY : 0.60;
+    let titleHeight = p.TITLEHEIGHT ? p.TITLEHEIGHT : 12;
+    let subtitleHeight = p.SUBTITLEHEIGHT ? p.SUBTITLEHEIGHT : 7;
+    let title = p.TITLE ? p.TITLE : "Stronger Together";
+    let subtitle = p.SUBTITLE ? p.SUBTITLE : "";
+    let buttonText = p.BUTTONTEXT ? p.BUTTONTEXT : 'Overview';
+    let contentTitle = p.CONTENTTITLE ? p.CONTENTTITLE : 'Washington iGEM 2018 Project';
+    let contentSubtitle = p.CONTENTSUBTITLE ? p.CONTENTSUBTITLE : 'Chemically Induced Dimerization of Nanobodies for the Development of Versatile Biosensors';
+    let content = p.CONTENT ? p.CONTENT.split(';') : [''];
+    let blur = p.BLUR ? p.BLUR : 5;
+    */
+
+export type HomepageItem = {
+    title: string,
+    subtitle: string,
+    backgroundImage: string
+}
+
+/** 
+ * A widget for the Home page
+ * 
+ * Last Modified
+ * Allison Lee
+ * July 17, 2019
+**/
+export const Homepage: React.FC<ContentSingularData> = ({
+    homepage_content
+}) => {
+    if (!homepage_content) {
+        return <></>
+    }
+
+    return (
+        <>
+        {/* <div style={{ width: "100%", height: "100%", backgroundImage: homepage_content.backgroundImage }}>
+            <h1>{homepage_content.title}</h1>
+            <h2>{homepage_content.subtitle}</h2>
+        </div> */}
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/ContentWidgets/Homepage/HomepageEditor.tsx b/src/components/ContentWidgets/Homepage/HomepageEditor.tsx
new file mode 100644
index 0000000..29f8562
--- /dev/null
+++ b/src/components/ContentWidgets/Homepage/HomepageEditor.tsx
@@ -0,0 +1,43 @@
+import React, { FormEvent, ChangeEvent } from 'react';
+import { WidgetEditorProps } from '../../ContentMapping/ContentMapping';
+import { HomepageItem } from './Homepage'
+import './Homepage.css';
+import { url } from 'inspector';
+
+export const HomepageEditor: React.FC<WidgetEditorProps> = ({
+    originalContent, 
+    editedContent,
+    setEditedContentOnChange
+}) => {
+    let homepage_content = editedContent.homepage_content || 
+        {title: "Title not set", subtitle: "Subtitle not set", backgroundImage: ""};
+
+    const updateTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
+        homepage_content.title = e.target.value;
+        setEditedContentOnChange("homepage_content", homepage_content);
+    }
+
+    const updateSubtitle = (e: React.ChangeEvent<HTMLInputElement>) => {
+        homepage_content.subtitle = e.target.value;
+        setEditedContentOnChange("homepage_content", homepage_content);
+    }
+
+    const updateBackgroundImage = (e: React.ChangeEvent<HTMLInputElement>) => {
+        homepage_content.backgroundImage = "url(" + e.target.value + ")";
+        setEditedContentOnChange("homepage_content", homepage_content);
+    }
+    
+    return <>
+        <div className="outer"></div>
+        <h1>{homepage_content.title}</h1>
+        <h2>{homepage_content.subtitle}</h2>
+        
+        
+        <h3>Title</h3>
+        <input type="text" onChange={(e) => updateTitle(e)} />
+        <h3>Subtitle</h3>
+        <input type="text" onChange={(e) => updateSubtitle(e)} />
+        <h3>Background Image</h3>
+        <input type="text" onChange={(e) => updateBackgroundImage(e)} />
+    </>
+}
\ No newline at end of file
diff --git a/src/components/_data/ContentSingularData.ts b/src/components/_data/ContentSingularData.ts
index 9e2e770..7eec6d2 100644
--- a/src/components/_data/ContentSingularData.ts
+++ b/src/components/_data/ContentSingularData.ts
@@ -1,9 +1,11 @@
 import { ToDoListItem } from '../ContentWidgets/ToDoList/ToDoList';
+import { HomepageItem } from '../ContentWidgets/Homepage/Homepage';
 
 export type ContentSingularData = {
     plainText_content?: string
     exampleImage_imageLink?: string
     exampleImage_percentageSize?: number
     toDoList_content?: ToDoListItem[]
+    homepage_content?: HomepageItem
     [idx: string]: any
 }
\ No newline at end of file

From 5735c693ec8e6496004167ba80990bdad708d169 Mon Sep 17 00:00:00 2001
From: Allison Lee <allison.lee124@gmail.com>
Date: Fri, 19 Jul 2019 12:01:47 -0700
Subject: [PATCH 6/7] Create Title, Subtitle, and Background Image in editor

---
 .../ContentWidgets/Homepage/Homepage.css      | 17 +++++++++--
 .../ContentWidgets/Homepage/Homepage.tsx      | 30 +++++--------------
 .../Homepage/HomepageEditor.tsx               | 15 ++++++----
 3 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/components/ContentWidgets/Homepage/Homepage.css b/src/components/ContentWidgets/Homepage/Homepage.css
index bd90c58..784ce24 100644
--- a/src/components/ContentWidgets/Homepage/Homepage.css
+++ b/src/components/ContentWidgets/Homepage/Homepage.css
@@ -10,17 +10,28 @@ body, html {
 }
 
 h1, h2 {
-    text-align: center;
     color: white
 }
 
-.outer {
+.bg-image-container {
+    position: relative;
+    text-align: center;
+    height: 100vh;
+}
+
+.bg-image {
     width: 100%;
     height: 100%;
-    background-image: url(http://2018.igem.org/wiki/images/f/f8/T--Washington--PhotoCollage.jpg);
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-color: rgba(77, 77, 77, 0.6);
     background-position: center;
     filter: blur(2px);
 }
+
+.centered {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
diff --git a/src/components/ContentWidgets/Homepage/Homepage.tsx b/src/components/ContentWidgets/Homepage/Homepage.tsx
index 307336c..8752b1b 100644
--- a/src/components/ContentWidgets/Homepage/Homepage.tsx
+++ b/src/components/ContentWidgets/Homepage/Homepage.tsx
@@ -1,23 +1,6 @@
 import React from 'react';
 import { ContentSingularData } from "../../_data/ContentSingularData";
 
-/*
-    Examples of Parameters
-    let p = this.props.params;
-    let bgLightness = p.BACKGROUNDLIGHTNESS ? p.BACKGROUNDLIGHTNESS : 0;
-    let bg = p.BACKGROUND ? p.BACKGROUND : this.defaultImage;
-    let bgOpacity = p.BACKGROUNDOPACITY ? p.BACKGROUNDOPACITY : 0.60;
-    let titleHeight = p.TITLEHEIGHT ? p.TITLEHEIGHT : 12;
-    let subtitleHeight = p.SUBTITLEHEIGHT ? p.SUBTITLEHEIGHT : 7;
-    let title = p.TITLE ? p.TITLE : "Stronger Together";
-    let subtitle = p.SUBTITLE ? p.SUBTITLE : "";
-    let buttonText = p.BUTTONTEXT ? p.BUTTONTEXT : 'Overview';
-    let contentTitle = p.CONTENTTITLE ? p.CONTENTTITLE : 'Washington iGEM 2018 Project';
-    let contentSubtitle = p.CONTENTSUBTITLE ? p.CONTENTSUBTITLE : 'Chemically Induced Dimerization of Nanobodies for the Development of Versatile Biosensors';
-    let content = p.CONTENT ? p.CONTENT.split(';') : [''];
-    let blur = p.BLUR ? p.BLUR : 5;
-    */
-
 export type HomepageItem = {
     title: string,
     subtitle: string,
@@ -29,7 +12,7 @@ export type HomepageItem = {
  * 
  * Last Modified
  * Allison Lee
- * July 17, 2019
+ * July 19, 2019
 **/
 export const Homepage: React.FC<ContentSingularData> = ({
     homepage_content
@@ -40,10 +23,13 @@ export const Homepage: React.FC<ContentSingularData> = ({
 
     return (
         <>
-        {/* <div style={{ width: "100%", height: "100%", backgroundImage: homepage_content.backgroundImage }}>
-            <h1>{homepage_content.title}</h1>
-            <h2>{homepage_content.subtitle}</h2>
-        </div> */}
+            <div className="bg-image-container">
+                <img className="bg-image" src={homepage_content.backgroundImage}/>
+                <section className="centered">
+                    <h1>{homepage_content.title}</h1>
+                    <h2>{homepage_content.subtitle}</h2>
+                </section>
+            </div>
         </>
     )
 }
\ No newline at end of file
diff --git a/src/components/ContentWidgets/Homepage/HomepageEditor.tsx b/src/components/ContentWidgets/Homepage/HomepageEditor.tsx
index 29f8562..5807697 100644
--- a/src/components/ContentWidgets/Homepage/HomepageEditor.tsx
+++ b/src/components/ContentWidgets/Homepage/HomepageEditor.tsx
@@ -1,8 +1,6 @@
 import React, { FormEvent, ChangeEvent } from 'react';
 import { WidgetEditorProps } from '../../ContentMapping/ContentMapping';
-import { HomepageItem } from './Homepage'
 import './Homepage.css';
-import { url } from 'inspector';
 
 export const HomepageEditor: React.FC<WidgetEditorProps> = ({
     originalContent, 
@@ -23,14 +21,19 @@ export const HomepageEditor: React.FC<WidgetEditorProps> = ({
     }
 
     const updateBackgroundImage = (e: React.ChangeEvent<HTMLInputElement>) => {
-        homepage_content.backgroundImage = "url(" + e.target.value + ")";
+        homepage_content.backgroundImage = e.target.value;
         setEditedContentOnChange("homepage_content", homepage_content);
     }
     
     return <>
-        <div className="outer"></div>
-        <h1>{homepage_content.title}</h1>
-        <h2>{homepage_content.subtitle}</h2>
+        <div className="bg-image-container">
+            <img className="bg-image" src={homepage_content.backgroundImage}/>
+            <section className="centered">
+                <h1>{homepage_content.title}</h1>
+                <h2>{homepage_content.subtitle}</h2>
+            </section>
+        </div>
+        
         
         
         <h3>Title</h3>

From e81c4d24a81953a337c3a5fd9e73f6368fc76b51 Mon Sep 17 00:00:00 2001
From: Allison <allison.lee124@gmail.com>
Date: Sun, 8 Sep 2019 18:10:07 -0700
Subject: [PATCH 7/7] Create blur functionality and other properties for
 background image

---
 .../ContentWidgets/Homepage/Homepage.css      | 23 --------
 .../ContentWidgets/Homepage/Homepage.tsx      | 24 +++++---
 .../Homepage/HomepageEditor.tsx               | 59 ++++++++++++++-----
 3 files changed, 60 insertions(+), 46 deletions(-)

diff --git a/src/components/ContentWidgets/Homepage/Homepage.css b/src/components/ContentWidgets/Homepage/Homepage.css
index 784ce24..1811e9e 100644
--- a/src/components/ContentWidgets/Homepage/Homepage.css
+++ b/src/components/ContentWidgets/Homepage/Homepage.css
@@ -12,26 +12,3 @@ body, html {
 h1, h2 {
     color: white
 }
-
-.bg-image-container {
-    position: relative;
-    text-align: center;
-    height: 100vh;
-}
-
-.bg-image {
-    width: 100%;
-    height: 100%;
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    background-color: rgba(77, 77, 77, 0.6);
-    background-position: center;
-    filter: blur(2px);
-}
-
-.centered {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
diff --git a/src/components/ContentWidgets/Homepage/Homepage.tsx b/src/components/ContentWidgets/Homepage/Homepage.tsx
index 8752b1b..47a0268 100644
--- a/src/components/ContentWidgets/Homepage/Homepage.tsx
+++ b/src/components/ContentWidgets/Homepage/Homepage.tsx
@@ -4,7 +4,10 @@ import { ContentSingularData } from "../../_data/ContentSingularData";
 export type HomepageItem = {
     title: string,
     subtitle: string,
-    backgroundImage: string
+    backgroundImage: string,
+    blur: string,
+    bgLightness: string,
+    bgOpacity: string
 }
 
 /** 
@@ -23,12 +26,19 @@ export const Homepage: React.FC<ContentSingularData> = ({
 
     return (
         <>
-            <div className="bg-image-container">
-                <img className="bg-image" src={homepage_content.backgroundImage}/>
-                <section className="centered">
-                    <h1>{homepage_content.title}</h1>
-                    <h2>{homepage_content.subtitle}</h2>
-                </section>
+            <div style={{
+                backgroundImage: `url(${homepage_content.backgroundImage})`,
+                height: `100vh`,
+                backgroundPosition: `center`,
+                backgroundRepeat: `no-repeat`,
+                backgroundSize: `cover`,
+                backgroundColor: `hsla(0, 0% ,${homepage_content.bgLightness}%, ${homepage_content.bgOpacity})`,
+                filter: `blur(${homepage_content.blur}px)`,
+            }}>
+            </div>
+            <div style={{textAlign: `center`, transform: `translate(0, -400%)`}}>
+                <h1>{homepage_content.title}</h1>
+                <h2>{homepage_content.subtitle}</h2>
             </div>
         </>
     )
diff --git a/src/components/ContentWidgets/Homepage/HomepageEditor.tsx b/src/components/ContentWidgets/Homepage/HomepageEditor.tsx
index 5807697..a75ef1f 100644
--- a/src/components/ContentWidgets/Homepage/HomepageEditor.tsx
+++ b/src/components/ContentWidgets/Homepage/HomepageEditor.tsx
@@ -8,7 +8,7 @@ export const HomepageEditor: React.FC<WidgetEditorProps> = ({
     setEditedContentOnChange
 }) => {
     let homepage_content = editedContent.homepage_content || 
-        {title: "Title not set", subtitle: "Subtitle not set", backgroundImage: ""};
+        {title: "Title not set", subtitle: "Subtitle not set", backgroundImage: "", blur: "", bgLightness: "", bgOpacity: ""};
 
     const updateTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
         homepage_content.title = e.target.value;
@@ -24,23 +24,50 @@ export const HomepageEditor: React.FC<WidgetEditorProps> = ({
         homepage_content.backgroundImage = e.target.value;
         setEditedContentOnChange("homepage_content", homepage_content);
     }
+
+    const updateBlur = (e: React.ChangeEvent<HTMLInputElement>) => {
+        homepage_content.blur = e.target.value;
+        setEditedContentOnChange("homepage_content", homepage_content);
+    }
+
+    const updateBgLightness = (e: React.ChangeEvent<HTMLInputElement>) => {
+        homepage_content.bgLightness = e.target.value;
+        setEditedContentOnChange("homepage_content", homepage_content);
+    }
+
+    const updateBgOpacity = (e: React.ChangeEvent<HTMLInputElement>) => {
+        homepage_content.bgOpacity = e.target.value;
+        setEditedContentOnChange("homepage_content", homepage_content);
+    }
     
     return <>
-        <div className="bg-image-container">
-            <img className="bg-image" src={homepage_content.backgroundImage}/>
-            <section className="centered">
-                <h1>{homepage_content.title}</h1>
-                <h2>{homepage_content.subtitle}</h2>
-            </section>
+        <div style={{
+                backgroundImage: `url(${homepage_content.backgroundImage})`,
+                height: `100vh`,
+                backgroundPosition: `center`,
+                backgroundRepeat: `no-repeat`,
+                backgroundSize: `cover`,
+                backgroundColor: `hsla(0, 0% ,${homepage_content.bgLightness}%, ${homepage_content.bgOpacity})`,
+                filter: `blur(${homepage_content.blur}px)`,
+            }}>
+        </div>
+        <div style={{textAlign: `center`, transform: `translate(0, -400%)`}}>
+            <h1>{homepage_content.title}</h1>
+            <h2>{homepage_content.subtitle}</h2>
+        </div>
+        <div>
+            <h3>Title</h3>
+            <input type="text" onChange={(e) => updateTitle(e)} />
+            <h3>Subtitle</h3>
+            <input type="text" onChange={(e) => updateSubtitle(e)} />
+            <h3>Background Image</h3>
+            <input type="text" onChange={(e) => updateBackgroundImage(e)} />
+            <h3>Blur</h3>
+            <input type="number" onChange={(e) => updateBlur(e)} />
+            <h3>Background Lightness</h3>
+            <input type="number" onChange={(e) => updateBgLightness(e)} />
+            <h3>Background Opacity</h3>
+            <input type="number" onChange={(e) => updateBgOpacity(e)} />
         </div>
-        
-        
-        
-        <h3>Title</h3>
-        <input type="text" onChange={(e) => updateTitle(e)} />
-        <h3>Subtitle</h3>
-        <input type="text" onChange={(e) => updateSubtitle(e)} />
-        <h3>Background Image</h3>
-        <input type="text" onChange={(e) => updateBackgroundImage(e)} />
     </>
 }
\ No newline at end of file