58 lines
1.2 KiB
Vue
58 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import type { Post } from '@/types/dredge.types';
|
|
import PostCard from './PostCard.vue';
|
|
|
|
const posts = ref<Post[]>([]);
|
|
const loading = ref(true);
|
|
const error = ref<string | null>(null);
|
|
|
|
async function fetchPosts() {
|
|
loading.value = true;
|
|
error.value = null;
|
|
|
|
try {
|
|
const response = await fetch('/api/posts');
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to load posts');
|
|
}
|
|
|
|
posts.value = await response.json();
|
|
} catch (e) {
|
|
error.value = 'Could not load your feed. Please try again.';
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
function onLike(id: string) {
|
|
console.log('like', id);
|
|
}
|
|
|
|
onMounted(fetchPosts);
|
|
</script>
|
|
|
|
<template>
|
|
<section class="feed" >
|
|
<p v-if="loading">Loading your feed…</p>
|
|
<p v-else-if="error" role="alert">{{ error }}</p>
|
|
<p v-else-if="posts.length === 0">No posts to show yet.</p>
|
|
|
|
<PostCard
|
|
v-for="post in posts"
|
|
v-else
|
|
:key="post.id"
|
|
:post="post"
|
|
/>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.feed {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.75rem;
|
|
}
|
|
</style>
|