blob: 9d9d56956b0692da8d7c9f688dfd4030e7959de6 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
<script>
import { onMount } from 'svelte';
import Loader from "./Loader.svelte";
export let username;
export let isOrganization;
let repos = [];
let error = null;
let isLoading = true;
let currentPage = 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 (data.length === 100) {
return fetchRepos(page + 1, allRepos);
}
} else {
console.error('Unexpected data format:', data);
error = 'Unexpected data format';
repos = [];
}
} else {
console.error('API error:', data);
error = data.message;
repos = [];
}
} catch (err) {
console.error('Failed to fetch projects:', err);
error = err.message;
repos = [];
}
isLoading = false;
return allRepos;
};
onMount(() => {
fetchRepos().then(r => repos = r);
});
const nextPage = () => currentPage++;
const prevPage = () => currentPage--;
</script>
<div>
{#if isLoading}
<Loader />
{:else}
{#if error}
<div class="error">{error}</div>
{:else}
<div class="grid">
{#each repos.slice((currentPage - 1) * reposPerPage, currentPage * reposPerPage) as repo (repo.id)}
<article class="card">
<h1>{repo.name}</h1>
<p>{repo.description || 'No description provided'}</p>
<div class="row">
<a href={repo.html_url} target="_blank">Repository</a>
</div>
</article>
{/each}
</div>
{#if currentPage > 1}
<button class="button margin" on:click={prevPage}>Previous</button>
{/if}
{#if currentPage < Math.ceil(repos.length / reposPerPage)}
<button class="button margin" on:click={nextPage}>Next</button>
{/if}
{/if}
{/if}
</div>
|
