diff options
| -rw-r--r-- | src/components/GitHubProjects.jsx | 75 | ||||
| -rw-r--r-- | src/pages/projects.astro | 31 |
2 files changed, 80 insertions, 26 deletions
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> |