styles components and wires up data

app/containers/News/News.jsx

@@ -1,31 +1,37 @@
 // @flow
-import React, { Fragment } from 'react'
+import React from 'react'
+import moment from 'moment'
+
 import Panel from '../../components/Panel'
 import HeaderBar from '../../components/HeaderBar'
-
 import styles from './News.scss'
 import Loader from '../../components/Loader'
 
+const { shell } = require('electron').remote
+
 type Props = {
   feed: {
     items: Array<{
-      content: String,
-      creator: String,
+      content: string,
+      creator: string,
+      isoDate: Date,
+      title: string,
+      link: string,
     }>,
   },
   loading: boolean,
+  networkId: string,
+  net: string,
 }
 
 export default class News extends React.Component<Props> {
   render() {
-    console.log(this.props.feed)
     return (
       <div className={styles.newsContainer}>
         <HeaderBar
-          // networkId={this.props.networkId}
-          // net={this.props.net}
+          networkId={this.props.networkId}
+          net={this.props.net}
           label="News"
-          // renderRightContent={this.renderHeaderBarRightContent}
         />
         <Panel className={styles.newsPanel}>
           {this.props.loading ? <Loader /> : this.parseItems()}
@@ -34,34 +40,36 @@ export default class News extends React.Component<Props> {
     )
   }
 
-  // REGEX for <a> tags <\s*a[^>]*>(.*?)<\s*/\s*a>
-
-  // REGEX for <p> tags <\s*p[^>]*>(.*?)<\s*/\s*p>
-
-  // REGEX for <\s*img[^>]*>(.*?)
-
   parseItems() {
     const { items } = this.props.feed
-
-    const linkTagRegex = new RegExp('<s*a[^>]*>(.*?)<s*/s*a>')
-    const pTagRegex = new RegExp('<s*p[^>]*>(.*?)<s*/s*p>')
     const imgTagRegex = new RegExp('<s*img[^>]*>(.*?)')
 
-    function createMarkup(markdown) {
-      return { __html: markdown }
-    }
-
     const imageHrefFromImgTags = img =>
       img
         .split(' ')
         .find(prop => prop.includes('src'))
+        // $FlowFixMe
         .replace('src=', '')
+        .replace('"', '')
 
-    return items.map(
-      item =>
-        console.log(
-          imageHrefFromImgTags(item.content.match(imgTagRegex)[0]),
-        ) || <div dangerouslySetInnerHTML={createMarkup(item.content)} />,
+    return (
+      <div className={styles.newsItemsContainer}>
+        {items.map(item => {
+          const imgSrc = imageHrefFromImgTags(
+            // $FlowFixMe
+            item.content.match(imgTagRegex)[0],
+          )
+          const { title } = item
+          const openLink = () => shell.openExternal(item.link)
+          return (
+            <div onClick={openLink} className={styles.newsItem} key={title}>
+              <img src={imgSrc} alt="" className={styles.newsImage} />
+              <small>{moment(item.isoDate).format('YYYY-MM-DD')}</small>
+              <p> {title}</p>
+            </div>
+          )
+        })}
+      </div>
     )
   }
 }

app/containers/News/News.scss

@@ -1,9 +1,25 @@
 .newsPanel {
-  min-height: 100%;
+  height: 100%;
 }
 
 .newsContainer {
-  height: 100%;
+  min-height: 100%;
   display: flex;
   flex-direction: column;
+  height: 100%;
+}
+
+.newsItemsContainer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  .newsItem {
+    cursor: pointer;
+    padding: 12px;
+    max-width: 320px;
+    img {
+      max-width: 320px;
+    }
+  }
 }

app/containers/News/index.js

@@ -5,9 +5,11 @@ import { withCall, withData } from 'spunky'
 import withLoadingProp from '../../hocs/withLoadingProp'
 import newsActions from '../../actions/newsActions'
 import News from './News'
+import withNetworkData from '../../hocs/withNetworkData'
 
 export default compose(
   withCall(newsActions),
   withData(newsActions),
   withLoadingProp(newsActions),
+  withNetworkData(),
 )(News)