Lesson 16: Work with API. Part I

Author: Yauhen

src/16_api/components/input/input.css

@@ -0,0 +1,38 @@
+.inputWrapper {
+  position: relative;
+  border-bottom: 1px solid #ededed;
+  flex: 1 0 100%;
+}
+
+.input {
+  font-family: 'Indie Flower', cursive;
+  padding: 16px 16px 16px 60px;
+  border: none;
+  background: rgba(0, 0, 0, 0.003);
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 28px;
+  font-style: italic;
+  box-shadow: inset 0 -2px 40px rgba(0,0,0,0.03);
+}
+
+.fa-search {
+  position: absolute;
+  font-size: 24px;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 20px;
+}
+
+.input::-webkit-input-placeholder {
+  font-family: 'Indie Flower', cursive;
+}
+.input::-moz-placeholder {
+  font-family: 'Indie Flower', cursive;
+}
+.input:-moz-placeholder {
+  font-family: 'Indie Flower', cursive;
+}
+.input:-ms-input-placeholder {
+  font-family: 'Indie Flower', cursive;
+}

src/16_api/components/input/input.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './input.css';
+
+const Input = ({ onChange, value, onKeyPress }) => (
+  <div className="inputWrapper">
+    <i className="fas fa-search" />
+    <input
+      className="input"
+      placeholder="Click to search"
+      onChange={onChange}
+      onKeyPress={onKeyPress}
+      value={value}
+    />
+  </div>
+);
+
+Input.propTypes = {
+  onChange: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  value: PropTypes.string,
+}
+
+Input.defaultProps = {
+  onChange: () => {},
+  onKeyPress: () => {},
+  value: ''
+}
+
+export default Input;

src/16_api/components/news/news.css

@@ -0,0 +1,30 @@
+.newsList {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  flex: 1 0 100%;
+}
+
+.news {
+  margin: 10px 0;
+  padding: 20px 30px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+              0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.newsTitle {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.description span {
+  padding: 0 10px;
+}
+
+.description .text {
+  padding-left: 0;
+}
+
+.description span:not(:last-child) {
+  border-right: 1px solid #000;
+}

src/16_api/components/news/news.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './news.css';
+
+const NewsPost = ({ author, created_at, num_comments, title, points, url }) => (
+  <li className="news">
+    <div className="description">
+      <a href={url} className="newsTitle">{title}</a>
+      <span className="text">{`${points} points`}</span>
+      <span className="comments">{`${num_comments} comments`}</span>
+      <span className="date">{new Date(created_at).toLocaleDateString()}</span>
+      <span className="author">{author}</span>
+    </div>
+  </li>
+);
+
+NewsPost.propTypes = {
+  author: PropTypes.string,
+  created_at: PropTypes.string.isRequired,
+  num_comments: PropTypes.number,
+  title: PropTypes.string,
+  points: PropTypes.number,
+  url: PropTypes.string,
+}
+
+NewsPost.defaultProps = {
+  author: '',
+  num_comments: 0,
+  title: 'Here should be a title',
+  points: 0,
+  url: '#'
+}
+
+export default NewsPost;

src/16_api/components/title/title.css

@@ -0,0 +1,8 @@
+.title {
+  font-family: 'Permanent Marker', cursive;
+  font-size: 80px;
+  text-align: center;
+  font-weight: 900;
+  color: rgba(175, 47, 47, 0.15);
+  margin-bottom: 20px;
+}

src/16_api/components/title/title.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './title.css';
+
+const Title = ({ title }) => (
+  <h1 className="title">{title}</h1>
+);
+
+Title.propTypes = {
+  title: PropTypes.string,
+}
+
+Title.defaultProps = {
+  title: 'Simple title',
+}
+
+export default Title;

src/16_api/containers/news/news.css

@@ -0,0 +1,7 @@
+.wrapper {
+  padding: 0 20px;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}

src/16_api/containers/news/news.jsx

@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+
+import Title from '../../components/title/title';
+import NewsPost from '../../components/news/news';
+import Input from '../../components/input/input';
+
+const BASE_PATH = 'https://hn.algolia.com/api/v1';
+const SEARCH_PATH = '/search';
+const SEARCH_PARAM = 'query=';
+
+class News extends Component {
+
+  state = {
+    searchQuery: '',
+    result: {},
+  }
+
+  componentDidMount() {
+    const { searchQuery } = this.state;
+    this.fetchData(searchQuery);
+  }
+
+  fetchData = (searchQuery) => {
+    fetch(`${BASE_PATH}${SEARCH_PATH}?${SEARCH_PARAM}${searchQuery}`)
+      .then(res => res.json())
+      .then(result => this.setNews(result))
+      .catch(error => error);
+  }
+
+  handleInputChange = ({ target: { value } }) => {
+    this.setState({
+      searchQuery: value
+    })
+  }
+
+  getSearch = ({ key }) => {
+    if(key === 'Enter') {
+      const { searchQuery } = this.state;
+      this.fetchData(searchQuery);
+    }
+  }
+
+  setNews = result => {
+    this.setState({ result });
+  }
+
+  render() {
+    const { searchQuery, result } = this.state;
+    const { hits = [] } = result;
+
+    return (
+      <div className="wrapper">
+        <Title title="Hacker News" />
+        <Input onKeyPress={this.getSearch} onChange={this.handleInputChange} value={searchQuery} />
+        <ul className="newsList">
+          {hits.map(({ author, created_at, num_comments, objectID, title, points, url }) =>
+            <NewsPost
+              key={objectID}
+              author={author}
+              created_at={created_at}
+              num_comments={num_comments}
+              title={title}
+              points={points}
+              url={url}
+            />
+          )}
+        </ul>
+      </div>
+    );
+  }
+}
+
+export default News;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//

src/index.css

@@ -0,0 +1,11 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', sans-serif;
+}
+
+#root {
+  min-height: 100vh;
+  display: grid;
+  grid-auto-rows: auto 1fr auto;
+}

src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './15_context/Lesson.jsx';
+import './index.css';
+import App from './16_api/containers/news/news';
 import registerServiceWorker from './registerServiceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));