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)
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 a410655fa61df8653b5943cb9c853b04e48c7287 - Create currencies table
Author: antcalatayud
Author date (UTC): 2018-04-24 13:34
Committer name: antcalatayud
Committer date (UTC): 2018-04-24 13:34
Parent(s): 00686f6d20dcc806e20a3d7bfb745517c203dd54
Signing key:
Tree: cef37d35ace81895f10a02878f7934f755bbfd21
File Lines added Lines deleted
src/components/list/List.js 52 2
src/components/list/Table.css 44 0
File src/components/list/List.js changed (mode: 100644) (index b98eaad..d997c30)
1 1 import React from 'react'; import React from 'react';
2 2 import { handleResponse } from '../../helpers'; import { handleResponse } from '../../helpers';
3 import { API_URL } from '../../config'
3 import { API_URL } from '../../config';
4 import './Table.css';
4 5
5 6 class List extends React.Component { class List extends React.Component {
6 7 constructor(props) { constructor(props) {
 
... ... class List extends React.Component {
32 33 }); });
33 34 } }
34 35
36 renderChangePercent(percent){
37 if (percent > 0) {
38 return <span className="percent-raised">{percent}% &uarr;</span>
39 }
40 else if (percent < 0) {
41 return <span className="percent-fallen">{percent}% &darr;</span>
42 }
43 else {
44 return <span>{percent}%</span>
45 }
46 }
47
35 48 render() { render() {
36 49 if (this.state.loading) { if (this.state.loading) {
37 50 return <div>Loading...</div> return <div>Loading...</div>
38 51 } }
39 52
40 53 return ( return (
41 <div>List goes here</div>
54 <div className="Table-container">
55
56 <table className="Table">
57 <thead className="Table-head">
58 <tr>
59 <th>Cryptocurrency</th>
60 <th>Price</th>
61 <th>Market Price</th>
62 <th>2H Change</th>
63 </tr>
64 </thead>
65 <tbody className="Table-body">
66 {this.state.currencies.map((currency) => (
67 <tr key={currency.id}>
68 <td>
69 <span className="Table-rank">
70 {currency.rank}
71 </span>
72 {currency.name}
73 </td>
74 <td>
75 <span className="Table-dollar">
76 $ {currency.price}
77 </span>
78 </td>
79 <td>
80 <span className="Table-dollar">
81 $ {currency.marketCap}
82 </span>
83 </td>
84 <td>
85 {this.renderChangePercent(currency.percentChange24h)}
86 </td>
87 </tr>
88 ))}
89 </tbody>
90 </table>
91 </div>
42 92 ); );
43 93 } }
44 94 } }
File src/components/list/Table.css added (mode: 100644) (index 0000000..5413579)
1 .Table-container {
2 overflow-x: auto; /* Needed for table to be responsive */
3 }
4
5 .Table {
6 width: 100%;
7 border-collapse: collapse;
8 border-spacing: 0;
9 }
10
11 .Table-head {
12 background-color: #0c2033;
13 }
14
15 .Table-head tr th {
16 padding: 10px 20px;
17 color: #9cb3c9;
18 text-align: left;
19 font-size: 14px;
20 font-weight: 400;
21 }
22
23 .Table-body {
24 text-align: left;
25 background-color: #0f273d;
26 }
27
28 .Table-body tr td {
29 padding: 24px 20px;
30 border-bottom: 2px solid #0c2033;
31 color: #fff;
32 cursor: pointer;
33 }
34
35 .Table-rank {
36 color: #9cb3c9;
37 margin-right: 18px;
38 font-size: 12px;
39 }
40
41 .Table-dollar {
42 color: #9cb3c9;
43 margin-right: 6px;
44 }
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