Merge pull request #43 from detroitledger/jm-org-news

Add news to org page

Author: jessicamcinchak

src/components/OrgNewsArticles.js

@@ -1,51 +1,48 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import { Grid, Row, Col } from 'react-bootstrap';
+import { Row, Col } from 'react-bootstrap';
 
-const OrgNewsArticles = ({ newses }) => {
+const OrgNewsArticles = ({ newses, limit }) => {
   if (!newses || newses.length === 0) return null;
 
   return (
-    <Grid>
-      <h4>News</h4>
+    <div className="news">
+      <h2>News</h2>
       <Row
         style={{
-          overflowX: 'hidden',
-          overflowY: 'scroll',
-          maxHeight: '300px',
           display: 'flex',
           flexWrap: 'wrap',
         }}
       >
-        {newses.map((news, i) => (
+        {newses.slice(0,limit).map((news) => (
           <Col
             xs={12}
             sm={4}
             md={3}
-            key={i}
+            key={news.uuid}
             style={{
               display: 'flex',
               flexDirection: 'column',
             }}
           >
-            <h5>
+            <h4>
               <a href={news.link} rel="nofollow">
                 {news.title}
               </a>
-            </h5>
+            </h4>
             <time>
-              {moment(news.date, 'ddd, DD MMM YYYY HH:mm:ss ZZ').format(
+              {moment(news.date).format(
                 'MMM D, YYYY'
               )}
             </time>
             <p className="newsdesc">
-              {news.desc.substring(0, 90).replace(/\w+$/, '…')}
+              {news.description.substring(0, 90).replace(/\w+$/, '…')}
             </p>
           </Col>
         ))}
       </Row>
-    </Grid>
+    </div>
   );
 };
 

src/containers/Organizations.js

@@ -60,6 +60,13 @@ const GET_ORGANIZATION = gql`
         uuid
         name
       }
+      news {
+        uuid
+        title
+        date
+        description
+        link
+      }
     }
   }
 `;
@@ -98,12 +105,16 @@ const Organization = () => {
   // We default to funded if there are any
   const [grantSide, setGrantSide] = useState(false);
 
+  // Show up to 4 news articles by default
+  const defaultNewsLimit = 4
+  const [newsLimit, setNewsLimit] = useState(defaultNewsLimit);
+
   if (loading) return 'Loading...';
   if (error) return `Error! ${error}`;
 
   if (!data.organization) return `Oof!`;
 
-  const { name, description, ein, nteeOrganizationTypes } = data.organization;
+  const { name, description, ein, nteeOrganizationTypes, news } = data.organization;
 
   const {
     grantsFunded,
@@ -132,7 +143,13 @@ const Organization = () => {
         </Col>
       </Row>
 
-      <OrgNewsArticles newses={/*organization.ledgerNewsArticles*/ []} />
+      {news && <OrgNewsArticles newses={news} limit={newsLimit} />}
+      {news.length > defaultNewsLimit ? 
+        <button onClick={(news) => setNewsLimit(newsLimit === defaultNewsLimit ? news.length : defaultNewsLimit)}>
+          {newsLimit === defaultNewsLimit ? `Show more news` : `Show less news`}
+        </button>
+      : ``}
+
       {forms990 && <OrgFinances forms990={forms990} />}
 
       <h2>Grant Data</h2>