diff options
| author | Andrew Lee <alee14498@protonmail.com> | 2024-06-28 20:31:02 -0400 |
|---|---|---|
| committer | Andrew Lee <alee14498@protonmail.com> | 2024-06-28 20:31:02 -0400 |
| commit | 64cd7fc83d43a0ad7db1b51214291736bd245b44 (patch) | |
| tree | da8f9e47d50583932e144fa6b21585d5dd70bd21 /src/components/GitHubProjects.jsx | |
| parent | 8edeebb44d9b3636268d95c30d462593d9a074d8 (diff) | |
| download | personal-website-64cd7fc83d43a0ad7db1b51214291736bd245b44.tar.gz personal-website-64cd7fc83d43a0ad7db1b51214291736bd245b44.tar.bz2 personal-website-64cd7fc83d43a0ad7db1b51214291736bd245b44.zip | |
Guestbook overhaul; Comments; New post; Updated packages
Diffstat (limited to 'src/components/GitHubProjects.jsx')
| -rw-r--r-- | src/components/GitHubProjects.jsx | 86 |
1 files changed, 0 insertions, 86 deletions
diff --git a/src/components/GitHubProjects.jsx b/src/components/GitHubProjects.jsx deleted file mode 100644 index 33b4e64..0000000 --- a/src/components/GitHubProjects.jsx +++ /dev/null @@ -1,86 +0,0 @@ -import { useState, useEffect } from 'preact/hooks'; - -const GitHubProjects = ({ username, isOrganization }) => { - const [repos, setRepos] = useState([]); - const [error, setError] = useState(null); - const [isLoading, setIsLoading] = useState(true); - const [currentPage, setCurrentPage] = useState(1); - const reposPerPage = 10; - - const fetchRepos = async (page = 1, allRepos = []) => { - const baseUrl = 'https://api.github.com'; - const url = isOrganization - ? `${baseUrl}/orgs/${username}/repos?page=${page}&per_page=100` - : `${baseUrl}/users/${username}/repos?page=${page}&per_page=100`; - - try { - const response = await fetch(url); - const data = await response.json(); - - if (response.ok) { - if (Array.isArray(data)) { - allRepos = allRepos.concat(data.filter(repo => !repo.fork)); - // If the data length is 100, there might be more repositories to fetch - if (data.length === 100) { - return fetchRepos(page + 1, allRepos); - } - } 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([]); - } - - setIsLoading(false); - return allRepos; - }; - - useEffect(() => { - fetchRepos().then(setRepos); - }, [username, isOrganization]); - - const indexOfLastRepo = currentPage * reposPerPage; - const indexOfFirstRepo = indexOfLastRepo - reposPerPage; - const currentRepos = repos.slice(indexOfFirstRepo, indexOfLastRepo); - - const nextPage = () => setCurrentPage(currentPage + 1); - const prevPage = () => setCurrentPage(currentPage - 1); - - return ( - <div> - {isLoading ? ( - <div>Loading...</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; |
