Client-side render dashboard and individual pages

Signed-off-by: Frank Noirot <[email protected]>

src/components/GenerationList.svelte

@@ -6,6 +6,7 @@
 	import { endpoints } from '$lib/endpoints'
 	import GenerationalListItemSkeleton from './GenerationalListItemSkeleton.svelte'
 	import { browser } from '$app/environment'
+	import { page } from '$app/stores'
 	import { generations, nextPageToken } from '$lib/stores'
 	import {
 		childrenObserverAction,
@@ -30,7 +31,10 @@
 		isFetching = true
 
 		const response = await fetch(endpoints.list({ limit: 3, page_token: $nextPageToken }), {
-			credentials: 'include'
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: 'Bearer ' + $page.data.token
+			}
 		})
 
 		if (!response.ok) {

src/routes/+layout.server.ts

@@ -1,6 +1,9 @@
 /** @type {import('./$types').LayoutData} */
-export const load = async ({ locals }) => {
+export const load = async ({ locals, cookies }) => {
+	const token = cookies.get('__Secure-next-auth.session-token')
+
 	return {
-		user: !locals.user || 'error_code' in locals.user ? undefined : locals.user
+		user: !locals.user || 'error_code' in locals.user ? undefined : locals.user,
+		token
 	}
 }

src/routes/dashboard/+page.svelte

@@ -15,9 +15,12 @@
 
 	const submitPrompt = async (prompt: string) => {
 		const OUTPUT_FORMAT: Models['FileExportFormat_type'] = 'gltf'
-		const response = await fetch(endpoints.convert(OUTPUT_FORMAT), {
+		const response = await fetch(endpoints.prompt(OUTPUT_FORMAT), {
 			method: 'POST',
-			credentials: 'include',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: 'Bearer ' + data.token
+			},
 			body: JSON.stringify({ prompt })
 		})
 
@@ -26,8 +29,10 @@
 			return
 		}
 
-		const data = (await response.json()) as Models['TextToCad_type']
-		promptedGenerations = data ? [data, ...promptedGenerations] : promptedGenerations
+		const responseData = (await response.json()) as Models['TextToCad_type']
+		promptedGenerations = responseData
+			? [responseData, ...promptedGenerations]
+			: promptedGenerations
 	}
 
 	const submitForm = async (e: Event) => {

src/routes/view/[modelId]/+page.svelte

@@ -4,32 +4,9 @@
 	import ModelFeedback from 'components/ModelFeedback.svelte'
 	import DownloadButton from 'components/DownloadButton.svelte'
 	import type { Models } from '@kittycad/lib'
-	import { onMount } from 'svelte'
-	import { endpoints } from '$lib/endpoints'
-	import { error } from '@sveltejs/kit'
 
-	export let params: { modelId: string }
 	export let data: Models['TextToCad_type']
 
-	onMount(async () => {
-		const response = await fetch(endpoints.view(params.modelId), {
-			credentials: 'include'
-		})
-
-		if (response.status >= 400 && response.status < 500) {
-			throw error(
-				response.status,
-				'Model could not be found or you do not have permission to view it'
-			)
-		}
-
-		if (!response.ok) {
-			throw error(response.status, 'Failed to fetch model')
-		}
-
-		data = (await response.json()) as Models['TextToCad_type']
-	})
-
 	const gltfUrl = `data:model/gltf+json;base64,${data.outputs ? data.outputs['source.gltf'] : ''}`
 </script>
 

src/routes/view/[modelId]/+page.ts

@@ -0,0 +1,33 @@
+import { endpoints } from '$lib/endpoints.js'
+import type { Models } from '@kittycad/lib'
+import { error, redirect } from '@sveltejs/kit'
+
+export const csr = true
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ params, parent, fetch }) {
+	const data = await parent()
+
+	if (!data.token) {
+		throw redirect(301, '/')
+	}
+
+	const response = await fetch(endpoints.view(params.modelId), {
+		headers: {
+			Authorization: 'Bearer ' + data.token
+		}
+	})
+
+	if (response.status >= 400 && response.status < 500) {
+		throw error(
+			response.status,
+			'Model could not be found or you do not have permission to view it'
+		)
+	}
+
+	if (!response.ok) {
+		throw error(response.status, 'Failed to fetch model')
+	}
+
+	return (await response.json()) as Models['TextToCad_type']
+}