From f58a1d127577b07bd849df85afd5e574eaec3a35 Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Thu, 8 Feb 2024 15:21:20 +0000
Subject: Turned GitHub projects into a component

---
 src/components/GitHubProjects.jsx | 75 +++++++++++++++++++++++++++++++++++++++
 src/pages/projects.astro          | 31 +++-------------
 2 files changed, 80 insertions(+), 26 deletions(-)
 create mode 100644 src/components/GitHubProjects.jsx

(limited to 'src')

diff --git a/src/components/GitHubProjects.jsx b/src/components/GitHubProjects.jsx
new file mode 100644
index 0000000..b54dc9f
--- /dev/null
+++ b/src/components/GitHubProjects.jsx
@@ -0,0 +1,75 @@
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+
+const GitHubProjects = ({ username, isOrganization }) => {
+  const [repos, setRepos] = useState([]);
+  const [error, setError] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const reposPerPage = 10;
+
+  useEffect(() => {
+    const fetchRepos = async () => {
+      const baseUrl = 'https://api.github.com';
+      const url = isOrganization
+        ? `${baseUrl}/orgs/${username}/repos`
+        : `${baseUrl}/users/${username}/repos`;
+  
+      try {
+        const response = await fetch(url);
+        const data = await response.json();
+  
+        if (response.ok) {
+          if (Array.isArray(data)) {
+            setRepos(data.filter(repo => !repo.fork));
+          } else {
+            console.error('Unexpected data format:', data);
+            setError('Unexpected data format');
+            setRepos([]);
+          }
+        } else {
+          console.error('API error:', data);
+          setError(data.message);
+          setRepos([]);
+        }
+      } catch (err) {
+        console.error('Failed to fetch projects:', err);
+        setError(err.message);
+        setRepos([]);
+      }
+    };
+  
+    fetchRepos();
+  }, [username, isOrganization]); // Don't forget to include dependencies
+
+  // Get current repos
+  const indexOfLastRepo = currentPage * reposPerPage;
+  const indexOfFirstRepo = indexOfLastRepo - reposPerPage;
+  const currentRepos = repos.slice(indexOfFirstRepo, indexOfLastRepo);
+
+  // Change page
+  const nextPage = () => setCurrentPage(currentPage + 1);
+  const prevPage = () => setCurrentPage(currentPage - 1);
+
+  return (
+    <div>
+      {error && <div class="error">{error}</div>}
+      <div class="grid">
+        {currentRepos.map((repo) => (
+          <article class="card">
+            <h1>{repo.name}</h1>
+            <p>{repo.description}</p>
+            <div class="row">
+                <a href={repo.html_url} target="_blank">Repository</a>
+            </div>
+          </article>
+        ))}
+      </div>
+      <div>
+        {currentPage > 1 && <button class="button margin" onClick={prevPage}>Previous</button>}
+        {currentPage < Math.ceil(repos.length / reposPerPage) && <button class="button margin" onClick={nextPage}>Next</button>}
+      </div>
+    </div>
+  );
+};
+
+export default GitHubProjects;
\ No newline at end of file
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 668217c..c6fb19b 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -2,19 +2,8 @@
 import Page from "../layouts/Page.astro";
 import projects from "../data/projects.json";
 import "../styles/cards.css";
+import GitHubProjects from "../components/GitHubProjects";
 
-let repos;
-let error = null;
-try {
-    const alee14_projects = await fetch('https://api.github.com/orgs/alee14-projects/repos');
-    repos = await alee14_projects.json();
-    repos = repos.filter(repo => !repo.fork);
-} catch (err) {
-    console.error('Failed to fetch projects:', err);
-    error = err.message;
-    // You can set repos to an empty array if the fetch fails
-    repos = [];
-}
 ---
 <Page title="Projects" description="Things that I have been working on in the past, and present">
     <main>
@@ -37,21 +26,11 @@ try {
                 })
             }
         </div>
+        <!--
+        <h2>Andrew Lee GitHub Repositories</h2>
+         <GitHubProjects client:visible username="Alee14" isOrganization=false />-->
         <h2>AleeCorp/Alee Productions GitHub Repositories</h2>
-        { error && <div class="error">{error}</div> }
-        <div class="grid">
-            {repos.map((repo) => {
-                return (
-                        <article class="card">
-                            <h1>{repo.name}</h1>
-                            <p>{repo.description}</p>
-                            <div class="row">
-                                <a href={repo.html_url} target="_blank">Repository</a>
-                            </div>
-                        </article>
-                )
-            })}
-        </div>
+        <GitHubProjects client:visible username="alee14-projects" isOrganization=true />
     </main>
 </Page>
 <style>
-- 
cgit v1.2.3