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)
Add style to detail component. Refactor renderpercentage 764b2b2006bac9af3311cc22b2ce4c10388483e9 antcalatayud 2018-04-25 09:36:53
Start creating Detail component and add route to ir 01f5ae9c4984f05d2dd01b593ccb58369d9968da antcalatayud 2018-04-25 08:08:47
Add link to home page when page not found eb3c30fc87eff524b43d4197d945da9d026e8502 antcalatayud 2018-04-25 07:53:08
Add routing and not found page 17718006b6c1f4090ae971d0338ea8cd8f4b93c5 antcalatayud 2018-04-24 15:41:27
disable pagination buttons when min/max reached a7459260589206aa9430fd9dba67aed2b175607c antcalatayud 2018-04-24 15:14:06
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 764b2b2006bac9af3311cc22b2ce4c10388483e9 - Add style to detail component. Refactor renderpercentage
Author: antcalatayud
Author date (UTC): 2018-04-25 09:36
Committer name: antcalatayud
Committer date (UTC): 2018-04-25 09:36
Parent(s): 01f5ae9c4984f05d2dd01b593ccb58369d9968da
Signing key:
Tree: ede18ed7aa27e0fd3a28864b8f271e6560ccdb82
File Lines added Lines deleted
src/components/detail/Detail.js 90 2
src/components/list/List.js 1 12
src/components/list/Table.js 2 2
src/helpers.js 23 1
File src/components/detail/Detail.js changed (mode: 100644) (index 14ab892..31abd80)
1 1 import React from 'react'; import React from 'react';
2 import { API_URL} from "../../config"
3 import { handleResponse, renderChangePercent } from "../../helpers";
4 import Loading from "../common/Loading";
2 5 import './Detail.css'; import './Detail.css';
3 6
4 7
5 8 class Detail extends React.Component { class Detail extends React.Component {
6 9 constructor(props) { constructor(props) {
7 10 super(props); super(props);
8 this.state = { };
11 this.state = {
12 currency: {},
13 loading: false,
14 error: null
15 };
9 16 } }
17
18 componentDidMount(){
19 this.setState({ loading: true });
20
21 const currencyId = this.props.match.params.id;
22
23 fetch(`${API_URL}/cryptocurrencies/${currencyId}`)
24 .then(handleResponse)
25 .then((currency) => {
26 this.setState({
27 loading: false,
28 error: null,
29 currency
30 });
31 })
32 .catch((error) => {
33 this.setState({
34 loading: false,
35 error: error.errorMessage
36 });
37 });
38 }
39
10 40 render() { render() {
41 const { loading, error, currency} = this.state;
42
43 if (loading) {
44 return <div className="loading-container"><Loading /></div>
45 }
46
47 if (error) {
48 return <div className="error">{error}</div>
49 }
50
11 51 return ( return (
12 <div>Detail</div>
52 <div className="Detail">
53 <h1 className="Detail-heading">
54 {currency.name} ({currency.symbol})
55 </h1>
56 <div className="Detail-container">
57 <div className="Detail-item">
58 Price
59 <span className="Detail-value">
60 ${currency.price}
61 </span>
62 </div>
63 <div className="Detail-item">
64 Rank
65 <span className="Detail-value">
66 {currency.rank}
67 </span>
68 </div>
69 <div className="Detail-item">
70 24h Change
71 <span className="Detail-value">
72 {renderChangePercent(currency.percentChange24h)}
73 </span>
74 </div>
75 <div className="Detail-item">
76 <span className="Detail-title">
77 Market cap
78 </span>
79 <span className="Detail-dollar">
80 $
81 </span>
82 {currency.marketCap}
83 </div>
84 <div className="Detail-item">
85 <span className="Detail-title">
86 24H Volume
87 </span>
88 <span className="Detail-dollar">
89 $
90 </span>
91 {currency.volume24h}
92 </div>
93 <div className="Detail-item">
94 <span className="Detail-title">
95 Total supply
96 </span>
97 {currency.totalSupply}
98 </div>
99 </div>
100 </div>
13 101 ); );
14 102 } }
15 103 } }
File src/components/list/List.js changed (mode: 100644) (index bbe3e52..3cdb01e)
... ... class List extends React.Component {
47 47 }); });
48 48 } }
49 49
50 renderChangePercent(percent){
51 if (percent > 0) {
52 return <span className="percent-raised">{percent}% &uarr;</span>
53 }
54 else if (percent < 0) {
55 return <span className="percent-fallen">{percent}% &darr;</span>
56 }
57 else {
58 return <span>{percent}%</span>
59 }
60 }
50
61 51
62 52 handlePaginationClick(direction){ handlePaginationClick(direction){
63 53 let nextPage = this.state.page; let nextPage = this.state.page;
 
... ... class List extends React.Component {
91 81 <div> <div>
92 82 <Table <Table
93 83 currencies={currencies} currencies={currencies}
94 renderChangePercent={this.renderChangePercent}
95 84 /> />
96 85 <Pagination <Pagination
97 86 totalPages={totalPages} totalPages={totalPages}
File src/components/list/Table.js changed (mode: 100644) (index 09f8c7a..4e0efaa)
1 1 import React from 'react'; import React from 'react';
2 2 import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
3 3 import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
4 import { renderChangePercent } from '../../helpers';
4 5 import './Table.css'; import './Table.css';
5 6
6 7
7 8 const Table = (props) => { const Table = (props) => {
8 const { currencies, renderChangePercent, history } = props;
9 const { currencies, history } = props;
9 10
10 11 return( return(
11 12 <div className="Table-container"> <div className="Table-container">
 
... ... const Table = (props) => {
55 56
56 57 Table.propTypes = { Table.propTypes = {
57 58 currencies: PropTypes.array.isRequired, currencies: PropTypes.array.isRequired,
58 renderChangePercent: PropTypes.func.isRequired,
59 59 history: PropTypes.object.isRequired, history: PropTypes.object.isRequired,
60 60 }; };
61 61
File src/helpers.js changed (mode: 100644) (index 25b2340..0515f7f)
1 import React from 'react';
2
1 3 /** /**
2 4 |-------------------------------------------------- |--------------------------------------------------
3 5 | Fetch error helper | Fetch error helper
 
... ... export const handleResponse = (response) => {
10 12 return response.json().then(json => { return response.json().then(json => {
11 13 return response.ok ? json : Promise.reject(json); return response.ok ? json : Promise.reject(json);
12 14 }); });
13 };
15 };
16
17 /**
18 |--------------------------------------------------
19 | Render currency percent
20 |
21 | @param {string} percent
22 |--------------------------------------------------
23 */
24
25 export const renderChangePercent = (percent) => {
26 if (percent > 0) {
27 return <span className="percent-raised">{percent}% &uarr;</span>
28 }
29 else if (percent < 0) {
30 return <span className="percent-fallen">{percent}% &darr;</span>
31 }
32 else {
33 return <span>{percent}%</span>
34 }
35 }
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