Turn variables into stores to keep them while navigating (#27)

* Turn variables into stores to keep them while navigating

* Fix bug with initial token value being null

src/components/GenerationList.svelte

@@ -7,45 +7,47 @@
 	import type { ListLoadResponse } from '../routes/api/get-generation-list/+server'
 	import GenerationalListItemSkeleton from './GenerationalListItemSkeleton.svelte'
 	import { browser } from '$app/environment'
+	import { generations, nextPageToken } from '$lib/stores'
 
 	export let additionalGenerations: Models['TextToCad_type'][] = []
-	let generations: Models['TextToCad_type'][] = []
 
 	const filterFailures = (item: Models['TextToCad_type']) => item.status !== 'failed'
 	let PAGE_SIZE = 2
 	let isFetching = false
-	let nextPageToken: string | null = ''
 
 	async function fetchData() {
+		if ($nextPageToken === null) return
 		isFetching = true
 
 		const response = await fetch(endpoints.localList, {
 			method: 'POST',
 			headers: { 'Content-Type': 'application/json' },
 			credentials: 'include',
-			body: JSON.stringify({ page_token: nextPageToken })
+			body: JSON.stringify({ page_token: $nextPageToken })
 		})
 		const nextBatchPayload = (await response.json()) as ListLoadResponse
-		nextPageToken = nextBatchPayload?.body?.next_page ?? null
+		$nextPageToken = nextBatchPayload?.body?.next_page ?? null
 		isFetching = false
 
 		updateGenerations(nextBatchPayload)
 	}
 
 	function updateGenerations(payload: ListLoadResponse) {
 		const nextBatch = payload?.body?.items ?? []
-		const newGenerations = [...generations, ...nextBatch]
-		generations = Array.from(new Set(newGenerations.map((item) => item.id))).map((id) =>
-			newGenerations.find((item) => item.id === id)
-		) as Models['TextToCad_type'][]
+		generations.update((g) => {
+			const newGenerations = [...g, ...nextBatch]
+			return Array.from(new Set(newGenerations.map((item) => item.id))).map((id) =>
+				newGenerations.find((item) => item.id === id)
+			) as Models['TextToCad_type'][]
+		})
 	}
 
 	onMount(() => {
 		// load first batch onMount
 		fetchData()
 	})
 
-	$: console.log('generations', generations)
+	$: console.log('generations', $generations)
 </script>
 
 <section class="mt-24 mb-48">
@@ -54,14 +56,14 @@
 			>generations</span
 		>
 	</h2>
-	{#if generations.length > 0}
+	{#if $generations.length > 0}
 		<ul class="m-0 p-0">
 			{#each additionalGenerations as item}
 				<li class="first-of-type:mt-0 my-12">
 					<GenerationListItem data={item} />
 				</li>
 			{/each}
-			{#each generations.filter(filterFailures) as item}
+			{#each $generations.filter(filterFailures) as item}
 				<li class="first-of-type:mt-0 my-12">
 					<GenerationListItem data={item} />
 				</li>
@@ -75,12 +77,12 @@
 			</div>
 		{/each}
 	{/if}
-	{#if nextPageToken === null}
+	{#if $nextPageToken === null}
 		<p class="text-center text-chalkboard-70 dark:text-chalkboard-40">You're all caught up! 🎉</p>
 	{/if}
 </section>
 <InfiniteScroll
-	hasMore={nextPageToken !== null}
+	hasMore={$nextPageToken !== null}
 	threshold={200}
 	on:loadMore={fetchData}
 	elementScroll={browser ? document : undefined}

src/lib/stores.ts

@@ -0,0 +1,5 @@
+import type { Models } from '@kittycad/lib'
+import { writable } from 'svelte/store'
+
+export const generations = writable<Models['TextToCad_type'][]>([])
+export const nextPageToken = writable<string | null | undefined>(undefined)