Working version of calling categories from stores.ts

ddxv · Oct 20, 2023 · 0c3fe97 · 0c3fe97
1 parent d4b4ba7
commit 0c3fe97
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 42 deletions.
diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
@@ -1,5 +1,6 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
+
 declare global {
 	namespace App {
 		// interface Error {}
@@ -9,4 +10,4 @@ declare global {
 	}
 }
 
-export {};
+export { };
diff --git a/frontend/src/routes/+layout.server.ts b/frontend/src/routes/+layout.server.ts
@@ -1,37 +1,3 @@
-import type { LayoutServerLoad } from './$types';
-
-interface LoadResponse {
-    mycats: any;
-    status?: number;
-    error?: string;
-}
-
-/** @type {import('./$types').PageServerLoad} */
-export async function load(): Promise<LoadResponse> {
-    console.log('load categories started');
-    try {
-
-        const res = await fetch(`http://localhost:8000/api/categories`);
-
-        if (!res.ok) {
-            throw new Error(`Failed to fetch categories with status ${res.status}`);
-        }
-
-        const categories = await res.json();
-        console.log(`loaded categories with len: ${Object.keys(categories).length}`);
-        return { mycats: categories };
-
-    } catch (error) {
-        console.error('Failed to load data:', error);
-        return {
-            mycats: null,
-            status: 500,
-            error: 'Failed to load categories'
-        };
-    }
-}
-
-
 
 export const ssr = true;
 export const csr = true;
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -1,12 +1,18 @@
 <script>
+	import { myList } from '../stores.ts';
 	import '../app.postcss';
 	import { AppShell, AppBar, TabGroup, TabAnchor } from '@skeletonlabs/skeleton';
 	import { page } from '$app/stores';
 	import SearchIcon from '../../static/SearchIcon.svelte';
 	import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
 	export let valueSingle = 'books';
-	/** @type {import('./$types').PageData} */
-	export let data;
+	//export let data;
+	/** @type {import('../stores.ts').Categories} */
+	let myVals;
+
+	myList.subscribe((values) => {
+		myVals = values;
+	});
 </script>
 
 <!-- App Shell -->
@@ -77,11 +83,13 @@
 					<hr class="!border-t-2" />
 					<ListBoxItem bind:group={valueSingle} name="medium" value="books">BOOKS</ListBoxItem>
 					<ListBoxItem bind:group={valueSingle} name="medium" value="tv">TV</ListBoxItem>
-					{#if data}
-						{#each Object.entries(data.mycats.categories) as [_prop, values]}
-							<ListBoxItem bind:group={valueSingle} name="medium" value="${values.id}"
-								>{values.name}</ListBoxItem
-							>
+					{#if myVals}
+						{#each Object.entries(myVals.mycats.categories) as [_prop, values]}
+							{#if values.id}
+								<ListBoxItem bind:group={valueSingle} name="medium" value="${values.id}"
+									>{values.name}</ListBoxItem
+								>
+							{/if}
 						{/each}
 					{/if}
 				</ListBox>

diff --git a/frontend/src/stores.ts b/frontend/src/stores.ts
@@ -0,0 +1,54 @@
+import { writable } from 'svelte/store';
+
+console.log(`stores start`);
+
+export interface Categories {
+    mycats: any;
+    status?: number;
+    error?: string;
+}
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load(): Promise<Categories> {
+    console.log(`stores load categories start`);
+    try {
+
+        const res = await fetch(`http://localhost:8000/api/categories`);
+
+        if (!res.ok) {
+            throw new Error(`Failed to fetch categories with status ${res.status}`);
+        }
+
+        const categories = await res.json();
+
+        console.log(`stores loaded categories with len: ${Object.keys(categories).length}`);
+        return { mycats: categories };
+
+    } catch (error) {
+        console.error('Failed to load data:', error);
+        return {
+            mycats: null,
+            status: 500,
+            error: 'Failed to load categories'
+        };
+    }
+}
+
+const defaultCategories: Categories = {
+    mycats: [],
+    status: 200,
+    error: ''
+};
+
+
+// export const myList = writable<Categories | null>(null);
+export const myList = writable<Categories>(defaultCategories);
+
+console.log("stores myList try set")
+
+load().then(result => {
+    myList.set(result);
+    console.log("stores myList set!")
+});
+
+console.log("stores done")