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 creating Seach component 9f6d5152998e40d7d41b2fa5381cc22684ba814b antcalatayud 2018-04-25 12:48:44
Add home link on logo 1ebc23cd70ddadf4d8518d5087b3a864825f42aa antcalatayud 2018-04-25 09:39:23
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
Commit 9f6d5152998e40d7d41b2fa5381cc22684ba814b - Start creating Seach component
Author: antcalatayud
Author date (UTC): 2018-04-25 12:48
Committer name: antcalatayud
Committer date (UTC): 2018-04-25 12:48
Parent(s): 1ebc23cd70ddadf4d8518d5087b3a864825f42aa
Signing key:
Tree: b74235e34b845f2271407eecdd2caec00d2d1e8d
File Lines added Lines deleted
src/components/common/Header.js 3 1
src/components/common/Search.css 84 0
src/components/common/Search.js 47 0
File src/components/common/Header.js changed (mode: 100644) (index fc4441f..5152a77)
1 1 import React from 'react'; import React from 'react';
2 2 import logo from "./logo.png"; import logo from "./logo.png";
3 3 import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
4 import Search from './Search';
4 5 import './Header.css'; import './Header.css';
5 6
6 7 const Header = () => { const Header = () => {
 
... ... const Header = () => {
8 9 <div className="Header"> <div className="Header">
9 10 <Link to="/"> <Link to="/">
10 11 <img src={logo} alt="logo" className="Header-logo" /> <img src={logo} alt="logo" className="Header-logo" />
11 </Link>
12 </Link>
13 <Search />
12 14 </div> </div>
13 15 ); );
14 16 } }
File src/components/common/Search.css added (mode: 100644) (index 0000000..49071fe)
1 .Search {
2 position: relative;
3 width: 30%;
4 height: 35px;
5 margin: 0 auto;
6 padding: 0 20px;
7 }
8
9 @media (max-width: 700px) {
10 .Search {
11 width: 100%;
12 }
13 }
14
15 .Search-icon {
16 z-index: 1;
17 position: absolute;
18 top: 9px;
19 left: 28px;
20 background-image: url('./search.png');
21 background-repeat: no-repeat;
22 background-position: center;
23 background-size: cover;
24 width: 18px;
25 height: 18px;
26 }
27
28 .Search-input {
29 box-sizing: border-box;
30 background-color: #1f364d;
31 border-radius: 4px;
32 border: 0;
33 padding-left: 35px;
34 color: white;
35 opacity: .8;
36 transition: opacity .2s;
37 width: 100%;
38 height: 35px;
39 }
40
41 .Search-input:focus {
42 outline: none;
43 opacity: 1;
44 }
45
46 .Search ::placeholder {
47 color: #9cb3c9;
48 opacity: 1;
49 }
50
51 .Search-loading {
52 position: absolute;
53 top: 9px;
54 right: 28px;
55 }
56
57 .Search-result-container {
58 position: relative;
59 width: 100%;
60 max-height: 299px;
61 overflow-y: auto;
62 background-color: #0f273d;
63 border: 1px solid #0c2033;
64 border-radius: 4px;
65 box-shadow: 0px 0px 40px 0px#1f364d;
66 margin-top: 10px;
67 }
68
69 .Search-result {
70 color: #9cb3c9;
71 padding: 15px 0 15px 35px;
72 border-bottom: 2px solid #0c2033;
73 cursor: pointer;
74 }
75
76 .Search-result:hover {
77 color: #fff;
78 }
79
80 .Search-no-result {
81 color: #9cb3c9;
82 padding: 15px 0 15px 35px;
83 border-bottom: 1px solid #0f273d;
84 }
File src/components/common/Search.js added (mode: 100644) (index 0000000..ea947d0)
1 import React from 'react';
2 import { API_URL } from '../../config';
3 import { handleResponse } from'../../helpers';
4 import './Search.css';
5
6 class Search extends React.Component {
7 constructor(props) {
8 super(props);
9 this.state = {
10 searchQuery: '',
11 error: null
12 };
13
14 this.handleChange = this.handleChange.bind(this);
15 }
16
17 handleChange(event){
18 const searchQuery = event.target.value;
19
20 this.setState({
21 searchQuery
22 });
23
24 if (!searchQuery) return '';
25
26 fetch(`${API_URL}/autocomplete?searchQuery=${searchQuery}`)
27 .then(handleResponse)
28 .then((data) => {
29 console.log('Success', data);
30 })
31 .catch((error) => {
32 this.setState({
33 error: error.errorMessage
34 });
35 });
36 }
37
38 render() {
39 return (
40 <div>
41 <input onChange={this.handleChange} type="text"/>
42 </div>
43 );
44 }
45 }
46
47 export default Search;
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