refactor: change writeable stores to reable

Closes #44

src/lib/sanityClient.js

@@ -1,14 +0,0 @@
-import SanityClientConstructor from '@sanity/client'
-import ImageUrlBuilder from '@sanity/image-url'
-import {api} from '../../backend/sanity.json'
-const {projectId, dataset} = api
-export const client = SanityClientConstructor({
-    projectId,
-    dataset,
-    apiVersion: '2022-07-07',
-    useCdn: true
-})
-const builder = ImageUrlBuilder(client)
-export function urlFor(source) {
-    return builder.image(source)
-}

src/lib/sanityClient.ts

@@ -0,0 +1,16 @@
+import SanityClientConstructor from '@sanity/client';
+import ImageUrlBuilder from '@sanity/image-url';
+
+import * as sanityConfig from '../../backend/sanity.json';
+
+const { projectId, dataset } = sanityConfig.api;
+export const client = SanityClientConstructor({
+	projectId,
+	dataset,
+	apiVersion: '2022-07-07',
+	useCdn: true
+});
+const builder = ImageUrlBuilder(client);
+export function urlFor(source) {
+	return builder.image(source);
+}

src/lib/stores.ts

@@ -1,10 +1,24 @@
 import type { Tag, Product, Emotion } from '$types';
-import { writable, type Writable } from 'svelte/store';
+import { writable, type Writable, readable, type Readable } from 'svelte/store';
+import { client } from '$lib/sanityClient';
 
-export const products: Writable<Product[]|[]> = writable([]);
-export const emotions: Writable<Emotion[]|[]> = writable([]);
-export const tags: Writable<Tag[]|[]> = writable([]);
+async function fetchProductData(): Promise<Product[]> {
+	const products: Product[] = await client.fetch('*[_type == "product"]');
+	return products;
+}
+async function fetchEmotionData(): Promise<Emotion[]> {
+	const emotions: Emotion[] = await client.fetch('*[_type == "emotion"]');
+	return emotions;
+}
+async function fetchTagData(): Promise<Tag[]> {
+	const tags: Tag[] = await client.fetch('*[_type == "tag"]');
+	return tags;
+}
+
+export const products: Readable<Product[] | []> = readable(await fetchProductData());
+export const emotions: Readable<Emotion[] | []> = readable(await fetchEmotionData());
+export const tags: Readable<Tag[] | []> = readable(await fetchTagData());
 
 export const productsView: Writable<Product[]> = writable([]);
-export const currentProduct: Writable<Product|Record<string, never>> = writable({});
+export const currentProduct: Writable<Product | Record<string, never>> = writable({});
 export const filters = writable({ selectedCat: 0, selectedRating: 0 });

src/routes/index.svelte

@@ -5,12 +5,7 @@
 	import { products, productsView, tags, currentProduct, emotions } from '$lib/stores';
 	import { findProdFromParam, getProdParam, resetParams } from '$helpers';
 
-	export let data;
-
-	products.set(data.products);
-	productsView.set(data.products);
-	tags.set(data.tags);
-	emotions.set(data.emotions);
+	productsView.set($products);
 
 	const load = () => {
 		currentProduct.set(findProdFromParam(getProdParam(), $products));

src/routes/index.ts

@@ -1,33 +1,34 @@
-import { client } from '$lib/sanityClient';
-import type { Product, Tag, Emotion } from '$types';
+// import { client } from '$lib/sanityClient';
+// import type { Product, Tag, Emotion } from '$types';
 
-type dataType = {
-	products: Product[],
-	tags: Tag[],
-	emotions: Emotion[]
-}
+export {};
+// type dataType = {
+// 	products: Product[],
+// 	tags: Tag[],
+// 	emotions: Emotion[]
+// }
 
-export async function GET() {
-	const products = await client.fetch('*[_type == "product"]');
-	const tags = await client.fetch('*[_type == "tag"]');
-	const emotions = await client.fetch('*[_type == "emotion"]');
+// export async function GET() {
+// 	const products = await client.fetch('*[_type == "product"]');
+// 	const tags = await client.fetch('*[_type == "tag"]');
+// 	const emotions = await client.fetch('*[_type == "emotion"]');
 
-	const data:dataType = {
-		products,
-		tags,
-		emotions
-	};
+// 	const data:dataType = {
+// 		products,
+// 		tags,
+// 		emotions
+// 	};
 
-	if (data) {
-		return {
-			status: 200,
-			body: {
-				data: data
-			}
-		};
-	}
+// 	if (data) {
+// 		return {
+// 			status: 200,
+// 			body: {
+// 				data: data
+// 			}
+// 		};
+// 	}
 
-	return {
-		status: 404
-	};
-}
+// 	return {
+// 		status: 404
+// 	};
+// }

tsconfig.json

@@ -2,10 +2,12 @@
 	"extends": "./.svelte-kit/tsconfig.json",
 
 	"compilerOptions": {
+		"allowSyntheticDefaultImports": true,
+		"resolveJsonModule": true,
 		"strict": false,
 		"paths": {
-			"$lib":["src/lib"],
-			"$lib/*":["src/lib/*"],
+			"$lib": ["src/lib"],
+			"$lib/*": ["src/lib/*"],
 			"$helpers/*": ["src/helpers/*"],
 			"$types": ["src/types"]
 		}