shack/pages/shelves/shelf.page.vue

<template>
	<div class="content">
		<h3>{{ shelf.slug }}</h3>

		<ul class="posts nolist">
			<li
				v-for="post in posts"
				:key="post.id"
			>
				<Post
					:post="post"
					:shelf="shelf"
				/>
			</li>
		</ul>

		<form
			class="form compose"
			@submit.prevent="submitPost"
		>
			<div class="form-row">
				<input
					v-model="title"
					placeholder="Title"
					class="input"
				>
			</div>

			<div class="form-row">
				<input
					v-model="link"
					class="input"
					placeholder="Link"
				>
			</div>

			<div class="form-row">
				<textarea
					v-model="body"
					placeholder="Body"
					class="input body"
				/>
			</div>

			<div class="form-actions">
				<button class="button button-submit">Post</button>
			</div>
		</form>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import Post from '../../components/posts/post.vue';

import * as api from '../../assets/js/api';
import { navigate } from '../../assets/js/navigate';
import { usePageContext } from '../../renderer/usePageContext';

const { pageData, routeParams } = usePageContext();

const {
	shelf,
	posts,
} = pageData;

const title = ref();
const link = ref();
const body = ref();

async function submitPost() {
	const post = await api.post(`/shelves/${routeParams.id}/posts`, {
		title: title.value,
		link: link.value,
		body: body.value,
	});

	navigate(`/s/${shelf.slug}/post/${post.id}`);
}
</script>

<style scoped>
.posts {
	margin-bottom: 1rem;
}
</style>