Technigo · nama0027 · Sep 28, 2021 · Sep 28, 2021 · Sep 28, 2021 · Sep 28, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,8 @@
 {
-  "liveServer.settings.port": 5505
+  "liveServer.settings.port": 5505,
+  "cSpell.words": [
+    "Malik",
+    "Naushin",
+    "technigo"
+  ]
 }
diff --git a/README.md b/README.md
@@ -1,13 +1,12 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
-
+This project is to track the github repositories created during Technigo Boot Camp
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+The challenge for this week was the limit of 60 request per hour for github API. Therefore, first, I worked on functionality without any styling, then, I did styling with placeholders and at the end i merged both of them to have the final version.
+
+I have completed most of the requirements. If i had more time, I would have add sorting and more visual representation of data.
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://naushin-github.netlify.app/
diff --git a/code/.DS_Store b/code/.DS_Store
diff --git a/code/assets/cardbg.jpeg b/code/assets/cardbg.jpeg
diff --git a/code/assets/eye-30.png b/code/assets/eye-30.png
diff --git a/code/assets/html-50.png b/code/assets/html-50.png
diff --git a/code/assets/javascript.svg b/code/assets/javascript.svg
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,31 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById('chart').getContext('2d');
 
 //"Draw" the chart here 👇
+const drawChart = (repoCount) =>{
+    const config = {
+    type: 'pie',
+    data: {
+        labels: [
+            'Remaining',
+            'Completed',
+        ],
+        datasets: [{
+            label: 'My First Dataset',
+            data: [(19 - repoCount), repoCount],
+            backgroundColor: [
+            '#333',
+            '#fff'
+            ],
+            hoverOffset: 4
+        }]
+        },
+        options: {
+            responsive:true,
+            maintainAspectRatio: false,
+        },
+
+    };
+
+     new Chart(ctx, config)
+}
diff --git a/code/index.html b/code/index.html
@@ -6,14 +6,43 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Project GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+ <!-- header 👇 -->
+  <header class="header">
+    <h1>GitHub Tracker</h1>
+  </header>
+  <section class= "tracker">
+
+    <!-- user 👇 -->
+    <div class= "profile">
+      <div class= "user-info" id ="profile">  </div>
+    </div>
+  <!--  chart 👇 -->
+    <div class="progress">
+      <h2 class= "title-chart">Progress:</h2>
+      <div class="card chart">
+        <canvas class="pichart" id="chart"></canvas>
+      </div>
+    </div>
+    <!-- repos 👇 -->
+    <section class= "repos">
+    <input class="search" type="text" id="search-repo" placeholder="Search For..."/>
+
+        <div class= "projects" >
+          <h2 class= "title">Projects:</h2>
+          <main class="projects-detail" id="projects" > </main>
+        </div>
+
+    </section>
+</section>  
+  <!-- Footer 👇 -->
+  <footer class="footer">
+     <h3>GitHub tracker made by Naushin Malik</h3>
+  </footer>
+
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
 
   <script src="./script.js"></script>
   <script src="./chart.js"></script>

diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,234 @@
+// DOM selectors
+const userProfile = document.getElementById('profile');
+const userProjects = document.getElementById('projects');
+const progressChart = document.getElementById('chart')
+const searchRepo = document.getElementById("search-repo")
+
+//Global Variables
+let userName = "nama0027";
+//let cardBack;
+let cardFront;
+// API variables
+const USER_REPO_URL = `https://api.github.com/users/${userName}/repos`;
+const USER_URL = `https://api.github.com/users/${userName}`;
+
+
+//-------------functions deceleration----------------------------//
+
+//---- for fetch----//
+
+const getUser = () => {
+    fetch(USER_URL)
+        .then((res)=>{return res.json()})
+        .then((data) => {
+            console.log('user', data)
+            userProfile.innerHTML = `
+            <div class= "user">
+            <img class= "photo" src= "${data.avatar_url}" alt= "${data.name} avatar" />
+            <h2 class = "name"> ${data.name}</h2>
+            </div>
+            <a href="${data.html_url}" class="link-github">
+                <span class="connect-label"> My GitHub Page </span>
+            </a>
+            `
+
+        }) 
+}
+
+const getRepos = () =>{
+    fetch(USER_REPO_URL)
+        .then ((res) => {
+            return res.json();
+
+    })
+        .then((data) => {
+            console.log(data);
+            const technigoProjects = data.filter(item => (item.fork && item.name.startsWith('project-') ))
+            technigoProjects.forEach((repo) => {
+                console.log(repo.name);
+                getPullRequests(repo)
+                let date = formateDate(repo.pushed_at)
+                getLanguageIcon(repo.languages_url, repo.name )
+
+                userProjects.innerHTML += `
+                        <div class="card front">
+                        <div class= "card-body">
+                            <div class="content labels" >
+                                <p class="content labels">Github repository: </p>
+                                <p class=" content labels">Updated on: </p>
+                                <p class="content labels">Commits: </p>
+                            </div>
+                            <div class="content value" id="commitNum-${repo.name}" >
+                                <p class="content value" >
+                                <a href = "${repo.html_url}">
+                                <span> Click me! </span></a>
+                                </p>
+                                <p class="content value" >${date}</p>
+                            </div>
+                        </div>
+                        <div class="card-overlay"  >
+                            <div class="card-header" id="lang-${repo.name}">
+                                <div class="repo-info">
+                                    <h2 class="repo-name">${repo.name}</h2>
+                                    <p class="repo-branch"><b>${repo.default_branch}</b></p>
+                                </div>
+                            </div>
+                            <p class="repo-comment" id="review-${repo.name}" ></p>
+                            <p class="repo-comment" id="commit-${repo.name}" ></p>
+                        </div>
+                    </div>
+
+                `
+            })
+            drawChart(technigoProjects.length)
+
+    })
+
+}
+
+const getPullRequests = (repo) => {
+    //Get all the PRs for each project.
+    fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`)
+        .then(res => res.json())
+        .then(data => {
+            console.log(data);
+            const userPullReq = data.find((pull) =>
+                (repo.owner.login === pull.user.login || pull.title.includes('Naushin'))
+            );
+            if (userPullReq) {
+                getCommits(userPullReq.commits_url, repo.name);
+                getComments(userPullReq.review_comments_url,repo.name );
+            } else {
+                document.getElementById(`commitNum-${repo.name}`).innerHTML += `
+                    <p class="content value"> No pull request yet!</p>
+                `
+                document.getElementById(`review-${repo.name}`).innerHTML =
+                 `No review yet`
+            }
+
+
+
+    })
+}
+
+
+
+
+function getCommits  (commitUrl, repoName) {
+
+    fetch(commitUrl)
+    .then(res => res.json())
+    .then(data => {
+        const commitMessages = Array.from(data, msg => msg.commit.message)
+        displayCommitMessages(commitMessages, repoName)
+        document.getElementById(`commitNum-${repoName}`).innerHTML += `
+        <p class="content value"> ${data.length}</p>
+        `
+
+    })
+
+}
+const formateDate = (date) => {
+
+    const formattedDate = new Date(date).toDateString()
+
+return formattedDate
+
+
+}
+
+const getLanguageIcon = (langURL, repoName) => {
+
+    fetch(langURL)
+        .then(res => res.json())
+        .then(data => { 
+            console.log('lang', data)
+            const keys = Object.keys(data)
+            const largest = Math.max.apply(null, keys.map(x => data[x]));
+            const result = keys.reduce((result, key) => { if (data[key] === largest) { result.push(key); } return result; }, []);
+
+
+            if (result[0] === "HTML") {
+                console.log('lang text', result[0])
+                document.getElementById(`lang-${repoName}`).innerHTML += `
+
+                    <img class="language"
+                    src="./assets/html-50.png"
+                    alt="${result[0]}"
+                />
+                `
+
+            } else if (result[0] === "JavaScript") {
+                document.getElementById(`lang-${repoName}`).innerHTML += `
+
+                    <img class="language"
+                    src="./assets/javascript.svg"
+                    alt="${result[0]}"
+                />
+                `
+
+
+            } else {
+                document.getElementById(`lang-${repoName}`).innerHTML += `
+
+                    <img class="language"
+                    src=""
+                    alt="${result[0]}"
+                />
+                `
+            }
+        })
+
+}
+
+
+
+
+const displayCommitMessages= ((commitData, repoName ) => {
+    console.log ('commitData', commitData)
+    document.getElementById(`commit-${repoName}`).innerHTML += `Latest commit: "${commitData[commitData.length-1]}"`
+
+})
+
+const getComments = (commentsUrl,repoName) => {
+
+    console.log(commentsUrl)
+    fetch(commentsUrl)
+        .then(res => res.json())
+        .then(data => {
+            if (data.length!== 0){
+            console.log('review', data);
+            document.getElementById(`review-${repoName}`).innerHTML += `From reviewer: "${data[0].body}"`
+        } else {
+            document.getElementById(`review-${repoName}`).innerHTML = `No review yet`
+        }
+
+    })
+}
+
+//----------- search--------------------//
+const search = () => {
+    console.log('i am here')
+    let src = searchRepo.value.toLowerCase()
+    console.log(src)
+    const allRepo = document.getElementsByClassName('card front')
+    for (i = 0; i < allRepo.length; i++) {
+        if (allRepo[i].innerHTML.toLowerCase().includes(src)) {
+      allRepo[i].style.display = "flex";
+    } else {
+      allRepo[i].style.display = "none";
+    }
+  }
+}
+
+
+//event listener
+
+searchRepo.addEventListener('keyup', search)
+
+
+
+
+//function calls on loading
+getRepos();
+getUser();