fix comment submission/deleting, including progressive enhancement

examples/realworld.svelte.dev/src/common/actions.js

@@ -0,0 +1,28 @@
+const noop = () => {};
+
+export function ajax(node, { onsubmit = noop, onresponse = noop } = {}) {
+	const handler = async (event) => {
+		event.preventDefault();
+		const body = node.method === 'post' || node.method === 'put' ? new FormData(node) : null;
+
+		onsubmit(body);
+
+		const response = await fetch(node.action, {
+			method: node.method,
+			body,
+			headers: {
+				accept: 'application/json'
+			}
+		});
+
+		onresponse(response);
+	};
+
+	node.addEventListener('submit', handler);
+
+	return {
+		destroy() {
+			node.removeEventListener('submit', handler);
+		}
+	};
+}

examples/realworld.svelte.dev/src/common/constants.js

@@ -1 +1,2 @@
 export const page_size = 10;
+export const placeholder = 'https://static.productionready.io/images/smiley-cyrus.jpg';

examples/realworld.svelte.dev/src/routes/article/[slug]/_Comment.svelte

@@ -0,0 +1,60 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+	import { ajax } from '$common/actions.js';
+
+	export let comment;
+	export let slug;
+	export let user;
+
+	const dispatch = createEventDispatcher();
+	const onresponse = (res) => {
+		if (res.ok) {
+			// check the comment was deleted (e.g. we didn't
+			// double-click and submit twice)
+			dispatch('deleted');
+		}
+	};
+</script>
+
+<div class="card">
+	<div class="card-block">
+		<p class="card-text">{comment.body}</p>
+	</div>
+
+	<div class="card-footer">
+		<a href="/profile/@{comment.author.username}" class="comment-author">
+			<img src={comment.author.image} class="comment-author-img" alt={comment.author.username} />
+		</a>
+
+		<a
+			href="/profile/@{comment.author.username}"
+			class="comment-author"
+		>{comment.author.username}</a>
+
+		<span class="date-posted"> {new Date(comment.createdAt).toDateString()} </span>
+
+		{#if user && comment.author.username === user.username}
+			<form
+				action="/article/{slug}/comments/{comment.id}.json?_method=delete"
+				method="post"
+				class="mod-options"
+				use:ajax={{ onresponse }}
+			>
+				<button class="ion-trash-a" />
+			</form>
+		{/if}
+	</div>
+</div>
+
+<style>
+	button {
+		background: none;
+		border: none;
+		padding: 0;
+		margin: 0;
+		font-size: inherit;
+		margin-left: 5px;
+		opacity: 0.6;
+		cursor: pointer;
+	}
+</style>

examples/realworld.svelte.dev/src/routes/article/[slug]/_CommentContainer.svelte

@@ -0,0 +1,36 @@
+<script>
+	import CommentInput from './_CommentInput.svelte';
+	import Comment from './_Comment.svelte';
+
+	export let comments;
+	export let slug;
+	export let user;
+</script>
+
+<div class="col-xs-12 col-md-8 offset-md-2">
+	{#if user}
+		<div>
+			<CommentInput
+				{slug}
+				{user}
+				on:commented={({ detail }) => (comments = [detail.comment, ...comments])}
+			/>
+		</div>
+	{:else}
+		<p>
+			<a href="/login">Sign in</a>
+			or
+			<a href="/register">sign up</a>
+			to add comments on this article.
+		</p>
+	{/if}
+
+	{#each comments as comment, i (comment.id)}
+		<Comment
+			{comment}
+			{slug}
+			{user}
+			on:deleted={() => (comments = [...comments.slice(0, i), ...comments.slice(i + 1)])}
+		/>
+	{/each}
+</div>

examples/realworld.svelte.dev/src/routes/article/[slug]/_CommentInput.svelte

@@ -0,0 +1,52 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+	import { placeholder } from '$common/constants.js';
+	import { ajax } from '$common/actions.js';
+
+	export let slug;
+	export let user;
+
+	const dispatch = createEventDispatcher();
+
+	let body = '';
+	let submitting = false;
+
+	const onsubmit = () => {
+		submitting = true;
+	};
+
+	const onresponse = async (res) => {
+		if (res.ok) {
+			const comment = await res.json();
+			dispatch('commented', { comment });
+			body = '';
+		} else {
+			// TODO error handling
+		}
+
+		submitting = false;
+	};
+</script>
+
+<form
+	action="/article/{slug}/comments.json"
+	method="post"
+	class="card comment-form"
+	use:ajax={{ onsubmit, onresponse }}
+>
+	<div class="card-block">
+		<textarea
+			disabled={submitting}
+			class="form-control"
+			name="comment"
+			placeholder="Write a comment..."
+			bind:value={body}
+			rows="3"
+		/>
+	</div>
+
+	<div class="card-footer">
+		<img src={user.image || placeholder} class="comment-author-img" alt={user.username} />
+		<button disabled={submitting} class="btn btn-sm btn-primary" type="submit">Post Comment</button>
+	</div>
+</form>

examples/realworld.svelte.dev/src/routes/article/[slug]/comments/[id].json.js

@@ -0,0 +1,14 @@
+import * as api from '$common/api.js';
+
+export async function del(request, context) {
+	if (!context.user) {
+		return { status: 401 };
+	}
+
+	const { slug, id } = request.params;
+	const { status, error } = await api.del(`articles/${slug}/comments/${id}`, context.user.token);
+
+	if (error) {
+		return { status, body: { error } };
+	}
+}

examples/realworld.svelte.dev/src/routes/article/[slug]/comments/index.json.js

@@ -0,0 +1,46 @@
+import * as api from '$common/api.js';
+
+export async function get(request, context) {
+	const { slug } = request.params;
+	const { comments } = await api.get(
+		`articles/${slug}/comments`,
+		context.user && context.user.token
+	);
+
+	return {
+		body: comments
+	};
+}
+
+export async function post(request, context) {
+	if (!context.user) {
+		return { status: 401 };
+	}
+
+	const { slug } = request.params;
+	const body = request.body.get('comment');
+
+	const { comment } = await api.post(
+		`articles/${slug}/comments`,
+		{ comment: { body } },
+		context.user.token
+	);
+
+	// for AJAX requests, return the newly created comment
+	if (request.headers.accept === 'application/json') {
+		return {
+			status: 201, // created
+			body: comment
+		};
+	}
+
+	// for traditional (no-JS) form submissions, redirect
+	// back to the article page
+	console.log(`redirecting to /article/${slug}`);
+	return {
+		status: 303, // see other
+		headers: {
+			location: `/article/${slug}`
+		}
+	};
+}

examples/realworld.svelte.dev/src/routes/article/[slug]/index.json.js

@@ -0,0 +1,10 @@
+import * as api from '$common/api.js';
+
+export async function get(request, context) {
+	const { slug } = request.params;
+	const { article } = await api.get(`articles/${slug}`, context.user && context.user.token);
+
+	return {
+		body: article
+	};
+}

examples/realworld.svelte.dev/src/routes/article/[slug]/index.svelte

@@ -1,35 +1,29 @@
 <script context="module">
-	import * as api from '$common/api.js';
-
-	export async function load({ page }) {
+	export async function load({ page, fetch }) {
 		const { slug } = page.params;
-		const { article } = await api.get(`articles/${slug}`, null);
+		const [article, comments] = await Promise.all([
+			fetch(`/article/${slug}.json`).then((r) => r.json()),
+			fetch(`/article/${slug}/comments.json`).then((r) => r.json())
+		]);
 
 		return {
-			props: { article, slug }
+			props: { article, comments, slug }
 		};
 	}
 </script>
 
 <script>
-	import { onMount } from 'svelte';
 	import { session } from '$app/stores';
 	import marked from 'marked';
 
 	import ArticleMeta from './_ArticleMeta.svelte';
 	import CommentContainer from './_CommentContainer.svelte';
 
 	export let article;
+	export let comments;
 	export let slug;
 
-	let commentErrors, comments = []; // we'll lazy-load these in onMount
 	$: markup = marked(article.body);
-
-	onMount(() => {
-		api.get(`articles/${slug}/comments`).then((res) => {
-			comments = res.comments;
-		});
-	});
 </script>
 
 <svelte:head>
@@ -40,31 +34,31 @@
 	<div class="banner">
 		<div class="container">
 			<h1>{article.title}</h1>
-			<ArticleMeta {article} user={$session.user}/>
+			<ArticleMeta {article} user={$session.user} />
 		</div>
 	</div>
 
 	<div class="container page">
 		<div class="row article-content">
 			<div class="col-xs-12">
-				<div>{@html markup}</div>
+				<div>
+					{@html markup}
+				</div>
 
 				<ul class="tag-list">
 					{#each article.tagList as tag}
-						<li class="tag-default tag-pill tag-outline">
-							{tag}
-						</li>
+						<li class="tag-default tag-pill tag-outline">{tag}</li>
 					{/each}
 				</ul>
 			</div>
 		</div>
 
 		<hr />
 
-		<div class="article-actions"></div>
+		<div class="article-actions" />
 
 		<div class="row">
-			<CommentContainer {slug} {comments} user={$session.user} errors={commentErrors}/>
+			<CommentContainer {slug} {comments} user={$session.user} errors={[]} />
 		</div>
 	</div>
-</div>
+</div>