From 84cf0caf6514d3705e4ce8c7e5f04a37bec562e5 Mon Sep 17 00:00:00 2001
From: Matt Hampel <mahatm@gmail.com>
Date: Thu, 22 Mar 2018 19:59:34 -0400
Subject: [PATCH] Add the component for #44

---
 src/components/RecentGrants.css | 17 +++++++++
 src/components/RecentGrants.js  | 66 +++++++++++++++++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 src/components/RecentGrants.css
 create mode 100644 src/components/RecentGrants.js

diff --git a/src/components/RecentGrants.css b/src/components/RecentGrants.css
new file mode 100644
index 0000000..a24bf60
--- /dev/null
+++ b/src/components/RecentGrants.css
@@ -0,0 +1,17 @@
+.RecentGrants h1,
+.RecentGrants .grant {
+  padding: 10px 20px;
+}
+
+.RecentGrants h1 {
+  font-size: 16px;
+}
+
+.RecentGrants h2 {
+  font-size: 16px;
+  font-weight: normal;
+}
+
+.RecentGrants .metadata {
+  color: #666;
+}
diff --git a/src/components/RecentGrants.js b/src/components/RecentGrants.js
new file mode 100644
index 0000000..564f591
--- /dev/null
+++ b/src/components/RecentGrants.js
@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import './RecentGrants.css';
+
+class RecentGrants extends Component {
+  constructor(props) {
+    super(props);
+    this.renderGrant = this.renderGrant.bind(this);
+  }
+
+  static propTypes = {
+    grants: PropTypes.array.isRequired,
+  };
+
+  formatDate(date) {
+    const options = {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    };
+    return date.toLocaleDateString('en-US', options);
+  }
+
+  renderGrant({ from, to, start, end, amount }) {
+    return (
+      <div className="grant">
+        <h2>
+          <span className="orgname">{from}</span> to{' '}
+          <span className="orgname">{to}</span>
+        </h2>
+        <div className="metadata">${amount.toLocaleString()}</div>
+        <div className="metadata">
+          {this.formatDate(start)} - {this.formatDate(end)}
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const grants = [
+      {
+        from: 'Comerica Charitable Foundation',
+        to: 'Detroit Ledger',
+        start: new Date('1/1/1918'),
+        end: new Date('1/12/1919'),
+        amount: 5,
+      },
+      {
+        from: 'Comerica Charitable Foundation',
+        to: 'Detroit Ledger',
+        start: new Date('1/1/2027'),
+        end: new Date('1/12/2028'),
+        amount: 100000,
+      },
+    ];
+    return (
+      <div className="RecentGrants">
+        <h1>Recent grants</h1>
+        {grants.map(this.renderGrant)}
+      </div>
+    );
+  }
+}
+
+export default RecentGrants;