Week 4

crypto-tracker/package.json → package.json

@@ -19,13 +19,15 @@
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
+    "axios": "^0.18.0",
     "babel-loader": "^8.0.2",
     "clean-webpack-plugin": "^0.1.19",
     "css-loader": "^1.0.0",
     "express": "^4.16.3",
     "file-loader": "^2.0.0",
     "html-webpack-plugin": "^3.2.0",
     "nodemon": "^1.18.5",
+    "style-loader": "^0.23.1",
     "webpack": "^4.19.0",
     "webpack-cli": "^3.1.0",
     "webpack-dev-middleware": "^3.3.0",
@@ -38,6 +40,7 @@
     "react-dom": "^16.5.2",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",
-    "redux": "^4.0.1"
+    "redux": "^4.0.1",
+    "redux-devtools-extension": "^2.13.5"
   }
 }

src/ news/article.jsx

@@ -0,0 +1,5 @@
+import React from "react"
+
+export const Article = ({ data }) => (
+  <span>{data.title}</span>
+)

src/ news/news.jsx

@@ -0,0 +1,39 @@
+import React from "react"
+import Button from "@material-ui/core/Button/Button"
+import {loadNews, selectArticle} from "../data/action-creators";
+
+import {connect} from "react-redux";
+
+const News = (props) => (
+    <React.Fragment>
+        <h3>{props.selectedArticle}</h3>
+        <Button onClick={props.loadNews} variant="contained" color="primary">
+            Load news
+        </Button>
+        {props.isLoading && <div>Loading...</div>}
+        {props.isFailed && <div>Loading failed :(</div>}
+        <ul>
+            {props.news.map((doc) => (
+                <li key={doc.title}>
+                    <p onClick={() => props.selectArticle(doc.title)}>{doc.title}</p>
+                </li>
+            ))}
+        </ul>
+    </React.Fragment>
+);
+
+const mapStateToProps = (state) => ({
+    selectedArticle: state.article,
+    news: state.news,
+    isLoading: state.newsIsLoading,
+    isFailed: state.newsLoadFailed
+});
+
+const mapDispatchToProps = (dispatch) => ({
+    selectArticle: (articleText) => dispatch(selectArticle(articleText)),
+    loadNews: () => loadNews(dispatch)
+});
+
+const ConnectedNews = connect(mapStateToProps, mapDispatchToProps)(News);
+
+export default ConnectedNews;

src/data/action-creators.js

@@ -0,0 +1,28 @@
+import {TYPES} from "./action-types";
+import axios from "axios";
+
+export const selectArticle = (article) => {
+    return {
+        type: TYPES.SELECT_ARTICLE,
+        article
+    }
+};
+
+export const loadNews = (dispatch) => {
+    dispatch({
+        type: TYPES.LOAD_NEWS_STARTED
+    });
+    axios.get('https://min-api.cryptocompare.com/data/v2/news/?lang=EN')
+        .then((response) => {
+            dispatch({
+                type: TYPES.LOAD_NEWS,
+                data: Object.values(response.data.Data)
+            })
+        })
+        .catch((e) => {
+            console.log(e)
+            dispatch({
+                type: TYPES.LOAD_NEWS_FAILED
+            });
+        });
+};

src/data/action-types.js

@@ -0,0 +1,7 @@
+export const TYPES = {
+    SELECT_ARTICLE: 'SELECT_ARTICLE',
+
+    LOAD_NEWS_STARTED: 'LOAD_NEWS_STARTED',
+    LOAD_NEWS: 'LOAD_NEWS',
+    LOAD_NEWS_FAILED: 'LOAD_NEWS_FAILED'
+};

src/data/reducer.js

@@ -0,0 +1,35 @@
+import {TYPES} from "./action-types";
+
+const initState = {
+    news: []
+};
+
+export const reducer =(prevState = initState, action) => {
+    const newState = {...prevState};
+    switch (action.type) {
+        case TYPES.SELECT_ARTICLE:
+            return {...newState, article: action.article};
+
+        case TYPES.LOAD_NEWS:
+            return {
+                ...newState,
+                news: action.data,
+                newsIsLoading: false
+            };
+
+        case TYPES.LOAD_NEWS_STARTED:
+            return {...newState,
+                newsIsLoading: true,
+                newsLoadFailed: false
+            };
+
+        case TYPES.LOAD_NEWS_FAILED:
+            return {
+                ...newState,
+                newsLoadFailed: true,
+                newsIsLoading: false
+            };
+    }
+
+    return newState
+};

src/data/store.js

@@ -0,0 +1,6 @@
+import { createStore, applyMiddleware } from 'redux'
+import { composeWithDevTools } from "redux-devtools-extension";
+import {reducer} from "./reducer";
+
+
+export const store = createStore(reducer, composeWithDevTools());

src/header/header.css

@@ -0,0 +1,50 @@
+header {
+    height: 100px;
+    background-color: slategray;
+    display: flex;
+}
+
+header .about {
+    margin-left: auto;
+    height: 100%;
+    width: 150px;
+    font-weight: 700;
+    font-size: 20px;
+}
+
+header .title {
+    margin-left: 20px;
+    height: 100%;
+    width: 150px;
+    font-weight: 700;
+    font-size: 20px;
+}
+
+header .link {
+    display: flex;
+    align-items: center;
+    margin-left: 4%;
+}
+
+header .buttons{
+    margin-left: auto;
+}
+
+header .head {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+header .news {
+    margin-left: auto;
+    height: 100%;
+    width: 150px;
+    font-weight: 700;
+    font-size: 20px;
+}
+
+header .logo{
+    max-width: 50px;
+    max-height: 50px;
+}

src/header/header.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import logo from "../../media/logo-final.png";
+import {Link} from "react-router-dom";
+import Button from '@material-ui/core/Button';
+import "./header.css"
+
+ const Header = () => (
+    <header>
+        <div className={'head'}>
+            <Link className={'link'} to={'/'}>
+                <img src={logo} width="100px" height="100px" alt=""/>
+                <span className="title">Crypto-tracker</span>
+            </Link>
+            <div className={'buttons'}>
+                <Button className={'news'} component={Link} to={"/news"}>News</Button>
+                <Button className={'about'} component={Link} to={"/about"}>About</Button>
+            </div>
+        </div>
+     </header>
+)
+ export default Header 

crypto-tracker/src/index.jsx → src/index.jsx

@@ -2,21 +2,20 @@ import React from "react";
 import ReactDOM from "react-dom";
 import {BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';
 import {Provider} from "react-redux";
-import {store} from "./store";
-import About from "./about";
-import Home from "./home"
-import Header from "./header"
-import NotFound from "./404";
+import {store} from "./data/store";
+import About from "./about/about";
+import Home from "./home/home"
+import Header from "./header/header"
+import NotFound from "./404/404";
+import ConnectedNews from "./ news/news";
 
 const App = () => (
     <React.Fragment>
         <Header/>
         <Switch>
             <Route exact path="/" component={Home}/>
             <Route path={"/about"} component={About}/>
-            <Route path={"/news"}  render = {(props) => (
-                <div>News</div>
-            )}/>
+            <Route path={"/news"}  component={ConnectedNews}/>
             <Route component = {NotFound}/>
         </Switch>
     </React.Fragment>