diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx index d50995f2..4cd1696a 100644 --- a/website/src/repl/Repl.jsx +++ b/website/src/repl/Repl.jsx @@ -4,45 +4,28 @@ Copyright (C) 2022 Strudel contributors - see . */ -import { - cleanupDraw, - cleanupUi, - controls, - evalScope, - getDrawContext, - logger, - code2hash, - hash2code, -} from '@strudel.cycles/core'; -import { CodeMirror, cx, flash, useHighlighting, useStrudel, useKeydown } from '@strudel.cycles/react'; -import { getAudioContext, initAudioOnFirstClick, resetLoadedSounds, webaudioOutput } from '@strudel.cycles/webaudio'; -import { createClient } from '@supabase/supabase-js'; -import { nanoid } from 'nanoid'; -import React, { createContext, useCallback, useEffect, useState, useMemo } from 'react'; -import './Repl.css'; -import { Panel } from './panel/Panel'; -import { Header } from './Header'; -import { prebake } from './prebake.mjs'; -import * as tunes from './tunes.mjs'; import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon'; -import { themes } from './themes.mjs'; -import { - settingsMap, - useSettings, - setLatestCode, - updateUserCode, - setActivePattern, - getActivePattern, - getUserPattern, - initUserCode, -} from '../settings.mjs'; -import Loader from './Loader'; -import { settingPatterns } from '../settings.mjs'; -import { isTauri } from '../tauri.mjs'; +import { cleanupDraw, cleanupUi, code2hash, getDrawContext, logger } from '@strudel.cycles/core'; +import { CodeMirror, cx, flash, useHighlighting, useKeydown, useStrudel } from '@strudel.cycles/react'; import { useWidgets } from '@strudel.cycles/react/src/hooks/useWidgets.mjs'; -import { writeText } from '@tauri-apps/api/clipboard'; +import { getAudioContext, initAudioOnFirstClick, resetLoadedSounds, webaudioOutput } from '@strudel.cycles/webaudio'; +import { createContext, useCallback, useEffect, useMemo, useState } from 'react'; +import { + initUserCode, + setActivePattern, + setLatestCode, + settingsMap, + updateUserCode, + useSettings, +} from '../settings.mjs'; +import { Header } from './Header'; +import Loader from './Loader'; +import './Repl.css'; import { registerSamplesFromDB, userSamplesDBConfig } from './idbutils.mjs'; -import { getRandomTune, initCode, loadModules } from './util.mjs'; +import { Panel } from './panel/Panel'; +import { prebake } from './prebake.mjs'; +import { themes } from './themes.mjs'; +import { getRandomTune, initCode, loadModules, shareCode } from './util.mjs'; const { latestCode } = settingsMap.get(); @@ -66,7 +49,6 @@ export const ReplContext = createContext(null); export function Repl({ embedded = false }) { const isEmbedded = embedded || window.location !== window.parent.location; const [view, setView] = useState(); // codemirror view - const [lastShared, setLastShared] = useState(); const [pending, setPending] = useState(true); const { theme, diff --git a/website/src/repl/Repl2.jsx b/website/src/repl/Repl2.jsx index 070e54e1..2ea527a2 100644 --- a/website/src/repl/Repl2.jsx +++ b/website/src/repl/Repl2.jsx @@ -4,37 +4,30 @@ Copyright (C) 2022 Strudel contributors - see . */ -import { logger, getDrawContext, silence, code2hash } from '@strudel.cycles/core'; +import { code2hash, getDrawContext, logger, silence } from '@strudel.cycles/core'; import { cx } from '@strudel.cycles/react'; -import { getAudioContext, webaudioOutput, initAudioOnFirstClick } from '@strudel.cycles/webaudio'; import { transpiler } from '@strudel.cycles/transpiler'; +import { getAudioContext, initAudioOnFirstClick, webaudioOutput } from '@strudel.cycles/webaudio'; import { StrudelMirror, defaultSettings } from '@strudel/codemirror'; -import { createClient } from '@supabase/supabase-js'; /* import { writeText } from '@tauri-apps/api/clipboard'; import { nanoid } from 'nanoid'; */ -import { createContext, useState } from 'react'; +import { createContext, useCallback, useEffect, useRef, useState } from 'react'; import { - useSettings, - settingsMap, - setLatestCode, - updateUserCode, - setActivePattern, - getActivePattern, - getUserPattern, initUserCode, - settingPatterns, + setActivePattern, + setLatestCode, + settingsMap, + updateUserCode, + useSettings, } from '../settings.mjs'; -import { isTauri } from '../tauri.mjs'; -import { Panel } from './panel/Panel'; import { Header } from './Header'; import Loader from './Loader'; import './Repl.css'; -import { useCallback, useRef, useEffect } from 'react'; +import { Panel } from './panel/Panel'; // import { prebake } from '@strudel/repl'; -import { prebake /* , resetSounds */ } from './prebake.mjs'; -import * as tunes from './tunes.mjs'; import { useStore } from '@nanostores/react'; -import { getRandomTune, loadModules, initCode } from './util.mjs'; +import { prebake /* , resetSounds */ } from './prebake.mjs'; +import { getRandomTune, initCode, loadModules, shareCode } from './util.mjs'; const { code: randomTune, name } = getRandomTune(); export const ReplContext = createContext(null); @@ -99,7 +92,6 @@ export function Repl2({ embedded = false }) { }); // init settings initCode().then((decoded) => { - console.log('init code'); let msg; if (decoded) { editor.setCode(decoded); @@ -182,35 +174,7 @@ export function Repl2({ embedded = false }) { editorRef.current.repl.evaluate(code); }; - /* const handleShare = async () => { - const codeToShare = activeCode || code; - if (lastShared === codeToShare) { - logger(`Link already generated!`, 'error'); - return; - } - // generate uuid in the browser - const hash = nanoid(12); - const shareUrl = window.location.origin + window.location.pathname + '?' + hash; - const { data, error } = await supabase.from('code').insert([{ code: codeToShare, hash }]); - if (!error) { - setLastShared(activeCode || code); - // copy shareUrl to clipboard - if (isTauri()) { - await writeText(shareUrl); - } else { - await navigator.clipboard.writeText(shareUrl); - } - const message = `Link copied to clipboard: ${shareUrl}`; - alert(message); - // alert(message); - logger(message, 'highlight'); - } else { - console.log('error', error); - const message = `Error: ${error.message}`; - // alert(message); - logger(message); - } - }; */ + const handleShare = async () => shareCode(activeCode); const pending = false; //const error = undefined; // const { started, activeCode } = replState; @@ -223,12 +187,10 @@ export function Repl2({ embedded = false }) { isDirty, lastShared, activeCode, - // handleChangeCode: codemirror.handleChangeCode, handleTogglePlay, handleUpdate, handleShuffle, - /* handleShare, */ - handleShare: () => {}, + handleShare, }; return ( diff --git a/website/src/repl/util.mjs b/website/src/repl/util.mjs index 0da28c25..ba459a1f 100644 --- a/website/src/repl/util.mjs +++ b/website/src/repl/util.mjs @@ -4,6 +4,8 @@ import { isTauri } from '../tauri.mjs'; import './Repl.css'; import * as tunes from './tunes.mjs'; import { createClient } from '@supabase/supabase-js'; +import { nanoid } from 'nanoid'; +import { writeText } from '@tauri-apps/api/clipboard'; // Create a single supabase client for interacting with your database const supabase = createClient( @@ -78,6 +80,7 @@ export function loadModules() { ); } +let lastShared; export async function shareCode(codeToShare) { // const codeToShare = activeCode || code; if (lastShared === codeToShare) { @@ -89,7 +92,7 @@ export async function shareCode(codeToShare) { const shareUrl = window.location.origin + window.location.pathname + '?' + hash; const { data, error } = await supabase.from('code').insert([{ code: codeToShare, hash }]); if (!error) { - setLastShared(activeCode || code); + lastShared = codeToShare; // copy shareUrl to clipboard if (isTauri()) { await writeText(shareUrl);