chore: move state handling to usePlayground hook (#58)

Co-authored-by: Stephan Meijer <[email protected]>

Author: marcosvega91

.lintstagedrc.js

@@ -1,4 +1,7 @@
 module.exports = {
-  '**/*.js': (files) => [`eslint --quiet --fix ${files.join(' ')}`,`jest --passWithNoTests`],
+  '**/*.js': (files) => [
+    `eslint --quiet --fix ${files.join(' ')}`,
+    `jest --passWithNoTests`,
+  ],
   '**/*.{md,js}': (files) => [`prettier --write ${files.join(' ')}`],
 };

src/components/Embedded.js

@@ -1,12 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import queryString from 'query-string';
 
+import usePlayground from '../hooks/usePlayground';
 import { initialValues } from '../constants';
-import parser from '../parser';
 import state from '../lib/state';
 
-import { useAppContext } from './Context';
 import Preview from './Preview';
 import Query from './Query';
 import Result from './Result';
@@ -23,9 +22,15 @@ const SUPPORTED_PANES = {
 
 // TODO: we should support readonly mode
 function Embedded() {
-  const [html, setHtml] = useState(savedState.markup || initialValues.html);
-  const [js, setJs] = useState(savedState.query || initialValues.js);
-  const { setParsed } = useAppContext();
+  const [query, setQuery, markup, setMarkup, parsed] = usePlayground({
+    initialMarkup: initialValues.html || savedState.markup,
+    initialQuery: initialValues.js || savedState.js,
+  });
+
+  useEffect(() => {
+    state.save({ markup, query });
+    state.updateTitle(parsed?.expression?.expression);
+  }, [markup, query]);
 
   const location = useLocation();
   const params = queryString.parse(location.search);
@@ -49,14 +54,6 @@ function Embedded() {
       ? 'grid-cols-2'
       : 'grid-cols-1';
 
-  useEffect(() => {
-    const parsed = parser.parse({ markup: html, query: js });
-    setParsed(parsed);
-
-    state.save({ markup: html, query: js });
-    state.updateTitle(parsed.expression?.expression);
-  }, [html, js]);
-
   useEffect(() => {
     document.body.classList.add('embedded');
     return () => document.body.classList.remove('embedded');
@@ -69,13 +66,19 @@ function Embedded() {
       {panes.map((area) => {
         switch (area) {
           case 'preview':
-            return <Preview key={area} html={html} />;
+            return <Preview key={area} html={markup} />;
           case 'markup':
             return (
-              <MarkupEditor key={area} onChange={setHtml} initialValue={html} />
+              <MarkupEditor
+                key={area}
+                onChange={setMarkup}
+                initialValue={markup}
+              />
             );
           case 'query':
-            return <Query key={area} initialValue={js} onChange={setJs} />;
+            return (
+              <Query key={area} initialValue={query} onChange={setQuery} />
+            );
           case 'result':
             return <Result key={area} />;
           default:

src/components/Playground.js

@@ -1,48 +1,44 @@
-import React, { useState, useEffect } from 'react';
-import parser from '../parser';
+import React, { useEffect } from 'react';
+
+import usePlayground from '../hooks/usePlayground';
+import state from '../lib/state';
+import { initialValues } from '../constants';
 
-import { useAppContext } from './Context';
 import Preview from './Preview';
 import MarkupEditor from './MarkupEditor';
 import Result from './Result';
-
-import { initialValues } from '../constants';
-import state from '../lib/state';
 import Query from './Query';
 
 const savedState = state.load();
 
 function Playground() {
-  const [html, setHtml] = useState(savedState.markup || initialValues.html);
-  const [js, setJs] = useState(savedState.query || initialValues.js);
-
-  const { setParsed } = useAppContext();
+  const [query, setQuery, markup, setMarkup, parsed] = usePlayground({
+    initialMarkup: initialValues.html || savedState.markup,
+    initialQuery: initialValues.js || savedState.js,
+  });
 
   useEffect(() => {
-    const parsed = parser.parse({ markup: html, query: js });
-    setParsed(parsed);
-
-    state.save({ markup: html, query: js });
-    state.updateTitle(parsed.expression?.expression);
-  }, [html, js]);
+    state.save({ markup, query });
+    state.updateTitle(parsed?.expression?.expression);
+  }, [markup, query]);
 
   return (
     <div className="flex flex-col h-auto md:h-full w-full">
       <div className="editor markup-editor gap-4 md:gap-8 md:h-56 flex-auto grid-cols-1 md:grid-cols-2">
         <div className="flex-auto relative h-56 md:h-full">
-          <MarkupEditor onChange={setHtml} initialValue={html} />
+          <MarkupEditor onChange={setMarkup} initialValue={markup} />
         </div>
 
         <div className="flex-auto h-56 md:h-full">
-          <Preview html={html} />
+          <Preview html={markup} />
         </div>
       </div>
 
       <div className="flex-none h-8" />
 
       <div className="editor gap-4 md:gap-8 md:h-56 flex-auto grid-cols-1 md:grid-cols-2 overflow-hidden">
         <div className="flex-auto relative h-56 md:h-full">
-          <Query onChange={setJs} initialValue={js} />
+          <Query onChange={setQuery} initialValue={query} />
         </div>
 
         <div className="flex-auto h-56 md:h-full overflow-hidden">

src/hooks/usePlayground.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import { useAppContext } from '../components/Context';
+import parser from '../parser';
+
+function usePlayground({ initialMarkup, initialQuery }) {
+  const [markup, setMarkup] = useState(initialMarkup);
+  const [query, setQuery] = useState(initialQuery);
+  const { setParsed } = useAppContext();
+
+  useEffect(() => {
+    const parsed = parser.parse({ markup, query });
+    setParsed(parsed);
+  }, [markup, query]);
+
+  return [query, setQuery, markup, setMarkup];
+}
+
+export default usePlayground;