Added voting. Improved comments.

pages/account/create.page.vue

@@ -88,7 +88,7 @@ import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 
 import Checkbox from '../../components/form/checkbox.vue';
 
-import navigate from '../../assets/js/navigate';
+import { navigate } from '../../assets/js/navigate';
 import { post } from '../../assets/js/api';
 
 const config = CONFIG;

pages/account/login.page.vue

@@ -65,7 +65,7 @@ import { ref } from 'vue';
 import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 
 import { post } from '../../assets/js/api';
-import navigate from '../../assets/js/navigate';
+import { navigate } from '../../assets/js/navigate';
 
 const config = CONFIG;
 

pages/index/index.page.vue

@@ -6,7 +6,7 @@
 				class="link"
 			>Create new shelf</a></li>
 
-			<li v-if="!user"><a
+			<li v-if="!me"><a
 				href="/account/login"
 				class="link"
 			>Log in</a></li>
@@ -32,6 +32,6 @@
 <script setup>
 import { usePageContext } from '../../renderer/usePageContext';
 
-const { user, pageData } = usePageContext();
+const { me, pageData } = usePageContext();
 const { shelves } = pageData;
 </script>

pages/posts/post.page.route.js

@@ -1 +1 @@
-export default '/s/@id/post/@postId';
+export default '/s/@shelfId/post/@postId';

pages/posts/post.page.server.js

