From 81bfd8eb2873d16eecf16571a31f89f8972bc85a Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Fri, 9 Mar 2018 19:17:56 -0500
Subject: [PATCH] new metacode and edit metacode pages

---
 apiProxyMiddleware.js            |  2 +-
 src/Metamaps/DataFetcher.js      | 33 ++++++++++---
 src/routes/Admin/EditMetacode.js | 84 ++++++++++++++++++++++++++++++++
 src/routes/Admin/NewMetacode.js  | 68 ++++++++++++++++++++++++++
 4 files changed, 179 insertions(+), 8 deletions(-)

diff --git a/apiProxyMiddleware.js b/apiProxyMiddleware.js
index 46ce9693..bd380368 100644
--- a/apiProxyMiddleware.js
+++ b/apiProxyMiddleware.js
@@ -2,7 +2,7 @@ const request = require('request')
 
 function apiProxyMiddleware (req, res, next) {
     // TODO: tidy this up!
-    if (!(req.xhr || req.headers['Content-Type'] === 'application/json' || req.originalUrl.indexOf('.json') > -1 || req.method !== 'GET')) {
+    if (!(req.xhr || req.headers['content-type'] === 'application/json' || req.originalUrl.indexOf('.json') > -1 || req.method !== 'GET')) {
         return next()
     }
     const method = req.method.toLowerCase()
diff --git a/src/Metamaps/DataFetcher.js b/src/Metamaps/DataFetcher.js
index c69bee21..de78e73a 100644
--- a/src/Metamaps/DataFetcher.js
+++ b/src/Metamaps/DataFetcher.js
@@ -18,6 +18,14 @@ function post(url, data = {}) {
   })
 }
 
