From 8d71ed1ee4473063ab228471a946cacc19a1b8f4 Mon Sep 17 00:00:00 2001
From: Alexandre Mouton-Brady <alexandre.mouton-brady@airweb.fr>
Date: Tue, 11 Jan 2022 23:01:56 +0100
Subject: [PATCH] :sparkles: Add data fetching on the about page

---
 ts-router/src/pages/about.data.ts | 19 ++++++++++++++++---
 ts-router/src/pages/about.tsx     | 19 ++++++++++++-------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/ts-router/src/pages/about.data.ts b/ts-router/src/pages/about.data.ts
index 8b3fb23..bfa9f6d 100644
--- a/ts-router/src/pages/about.data.ts
+++ b/ts-router/src/pages/about.data.ts
@@ -1,9 +1,22 @@
 import type { RouteDataFunc } from 'solid-app-router';
+import { createResource } from 'solid-js';
+
+function wait<T>(ms: number, data: T): Promise<T> {
+  return new Promise((resolve) => setTimeout(resolve, ms, data));
+}
+
+function random(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function fetchName(): Promise<string> {
+  return wait(random(500, 1000), 'Solid');
+}
 
 const AboutData: RouteDataFunc = () => {
-  return {
-    name: 'about',
-  };
+  const [data] = createResource(fetchName);
+
+  return data;
 };
 
 export default AboutData;
diff --git a/ts-router/src/pages/about.tsx b/ts-router/src/pages/about.tsx
index ebd8dac..ef8debc 100644
--- a/ts-router/src/pages/about.tsx
+++ b/ts-router/src/pages/about.tsx
@@ -1,8 +1,12 @@
-import { Suspense } from 'solid-js';
+import { Component, createEffect, Suspense } from 'solid-js';
 import { useData } from 'solid-app-router';
 
 export default function About() {
-  const data = useData();
+  const name = useData<() => string>();
+
+  createEffect(() => {
+    console.log(name());
+  });
 
   return (
     <section class="bg-pink-100 text-gray-700 p-8">
@@ -10,11 +14,12 @@ export default function About() {
 
       <p class="mt-4">A page all about this website.</p>
 
-      <Suspense>
-        <pre class="mt-4">
-          <code>{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      </Suspense>
+      <p>
+        <span>We love</span>
+        <Suspense fallback={<span>...</span>}>
+          <span>&nbsp;{name()}</span>
+        </Suspense>
+      </p>
     </section>
   );
 }