@@ -1,33 +1,20 @@
-import { RenderErrorPage } from 'vite-plugin-ssr/RenderErrorPage';
 import { fetchShelf } from '../../src/shelves';
 import { fetchPost } from '../../src/posts';
 import { fetchPostComments } from '../../src/comments';
 
 async function getPageData(pageContext) {
 	const [shelf, post, comments] = await Promise.all([
-		fetchShelf(pageContext.routeParams.id),
-		fetchPost(pageContext.routeParams.postId),
+		fetchShelf(pageContext.routeParams.shelfId),
+		fetchPost(pageContext.routeParams.postId, pageContext.session.user),
 		fetchPostComments(pageContext.routeParams.postId),
 	]);
 
 	if (!shelf) {
-		throw RenderErrorPage({
-			pageContext: {
-				pageProps: {
-					errorInfo: 'This shelf does not exist',
-				},
-			},
-		});
+		throw new Error('This shelf does not exist');
 	}
 
 	if (!post) {
-		throw RenderErrorPage({
-			pageContext: {
-				pageProps: {
-					errorInfo: 'This post does not exist',
-				},
-			},
-		});
+		throw new Error('This post does not exist');
 	}
 
 	return {

pages/posts/post.page.vue

@@ -1,28 +1,46 @@
 <template>
 	<div class="page">
-		<div class="body">
-			<Post :post="post" />
+		<div class="content">
+			<Post
+				:post="post"
+				:shelf="shelf"
+			/>
 
-			<form
-				class="writer"
-				@submit.prevent="addComment"
+			<p
+				v-if="post.body"
+				class="body"
+			>{{ post.body }}</p>
+
+			<Writer
+				v-if="me"
+				:post="post"
+			/>
+
+			<div
+				v-else
+				class="body"
 			>
-				<textarea
-					v-model="newComment"
-					placeholder="Write a new comment"
-					class="input"
-				/>
-
-				<div class="actions">
-					<button class="button">Comment</button>
-				</div>
-			</form>
+				<a
+					href="/account/login"
+					class="link"
+				>Log in</a> or
+				<a
+					href="/account/create"
+					class="link"
+				>sign up</a> to comment
+			</div>
 
 			<ul class="comments nolist">
 				<li
 					v-for="comment in comments"
 					:key="comment.id"
-				><Comment :comment="comment" /></li>
+				>
+					<Comment
+						:comment="comment"
+						:post="post"
+						:shelf="shelf"
+					/>
+				</li>
 			</ul>
 		</div>
 
@@ -33,70 +51,46 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
 import Post from '../../components/posts/post.vue';
 import Comment from '../../components/comments/comment.vue';
-import * as api from '../../assets/js/api';
-import { reload } from '../../assets/js/navigate';
+import Writer from '../../components/comments/writer.vue';
 
 import { usePageContext } from '../../renderer/usePageContext';
 
-const { pageData } = usePageContext();
+const { me, pageData } = usePageContext();
 
 const {
 	shelf,
 	post,
 	comments,
 } = pageData;
-
-const newComment = ref('');
-
-async function addComment() {
-	await api.post(`/posts/${post.id}/comments`, {
-		body: newComment.value,
-		parentId: null,
-	});
-
-	reload();
-}
 </script>
 
 <style scoped>
 .page {
 	display: flex;
-	padding: .5rem;
+}
+
+.content {
+	flex-grow: 1;
+}
+
+.body {
+	box-sizing: border-box;
+	padding: 1rem;
+	border-radius: .5rem;
+	margin: 0 0 .5rem 0;
+	background: var(--background);
 }
 
 .title {
 	margin: 0 0 .5rem 0;
 }
 
-.body {
-	flex-grow: 1;
-}
-
 .post {
 	margin-bottom: .5rem;
 }
 
-.writer {
-	width: 40rem;
-	background: var(--background);
-	padding: .5rem;
-	border-radius: .5rem;
-	margin-bottom: .5rem;
-
-	.input {
-		width: 100%;
-		margin-bottom: .25rem;
-	}
-
-	.actions {
-		display: flex;
-		justify-content: flex-end;
-	}
-}
-
 .sidebar {
 	background: var(--background);
 	width: 20rem;

pages/shelves/create.page.route.js

@@ -0,0 +1 @@
+export default '/shelf/create';

pages/shelves/create.page.vue

@@ -126,6 +126,7 @@
 import { ref } from 'vue';
 import Checkbox from '../../components/form/checkbox.vue';
 import { post } from '../../assets/js/api';
+import { navigate } from '../../assets/js/navigate';
 
 const slug = ref();
 const title = ref();
@@ -137,7 +138,7 @@ const postAccess = ref('registered');
 const isNsfw = ref(false);
 
 async function create() {
-	await post('/shelves', {
+	const shelf = await post('/shelves', {
 		slug: slug.value,
 		title: title.value,
 		description: description.value,
@@ -147,6 +148,9 @@ async function create() {
 			isNsfw: isNsfw.value,
 		},
 	});
+
+	console.log(shelf);
+	navigate(`/s/${shelf.slug}`);
 }
 </script>
 

pages/shelves/shelf.page.route.js

@@ -0,0 +1 @@
+export default '/s/@id';

pages/shelves/shelf.page.server.js

@@ -1,10 +1,10 @@
 import { RenderErrorPage } from 'vite-plugin-ssr/RenderErrorPage';
-import { fetchShelf } from '../../../src/shelves';
-import { fetchShelfPosts } from '../../../src/posts';
+import { fetchShelf } from '../../src/shelves';
+import { fetchShelfPosts } from '../../src/posts';
 
 async function getPageData(pageContext) {
 	const shelf = await fetchShelf(pageContext.routeParams.id);
-	const posts = await fetchShelfPosts(pageContext.routeParams.id, { limit: 50 });
+	const posts = await fetchShelfPosts(pageContext.routeParams.id, { user: pageContext.session.user, limit: 50 });
 
 	if (!shelf) {
 		throw RenderErrorPage({

pages/shelves/shelf.page.vue

@@ -6,7 +6,12 @@
 			<li
 				v-for="post in posts"
 				:key="post.id"
-			><Post :post="post" /></li>
+			>
+				<Post
+					:post="post"
+					:shelf="shelf"
+				/>
+			</li>
 		</ul>
 
 		<form
@@ -46,10 +51,11 @@
 
 <script setup>
 import { ref } from 'vue';
-import Post from '../../../components/posts/post.vue';
+import Post from '../../components/posts/post.vue';
 
-import * as api from '../../../assets/js/api';
-import { usePageContext } from '../../../renderer/usePageContext';
+import * as api from '../../assets/js/api';
+import { navigate } from '../../assets/js/navigate';
+import { usePageContext } from '../../renderer/usePageContext';
 
 const { pageData, routeParams } = usePageContext();
 
@@ -63,11 +69,13 @@ const link = ref();
 const body = ref();
 
 async function submitPost() {
-	await api.post(`/api/shelves/${routeParams.id}/posts`, {
+	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>