more hackernews tweaks

Author: brenelz

apps/fixtures/hackernews/src/routes/stories/[id].tsx

@@ -1,5 +1,5 @@
-import { createAsync, type RouteDefinition, type RouteSectionProps } from "@solidjs/router";
-import { For, Show } from "solid-js";
+import { type RouteDefinition, type RouteSectionProps } from "@solidjs/router";
+import { For, Show, createMemo } from "solid-js";
 import Comment from "~/components/comment";
 import { getStory } from "~/lib/api";
 
@@ -10,31 +10,29 @@ export const route = {
 } satisfies RouteDefinition;
 
 export default function Story(props: RouteSectionProps) {
-  const story = createAsync(() => getStory(props.params.id));
+  const story = createMemo(() => getStory(props.params.id));
   return (
-    <Show when={story()}>
-      <div class="item-view">
-        <div class="item-view-header">
-          <a href={story()!.url} target="_blank">
-            <h1>{story()!.title}</h1>
-          </a>
-          <Show when={story()!.domain}>
-            <span class="host">({story()!.domain})</span>
-          </Show>
-          <p class="meta">
-            {story()!.points} points | by <a href={`/users/${story()!.user}`}>{story()!.user}</a>{" "}
-            {story()!.time_ago} ago
-          </p>
-        </div>
-        <div class="item-view-comments">
-          <p class="item-view-comments-header">
-            {story()!.comments_count ? story()!.comments_count + " comments" : "No comments yet."}
-          </p>
-          <ul class="comment-children">
-            <For each={story()!.comments}>{comment => <Comment comment={comment()} />}</For>
-          </ul>
-        </div>
+    <div class="item-view">
+      <div class="item-view-header">
+        <a href={story().url} target="_blank">
+          <h1>{story().title}</h1>
+        </a>
+        <Show when={story().domain}>
+          <span class="host">({story().domain})</span>
+        </Show>
+        <p class="meta">
+          {story().points} points | by <a href={`/users/${story().user}`}>{story().user}</a>{" "}
+          {story().time_ago} ago
+        </p>
       </div>
-    </Show>
+      <div class="item-view-comments">
+        <p class="item-view-comments-header">
+          {story().comments_count ? story().comments_count + " comments" : "No comments yet."}
+        </p>
+        <ul class="comment-children">
+          <For each={story().comments}>{comment => <Comment comment={comment()} />}</For>
+        </ul>
+      </div>
+    </div>
   );
 }

apps/fixtures/hackernews/src/routes/users/[id].tsx

@@ -1,5 +1,5 @@
-import { createAsync, type RouteDefinition, type RouteSectionProps } from "@solidjs/router";
-import { Show } from "solid-js";
+import { type RouteDefinition, type RouteSectionProps } from "@solidjs/router";
+import { Show, createMemo, Loading } from "solid-js";
 import { getUser } from "~/lib/api";
 
 export const route = {
@@ -9,29 +9,27 @@ export const route = {
 } satisfies RouteDefinition;
 
 export default function User(props: RouteSectionProps) {
-  const user = createAsync(() => getUser(props.params.id));
+  const user = createMemo(() => getUser(props.params.id));
   return (
-    <div class="user-view">
-      <Show when={user()}>
-        <Show when={!user()!.error} fallback={<h1>User not found.</h1>}>
-          <h1>User : {user()!.id}</h1>
-          <ul class="meta">
-            <li>
-              <span class="label">Created:</span> {user()!.created}
-            </li>
-            <li>
-              <span class="label">Karma:</span> {user()!.karma}
-            </li>
-            <Show when={user()!.about}>
-              <li innerHTML={user()!.about} class="about" />{" "}
-            </Show>
-          </ul>
-          <p class="links">
-            <a href={`https://news.ycombinator.com/submitted?id=${user()!.id}`}>submissions</a> |{" "}
-            <a href={`https://news.ycombinator.com/threads?id=${user()!.id}`}>comments</a>
-          </p>
-        </Show>
-      </Show>
-    </div>
+    <Loading fallback={<div>Loading...</div>}>
+      <div class="user-view">
+        <h1>User : {user().id}</h1>
+        <ul class="meta">
+          <li>
+            <span class="label">Created:</span> {user().created}
+          </li>
+          <li>
+            <span class="label">Karma:</span> {user().karma}
+          </li>
+          <Show when={user().about}>
+            <li innerHTML={user().about} class="about" />{" "}
+          </Show>
+        </ul>
+        <p class="links">
+          <a href={`https://news.ycombinator.com/submitted?id=${user().id}`}>submissions</a> |{" "}
+          <a href={`https://news.ycombinator.com/threads?id=${user().id}`}>comments</a>
+        </p>
+      </div>
+    </Loading>
   );
 }