implement saving and forking

site/src/routes/repl/[id]/_components/AppControls/index.svelte

@@ -59,7 +59,10 @@
 				headers: { Authorization },
 				body: JSON.stringify({
 					name,
-					components
+					files: components.map(component => ({
+						name: `${component.name}.${component.type}`,
+						source: component.source
+					}))
 				})
 			});
 
@@ -107,16 +110,16 @@
 			const files = {};
 			const { components } = repl.toJSON();
 
-			components.forEach(module => {
-				const text = module.source.trim();
-				if (!text.length) return; // skip empty file
-				files[`${module.name}.${module.type}`] = text;
-			});
-
 			const r = await fetch(`repl/${gist.uid}.json`, {
 				method: 'PATCH',
 				headers: { Authorization },
-				body: JSON.stringify({ name, files })
+				body: JSON.stringify({
+					name,
+					files: components.map(component => ({
+						name: `${component.name}.${component.type}`,
+						source: component.source
+					}))
+				})
 			});
 
 			if (r.status < 200 || r.status >= 300) {
@@ -197,29 +200,21 @@ export default app;` });
 			<Icon name="download" />
 		</button>
 
-		{#if $user}
+		<button class="icon" disabled="{saving || !$user}" on:click={() => fork(false)} title="fork">
-			<button class="icon" disabled="{saving || !$user}" on:click={fork} title="fork">
+			{#if justForked}
-				{#if justForked}
+				<Icon name="check" />
-					<Icon name="check" />
+			{:else}
-				{:else}
+				<Icon name="git-branch" />
-					<Icon name="git-branch" />
+			{/if}
-				{/if}
+		</button>
-			</button>
-
-			<button class="icon" disabled="{saving || !$user}" on:click={save} title="save">
-				{#if justSaved}
-					<Icon name="check" />
-				{:else}
-					<Icon name="save" />
-				{/if}
-			</button>
-		{/if}
 
-		{#if gist}
+		<button class="icon" disabled="{saving || !$user}" on:click={save} title="save">
-			<a class="icon no-underline" href={gist.html_url} title="link to gist">
+			{#if justSaved}
-				<Icon name="link" />
+				<Icon name="check" />
-			</a>
+			{:else}
-		{/if}
+				<Icon name="save" />
+			{/if}
+		</button>
 
 		{#if $user}
 			<UserMenu />

site/src/routes/repl/[id]/index.json.js

@@ -113,7 +113,7 @@ export async function patch(req, res) {
 		let k, cols=[], vals=[];
 		for (k in obj) {
 			cols.push(k);
-			vals.push(obj[k]);
+			vals.push(k === 'files' ? JSON.stringify(obj[k]) : obj[k]);
 		}
 
 		const tmp = vals.map((x, i) => `$${i + 1}`).join(',');

site/src/routes/repl/[id]/index.svelte

@@ -80,10 +80,9 @@
 	});
 
 	function handle_fork(event) {
-		example = null;
 		console.log('> handle_fork', event);
 		gist = event.detail.gist;
-		gist_id = gist.uid;
+		id = gist.uid;
 	}
 
 	$: svelteUrl = process.browser && version === 'local' ?

site/src/routes/repl/create.json.js

@@ -8,21 +8,16 @@ export async function post(req, res) {
 	if (!user) return; // response already sent
 
 	try {
-		const { name, components } = await body(req);
+		const { name, files } = await body(req);
 
-		const files = {};
+		console.log({ name, files });
-		components.forEach(component => {
-			const text = component.source.trim();
-			if (!text.length) return; // skip empty file
-			files[`${component.name}.${component.type}`] = text;
-		});
 
 		const [row] = await query(`
 			insert into gists(user_id, name, files)
-			values ($1, $2, $3) returning *`, [user.id, name, files]);
+			values ($1, $2, $3) returning *`, [user.id, name, JSON.stringify(files)]);
 
 		send(res, 201, {
-			uid: row.uid,
+			uid: row.uid.replace(/-/g, ''),
 			name: row.name,
 			files: row.files,
 			owner: user.uid,