From 6d2ed9b74812b2cc5a770b24af5eb2814aa7c1cf Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Sat, 29 Jun 2024 17:13:01 -0500 Subject: [PATCH] refactor: Swap effect for input handler --- src/components/controllers/repl/index.jsx | 24 +++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/controllers/repl/index.jsx b/src/components/controllers/repl/index.jsx index df2482a5b..95c812798 100644 --- a/src/components/controllers/repl/index.jsx +++ b/src/components/controllers/repl/index.jsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'preact/hooks'; +import { useState } from 'preact/hooks'; import { Splitter } from '../../splitter'; import { EXAMPLES, getExample, loadExample } from './examples'; import { ErrorOverlay } from './error-overlay'; @@ -42,18 +42,22 @@ export function Repl({ code, slug }) { }); }; - useEffect(() => { + const onEditorInput = (value) => { + setEditorCode(value); + + // Clears the example & code query params when a user + // begins to modify the code + if (!exampleSlug || !location.search) return; const example = getExample(exampleSlug); - (async function () { - if (example) { - const code = await loadExample(example.url); - if (location.search && code !== editorCode) { + if (example) { + loadExample(example.url).then(exampleCode => { + if (exampleCode !== value) { setExampleSlug(''); history.replaceState(null, null, '/repl'); } - } - })(); - }, [editorCode]); + }); + } + }; const share = () => { if (!exampleSlug) { @@ -138,7 +142,7 @@ export function Repl({ code, slug }) { value={editorCode} baseExampleSlug={exampleSlug} error={error} - onInput={setEditorCode} + onInput={onEditorInput} />