46 | 
47 | |
48 |
51 | 
52 | |
53 |
33 |
45 | );
46 | }
47 |
48 | export default App;
49 |
--------------------------------------------------------------------------------
/src/Components/Battle.js:
--------------------------------------------------------------------------------
1 | import React, {useState} from 'react';
2 |
3 | import {Link} from 'react-router-dom';
4 |
5 | import Instructions from './Instructions';
6 | import GitHub from './GitHub/GitHub';
7 |
8 | const Battle = ({theme, handlePlayersData}) => {
9 |
10 | const [player1, handlePlayer1] = useState('');
11 | const [player2, handlePlayer2] = useState('');
12 | const [submit1, handleSubmit1] = useState(false);
13 | const [submit2, handleSubmit2] = useState(false);
14 | const [user1Data, setUser1Data] = useState({});
15 | const [user2Data, setUser2Data] = useState({});
16 |
17 | const handleSubmit = (e) => {
18 | e.preventDefault();
19 | if(e.target.className === 'form1') {
20 | handleSubmit1(true);
21 | getUserData(1)
22 | }
23 | else {
24 | handleSubmit2(true);
25 | getUserData(2)
26 | }
27 | }
28 |
29 | const handleClose = e => {
30 | console.log(e.target.className);
31 | if(e.target.className === 'form1') {
32 | handleSubmit1(false);
33 | handlePlayer1('');
34 | }
35 | else {
36 | handleSubmit2(false);
37 | handlePlayer2('');
38 | }
39 | }
40 |
41 | const playerData = () => {
42 | handlePlayersData(user1Data, user2Data);
43 | }
44 |
45 | const getUserData = (num) => {
46 | const user = (num===1 ? player1 : player2);
47 | GitHub.getUserData(user)
48 | .then(response => (num===1 ? setUser1Data(response) : setUser2Data(response)))
49 | }
50 |
51 | return (
52 |
34 |
35 |
36 |
37 |
41 |
42 |
43 |
44 |
53 |
54 |
107 | )
108 | }
109 |
110 | export default Battle;
--------------------------------------------------------------------------------
/src/Components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Footer = () => {
4 | return (
5 | Players
57 | 58 |
59 | {
60 | submit1===false ?
61 |
71 | :
72 |
77 | }
78 | {
79 | submit2===false ?
80 |
90 | :
91 |
96 | }
97 |
98 |
99 |
100 | {(submit1===true && submit2===true) &&
101 |
102 |
103 | }
104 |
105 |
106 |
6 | </> with ❤️ by 🤓
7 |
8 | )
9 | }
10 |
11 | export default Footer;
12 |
--------------------------------------------------------------------------------
/src/Components/GitHub/GitHub.js:
--------------------------------------------------------------------------------
1 | const client_id = '45ebb6d8e84478c05bec';
2 | const client_secret = '11ffca05704f88d486072382012903f147489b8c';
3 |
4 | const GitHub = {
5 | getUserData(searchUser) {
6 | let url1 = `https://api.github.com/users/${searchUser}?client_id=${client_id}&client_secret=${client_secret}`;
7 | return new Promise((resolve, reject) => {
8 |
9 | fetch(url1)
10 | .then(res => res.json())
11 | .then(data => resolve(data))
12 | .catch(err => reject(err));
13 | })
14 | },
15 |
16 | getUserRepos(user) {
17 | let url = `https://api.github.com/users/${user}/repos?client_id=${client_id}&client_secret=${client_secret}&per_page=100&order=asc&sort=updated`;
18 |
19 | return new Promise((resolve, reject) => {
20 | fetch(url)
21 | .then(res => res.json())
22 | .then(data => resolve(data))
23 | .catch(err => reject(err))
24 | })
25 | },
26 |
27 | async getUserScore(user) {
28 | let data, score=0;
29 | await this.getUserRepos(user)
30 | .then(res => data = res)
31 | data.forEach(item => {
32 | score += item.stargazers_count
33 | });
34 | return score;
35 | },
36 |
37 | getRepoData(searchTerm) {
38 | let url2 = (searchTerm === 'All' ? `https://api.github.com/search/repositories?q=stars:%3E1+&sort=stars&order=desc&type=Repositories
39 | &client_id=${client_id}&client_secret=${client_secret}` : `https://api.github.com/search/repositories?q=stars:%3E1+language:${searchTerm}&sort=stars&order=desc&type=Repositories&client_id=${client_id}&client_secret=${client_secret}`)
40 | return new Promise((resolve, reject) => {
41 | fetch(url2)
42 | .then(res => res.json())
43 | .then(data => resolve(data))
44 | .catch(err => reject(err))
45 | })
46 | }
47 | }
48 |
49 | export default GitHub;
--------------------------------------------------------------------------------
/src/Components/GithubCard.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rajat2502/GitHub-Battle/2f733dbf53afd42e3fb303a39ae79bd316d1201a/src/Components/GithubCard.js
--------------------------------------------------------------------------------
/src/Components/Instructions.js:
--------------------------------------------------------------------------------
1 | import React, {Fragment} from 'react';
2 |
3 | const Instructions = ({theme}) => {
4 | return (
5 | Instructions
7 |
8 |
27 |
9 |
14 | Enter Two GitHub Users
10 | 13 |
15 |
20 | Battle
16 | 19 |
21 |
26 | See the Winner
22 | 25 |
29 |
31 | {theme === "Light" ? "🌚" : "🌞"}
30 |-
35 | {arr.map((item, index) => {
36 | return (
37 |
- {item} 38 | ) 39 | })} 40 |
43 | {message === 'Fetching Data...' ?
49 |
50 | Fetching Data...
: repoData.map((item, index) => {
44 | return (
45 |
7 | 
8 | {data.owner.login}
9 |
21 | )
22 | }
23 |
24 | export default RepoCard;
--------------------------------------------------------------------------------
/src/Components/Result.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 |
3 | import GitHub from './GitHub/GitHub';
4 |
5 | const Result = ({data1, data2, theme}) => {
6 |
7 | const [score1, setScore1] = useState(null);
8 | const [score2, setScore2] = useState(null);
9 |
10 | useEffect(() => {
11 | GitHub.getUserScore(data1.login)
12 | .then(score => setScore1(score+(data1.followers*3)));
13 |
14 | GitHub.getUserScore(data2.login)
15 | .then(score => setScore2(score+(data2.followers*3)));
16 | }, [])
17 |
18 | if(data1.login == null || data2.login == null) {
19 | return
10 |
20 | 👤 {data.owner.login}
11 |⭐ {data.stargazers_count} stars
12 |13 | 17 | {data.forks_count} forks
18 |⚠️ {data.open_issues_count} Open Issues
19 |Please Enter Valid Github Users
20 | } 21 | 22 | else if(score1==null || score2==null) { 23 | returnBattling...
24 | } 25 | 26 | else { 27 | return ( 28 |
29 |
115 | )
116 | }
117 | }
118 |
119 | export default Result;
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import 'bootstrap/dist/css/bootstrap.min.css';
4 |
5 | import App from './App';
6 |
7 | ReactDOM.render(
30 | 
32 | score: {score1}
33 | {data1.login}
34 |
71 |
72 | {score1 > score2 ? 'Winner🥳' : (score1 == score2 ? 'Tie🙂' : 'Loser🙁')}
31 |35 | 38 | {data1.login} 39 |
40 |41 | 44 | {data1.location ? data1.location : 'nil'} 45 |
46 |47 | 50 | {data1.company ? data1.company : 'nil'} 51 |
52 |53 | 56 | {data1.followers} followers 57 |
58 |59 | 62 | {data1.following} following 63 |
64 |65 | 68 | {data1.public_repos} Public Repos 69 |
70 |
73 | 
75 | score: {score2}
76 | {data2.login}
77 |
114 | {score1 < score2 ? 'Winner🥳' : (score1 == score2 ? 'Tie🙂' : 'Loser🙁')}
74 |78 | 81 | {data2.login} 82 |
83 |84 | 87 | {data2.location ? data2.location : 'nil'} 88 |
89 |90 | 93 | {data2.company ? data2.company : 'nil'} 94 |
95 |96 | 99 | {data2.followers} followers 100 |
101 |102 | 105 | {data2.following} following 106 |
107 |108 | 111 | {data2.public_repos} Public Repos 112 |
113 |