phundrak.com/content/.vuepress/components/GitHub/FetchRepositories.vue

47 lines
1.2 KiB
Vue
Raw Normal View History

<template>
<ApiLoader :url="fetchUrl" @loaded="filterRepos" cache-name="repos" />
2023-05-08 13:57:45 +00:00
<slot />
</template>
<script setup lang="ts">
import { PropType, ref } from 'vue';
import { GithubRepo } from '../../types/github';
const props = defineProps({
sortBy: {
default: 'none',
required: false,
type: String as PropType<'stars' | 'forks' | 'pushed_at'>,
},
user: {
default: '',
required: true,
type: String,
},
limit: {
default: 5,
required: false,
type: Number,
},
});
const emits = defineEmits(['loaded']);
const fetchUrl = `https://api.github.com/users/${props.user}/repos?per_page=100`;
const repos = ref<GithubRepo[]>([]);
const filterRepos = (response: GithubRepo[]) => {
repos.value = response
.sort((a, b) => {
if (props.sortBy === 'stars') {
return b.stargazers_count - a.stargazers_count;
}
if (props.sortBy === 'pushed_at') {
const dateA = new Date(a.pushed_at);
const dateB = new Date(b.pushed_at);
return dateB.getTime() - dateA.getTime();
}
return b.forks_count - a.forks_count;
})
.slice(0, +props.limit);
emits('loaded', repos.value);
};
</script>