can now generate short link for sharing

repl/src/App.jsx

@@ -15,6 +15,15 @@ import * as tunes from './tunes.mjs';
 import * as WebDirt from 'WebDirt';
 import { loadWebDirt } from '@strudel.cycles/webdirt';
 import { resetLoadedSamples, getAudioContext } from '@strudel.cycles/webaudio';
+import { createClient } from '@supabase/supabase-js';
+import { nanoid } from 'nanoid';
+
+// Create a single supabase client for interacting with your database
+const supabase = createClient(
+  'https://pidxdsxphlhzjnzmifth.supabase.co',
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InBpZHhkc3hwaGxoempuem1pZnRoIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTYyMzA1NTYsImV4cCI6MTk3MTgwNjU1Nn0.bqlw7802fsWRnqU5BLYtmXk_k-D1VFmbkHMywWc15NM',
+);
+
 evalScope(
   Tone,
   controls,
@@ -37,11 +46,27 @@ loadWebDirt({
   sampleFolder: 'EmuSP12',
 });
 
-const initialUrl = window.location.href;
-const codeParam = window.location.href.split('#')[1];
+// load code from url hash (either short hash from database or decode long hash)
 let decoded;
 try {
-  decoded = atob(decodeURIComponent(codeParam || ''));
+  const initialUrl = window.location.href;
+  const hash = initialUrl.split('?')[1]?.split('#')?.[0];
+  const codeParam = window.location.href.split('#')[1];
+  // looking like https://strudel.tidalcycles.org/?J01s5i1J0200 (fixed hash length)
+  if (codeParam) {
+    // looking like https://strudel.tidalcycles.org/#ImMzIGUzIg%3D%3D (hash length depends on code length)
+    decoded = atob(decodeURIComponent(codeParam || ''));
+    console.log('decoded hash from url');
+  } else if (hash) {
+    const { data, error } = await supabase.from('code').select('code').eq('hash', hash);
+    if (error) {
+      throw error;
+    }
+    if (data.length) {
+      decoded = data[0].code;
+      console.log('loaded hash from database', hash);
+    }
+  }
 } catch (err) {
   console.warn('failed to decode', err);
 }
@@ -58,6 +83,7 @@ const isEmbedded = window.location !== window.parent.location;
 function App() {
   // const [editor, setEditor] = useState();
   const [view, setView] = useState();
+  const [lastShared, setLastShared] = useState();
   const {
     setCode,
     setPattern,
@@ -196,6 +222,38 @@ function App() {
               <a href="./tutorial">📚 tutorial</a>
             </button>
           )}
+          {!isEmbedded && (
+            <button
+              className={cx('cursor-pointer hover:bg-gray-300', !isEmbedded ? 'p-2' : 'px-2')}
+              onClick={async () => {
+                const codeToShare = activeCode || code;
+                if (lastShared === codeToShare) {
+                  // alert('Link already generated!');
+                  pushLog(`Link already generated!`);
+                  return;
+                }
+                // generate uuid in the browser
+                const hash = nanoid(12);
+                const { data, error } = await supabase.from('code').insert([{ code: codeToShare, hash }]);
+                if (!error) {
+                  setLastShared(activeCode || code);
+                  const shareUrl = window.location.origin + '?' + hash;
+                  // copy shareUrl to clipboard
+                  navigator.clipboard.writeText(shareUrl);
+                  const message = `Link copied to clipboard: ${shareUrl}`;
+                  // alert(message);
+                  pushLog(message);
+                } else {
+                  console.log('error', error);
+                  const message = `Error: ${error.message}`;
+                  // alert(message);
+                  pushLog(message);
+                }
+              }}
+            >
+              📣 share{lastShared && lastShared === (activeCode || code) ? 'd!' : ''}
+            </button>
+          )}
           {isEmbedded && (
             <button className={cx('hover:bg-gray-300 px-2')}>
               <a href={window.location.href} target="_blank" rel="noopener noreferrer" title="Open in REPL">