feat - Added infinite scroll functionality and new script file. (#218)

guibranco · Oct 21, 2024 · b61c614 · b61c614
1 parent b7f5375
commit b61c614
Show file tree

Hide file tree

Showing 2 changed files with 162 additions and 31 deletions.
diff --git a/Src/api.php b/Src/api.php
@@ -16,7 +16,7 @@
     echo json_encode($data);
 }
 
-if(isset($_SESSION['last_api_call']) && $_SESSION['last_api_call'] > (time()-60)) {
+if (isset($_SESSION['last_api_call']) && $_SESSION['last_api_call'] > (time() - 60)) {
     $time = $_SESSION['last_api_call'];
     header('Content-Type: application/json');
     header('Cache-Control: public, max-age=' . $expires);
@@ -27,52 +27,55 @@
     exit();
 }
 
-function loadData($url, $token) {
-        $ch = curl_init($url);
+function loadData($url, $token)
+{
+    $ch = curl_init($url);
 
-        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
-        curl_setopt($ch, CURLINFO_HEADER_OUT, true);
-        curl_setopt($ch, CURLOPT_HEADER, true);        
-        curl_setopt($ch, CURLOPT_HTTPHEADER, [
-            "Authorization: Bearer $token",
-            "User-Agent: GStraccini-bot-website/1.0 (+https://github.com/guibranco/gstraccini-bot-website)",
-            "Accept: application/vnd.github+json",
-            "X-GitHub-Api-Version: 2022-11-28"
-        ]);
+    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+    curl_setopt($ch, CURLINFO_HEADER_OUT, true);
+    curl_setopt($ch, CURLOPT_HEADER, true);
+    curl_setopt($ch, CURLOPT_HTTPHEADER, [
+        "Authorization: Bearer $token",
+        "User-Agent: GStraccini-bot-website/1.0 (+https://github.com/guibranco/gstraccini-bot-website)",
+        "Accept: application/vnd.github+json",
+        "X-GitHub-Api-Version: 2022-11-28"
+    ]);
 
-        $response = curl_exec($ch);
+    $response = curl_exec($ch);
 
-        if (curl_errno($ch)) {
-            curl_close($ch);
-            return null;
-        }
-
-        $headerSize = curl_getinfo($ch, CURLINFO_HEADER_SIZE);
-        $header = substr($response, 0, $headerSize);
-        $body = json_decode(substr($response, $headerSize), true);
-
+    if (curl_errno($ch)) {
         curl_close($ch);
+        return null;
+    }
+
+    $headerSize = curl_getinfo($ch, CURLINFO_HEADER_SIZE);
+    $header = substr($response, 0, $headerSize);
+    $body = json_decode(substr($response, $headerSize), true);
+
+    curl_close($ch);
 
     return ["headers" => $header, "body" => $body];
 }
 
-function fetchAllGitHubPages($url, $token) {
+function fetchAllGitHubPages($url, $token)
+{
     $results = [];
 
     do {
         $result = loadData($url, $token);
-        if($result === null || isseT($result["body"]) === null){
+        if ($result === null || isset($result["body"]) === null) {
             break;
         }
-        
+
         $results = array_merge($results, $result["body"]);
         $url = getNextPageUrl($result["headers"]);
     } while ($url);
 
     return $results;
 }
 
-function getNextPageUrl($link_header) {
+function getNextPageUrl($link_header)
+{
     if (preg_match('/<([^>]+)>; rel="next"/', $link_header, $matches)) {
         return $matches[1];
     }
@@ -81,8 +84,13 @@ function getNextPageUrl($link_header) {
 
 $token = $_SESSION['token'];
 
-$responseIssues = fetchAllGitHubPages('https://api.github.com/issues?per_page=100', $token);
-$responseRepositories = fetchAllGitHubPages('https://api.github.com/user/repos?per_page=100', $token);
+if (isset($_GET['page'])) {
+    $responseIssues = loadData('https://api.github.com/issues?per_page=10&page=' . intval($_GET['page']), $token)["body"];
+    $responseRepositories = null;
+} else {
+    $responseIssues = fetchAllGitHubPages('https://api.github.com/issues?per_page=100', $token);
+    $responseRepositories = fetchAllGitHubPages('https://api.github.com/user/repos?per_page=100', $token);
+}
 
 $openPullRequests = [];
 $openIssues = [];
@@ -97,13 +105,13 @@ function getNextPageUrl($link_header) {
             'url' => $issue['html_url'],
             'created_at' => $issue['created_at']
         ];
-        
-        if (isset($issue['pull_request']) === true) {
+
+        if (isset($issue['pull_request']) === true && isset($_GET['page']) === false) {
             $pullRequest = loadData($issue['pull_request']['url'], $token);
             if ($pullRequest !== null && $pullRequest["body"] !== null) {
                 $repoUrl = $pullRequest["body"]["head"]["repo"]["url"];
                 $branch = $pullRequest["body"]["head"]["ref"];
-                $state = loadData($repoUrl."/commits/".urlencode($branch)."/status", $token);
+                $state = loadData($repoUrl . "/commits/" . urlencode($branch) . "/status", $token);
                 if ($state !== null && $state["body"] !== null && isset($state["body"]["state"])) {
                     $issueData["state"] = $state["body"]["state"];
                 }

diff --git a/Src/infinite.php b/Src/infinite.php
@@ -0,0 +1,123 @@
+<?php
+$cookie_lifetime = 604800;
+session_set_cookie_params([
+    'lifetime' => $cookie_lifetime,
+    'path' => '/',
+    'domain' => 'bot.straccini.com',
+    'secure' => true,
+    'httponly' => true,
+    'samesite' => 'Strict'
+]);
+session_start();
+
+if (!isset($_SESSION['user']) || !isset($_SESSION['token'])) {
+    header('Location: login.php');
+    exit();
+}
+
+$user = $_SESSION['user'];
+
+$data = array("openPullRequests" => [], "openIssues" => [], "repositories" => []);
+
+if (isset($_SESSION["data"])) {
+    $data = $_SESSION["data"];
+}
+
+$title = "Dashboard";
+
+$name = $user["login"];
+if (isset($user["first_name"])) {
+    $name = $user["first_name"];
+} else if (isset($user["name"])) {
+    $name = $user["name"];
+}
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GStraccini-bot | <?php echo $title; ?></title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet" href="user.css">
+    <style>
+        #scrollable-list {
+            max-height: 400px;
+            overflow-y: auto;
+        }
+
+        #loadMoreLink {
+            display: none;
+        }
+    </style>
+</head>
+
+<body>
+    <?php require_once 'includes/header.php'; ?>
+
+    <div class="container mt-5">
+        <h1 class="mb-4">Infinite Scroll List Group</h1>
+        <div id="scrollable-list" class="list-group">
+            <!-- Items will be appended here dynamically -->
+        </div>
+        <button id="loadMoreLink" class="btn btn-primary mt-3">Load More</button>
+    </div>
+    <?php require_once "includes/footer.php"; ?>
+    <script>
+    const apiUrl = 'api.php';
+    let page = 1;
+    let loading = false;
+    let infiniteScrollCount = 0;
+    const maxInfiniteScrolls = 10;
+
+    const scrollableList = document.getElementById('scrollable-list');
+    const loadMoreLink = document.getElementById('loadMoreLink');
+
+    function loadItems() {
+        if (loading) return;
+        loading = true;
+
+        fetch(`${apiUrl}?page=${page}`)
+            .then(response => response.json())
+            .then(data => {
+                data.items.forEach(item => {
+                    const listItem = document.createElement('a');
+                    listItem.href = '#';
+                    listItem.className = 'list-group-item list-group-item-action';
+                    listItem.textContent = item.name;
+                    scrollableList.appendChild(listItem);
+                });
+                page++;
+                loading = false;
+
+                infiniteScrollCount++;
+                if (infiniteScrollCount >= maxInfiniteScrolls) {
+                    loadMoreLink.style.display = 'block';
+                }
+            })
+            .catch(error => {
+                console.error('Error loading items:', error);
+                loading = false;
+            });
+    }
+
+    scrollableList.addEventListener('scroll', () => {
+        if (scrollableList.scrollTop + scrollableList.clientHeight >= scrollableList.scrollHeight) {
+            if (infiniteScrollCount < maxInfiniteScrolls) {
+                loadItems();
+            }
+        }
+    });
+
+    loadMoreLink.addEventListener('click', () => {
+        loadItems();
+    });
+
+    loadItems();
+</script>
+</body>
+
+</html>