From dc6341a4b16abe73da126138234a89a3ca6a6dde Mon Sep 17 00:00:00 2001
From: Robrecht Cannoodt <rcannood@gmail.com>
Date: Tue, 22 Oct 2024 10:12:50 +0200
Subject: [PATCH] add components with server side resource

---
 src/components/SSRLabel.tsx | 21 +++++++++++++++++++++
 src/routes/about.tsx        | 20 +++-----------------
 src/routes/index.tsx        | 20 +++-----------------
 3 files changed, 27 insertions(+), 34 deletions(-)
 create mode 100644 src/components/SSRLabel.tsx

diff --git a/src/components/SSRLabel.tsx b/src/components/SSRLabel.tsx
new file mode 100644
index 0000000..3d7ba66
--- /dev/null
+++ b/src/components/SSRLabel.tsx
@@ -0,0 +1,21 @@
+import { createResource, createSignal, Match, Switch } from "solid-js";
+
+function fetchServerResource(): Promise<string> {
+  "use server";
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve("Hello from the server!");
+    }, 1000);
+  });
+}
+
+export default function SSRLabel() {
+  const [data] = createResource<string>(fetchServerResource);
+  return (
+    <Switch>
+      <Match when={data.loading}>Loading...</Match>
+      <Match when={data.error}>Error: {data.error}</Match>
+      <Match when={data()}>{data()}</Match>
+    </Switch>
+  );
+}
diff --git a/src/routes/about.tsx b/src/routes/about.tsx
index 1321ac3..4e365f7 100644
--- a/src/routes/about.tsx
+++ b/src/routes/about.tsx
@@ -1,24 +1,10 @@
-import { A } from "@solidjs/router";
-import Counter from "~/components/Counter";
+import SSRLabel from "~/components/SSRLabel";
 
 export default function About() {
   return (
     <main class="text-center mx-auto text-gray-700 p-4">
-      <h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">About Page</h1>
-      <Counter />
-      <p class="mt-8">
-        Visit{" "}
-        <a href="https://solidjs.com" target="_blank" class="text-sky-600 hover:underline">
-          solidjs.com
-        </a>{" "}
-        to learn how to build Solid apps.
-      </p>
-      <p class="my-4">
-        <A href="/" class="text-sky-600 hover:underline">
-          Home
-        </A>
-        {" - "}
-        <span>About Page</span>
+      <p class="text-2xl font-bold text-sky-700">
+        <SSRLabel />
       </p>
     </main>
   );
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index a5d2efe..6deeb09 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,24 +1,10 @@
-import { A } from "@solidjs/router";
-import Counter from "~/components/Counter";
+import SSRLabel from "~/components/SSRLabel";
 
 export default function Home() {
   return (
     <main class="text-center mx-auto text-gray-700 p-4">
-      <h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">Hello world!</h1>
-      <Counter />
-      <p class="mt-8">
-        Visit{" "}
-        <a href="https://solidjs.com" target="_blank" class="text-sky-600 hover:underline">
-          solidjs.com
-        </a>{" "}
-        to learn how to build Solid apps.
-      </p>
-      <p class="my-4">
-        <span>Home</span>
-        {" - "}
-        <A href="/about" class="text-sky-600 hover:underline">
-          About Page
-        </A>{" "}
+      <p class="text-2xl font-bold text-sky-700">
+        <SSRLabel />
       </p>
     </main>
   );