connect to api for price tickers in nav bar

src/actions/index.js

@@ -44,14 +44,14 @@ const getSinglePost = post => ({
 
 function getPosts() {
 	return new Promise((res, rej) => {
-		steem.api.getDiscussionsByBlog({tag: 'sndbox', limit: 10}, function(err, result) {
+		steem.api.getDiscussionsByBlog({tag: 'sndbox', limit: 11}, function(err, result) {
 			if (err) rej(err);
 			else res(result);
 		});
 	})
 }
 
-// redux thunk
+// redux thunks
 
 export const getRecentPosts = () => async dispatch => {
 	dispatch(getRecentPostsRequest());

src/components/nav-bar.js

@@ -1,22 +1,60 @@
 import React from 'react';
+// import {getCurrentPrice} from "../actions/index";
+// import {connect} from 'react-redux';
 
 import './nav-bar.css';
 
-export function NavBar() {
-	return (
-		<nav className="nav-container">
-			<div className="nav-content">
-				<div className="nav-title">the creative crypto</div>
-				<div className="nav-right">
-					<div className="steem-price">
-						<span className="steem-label">STEEM</span> &and; $ 2.90
-					</div>
-					<div className="sbd-price">
-						<span className="sbd-label">SBD</span> &or; $ 1.05
+export class NavBar extends React.Component {
+	state = {
+		steemPrice: 0,
+		steemDirection: '\u2303',
+		sbdPrice: 0,
+		sbdDirection: '\u2303'
+	};
+
+	async componentDidMount() {
+		const steemPriceData = await this.getPrice('steem');
+		const steemDirection = parseFloat(steemPriceData[0].percent_change_1h) < 0 ? '\u2304' : '\u2303';
+		const steemPrice = parseFloat(steemPriceData[0].price_usd).toFixed(2);
+
+		const sbdPriceData = await this.getPrice('steem-dollars');
+		const sbdDirection = parseFloat(sbdPriceData[0].percent_change_1h) < 0 ? '\u2304' : '\u2303';
+		const sbdPrice = parseFloat(sbdPriceData[0].price_usd).toFixed(2);
+
+		this.setState({
+			steemPrice,
+			sbdPrice
+		})
+	}
+
+	async getPrice(name) {
+		const response = await fetch(`https://api.coinmarketcap.com/v1/ticker/${name}/`);
+		const data = await response.json();
+		return data;
+	}
+
+	render() {
+		return (
+			<nav className="nav-container">
+				<div className="nav-content">
+					<div className="nav-title">the creative crypto</div>
+					<div className="nav-right">
+						<div className="steem-price">
+							<span className="steem-label">STEEM</span> {this.state.steemDirection} $ {this.state.steemPrice}
+						</div>
+						<div className="sbd-price">
+							<span className="sbd-label">SBD</span> {this.state.sbdDirection} $ {this.state.sbdPrice}
+						</div>
+						<div className="question-button">?</div>
 					</div>
-					<div className="question-button">?</div>
 				</div>
-			</div>
-		</nav>
-	)
-}
+			</nav>
+		)
+	}
+}
+
+// const mapDispatchToProps = {
+// 	getCurrentPrice
+// };
+//
+// export const ConnectedNavBar = connect(mapDispatchToProps)(NavBar);

src/reducer.js

@@ -9,7 +9,8 @@ import {
 
 const initialState = {
 	posts: [],
-	loading: false
+	loading: false,
+	error: null
 };
 
 export const reducer = (state = initialState, action) => {
@@ -26,7 +27,11 @@ export const reducer = (state = initialState, action) => {
 				loading: false
 			};
 		case GET_RECENT_POSTS_ERROR:
-			return state;
+			return {
+				...state,
+				loading: false,
+				error: action.payload
+			};
 		case FOCUS_ON_POST:
 			return state;
 		case RETURN_TO_POSTS: