From b700759d79d0e21ca090bf8ea21a222ab5ea658d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <greg@smooth-code.com>
Date: Tue, 24 Dec 2019 13:42:25 +0100
Subject: [PATCH] docs(website): fix playground

---
 api/svgr.js                                   |  1 +
 .../src/components/playground/Playground.js   | 58 +++++++++----------
 .../components/playground/config/settings.js  |  5 +-
 3 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/api/svgr.js b/api/svgr.js
index cabddc9..2f9fa1a 100644
--- a/api/svgr.js
+++ b/api/svgr.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-unresolved */
 /* eslint-disable import/no-extraneous-dependencies */
 const { default: svgr } = require('@svgr/core')
 const { default: jsx } = require('@svgr/plugin-jsx')
diff --git a/website/src/components/playground/Playground.js b/website/src/components/playground/Playground.js
index ccace65..43ed67a 100644
--- a/website/src/components/playground/Playground.js
+++ b/website/src/components/playground/Playground.js
@@ -19,7 +19,7 @@ import { svgr } from './modules/svgr'
 import defaultSvg from './defaultSVG'
 import { DropArea } from './DropArea'
 import { Loading } from './Loading'
-import { settings, getInitialState, transformSettings } from './config/settings'
+import { settings, getInitialState, stateToSettings } from './config/settings'
 import { CodeFund } from './CodeFund'
 
 const GlobalStyle = createGlobalStyle`
@@ -231,40 +231,34 @@ export function Playground() {
   const [output, setOutput] = React.useState('')
   const [loading, setLoading] = React.useState(false)
   const [state, setState] = React.useState(getInitialState)
-
   const dialog = useDialogState({ visible: false })
 
   const transformIdRef = React.useRef(0)
 
-  async function transform(input) {
-    if (input.trim() === '') {
-      setOutput('')
-      return
-    }
-
-    setLoading(true)
-
-    try {
-      /* eslint-disable-next-line no-plusplus */
-      const transformId = ++transformIdRef.current
-      const output = await svgr(input, transformSettings(state))
-      if (transformId === transformIdRef.current) {
-        setOutput(output)
-        setLoading(false)
-      }
-    } catch (error) {
-      // We do nothing and assume that provided code is not correct
-    }
-  }
-
-  function handleInputChange(input) {
-    setInput(input)
-    transform(input)
-  }
-
   React.useEffect(() => {
-    transform(input)
-  }, [])
+    async function transform() {
+      if (input.trim() === '') {
+        setOutput('')
+        return
+      }
+
+      setLoading(true)
+
+      try {
+        /* eslint-disable-next-line no-plusplus */
+        const transformId = ++transformIdRef.current
+        const output = await svgr(input, stateToSettings(state))
+        if (transformId === transformIdRef.current) {
+          setOutput(output)
+          setLoading(false)
+        }
+      } catch (error) {
+        // We do nothing and assume that provided code is not correct
+      }
+    }
+
+    transform()
+  }, [input, JSON.stringify(state)])
 
   return (
     <>
@@ -281,11 +275,11 @@ export function Playground() {
               <Box flex={1} display="flex" flexDirection="column">
                 <EditorTitle>SVG input</EditorTitle>
                 <Box flex={1} position="relative">
-                  <DropArea onChange={handleInputChange}>
+                  <DropArea onChange={setInput}>
                     <Editor
                       name="input"
                       mode="xml"
-                      onChange={handleInputChange}
+                      onChange={setInput}
                       value={input}
                     />
                   </DropArea>
diff --git a/website/src/components/playground/config/settings.js b/website/src/components/playground/config/settings.js
index 3378bb7..055b084 100644
--- a/website/src/components/playground/config/settings.js
+++ b/website/src/components/playground/config/settings.js
@@ -116,8 +116,9 @@ export const getInitialState = () =>
     {},
   )
 
-export const transformSettings = state =>
-  Object.entries(state).reduce((newState, [key, value]) => {
+export function stateToSettings(state) {
+  return Object.entries(state).reduce((newState, [key, value]) => {
     const { transform } = settings.find(({ name }) => name === key)
     return { ...newState, [key]: transform ? transform(value) : value }
   }, {})
+}