10 |
11 | Tech:
12 | 1. React
13 | 2. AJAX
14 | 3. Router
15 | 4. Query String
--------------------------------------------------------------------------------
/app/components/App.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Popular from "./Popular";
3 | var ReactRouter = require("react-router-dom");
4 | var Router = ReactRouter.BrowserRouter;
5 | var Route = ReactRouter.Route;
6 | var Switch = ReactRouter.Switch;
7 | import Home from "./Home";
8 | import Nav from "./Nav";
9 | import Battle from "./Battle";
10 | import Results from "./Results";
11 | import ForkRibbon from "./ForkButton";
12 |
13 | export default class App extends React.Component {
14 | render() {
15 | return (
16 |
105 | {!playerOneName && (
106 |
115 |
121 |
122 | )}
123 |
124 | {!playerTwoName && (
125 |
134 |
140 |
141 | )}
142 |
143 | {playerOneImage && playerTwoImage && (
144 |
12 | Fork me on GitHub
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/app/components/Home.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { Link } from "react-router-dom";
3 | export default class Home extends Component {
4 | render() {
5 | return (
6 |
7 |
13 | );
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/app/components/Loading.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import PropTypes from "prop-types";
3 |
4 | const styles = {
5 | content: {
6 | textAlign: "center",
7 | fontSize: "35px"
8 | }
9 | };
10 |
11 | export default class Loading extends Component {
12 | constructor(props) {
13 | super(props);
14 | this.state = {
15 | text: props.text
16 | };
17 | }
18 | componentDidMount() {
19 | let stopper = this.props.text + "...";
20 | this.interval = window.setInterval(
21 | function() {
22 | if (this.state.text === stopper) {
23 | this.setState({ text: this.props.text });
24 | } else {
25 | this.setState(function(prevState) {
26 | return { text: prevState.text + "." };
27 | });
28 | }
29 | }.bind(this),
30 | this.props.speed
31 | );
32 | }
33 | componentWillUnmount() {
34 | window.clearInterval(this.interval);
35 | }
36 |
37 | render() {
38 | return GoGitter Profile Battle
8 |Battle with friends
9 | 10 | Battle 11 | 12 |{this.state.text}
; 39 | } 40 | } 41 | Loading.propTypes = { 42 | loading: PropTypes.string.isRequired, 43 | speed: PropTypes.number.isRequired 44 | }; 45 | Loading.defaultProps = { 46 | text: "Loading", 47 | speed: 300 48 | }; 49 | -------------------------------------------------------------------------------- /app/components/Nav.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NavLink } from "react-router-dom"; 3 | 4 | export default function Nav() { 5 | return ( 6 |-
7 |
-
8 |
9 | Home 10 | 11 |
12 | -
13 |
14 | Battle 15 | 16 |
17 | -
18 |
19 | Popular 20 | 21 |
22 |
7 |
17 | );
18 | }
19 |
20 | PlayerPreview.propTypes = {
21 | avatar: PropTypes.string.isRequired,
22 | username: PropTypes.string.isRequired
23 | };
24 |
25 | export default PlayerPreview;
26 |
--------------------------------------------------------------------------------
/app/components/Popular.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import api from "../utils/api";
3 | import propTypes from "prop-types";
4 | import Loading from "./Loading";
5 |
6 | export default class Popular extends Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | selectedLanguage: "All",
11 | repos: null
12 | };
13 | this.updateLanguage = this.updateLanguage.bind(this);
14 | }
15 |
16 | componentDidMount() {
17 | this.updateLanguage(this.state.selectedLanguage);
18 | }
19 |
20 | updateLanguage(lang) {
21 | this.setState(function() {
22 | return { selectedLanguage: lang, repos: null };
23 | });
24 | api.fetchPopularRepos(lang).then(
25 | function(repos) {
26 | this.setState({ repos: repos });
27 | }.bind(this)
28 | );
29 | }
30 |
31 | render() {
32 | return (
33 |
8 | 
13 |
15 | {props.children}
16 | @{props.username}
14 |
34 |
44 | );
45 | }
46 | }
47 |
48 | function RepoGrid(props) {
49 | return (
50 | -
51 | {props.repos.map(function(repo, index) {
52 | return (
53 |
-
57 |
62 |
63 | - 64 | {repo.name} 📘 65 | 66 |
- @{repo.owner.login} 👨🏻💻 67 |
- {repo.stargazers_count} ⭐ 68 |
-
54 |
#{index + 1}
55 | -
84 | {languages.map(lang => {
85 | return (
86 |
- 93 | {lang} 94 | 95 | ); 96 | })} 97 |
-
16 | {info.name &&
- {info.name} } 17 | {info.location &&
- {info.location} } 18 | {info.company &&
- {info.company} } 19 |
- Followers: {info.followers} 20 |
- Following: {info.following} 21 |
- Public Repos: {info.public_repos} 22 | {info.blog && ( 23 |
- 24 | {info.blog} 25 | 26 | )} 27 |
39 |
43 | );
44 | }
45 |
46 | Player.propTypes = {
47 | label: PropTypes.string.isRequired,
48 | score: PropTypes.number.isRequired,
49 | profile: PropTypes.object.isRequired
50 | };
51 |
52 | class Results extends React.Component {
53 | constructor(props) {
54 | super(props);
55 | this.state = {
56 | winner: null,
57 | loser: null,
58 | error: null,
59 | loading: true
60 | };
61 | }
62 | componentDidMount() {
63 | var players = queryString.parse(this.props.location.search);
64 |
65 | api.battle([players.playerOneName, players.playerTwoName]).then(
66 | function(players) {
67 | if (players === null) {
68 | return this.setState(function() {
69 | return {
70 | error:
71 | "Looks like there was an error. Check that both users exist on Github.",
72 | loading: false
73 | };
74 | });
75 | }
76 |
77 | this.setState(function() {
78 | return {
79 | error: null,
80 | winner: players[0],
81 | loser: players[1],
82 | loading: false
83 | };
84 | });
85 | }.bind(this)
86 | );
87 | }
88 |
89 | render() {
90 | var error = this.state.error;
91 | var winner = this.state.winner;
92 | var loser = this.state.loser;
93 | var loading = this.state.loading;
94 | var players = queryString.parse(this.props.location.search);
95 |
96 | if (loading === true) {
97 | return {props.label}
40 |Score: {props.score}
41 |
103 |
106 | );
107 | }
108 | if (players.playerOneName === players.playerTwoName) {
109 | return (
110 | {error}
104 | Reset 105 |
111 |
117 | );
118 | } else {
119 | return (
120 |
121 |
133 | );
134 | }
135 | }
136 | }
137 |
138 | export default Results;
139 |
--------------------------------------------------------------------------------
/app/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans,
3 | Ubuntu, Cantarell, Helvetica Neue, sans-serif;
4 | }
5 |
6 | .container {
7 | max-width: 1200px;
8 | margin: 0 auto;
9 | }
10 |
11 | a {
12 | text-decoration: none;
13 | color: #d0021b;
14 | }
15 |
16 | ul {
17 | padding: 0;
18 | }
19 |
20 | li {
21 | list-style-type: none;
22 | }
23 |
24 | .button {
25 | color: #e6e6e6;
26 | background: #0a0a0a;
27 | border: none;
28 | font-size: 16px;
29 | border-radius: 3px;
30 | width: 100px;
31 | text-align: center;
32 | display: block;
33 | padding: 7px 0;
34 | margin: 10px auto;
35 | }
36 |
37 | .button:hover:enabled {
38 | background: linear-gradient(#1a1a1a, #0a0a0a);
39 | color: #fff;
40 | text-decoration: none;
41 | cursor: pointer;
42 | }
43 |
44 | .button:active {
45 | transform: translateY(1px);
46 | cursor: pointer;
47 | }
48 |
49 | .avatar {
50 | width: 150px;
51 | border-radius: 50%;
52 | }
53 |
54 | .space-list-items {
55 | margin-bottom: 7px;
56 | }
57 |
58 | .languages {
59 | display: flex;
60 | justify-content: center;
61 | }
62 |
63 | .languages li {
64 | margin: 10px;
65 | font-weight: bold;
66 | cursor: pointer;
67 | }
68 |
69 | .popular-list {
70 | display: flex;
71 | flex-wrap: wrap;
72 | justify-content: space-around;
73 | }
74 |
75 | .popular-item {
76 | margin: 20px;
77 | text-align: center;
78 | }
79 |
80 | .popular-rank {
81 | font-size: 20px;
82 | margin: 10px;
83 | }
84 |
85 | .home-container {
86 | display: flex;
87 | flex-direction: column;
88 | align-items: center;
89 | }
90 |
91 | .nav {
92 | display: flex;
93 | }
94 |
95 | .nav li {
96 | margin-right: 15px;
97 | }
98 |
99 | .active {
100 | font-weight: bold;
101 | }
102 |
103 | .row {
104 | display: flex;
105 | justify-content: space-around;
106 | }
107 |
108 | .column {
109 | display: flex;
110 | flex-direction: column;
111 | align-items: center;
112 | }
113 |
114 | .column input {
115 | border-radius: 3px;
116 | margin: 10px 0;
117 | padding: 5px;
118 | border: 1px solid rgba(0, 0, 0, 0.43);
119 | font-size: 16px;
120 | width: 80%;
121 | }
122 |
123 | .column label {
124 | text-align: center;
125 | font-size: 30px;
126 | font-weight: 200;
127 | }
128 |
129 | .header {
130 | text-align: center;
131 | font-size: 30px;
132 | font-weight: 200;
133 | }
134 |
135 | .reset {
136 | border: none;
137 | background: transparent;
138 | color: #d0021b;
139 | display: block;
140 | width: 100%;
141 | text-align: center;
142 | }
143 |
144 | .reset:hover {
145 | cursor: pointer;
146 | }
147 |
148 | .footer {
149 | position: fixed;
150 | right: 0;
151 | font-weight: bolder;
152 | bottom: 0;
153 | color: #fff;
154 | left: 0;
155 | padding: 1rem;
156 | background-color: rgb(0, 0, 0);
157 | text-align: center;
158 | }
159 |
--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
122 |
129 |
130 |
131 |
132 | Piyush Mehta
;
8 | }
9 | }
10 |
11 | ReactDOM.render(