Lesson 17: Work with API. Part II

Author: Yauhen

src/17_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/17_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/17_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/17_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/17_api/components/pagination/pagination.css

@@ -0,0 +1,20 @@
+.paginationWrapper {
+  margin-bottom: 20px;
+  display: inline-block;
+  padding: 20px 40px;
+  background-color: #fff;
+  font-weight: 700;
+}
+
+.paginationWrapper button {
+  font-weight: 700;
+  background-color: transparent;
+  padding: 5px 10px;
+  border: 1px solid #e7e7e7;
+  cursor: pointer;
+  outline: none;
+}
+
+.paginationWrapper button.active {
+  background-color: rgba(175, 47, 47, 0.15);
+}

src/17_api/components/pagination/pagination.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './pagination.css';
+
+const renderPaginationBtns = (onClick, page, lastPage) => {
+  const startBtns = [page, page + 1, page + 2];
+  const gapBtns = [page - 2, page - 1, page];
+  const middleBtn = [ '...' ];
+  const lastBtns = [lastPage - 3, lastPage - 2, lastPage - 1];
+
+  let btnsArr = [];
+
+  if (page < lastPage - 6) {
+    btnsArr = [...startBtns, ...middleBtn, ...lastBtns]
+  } else if (page < lastPage - 4) {
+    btnsArr = [...gapBtns, ...middleBtn, ...lastBtns]
+  } else if (page < lastPage - 3) {
+    btnsArr = [...gapBtns, ...lastBtns] // last 6 pages
+  } else {
+    btnsArr = [...middleBtn, ...lastBtns] // last 3 pages
+  }
+
+  return btnsArr.map(num => {
+    return num === '...' ?
+    num :
+    <button
+      key={num}
+      onClick={onClick}
+      data-name={num}
+      className={num === page ? 'active' : ''}
+    >{num}</button>
+  });
+};
+
+const Pagination = ({ onClick, page, lastPage }) => (
+  <div className="paginationWrapper">
+    { page !== 0 && <button onClick={onClick} data-name="prev">{'<<'}</button> }
+    {renderPaginationBtns(onClick, page, lastPage)}
+    { page !== lastPage - 1 && <button onClick={onClick} data-name="next">{'>>'}</button> }
+  </div>
+);
+
+Pagination.propTypes = {
+  onClick: PropTypes.func,
+  page: PropTypes.number,
+  lastPage: PropTypes.number,
+}
+
+Pagination.defaultProps = {
+  onClick: () => {},
+  page: 0,
+  lastPage: 0,
+}
+
+export default Pagination;

src/17_api/components/select/select.css

@@ -0,0 +1,15 @@
+.selectWrapper {
+  margin-bottom: 20px;
+  display: inline-block;
+  padding: 20px 40px;
+  background-color: #fff;
+}
+
+.selectWrapper,
+.selectWrapper select {
+  font-size: 20px;
+}
+
+.selectText {
+  margin-left: 10px;
+}

src/17_api/components/select/select.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './select.css';
+
+const Input = ({ handleChange, options, value }) => (
+  <div className="selectWrapper">
+    <select onChange={handleChange} value={value}>
+      {options.map(({ value, label }) =>
+        <option key={value} value={value}>{label}</option>
+      )}
+    </select>
+    <span className="selectText">per page</span>
+  </div>
+);
+
+Input.propTypes = {
+  handleChange: PropTypes.func,
+  options: PropTypes.array,
+  value: PropTypes.number,
+}
+
+Input.defaultProps = {
+  onChange: () => {},
+  options: [],
+  value: 0,
+}
+
+export default Input;

src/17_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/17_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/17_api/containers/news/news.css

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