From efa4ff1a44b9f415e00f44bb43a6fc697e8d42dc Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sun, 14 Apr 2019 23:59:35 -0400
Subject: [PATCH] fix hacker news example

---
 .../01-hacker-news/App.svelte                 |  8 +++-----
 .../01-hacker-news/Comment.svelte             |  4 ++++
 .../01-hacker-news/Item.svelte                | 10 +++-------
 .../01-hacker-news/List.svelte                | 19 ++++++++-----------
 4 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/App.svelte b/site/content/examples/20-miscellaneous/01-hacker-news/App.svelte
index 19d1f29bc4..2213914430 100644
--- a/site/content/examples/20-miscellaneous/01-hacker-news/App.svelte
+++ b/site/content/examples/20-miscellaneous/01-hacker-news/App.svelte
@@ -6,10 +6,6 @@
 	let item;
 	let page;
 
-	onMount(() => {
-		hashchange();
-	});
-
 	async function hashchange() {
 		// the poor man's router!
 		const path = window.location.hash.slice(1);
@@ -26,6 +22,8 @@
 			window.location.hash = '/top/1';
 		}
 	}
+
+	onMount(hashchange);
 </script>
 
 <style>
@@ -52,7 +50,7 @@
 
 <main>
 	{#if item}
-		<Item {item}/>
+		<Item {item} returnTo="#/top/{page}"/>
 	{:else if page}
 		<List {page}/>
 	{/if}
diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/Comment.svelte b/site/content/examples/20-miscellaneous/01-hacker-news/Comment.svelte
index 241499dcb3..7916f4befb 100644
--- a/site/content/examples/20-miscellaneous/01-hacker-news/Comment.svelte
+++ b/site/content/examples/20-miscellaneous/01-hacker-news/Comment.svelte
@@ -1,3 +1,7 @@
+<script>
+	export let comment;
+</script>
+
 <style>
 	article {
 		border-top: 1px solid #eee;
diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/Item.svelte b/site/content/examples/20-miscellaneous/01-hacker-news/Item.svelte
index 9ce2f739f8..e9cd617e96 100644
--- a/site/content/examples/20-miscellaneous/01-hacker-news/Item.svelte
+++ b/site/content/examples/20-miscellaneous/01-hacker-news/Item.svelte
@@ -1,12 +1,8 @@
 <script>
-	import Comment from "./Comment.html";
+	import Comment from "./Comment.svelte";
 
 	export let item;
-
-	function back(event) {
-		event.preventDefault();
-		window.history.back();
-	}
+	export let returnTo;
 </script>
 
 <style>
@@ -25,7 +21,7 @@
 	}
 </style>
 
-<a href="#/top/1" on:click={back}>&laquo; back</a>
+<a href={returnTo}>&laquo; back</a>
 
 <article>
 	<a href="{item.url}">
diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/List.svelte b/site/content/examples/20-miscellaneous/01-hacker-news/List.svelte
index 361db9905d..a20d6c5504 100644
--- a/site/content/examples/20-miscellaneous/01-hacker-news/List.svelte
+++ b/site/content/examples/20-miscellaneous/01-hacker-news/List.svelte
@@ -1,24 +1,21 @@
 <script>
 	import { beforeUpdate } from "svelte";
-	import Summary from "./Summary.html";
+	import Summary from "./Summary.svelte";
 
 	const PAGE_SIZE = 20;
 
-	export let items;
-	export let offset;
 	export let page;
 
-	let previous_page;
+	let items;
+	let offset;
 
-	beforeUpdate(async () => {
-		if (page !== previous_page) {
-			previous_page = page;
-
-			items = await fetch(`https://node-hnapi.herokuapp.com/news?page=${page}`).then(r => r.json())
+	$: fetch(`https://node-hnapi.herokuapp.com/news?page=${page}`)
+		.then(r => r.json())
+		.then(data => {
+			items = data;
 			offset = PAGE_SIZE * (page - 1);
 			window.scrollTo(0, 0);
-		}
-	});
+		});
 </script>
 
 <style>