antcalatayud / ReactCoin (public) (License: GPLv3) (since 2018-04-24) (hash sha1)
As seen on this course: https://udilia.com/courses/learn-react-by-building-a-web-app
Clone URLs: https://rocketgit.com/user/antcalatayud/ReactCoin ssh://rocketgit@ssh.rocketgit.com/user/antcalatayud/ReactCoin git://git.rocketgit.com/user/antcalatayud/ReactCoin
develop
List of commits:
Subject Hash Author Date (UTC)
Start pagination component a2600ed30feb02a9394d31215d1218d699371f62 antcalatayud 2018-04-24 14:47:05
Move Table to new component 685659283e5fcfb3391bbd7e0988669a4896546b antcalatayud 2018-04-24 14:23:39
Add eror message 925f3e3199546d80b90276d53bf3ca827313adab antcalatayud 2018-04-24 14:10:51
Add loadin component 54504e3ae117730f625f6c5acf1a10ce912c6146 antcalatayud 2018-04-24 14:05:36
Create currencies table a410655fa61df8653b5943cb9c853b04e48c7287 antcalatayud 2018-04-24 13:34:35
Move some conts outside 00686f6d20dcc806e20a3d7bfb745517c203dd54 antcalatayud 2018-04-24 13:00:43
Add AJAX request to list component 3dd5f784d209cc1cfeb22bbc93aaf2c871e2c69b antcalatayud 2018-04-24 12:29:22
Start creating list componet c8bc3d6bb9b4980e1305d401be2fe67c8933a7f8 antcalatayud 2018-04-24 10:31:23
Add logo eed8364675e78cfa795550bff03682d49a8ed115 antcalatayud 2018-04-24 10:23:07
Add styling 866cbbbc94ce81e8b8b6b88da9f86d2d4153e509 antcalatayud 2018-04-24 10:18:43
Create fist component and render App b713ed055b8691a0fd89792d136e0ef9ed86f07c antcalatayud 2018-04-24 10:11:22
Add init files d81df9e3d230bcb49f0bb31c43cffad97532d321 antcalatayud 2018-04-24 09:51:04
Initial commit 3c3626d89f221374c92ee04aed1eaa8616f3977e Antonio Calatayud 2018-04-24 09:03:03
Commit a2600ed30feb02a9394d31215d1218d699371f62 - Start pagination component
Author: antcalatayud
Author date (UTC): 2018-04-24 14:47
Committer name: antcalatayud
Committer date (UTC): 2018-04-24 14:47
Parent(s): 685659283e5fcfb3391bbd7e0988669a4896546b
Signing key:
Tree: 22ccdcaebac85d5438e7b7c054c88b8486a0dc1b
File Lines added Lines deleted
src/components/list/List.js 22 8
src/components/list/Pagination.css 34 0
src/components/list/Pagination.js 22 0
File src/components/list/List.js changed (mode: 100644) (index 1fb2151..3dd2ea4)
... ... import { handleResponse } from '../../helpers';
3 3 import { API_URL } from '../../config'; import { API_URL } from '../../config';
4 4 import Loading from '../common/Loading' import Loading from '../common/Loading'
5 5 import Table from './Table' import Table from './Table'
6 import Pagination from './Pagination'
6 7
7 8 class List extends React.Component { class List extends React.Component {
8 9 constructor(props) { constructor(props) {
 
... ... class List extends React.Component {
11 12 this.state = { this.state = {
12 13 loading: false, loading: false,
13 14 currencies: [], currencies: [],
14 error: null
15 error: null,
16 totalPages: 0,
17 page: 1,
15 18 }; };
16 19 } }
17 20
18 21 componentDidMount(){ componentDidMount(){
19 22 this.setState({ loading: true }); this.setState({ loading: true });
20 23
21 fetch(`${API_URL}/cryptocurrencies?page=1&perPage=20`)
24 const { page } = this.state;
25
26 fetch(`${API_URL}/cryptocurrencies?page=${page}&perPage=20`)
22 27 .then(handleResponse) .then(handleResponse)
23 28 .then((data) => { .then((data) => {
29 const {currencies, totalPages} = data;
24 30 this.setState({ this.setState({
25 31 loading: false, loading: false,
26 currencies: data.currencies
32 currencies,
33 totalPages
27 34 }); });
28 35 }) })
29 36 .catch((error) => { .catch((error) => {
 
... ... class List extends React.Component {
47 54 } }
48 55
49 56 render() { render() {
50 const { loading, error, currencies } = this.state;
57 const { loading, error, currencies, totalPages, page } = this.state;
51 58
52 59 if (loading) { if (loading) {
53 60 return <div className="loading-container"><Loading /></div> return <div className="loading-container"><Loading /></div>
 
... ... class List extends React.Component {
58 65 } }
59 66
60 67 return ( return (
61 <Table
62 currencies={currencies}
63 renderChangePercent={this.renderChangePercent}
64 />
68 <div>
69 <Table
70 currencies={currencies}
71 renderChangePercent={this.renderChangePercent}
72 />
73 <Pagination
74 totalPages={totalPages}
75 page={page}
76 />
77 </div>
78
65 79 ); );
66 80 } }
67 81 } }
File src/components/list/Pagination.css added (mode: 100644) (index 0000000..7ff4055)
1 .Pagination {
2 margin: 50px auto;
3 text-align: center;
4 }
5
6 .Pagination-button {
7 text-align: center;
8 border: none;
9 border-radius: 16px;
10 background-color: #4997e5;
11 transition: background-color .2s;
12 color: white;
13 cursor: pointer;
14 margin: 10px;
15 width: 44px;
16 height: 34px;
17 }
18
19 .Pagination-button:hover {
20 background-color: #457cb2;
21 }
22
23 .Pagination-button:focus {
24 outline: none;
25 }
26
27 .Pagination-button:disabled {
28 background-color: #1f364d;
29 cursor: not-allowed;
30 }
31
32 .Pagination-info {
33 font-size: 12px;
34 }
File src/components/list/Pagination.js added (mode: 100644) (index 0000000..fa52cc8)
1 import React from 'react';
2 import './Pagination.css';
3
4 const Pagination = (props) =>{
5 const { totalPages, page } = props;
6
7 return (
8 <div className="Pagination">
9 <button className="Pagination-button">
10 &larr;
11 </button>
12 <span className="Pagination-info">
13 Page <b>{page}</b> of <b>{totalPages}</b>
14 </span>
15 <button className="Pagination-button">
16 &rarr;
17 </button>
18 </div>
19 );
20 }
21
22 export default Pagination;
Hints:
Before first commit, do not forget to setup your git environment:
git config --global user.name "your_name_here"
git config --global user.email "your@email_here"

Clone this repository using HTTP(S):
git clone https://rocketgit.com/user/antcalatayud/ReactCoin

Clone this repository using ssh (do not forget to upload a key first):
git clone ssh://rocketgit@ssh.rocketgit.com/user/antcalatayud/ReactCoin

Clone this repository using git:
git clone git://git.rocketgit.com/user/antcalatayud/ReactCoin

You are allowed to anonymously push to this repository.
This means that your pushed commits will automatically be transformed into a merge request:
... clone the repository ...
... make some changes and some commits ...
git push origin main