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)
Manage next/prev pages onclick pagination 104663344877dc34bc9e3df9762bfad335578d99 antcalatayud 2018-04-24 15:09:52
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 104663344877dc34bc9e3df9762bfad335578d99 - Manage next/prev pages onclick pagination
Author: antcalatayud
Author date (UTC): 2018-04-24 15:09
Committer name: antcalatayud
Committer date (UTC): 2018-04-24 15:09
Parent(s): a2600ed30feb02a9394d31215d1218d699371f62
Signing key:
Tree: fdf690170380eb723f7ce56aaba178dde8e2b67c
File Lines added Lines deleted
src/components/list/List.js 25 1
src/components/list/Pagination.js 7 3
File src/components/list/List.js changed (mode: 100644) (index 3dd2ea4..bbe3e52)
... ... class List extends React.Component {
16 16 totalPages: 0, totalPages: 0,
17 17 page: 1, page: 1,
18 18 }; };
19
20 this.handlePaginationClick = this.handlePaginationClick.bind(this);
19 21 } }
20 22
21 23 componentDidMount(){ componentDidMount(){
24 this.fetchCurrencies();
25 }
26
27 fetchCurrencies(){
22 28 this.setState({ loading: true }); this.setState({ loading: true });
23 29
24 30 const { page } = this.state; const { page } = this.state;
 
... ... class List extends React.Component {
53 59 } }
54 60 } }
55 61
62 handlePaginationClick(direction){
63 let nextPage = this.state.page;
64
65 nextPage = direction === 'next' ? nextPage + 1 : nextPage - 1;
66
67 this.setState(
68 {
69 page: nextPage
70 },
71 //fetch data after page state updated
72 () => {
73 this.fetchCurrencies();
74 });
75
76
77 }
78
56 79 render() { render() {
57 80 const { loading, error, currencies, totalPages, page } = this.state; const { loading, error, currencies, totalPages, page } = this.state;
58 81
 
... ... class List extends React.Component {
72 95 /> />
73 96 <Pagination <Pagination
74 97 totalPages={totalPages} totalPages={totalPages}
75 page={page}
98 page={page}
99 handlePaginationClick={this.handlePaginationClick}
76 100 /> />
77 101 </div> </div>
78 102
File src/components/list/Pagination.js changed (mode: 100644) (index fa52cc8..dc43a07)
... ... import React from 'react';
2 2 import './Pagination.css'; import './Pagination.css';
3 3
4 4 const Pagination = (props) =>{ const Pagination = (props) =>{
5 const { totalPages, page } = props;
5 const { totalPages, page, handlePaginationClick } = props;
6 6
7 7 return ( return (
8 8 <div className="Pagination"> <div className="Pagination">
9 <button className="Pagination-button">
9 <button
10 className="Pagination-button"
11 onClick={() => handlePaginationClick('prev')}>
10 12 &larr; &larr;
11 13 </button> </button>
12 14 <span className="Pagination-info"> <span className="Pagination-info">
13 15 Page <b>{page}</b> of <b>{totalPages}</b> Page <b>{page}</b> of <b>{totalPages}</b>
14 16 </span> </span>
15 <button className="Pagination-button">
17 <button
18 className="Pagination-button"
19 onClick={() => handlePaginationClick('next')}>
16 20 &rarr; &rarr;
17 21 </button> </button>
18 22 </div> </div>
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