├── print.png
├── public
├── favicon.ico
├── manifest.json
└── index.html
├── src
├── App.css
├── components
│ ├── Footer
│ │ └── index.js
│ ├── Nav
│ │ └── index.js
│ ├── MasonryLayout
│ │ └── index.js
│ ├── CardUser
│ │ └── index.js
│ └── persons.js
├── services
│ └── api.js
├── App.js
├── index.js
├── index.css
├── pages
│ └── main
│ │ └── index.js
└── images
│ └── logo-rocketseat-devs.svg
├── .gitignore
├── package.json
├── LICENSE
└── README.md
/print.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iaurg/rocketseatdevs/HEAD/print.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iaurg/rocketseatdevs/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | @import '~antd/dist/antd.css';
2 |
3 | .App {
4 | text-align: center;
5 | }
6 |
7 | .layout .logo {
8 | width: auto;
9 | height: auto;
10 | float: left;
11 | margin-right: 3%;
12 | }
--------------------------------------------------------------------------------
/src/components/Footer/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Layout } from "antd";
3 | const { Footer } = Layout;
4 |
5 | const FooterDev = () => (
6 |
7 | RocketSeat Devs ©2018 Created by @italox
8 |
9 | );
10 |
11 | export default FooterDev;
12 |
--------------------------------------------------------------------------------
/src/services/api.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 |
3 | const apiToken = process.env.REACT_APP_GIT_TOKEN;
4 |
5 | const api = axios.create({
6 | baseURL: "https://api.github.com/users",
7 | auth: {
8 | username: 'italox',
9 | password: apiToken
10 | }
11 | });
12 |
13 | export default api;
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Layout } from "antd";
3 | import "./App.css";
4 | import HeaderDev from "./components/Nav";
5 | import FooterDev from "./components/Footer";
6 | import Main from "./pages/main";
7 |
8 | const App = () => (
9 |
10 |
11 |
12 |
13 |
14 | );
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 | ReactDOM.render( , document.getElementById('root'));
7 |
8 | // If you want your app to work offline and load faster, you can change
9 | // unregister() to register() below. Note this comes with some pitfalls.
10 | // Learn more about service workers: http://bit.ly/CRA-PWA
11 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
6 | sans-serif;
7 | -webkit-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: grayscale;
9 | }
10 |
11 | code {
12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
13 | monospace;
14 | }
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "lista_profissionais",
3 | "version": "0.1.0",
4 | "private": true,
5 | "engines": {
6 | "npm": "6.4.1",
7 | "node": "10.13.0"
8 | },
9 | "dependencies": {
10 | "antd": "^3.10.7",
11 | "axios": "^0.18.0",
12 | "lodash": "^4.17.11",
13 | "react": "^16.6.3",
14 | "react-dom": "^16.6.3",
15 | "react-scripts": "2.1.1"
16 | },
17 | "scripts": {
18 | "start": "react-scripts start",
19 | "build": "react-scripts build",
20 | "test": "react-scripts test",
21 | "eject": "react-scripts eject"
22 | },
23 | "eslintConfig": {
24 | "extends": "react-app"
25 | },
26 | "browserslist": [
27 | ">0.2%",
28 | "not dead",
29 | "not ie <= 11",
30 | "not op_mini all"
31 | ]
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/Nav/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Layout } from "antd";
3 | import devsLogo from "../../images/logo-rocketseat-devs.svg";
4 | const { Header } = Layout;
5 |
6 | const HeaderDev = () => (
7 |
30 | );
31 |
32 | export default HeaderDev;
33 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Italo Aurelio
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/pages/main/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { Layout } from "antd";
3 | import CardUser from "../../components/CardUser";
4 | import { persons } from "../../components/persons";
5 | import MasonryLayout from "../../components/MasonryLayout";
6 | import * as _ from "lodash";
7 |
8 | const { Content } = Layout;
9 |
10 | export default class Main extends Component {
11 | state = {
12 | persons: persons
13 | };
14 |
15 | /**
16 | * Return the array of persons sorted by name attribute.
17 | *
18 | * @return Array
19 | */
20 | get persons() {
21 | // get persons.
22 | return _.sortBy(this.state.persons, ["name"]);
23 | }
24 |
25 | render() {
26 | return (
27 |
28 |
29 |
30 | {this.persons.map(person => (
31 |
36 | ))}
37 |
38 |
39 |
40 | );
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Rockeseat.Devs
2 |
3 | [Acessar site Rocketseat.Devs](https://rocketseatdevs.vercel.app)
4 |
5 | 
6 |
7 | Como vi diversas pessoas compartilhando redes e querendo fazer um networking através da comunidade no Discord resolvi criar este app para que todos possam contribuir, treinar um pouco de git e ficar listado em uma página de desenvolvedores Rocketseat.
8 |
9 | **Melhorias são bem-vindas, caso eu tenha feito algo errado ou possa fazer de uma maneira mais eficiente favor me informar**
10 |
11 | ### Como adicionar meus contatos?
12 |
13 | * Primeiro faça um fork do repositorio em sua conta no Github.
14 |
15 | ```
16 | git clone link-do-fork-feito
17 | cd rockseatdevs
18 | git checkout -b Seu_nome
19 | cd src/components
20 | code persons.js
21 | ```
22 |
23 | Adicione suas informações no final do objeto dentro do arquivo persons.js da seguinte maneira:
24 | **ps:** Lembre-se de manter os demais usuários no arquivo. Apenas adicione o seu bloco de informação seguindo o padrão. Veja o padrão do usuários já existente e siga o mesmo.
25 | ```javascript
26 | {
27 | name: "Seu_nome",
28 | gituser: "seu_usuario_do_github",
29 | linkedin: "seu_perfil_no_linkedin"
30 | },
31 | ```
32 |
33 | Salve.
34 |
35 | ```
36 | git add --all
37 | git commit -m "Adicionando meu nome na lista"
38 | git push origin Seu_nome
39 | ```
40 |
41 | Após enviar o branch para seu repositorio abra um pull request e aguarde o merge
42 |
43 | Até mais.
44 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
22 | RocketSeat.Devs
23 |
24 |
25 |
26 | You need to enable JavaScript to run this app.
27 |
28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/src/components/MasonryLayout/index.js:
--------------------------------------------------------------------------------
1 | // Simple masonry layout based on: https://medium.com/the-andela-way/how-to-create-a-masonry-layout-component-using-react-f30ec9ca5e99
2 | import React, { Component } from "react";
3 | import { Row } from "antd";
4 |
5 | import { debounce } from "lodash";
6 |
7 | export default class MasonryLayout extends Component {
8 | constructor(props) {
9 | super(props);
10 |
11 | this.layout = debounce(this.layout.bind(this), 500);
12 | }
13 | state = {
14 | result: []
15 | };
16 |
17 | layout() {
18 | const columnWrapper = {};
19 | const result = [];
20 |
21 | const columns = Math.floor(window.innerWidth / 400);
22 | for (let i = 0; i < columns; i++) {
23 | columnWrapper[`column${i}`] = [];
24 | }
25 | for (let i = 0; i < this.props.children.length; i++) {
26 | const columnIndex = i % columns;
27 | columnWrapper[`column${columnIndex}`].push(
28 |
29 | {this.props.children[i]}
30 |
31 | );
32 | }
33 | for (let i = 0; i < columns; i++) {
34 | result.push(
35 | 0 ? 15 : 0}px`,
39 | flex: 1
40 | }}
41 | >
42 | {columnWrapper[`column${i}`]}
43 |
44 | );
45 | }
46 |
47 | this.setState({ result });
48 | }
49 |
50 | componentDidMount() {
51 | this.layout();
52 | window.addEventListener("resize", this.layout);
53 | }
54 |
55 | componentWillUnmount() {
56 | window.removeEventListener("resize", this.layout);
57 | }
58 |
59 | render() {
60 | return (
61 |
62 | {this.state.result}
63 |
64 | );
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/src/components/CardUser/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { Card, Icon, Avatar, Badge } from "antd";
3 | import api from "../../services/api";
4 |
5 | const { Meta } = Card;
6 |
7 | export default class CardUser extends Component {
8 | state = {
9 | user: [],
10 | hireable: false
11 | };
12 | componentDidMount() {
13 | this.loadGitUser();
14 | }
15 |
16 | loadGitUser = async () => {
17 | const response = await api.get(`/${this.props.github}`);
18 | this.setState({ user: response.data, hireable: response.data.hireable });
19 | };
20 |
21 | render() {
22 | const isHireable = this.state.hireable;
23 | let alertHireable;
24 | isHireable
25 | ? (alertHireable = (
26 |
32 | ))
33 | : (alertHireable = "");
34 |
35 | return (
36 |
44 |
45 | ,
46 |
51 |
52 | ,
53 |
58 |
59 | ,
60 |
65 |
66 |
67 | ]}
68 | >
69 | }
71 | title={this.state.user.name}
72 | description={this.state.user.bio}
73 | />
74 | {alertHireable}
75 |
76 | );
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/src/components/persons.js:
--------------------------------------------------------------------------------
1 | export const persons = [
2 | {
3 | name: 'Italo Aurelio',
4 | gituser: 'italox',
5 | linkedin: 'http://linkedin.com.br',
6 | },
7 | {
8 | name: 'RocketSeat',
9 | gituser: 'rocketseat',
10 | linkedin: 'http://linkedin.com.br',
11 | },
12 | {
13 | name: 'Cleiton Souze',
14 | gituser: 'cleitonsouza',
15 | linkedin: 'http://linkedin.com.br',
16 | },
17 | {
18 | name: 'Claudio junior',
19 | gituser: 'cso01',
20 | linkedin: 'http://linkedin.com.br',
21 | },
22 | {
23 | name: 'Diego Fernandes',
24 | gituser: 'diego3g',
25 | linkedin: 'http://linkedin.com.br',
26 | },
27 | {
28 | name: 'Robson Marques',
29 | gituser: 'robsonmarques',
30 | linkedin: 'http://linkedin.com.br',
31 | },
32 | {
33 | name: 'Bruno Frigeri',
34 | gituser: 'brunofrigeri',
35 | linkedin: 'https://www.linkedin.com/in/bruno-frigeri-b8b29a175/',
36 | },
37 | {
38 | name: 'João Paulo de Magalhães ',
39 | gituser: 'jpdemagalhaes',
40 | linkedin: 'http://linkedin.com.br',
41 | },
42 | {
43 | name: 'Guilherme Pellizzetti',
44 | gituser: 'pellizzetti',
45 | linkedin: 'http://linkedin.com.br',
46 | },
47 | {
48 | name: 'Pedro Oliveira',
49 | gituser: 'Axobirosbaldo',
50 | linkedin: 'https://www.linkedin.com/in/pedro-lopes-de-oliveira-645438125',
51 | },
52 | {
53 | name: 'João Pedro',
54 | gituser: 'jpmuniz',
55 | linkedin: 'https://www.linkedin.com/in/jo%C3%A3o-pedro-00939867/',
56 | },
57 | {
58 | name: 'Lucas Fernandes Sandin',
59 | gituser: 'lucassandin',
60 | linkedin: 'https://www.linkedin.com/in/lucas-fernandes-sandin-974488172/',
61 | },
62 | {
63 | name: 'Italo Izaac',
64 | gituser: 'iiandrade',
65 | linkedin: 'https://www.linkedin.com/in/iiandrade/',
66 | },
67 | {
68 | name: 'André Nunes',
69 | gituser: 'AndreNunes1812',
70 | linkedin: 'www.linkedin.com/in/andrenunes18',
71 | },
72 | {
73 | name: 'Stênia Felix',
74 | gituser: 'steniafelix',
75 | linkedin: 'https://www.linkedin.com/in/steniafelix/',
76 | },
77 | {
78 | name: 'Abimael Andrade',
79 | gituser: 'abimaelandrade',
80 | linkedin: 'https://www.linkedin.com/in/abimaelandrade/',
81 | },
82 | {
83 | name: 'Vinicius Meneses',
84 | gituser: 'viniciusmeneses',
85 | linkedin: 'https://www.linkedin.com/in/vinicius-meneses/',
86 | },
87 | {
88 | name: 'Marcio Angelo Matté',
89 | gituser: 'marcioamatte',
90 | linkedin: 'https://www.linkedin.com/in/marcioam/',
91 | },
92 | {
93 | name: 'Eduardo Spada',
94 | gituser: 'duspada',
95 | linkedin: 'https://www.linkedin.com/in/duspada/',
96 | },
97 | {
98 | name: 'Wesley Monaro',
99 | gituser: 'wesleymonaro',
100 | linkedin: 'https://www.linkedin.com/in/wesleymonaro/',
101 | },
102 | {
103 | name: 'Yan Oliveira',
104 | gituser: 'YanOliveira',
105 | linkedin: 'https://www.linkedin.com/in/yanoliveirati/',
106 | },
107 | {
108 | name: 'Daniel Pavone',
109 | gituser: 'danielpavone',
110 | linkedin: 'https://www.linkedin.com/in/danielpavone/',
111 | },
112 | {
113 | name: 'João Gabriel Pancheski',
114 | gituser: 'outsid3rBr',
115 | linkedin: 'https://www.linkedin.com/in/jo%C3%A3o-g-25aa81106/',
116 | },
117 | {
118 | name: 'Ruan Kaylo',
119 | gituser: 'RuanAyram',
120 | linkedin: 'https://www.linkedin.com/in/ruan-kaylo-99805812b/',
121 | },
122 | {
123 | name: 'João Medeiros',
124 | gituser: 'Jaum97',
125 | linkedin: 'https://www.linkedin.com/in/joaommedeiros/',
126 | },
127 | {
128 | name: 'Caique Oliveira',
129 | gituser: 'CaiqueMOliveira',
130 | linkedin: 'https://www.linkedin.com/in/caiquemoliveira/',
131 | },
132 | {
133 | name: 'Andre Rego',
134 | gituser: 'AndreMRego',
135 | linkedin: 'https://www.linkedin.com/in/andremrego',
136 | },
137 | {
138 | name: 'Victor Nogueira',
139 | gituser: 'vmnog',
140 | linkedin: 'https://www.linkedin.com/in/vmnogueira',
141 | },
142 | {
143 | name: "Helena Paixão",
144 | gituser:"helenapaixao",
145 | linkedin:"https://www.linkedin.com/in/helenapaixao"
146 | },
147 | {
148 | name: "Lucas Lombardi Floriano",
149 | gituser: "lucaslombardif",
150 | linkedin: "https://www.linkedin.com/in/lucas-lombardi-floriano"
151 | },
152 | {
153 | name: "Victor Nogueira",
154 | gituser: "vmnog",
155 | linkedin: "https://www.linkedin.com/in/vmnogueira"
156 | },
157 | {
158 | name: "Lucas Rego",
159 | gituser: "lucasraziel",
160 | linkedin: "https://www.linkedin.com/in/lucassoaresrego/"
161 | },
162 | {
163 | name: 'Igor Cantelmo',
164 | gituser: 'Igorbrands',
165 | linkedin: 'https://www.linkedin.com/in/igor-cantelmo-dev',
166 | },
167 | ];
168 |
--------------------------------------------------------------------------------
/src/images/logo-rocketseat-devs.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
9 | Group 28
10 | Created with Sketch.
11 |
12 |
13 |
14 |
18 |
21 |
28 |
29 |
30 |
31 |
32 |
34 |
37 |
40 |
41 |
44 |
46 |
49 |
52 |
55 |
57 |
59 |
61 |
64 |
66 |
69 |
70 |
71 |
--------------------------------------------------------------------------------