project-github-tracker/code/script.js at main · EmmaSprings/project-github-tracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120


const username = 'EmmaSprings'
const projects = document.getElementById('projects')
const API_URL_USER = `https://api.github.com/users/${username}`
const API_URL_REPO = `https://api.github.com/users/${username}/repos`


const fetchUser = () => {

    const options = {
        method: 'GET',
        headers: {
              Authorization: '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'
          }
      }

    fetch(API_URL_USER, options)
     .then((res) => res.json())
     .then((data) => {
         projects.innerHTML += `
         <div class="header-container">
            <img src="https://avatars.githubusercontent.com/u/94292545?v=4"/>
                <h1>GitHub tracker for Emma Springs</h1>
                <h2>user: <a href="https://api.github.com/users/EmmaSprings" class="login-name"> ${data.login}</a> <br>
                ${data.bio}
                </h2>

                <p class="title">projects = [</p>
         </div>
            `
            // console.log(data)  //remove

        fetchRepos();

    })

    const fetchRepos = () => {
        fetch(API_URL_REPO, options)
        .then((res) => res.json())
        .then((data) => {


            const myProjects = data.filter((repo) => repo.name.startsWith("project-") && repo.fork);

            myProjects.forEach((repo => {

                // -----will continue working on this to get the idea of dynamic ID and how to use it-------

                // fetch(`https://api.github.com/repos/EmmaSprings/${repo.name}/commits`, options)
                // .then((res) => res.json())
                // .then((repo) => {

                //     document.getElementById('repoName').innerHTML += `<p>commits made: ${repo.length}</p>`

                // //  projects.innerHTML += `<p>commits made: ${repo.length}</p>`
                //  console.log(repo.length)
                // })


                projects.innerHTML += `
                <li id≈"${repo.name}">

                <a href="${repo.html_url}" target="_blank" class="repo-link">${repo.name}</a>
                <p class="repo-info">
                <!-- This is ${repo.name} -->
                </p>
                <p class="latest-push">
                latest push: ${new Date(repo.pushed_at).toDateString()}</p>
                <p class="extra-info">main language: ${repo.language}<br>
                branch: ${repo.default_branch}<br>
                commits amount: <!--${repo.commits_url.length}--> <br>
                pull requests:  ${data.length}<br>
                </p>

                <li>
                `

            }))


            drawChart(myProjects.length);
            fetchPullRequests(myProjects);


            // console.log(myProjects) // remove

        })

    };


    // will work on this to get the correct value displayes instead of total amount
    const fetchPullRequests = (myProjects) => {


        myProjects.forEach(repo => {
            fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`)
            .then((res) => res.json())
            .then((data) => {
                const myPullRes = data.find((pull) => pull.user.login === repo.owner.login);

                // projects.innerHTML += `<p>pull requests: ${data.length}</p>`
                // console.log(myPullRes) //remove
            })
        })
    }

};


fetchUser();