fix: update client for new endpoints

site/src/routes/repl/_components/AppControls/index.svelte

@@ -27,7 +27,7 @@
 	}
 
 	$: Authorization = $user && `Bearer ${$user.token}`;
-	$: canSave = !!$user && !!gist && !!gist.owner && $user.id == gist.owner.id; // comparing number and string
+	$: canSave = $user && gist && gist.owner === $user.uid;
 
 	function handleKeydown(event) {
 		if (event.which === 83 && (isMac ? event.metaKey : event.ctrlKey)) {
@@ -102,37 +102,22 @@
 
 		saving = true;
 
-		const { components } = repl.toJSON();
-
 		try {
+			// Send all files back to API
+			// ~> Any missing files are considered deleted!
 			const files = {};
-
-			// null out any deleted files
-			const set = new Set(components.map(m => `${m.name}.${m.type}`));
-			Object.keys(gist.files).forEach(file => {
-				if (/\.(svelte|html|js)$/.test(file)) {
-					if (!set.has(file)) files[file] = null;
-				}
-			});
+			const { components } = repl.toJSON();
 
 			components.forEach(module => {
-				const file = `${module.name}.${module.type}`;
-				if (!module.source.trim()) {
-					throw new Error(`GitHub does not allow saving gists with empty files - ${file}`);
-				}
-
-				if (!gist.files[file] || module.source !== gist.files[file].content) {
-					files[file] = { content: module.source };
-				}
+				const text = module.source.trim();
+				if (!text.length) return; // skip empty file
+				files[`${module.name}.${module.type}`] = text;
 			});
 
-			const r = await fetch(`gist/${gist.id}`, {
+			const r = await fetch(`gist/${gist.uid}`, {
 				method: 'PATCH',
-				credentials: 'include',
-				body: JSON.stringify({
-					description: name,
-					files
-				})
+				headers: { Authorization },
+				body: JSON.stringify({ name, files })
 			});
 
 			if (r.status < 200 || r.status >= 300) {

site/src/routes/repl/index.svelte

@@ -17,8 +17,8 @@
 	import Repl from '@sveltejs/svelte-repl';
 	import { onMount } from 'svelte';
 
-	import InputOutputToggle from '../../components/Repl/InputOutputToggle.svelte';
 	import { process_example } from '../../utils/examples';
+	import InputOutputToggle from '../../components/Repl/InputOutputToggle.svelte';
 	import AppControls from './_components/AppControls/index.svelte';
 
 	export let version;
@@ -58,39 +58,38 @@
 
 		if (gist_id) {
 			relaxed = false;
-			fetch(`gist/${gist_id}`).then(r => r.json()).then(data => {
-				gist = data;
-				const { description, files } = data;
-
-				name = description;
-
-				const components = Object.keys(files)
-					.map(file => {
-						const dot = file.lastIndexOf('.');
-						if (!~dot) return;
-
-						const source = files[file].content;
-
-						let type = file.slice(dot + 1);
-						if (type === 'html') type = 'svelte';
-
-						return {
-							name: file.slice(0, dot),
-							type,
-							source
-						};
-					})
-					.filter(x => x.type === 'svelte' || x.type === 'js')
-					.sort((a, b) => {
-						if (a.name === 'App' && a.type === 'svelte') return -1;
-						if (b.name === 'App' && b.type === 'svelte') return 1;
-
-						if (a.type !== b.type) return a.type === 'svelte' ? -1 : 1;
-
-						return a.name < b.name ? -1 : 1;
+			fetch(`gist/${gist_id}`).then(r => {
+				if (r.ok) {
+					r.json().then(data => {
+						gist = data;
+						name = data.name;
+
+						const components = [];
+						const files = data.files;
+						const rgx = /(js|svelte)$/i;
+
+						Object.keys(files).forEach(key => {
+							let [name, type] = key.split('.');
+							if (type === 'html') type = 'svelte';
+							if (rgx.test(type)) {
+								components.push({ name, type, source:files[key] });
+							}
+						});
+
+						components.sort((a, b) => {
+							if (a.name === 'App' && a.type === 'svelte') return -1;
+							if (b.name === 'App' && b.type === 'svelte') return 1;
+
+							if (a.type !== b.type) return a.type === 'svelte' ? -1 : 1;
+
+							return a.name < b.name ? -1 : 1;
+						});
+
+						repl.set({ components });
 					});
-
-				repl.set({ components });
+				} else {
+					console.warn('TODO: 404 Gist')
+				}
 			});
 		} else {
 			relaxed = true;
@@ -111,8 +110,9 @@
 
 	function handle_fork(event) {
 		example = null;
+		console.log('> handle_fork', event);
 		gist = event.detail.gist;
-		gist_id = gist.id;
+		gist_id = gist.uid;
 	}
 
 	$: svelteUrl = process.browser && version === 'local' ?