+function postNoStringify(url, data = {}) {
+  return fetch(url, {
+    credentials: 'same-origin',
+    method: 'POST',
+    body: data
+  })
+}
+
 function put(url, data = {}) {
   return fetch(url, {
     credentials: 'same-origin',
@@ -29,6 +37,14 @@ function put(url, data = {}) {
   })
 }
 
+function putNoStringify(url, data = {}) {
+  return fetch(url, {
+    credentials: 'same-origin',
+    method: 'PUT',
+    body: data
+  })
+}
+
 function deleteReq(url) {
   return fetch(url, {
     credentials: 'same-origin',
@@ -92,12 +108,11 @@ async function deleteMetacodeSet(id) {
 }
 
 async function createMetacode(name, color, icon) {
-  const res = await post(`/metacodes`, {
-    metacode: {
-      name,
-      color
-    }
-  })
+  const formdata = new FormData()
+  formdata.append('metacode[name]', name)
+  formdata.append('metacode[color]', color)
+  formdata.append('metacode[aws_icon]', icon)
+  const res = await postNoStringify(`/metacodes`, formdata)
   if (!res.ok) {
     throw new Error()
     return
@@ -107,7 +122,11 @@ async function createMetacode(name, color, icon) {
 }
 
 async function updateMetacode(id, name, color, icon) {
-  const res = await put(`/metacodes/${id}`)
+  const formdata = new FormData()
+  formdata.append('metacode[name]', name)
+  formdata.append('metacode[color]', color)
+  if (icon) formdata.append('metacode[aws_icon]', icon)
+  const res = await putNoStringify(`/metacodes/${id}`, formdata)
   return res.ok
 }
 
diff --git a/src/routes/Admin/EditMetacode.js b/src/routes/Admin/EditMetacode.js
index 0d0f29e8..e7797cc2 100644
--- a/src/routes/Admin/EditMetacode.js
+++ b/src/routes/Admin/EditMetacode.js
@@ -1,10 +1,94 @@
 import React, { Component } from 'react'
+import { Link, browserHistory } from 'react-router'
 import AdminHeader from './AdminHeader'
 
 class EditMetacode extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      existingIcon: null,
+      icon: null,
+      name: '',
+      color: ''
+    }
+  }
+
+  componentDidMount() {
+    const { metacodes } = this.props
+    const id = parseInt(this.props.params.id, 10)
+    const metacode = metacodes.find(m => m.id === id)
+    this.setState({
+      existingIcon: metacode.icon,
+      name: metacode.name,
+      color: metacode.color
+    })
+  }
+
+  validate = (event) => {
+    if (this.state.name.length === 0) {
+      event.preventDefault()
+      window.alert('A name must be provided')
+    } else if (!this.state.color.startsWith('#')) {
+      event.preventDefault()
+      window.alert('Please begin color with a # symbol')
+    }
+  }
+
+  updateForKey = (key) => event => this.setState({[key]: event.target.value})
+
+  handleFile = (event) => {
+    this.setState({
+      icon: event.target.files[0]
+    })
+  }
+
+  onSubmit = async (event) => {
+    event.preventDefault()
+    const { name, color, icon } = this.state
+    const { updateMetacode, params: { id } } = this.props
+    try {
+      const result = await updateMetacode(id, name, color, icon)
+      browserHistory.push(`/metacodes`)
+    } catch (e) {
+      console.log(e)
+      window.alert('There was an error updating the metacode, check the console')
+    }
+  }
+
   render = () => {
     return (
       <div>
+        <div id="yield">
+          <div className="centerContent">
+            <form onSubmit={this.onSubmit} className="edit_metacode" id="edit_metacode" encType="multipart/form-data" acceptCharset="UTF-8">
+              <input name="utf8" type="hidden" value="✓" />
+              <div className="field">
+                <label htmlFor="metacode_name">Name</label>
+                <input value={this.state.name} onChange={this.updateForKey('name')} type="text" name="metacode[name]" id="metacode_name" />
+                <div className="clearfloat"></div>
+              </div>
+              <div className="field">
+                <label>Current Icon</label>
+                <img width="96" src={this.state.existingIcon} alt={this.state.name} />
+              </div>
+              <div className="field">
+                <label htmlFor="metacode_Icon">Replace Icon</label>
+                <input type="hidden" name="metacode[manual_icon]" id="metacode_manual_icon" />
+                <input onChange={this.handleFile} type="file" name="metacode[aws_icon]" id="metacode_aws_icon" />
+                <div className="clearfloat"></div>
+              </div>
+              <div className="field">
+                <label htmlFor="metacode_color">Color (hex with # sign)</label>
+                <input value={this.state.color} onChange={this.updateForKey('color')} type="text" name="metacode[color]" id="metacode_color" />
+                <div className="clearfloat"></div>
+              </div>
+              <div className="actions">
+                <Link className="button" to="/metacodes">Cancel</Link>
+                <input onClick={this.validate} type="submit" name="commit" value="Update Metacode" className="add" />
+              </div>
+            </form>
+          </div>
+        </div>
         <AdminHeader />
       </div>
     )
diff --git a/src/routes/Admin/NewMetacode.js b/src/routes/Admin/NewMetacode.js
index fb04c254..05a394f9 100644
--- a/src/routes/Admin/NewMetacode.js
+++ b/src/routes/Admin/NewMetacode.js
@@ -1,10 +1,78 @@
 import React, { Component } from 'react'
+import { Link, browserHistory } from 'react-router'
 import AdminHeader from './AdminHeader'
 
 class NewMetacode extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      icon: null,
+      name: '',
+      color: ''
+    }
+  }
+
+  validate = (event) => {
+    if (this.state.name.length === 0) {
+      event.preventDefault()
+      window.alert('A name must be provided')
+    } else if (!this.state.color.startsWith('#')) {
+      event.preventDefault()
+      window.alert('Please begin color with a # symbol')
+    }
+  }
+
+  updateForKey = (key) => event => this.setState({[key]: event.target.value})
+
+  handleFile = (event) => {
+    this.setState({
+      icon: event.target.files[0]
+    })
+  }
+
+  onSubmit = async (event) => {
+    event.preventDefault()
+    const { name, color, icon } = this.state
+    const { createMetacode } = this.props
+    try {
+      const result = await createMetacode(name, color, icon)
+      browserHistory.push(`/metacodes`)
+    } catch (e) {
+      console.log(e)
+      window.alert('There was an error creating the metacode, check the console')
+    }
+  }
+
   render = () => {
     return (
       <div>
+        <div id="yield">
+          <div className="centerContent">
+            <form onSubmit={this.onSubmit} className="new_metacode" id="new_metacode" encType="multipart/form-data" acceptCharset="UTF-8">
+              <input name="utf8" type="hidden" value="✓" />
+              <div className="field">
+                <label htmlFor="metacode_name">Name</label>
+                <input value={this.state.name} onChange={this.updateForKey('name')} type="text" name="metacode[name]" id="metacode_name" />
+                <div className="clearfloat"></div>
+              </div>
+              <div className="field">
+                <label htmlFor="metacode_Icon">Icon</label>
+                <input type="hidden" name="metacode[manual_icon]" id="metacode_manual_icon" />
+                <input onChange={this.handleFile} type="file" name="metacode[aws_icon]" id="metacode_aws_icon" />
+                <div className="clearfloat"></div>
+              </div>
+              <div className="field">
+                <label htmlFor="metacode_color">Color (hex with # sign)</label>
+                <input value={this.state.color} onChange={this.updateForKey('color')} type="text" name="metacode[color]" id="metacode_color" />
+                <div className="clearfloat"></div>
+              </div>
+              <div className="actions">
+                <Link className="button" to="/metacodes">Cancel</Link>
+                <input onClick={this.validate} type="submit" name="commit" value="Create Metacode" className="add" />
+              </div>
+            </form>
+          </div>
+        </div>
         <AdminHeader />
       </div>
     )