From e3fbd12366d9a01c13ddd2f3d671862900724ad1 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Fri, 9 Aug 2024 23:07:26 +0100
Subject: [PATCH] Using SSR.

---
 frontend/src/routes/articles/+page.js     | 31 +++++++++++++++++++++++
 frontend/src/routes/articles/+page.svelte | 26 +++++--------------
 2 files changed, 37 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/routes/articles/+page.js

diff --git a/frontend/src/routes/articles/+page.js b/frontend/src/routes/articles/+page.js
new file mode 100644
index 0000000..9ec8383
--- /dev/null
+++ b/frontend/src/routes/articles/+page.js
@@ -0,0 +1,31 @@
+// Server Side Rendering
+
+export async function load(context) {
+  async function fetchData(data) {
+    try {
+      const resTemp = await context.fetch(`http://0.0.0.0:8000/${data}`);
+      if (resTemp.ok == false) {
+        return {
+          status: resTemp.status,
+        }
+      }
+      return {
+        status: 0, data: await resTemp.json(),
+      }
+    } catch (error) {
+      return {
+        status: 500,
+      }
+    }
+  }
+
+  const res = (await fetchData(`get_simple_posts/4`));
+  if (res.status == 500) return {
+    status: res.status
+  }
+
+  return {
+    status: 0,
+    content: res.data,
+  };
+}
\ No newline at end of file
diff --git a/frontend/src/routes/articles/+page.svelte b/frontend/src/routes/articles/+page.svelte
index c9887ef..f6ee807 100644
--- a/frontend/src/routes/articles/+page.svelte
+++ b/frontend/src/routes/articles/+page.svelte
@@ -1,34 +1,20 @@
 <script>
 	import '$lib/css/base.css';
 	import '$lib/css/article.css';
-
-	import { onMount } from 'svelte';
-	import { load } from '$lib/js/apicall.js';
-
 	import CarouselVertical from '$lib/components/carousel-vertical.svelte';
 
-	$: isLoaded = false;
-	$: hasLoadFailed = false;
-	let post_min; // slug, author, title, date
-
-	onMount(async () => {
-		const loaded_post = await load("get_simple_posts/4");
-		if (loaded_post.status == 200) {
-			post_min = loaded_post.data;
-			isLoaded = true;
-		} else hasLoadFailed = true;
-	});
+	export let data;
+	// Database
+	const article = data.status == 0 ? data : undefined;
 </script>
 
 <div>
 	<h1>Etheryo Blog</h1>
-	{#if isLoaded}
-		<CarouselVertical posts={post_min} />
+	{#if data != undefined}
+		<CarouselVertical posts={article.content} />
 		<!-- debug purpose -->
 		<div style="height: 100rem;"></div>
-	{:else if hasLoadFailed}
-		<p>Loading failed :c</p>
 	{:else}
-		<p>Loading...</p>
+		<p>Loading failed :c</p>
 	{/if}
 </div>