diff --git a/site/src/routes/repl/_components/AppControls/index.svelte b/site/src/routes/repl/_components/AppControls/index.svelte index fc4107bfa1..ed1c264661 100644 --- a/site/src/routes/repl/_components/AppControls/index.svelte +++ b/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) { diff --git a/site/src/routes/repl/index.svelte b/site/src/routes/repl/index.svelte index 8a71e00d36..13958a3fac 100644 --- a/site/src/routes/repl/index.svelte +++ b/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' ?