From bd73d8decb482e05fc8e2d81ac369aae84d5865c Mon Sep 17 00:00:00 2001
From: Robin Cussol <me@robincussol.com>
Date: Tue, 7 Apr 2020 14:17:25 +0200
Subject: [PATCH] fix(examples): implement CR's suggestions

Refactored the function into a reactive declaration.

Added similar reactive declaration in `Item.svelte` too.

Note that the conditional is slightly different in each case:
- in `Summary.svelte`, the API response gives correct type 'ask' for 'Ask HN'-type posts,
- but in `Item.svelte`, a different API call resolves these 'Ask HN'-type posts with type 'link'.

In both cases, however, 'item.domain' is undefined.
---
 .../21-miscellaneous/01-hacker-news/Item.svelte      |  6 ++++--
 .../21-miscellaneous/01-hacker-news/Summary.svelte   | 12 +++---------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte
index e9cd617e96..802ab437f7 100644
--- a/site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte
+++ b/site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte
@@ -3,6 +3,8 @@
 
 	export let item;
 	export let returnTo;
+
+	$: url = !item.domain ? `https://news.ycombinator.com/${item.url}` : item.url;
 </script>
 
 <style>
@@ -24,7 +26,7 @@
 <a href={returnTo}>&laquo; back</a>
 
 <article>
-	<a href="{item.url}">
+	<a href="{url}">
 		<h1>{item.title}</h1>
 		<small>{item.domain}</small>
 	</a>
@@ -36,4 +38,4 @@
 	{#each item.comments as comment}
 		<Comment {comment}/>
 	{/each}
-</div>
\ No newline at end of file
+</div>
diff --git a/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
index a5eb820da5..311d01c24e 100644
--- a/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
+++ b/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
@@ -7,14 +7,8 @@
 		const c = item.comments_count;
 		return `${c} ${c === 1 ? 'comment' : 'comments'}`;
 	}
-	
-	function item_url() {
-		const { url, type } = item;
-		if (type === "ask") {
-			return `https://news.ycombinator.com/${url}`;
-		}
-		return url;
-	}
+
+	$: url = item.type === "ask" ? `https://news.ycombinator.com/${item.url}` : item.url;
 </script>
 
 <style>
@@ -41,6 +35,6 @@
 
 <article>
 	<span>{i + offset + 1}</span>
-	<h2><a target="_blank" href={item_url()}>{item.title}</a></h2>
+	<h2><a target="_blank" href={url}>{item.title}</a></h2>
 	<p class="meta"><a href="#/item/{item.id}">{comment_text()}</a> by {item.user} {item.time_ago}</p>
 </article>