Add Newslist component

package.json

@@ -12,5 +12,9 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "react-redux": "^5.0.7",
+    "redux": "^4.0.0"
   }
-}
+}

src/App.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import NewsListTable from './components/NewsListTable';
 import logo from './logo.svg';
 import './App.css';
 
@@ -13,6 +14,7 @@ class App extends Component {
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
+        <NewsListTable/>
       </div>
     );
   }

src/components/NewsListItem.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+
+function NewsListItem(props) {
+    return (
+      <div className="news-list-item">
+        <a className="title" href={props.item.url} target="__blank">{props.item.title}</a>
+        <div className="info">
+          {props.item.points} points by {props.item.user} | {props.item.timeAgo} ago | {props.item.numberOfComments} comments
+        </div>
+      </div>
+    );
+  }
+
+  export default NewsListItem;

src/components/NewsListTable.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import NewsListItem from './NewsListItem';
+import SearchParameter from './SearchParameter';
+
+const mapStateToProps = state => {
+  return {news: state.news }
+};
+
+const ConnectedNewsListTable = ({ news }) => (
+  <div>
+    <SearchParameter />
+    <h1>News List</h1>
+      {news.length ? "" : "no news found"}
+      {news.map((item, index) => (
+        <NewsListItem item={item} />
+      ))}
+  </div>
+);
+
+const NewsListTable = connect(mapStateToProps)(ConnectedNewsListTable);
+
+export default NewsListTable;

src/components/SearchParameter.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { connect } from "react-redux";
+
+const mapStateToProps = state => {
+  return { searchParameters: state.searchParameters };
+};
+const ConnectedList = ({ searchParameters }) => (
+  <div>
+    {searchParameters ? 'Search results for: \"' + searchParameters + '\"' : ''}
+  </div>
+);
+const SearchParameter = connect(mapStateToProps)(ConnectedList);
+export default SearchParameter;

src/index.js

@@ -1,8 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import store from './store/index'
 import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+    <Provider store={store}>
+        <App />
+    </Provider>
+    , document.getElementById('root')
+);
 registerServiceWorker();
+
+

src/reducers/index.js

@@ -0,0 +1,25 @@
+const initialState = {
+    searchParameters: "bananaMonkeyCarberator",
+    news: [
+      {
+        url: 'www.example.com',
+        user: 'tdurden',
+        title: 'Tesla Asks Suppliers for Cash Back to Help Turn a Profit',
+        timeAgo: '1 day',
+        points: '42',
+        numberOfComments: '22'
+      },
+      {
+        url: 'www.example.com',
+        user: 'jhabdas',
+        title: 'BPG Image format ',
+        timeAgo: '9 hours',
+        points: '185',
+        numberOfComments: '60'
+      }
+    ]
+  };
+
+  const rootReducer = (state = initialState, action) => state;
+
+  export default rootReducer;

src/store/index.js

@@ -0,0 +1,7 @@
+import { createStore } from "redux";
+import rootReducer from "../reducers/index";
+
+const store = createStore(rootReducer);
+window.store = store;
+
+export default store;