From 237bce2cb238aa48d5af8526640f94d3fdefdc8c Mon Sep 17 00:00:00 2001
From: Mcat12 <newtoncat12@yahoo.com>
Date: Thu, 29 Nov 2018 18:36:24 -0500
Subject: [PATCH 1/3] Simplify DomainList from a class to a function

It should be easier to read now.

Signed-off-by: Mcat12 <newtoncat12@yahoo.com>
---
 src/components/list/DomainList.js      | 88 ++++++++++++++------------
 src/components/list/DomainList.test.js |  4 +-
 2 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/src/components/list/DomainList.js b/src/components/list/DomainList.js
index fdb011b..b0a0835 100644
--- a/src/components/list/DomainList.js
+++ b/src/components/list/DomainList.js
@@ -8,54 +8,60 @@
 *  This file is copyright under the latest version of the EUPL.
 *  Please see LICENSE file for your rights under this license. */
 
-import React, { Component } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import { translate } from "react-i18next";
 import api from "../../util/api";
+import { Button } from "reactstrap";
 
-class DomainList extends Component {
-  static propTypes = {
-    domains: PropTypes.arrayOf(PropTypes.string),
-    onRemove: PropTypes.func.isRequired
-  };
+const DomainList = ({ domains, onRemove, t }) => {
+  // Create a button to remove the domain
+  const removeButton = item => (
+    <Button
+      color="danger"
+      size="sm"
+      className="pull-right"
+      cssModule={{ marginTop: "2px" }}
+      onClick={() => onRemove(item)}
+    >
+      <span className="fa fa-trash-o" />
+    </Button>
+  );
 
-  render() {
-    const { t } = this.props;
+  // Map a domain string to a list item
+  const mapDomainsToListItems = domain => (
+    <li key={domain} className="list-group-item">
+      {api.loggedIn ? removeButton(domain) : null}
+      <span
+        style={{
+          display: "table-cell",
+          verticalAlign: "middle",
+          height: "32px"
+        }}
+      >
+        {domain}
+      </span>
+    </li>
+  );
 
-    return (
-      <ul className="list-group">
-        {this.props.domains.length > 0 ? (
-          this.props.domains.map(item => (
-            <li key={item} className="list-group-item">
-              {api.loggedIn ? (
-                <button
-                  className="btn btn-danger btn-sm pull-right"
-                  type="button"
-                  style={{ marginTop: "2px" }}
-                  onClick={() => this.props.onRemove(item)}
-                >
-                  <span className="fa fa-trash-o" />
-                </button>
-              ) : null}
-              <span
-                style={{
-                  display: "table-cell",
-                  verticalAlign: "middle",
-                  height: "32px"
-                }}
-              >
-                {item}
-              </span>
-            </li>
-          ))
-        ) : (
-          <div className="alert alert-info" role="alert">
-            {t("There are no domains in this list")}
-          </div>
-        )}
-      </ul>
+  let body;
+
+  if (domains.length > 0) {
+    body = domains.map(mapDomainsToListItems);
+  } else {
+    body = (
+      <div className="alert alert-info" role="alert">
+        {t("There are no domains in this list")}
+      </div>
     );
   }
-}
+
+  return <ul className="list-group">{body}</ul>;
+};
+
+DomainList.propTypes = {
+  domains: PropTypes.arrayOf(PropTypes.string),
+  onRemove: PropTypes.func.isRequired
+};
 
 export default translate(["common", "lists"])(DomainList);
diff --git a/src/components/list/DomainList.test.js b/src/components/list/DomainList.test.js
index 82ba09b..9e41556 100644
--- a/src/components/list/DomainList.test.js
+++ b/src/components/list/DomainList.test.js
@@ -55,7 +55,7 @@ it("has a delete button when logged in", () => {
     wrapper
       .find("ul")
       .childAt(0)
-      .find("button")
+      .find("Button")
   ).toExist();
 });
 
@@ -68,7 +68,7 @@ it("calls onRemove when a delete button is clicked", () => {
   wrapper
     .find("ul")
     .childAt(0)
-    .find("button")
+    .find("Button")
     .simulate("click");
 
   expect(onRemove).toHaveBeenCalled();

From 29394ceff99f40fd94b8a1979f389d850cc38738 Mon Sep 17 00:00:00 2001
From: Mcat12 <newtoncat12@yahoo.com>
Date: Thu, 29 Nov 2018 23:24:45 -0500
Subject: [PATCH 2/3] Fix custom style not applying

Signed-off-by: Mcat12 <newtoncat12@yahoo.com>
---
 src/components/list/DomainList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/list/DomainList.js b/src/components/list/DomainList.js
index b0a0835..e369039 100644
--- a/src/components/list/DomainList.js
+++ b/src/components/list/DomainList.js
@@ -21,7 +21,7 @@ const DomainList = ({ domains, onRemove, t }) => {
       color="danger"
       size="sm"
       className="pull-right"
-      cssModule={{ marginTop: "2px" }}
+      style={{ marginTop: "2px" }}
       onClick={() => onRemove(item)}
     >
       <span className="fa fa-trash-o" />

From 77548d1181c0a55688e577cf5ed7a617ff3c01d6 Mon Sep 17 00:00:00 2001
From: Mcat12 <newtoncat12@yahoo.com>
Date: Wed, 12 Dec 2018 15:14:43 -0500
Subject: [PATCH 3/3] Remove the proxy option from package.json

It should only be added when testing against a real API instance. Most
of the time, development is done against the fake API, or there is no
real API running to test with.

Signed-off-by: Mcat12 <newtoncat12@yahoo.com>
---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index a7755e1..0ddb3bf 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,6 @@
   "version": "1.0.0",
   "private": true,
   "homepage": "/admin",
-  "proxy": "http://pi.hole",
   "devDependencies": {
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",