chore: move state management to context (#73)

Author: smeijer

src/components/App.js

@@ -1,26 +1,23 @@
 import React from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
-import { AppContextProvider } from './Context';
 import Playground from './Playground';
 import Layout from './Layout';
 import Embedded from './Embedded';
 
 function App() {
   return (
-    <AppContextProvider>
-      <Router>
-        <Switch>
-          <Route path="/embed/">
-            <Embedded />
-          </Route>
-          <Route path="/">
-            <Layout>
-              <Playground />
-            </Layout>
-          </Route>
-        </Switch>
-      </Router>
-    </AppContextProvider>
+    <Router>
+      <Switch>
+        <Route path="/embed/">
+          <Embedded />
+        </Route>
+        <Route path="/">
+          <Layout>
+            <Playground />
+          </Layout>
+        </Route>
+      </Switch>
+    </Router>
   );
 }
 

src/components/Context.js

@@ -1,27 +1,68 @@
-import React, { useContext, useRef, useState } from 'react';
-
+import React, { useContext, useReducer, useEffect } from 'react';
+import parser from '../parser';
+import { initialValues as defaultValues } from '../constants';
 export const AppContext = React.createContext();
 
-function AppContextProvider(props) {
-  const jsEditorRef = useRef();
-  const htmlEditorRef = useRef();
-  const [parsed, setParsed] = useState({});
-
-  return (
-    <AppContext.Provider
-      value={{
-        jsEditorRef,
-        htmlEditorRef,
-        parsed,
-        setParsed,
-      }}
-      {...props}
-    />
-  );
+function reducer(state, action) {
+  switch (action.type) {
+    case 'SET_MARKUP_EDITOR': {
+      return { ...state, markupEditor: action.editor };
+    }
+
+    case 'SET_MARKUP': {
+      if (action.updateEditor !== false) {
+        state.markupEditor.setValue(action.markup);
+      }
+
+      return {
+        ...state,
+        markup: action.markup,
+        result: parser.parse({ markup: action.markup, query: state.query }),
+      };
+    }
+
+    case 'SET_QUERY_EDITOR': {
+      return { ...state, queryEditor: action.editor };
+    }
+
+    case 'SET_QUERY': {
+      if (action.updateEditor !== false) {
+        state.queryEditor.setValue(action.query);
+      }
+
+      return {
+        ...state,
+        setQuery: action.query,
+        result: parser.parse({ markup: state.markup, query: action.query }),
+      };
+    }
+
+    default: {
+      throw new Error('Unknown action type: ' + action.type);
+    }
+  }
 }
 
-function useAppContext() {
-  return useContext(AppContext);
+export function PlaygroundProvider(props) {
+  let { initialValues: { markup, query } = {} } = props;
+  const result = parser.parse({ markup, query, cacheId: props.instanceId });
+
+  if (!markup && !query) {
+    markup = defaultValues.markup;
+    query = defaultValues.query;
+  }
+
+  const [state, dispatch] = useReducer(reducer, { result, markup, query });
+
+  useEffect(() => {
+    if (typeof props.onChange === 'function') {
+      props.onChange(state);
+    }
+  }, [state.result]);
+
+  return <AppContext.Provider value={{ state, dispatch }} {...props} />;
 }
 
-export { AppContextProvider, useAppContext };
+export function usePlayground() {
+  return useContext(AppContext);
+}

src/components/Editor.js

@@ -71,7 +71,7 @@ function getQueryHints(cm) {
   } else if (word.includes('.')) {
     // user is already one level deeper, entered `screen.get...`
     const [obj, method] = word.split('.');
-    const values = suggestions[obj]?.filter((x) =>
+    const values = (suggestions[obj] || []).filter((x) =>
       x.toLowerCase().includes(method),
     );
     list.push(...values);
@@ -142,10 +142,9 @@ const NON_TRIGGER_KEYS = {
   '222': 'quote',
 };
 
-function Editor({ onChange, mode, initialValue }, forwardRef) {
+function Editor({ onLoad, onChange, mode, initialValue }) {
   const elem = useRef();
-  const localRef = useRef();
-  const editor = forwardRef || localRef;
+  const editor = useRef();
 
   useEffect(() => {
     editor.current = CodeMirror.fromTextArea(
@@ -187,6 +186,8 @@ function Editor({ onChange, mode, initialValue }, forwardRef) {
         });
       }
     });
+
+    onLoad(editor.current);
   }, [editor.current, onChange]);
 
   return (
@@ -196,4 +197,4 @@ function Editor({ onChange, mode, initialValue }, forwardRef) {
   );
 }
 
-export default React.forwardRef(Editor);
+export default Editor;

src/components/Embedded.js

@@ -1,17 +1,20 @@
 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 state from '../lib/state';
 
 import Preview from './Preview';
 import Query from './Query';
 import Result from './Result';
 import MarkupEditor from './MarkupEditor';
+import { PlaygroundProvider } from './Context';
+
+function onStateChange({ markup, query, result }) {
+  state.save({ markup, query });
+  state.updateTitle(result?.expression?.expression);
+}
 
-const savedState = state.load();
+const initialValues = state.load();
 
 const SUPPORTED_PANES = {
   markup: true,
@@ -22,16 +25,6 @@ const SUPPORTED_PANES = {
 
 // TODO: we should support readonly mode
 function Embedded() {
-  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);
 
@@ -60,32 +53,26 @@ function Embedded() {
   }, []);
 
   return (
-    <div
-      className={`h-full overflow-hidden grid grid-flow-col gap-4 p-4 bg-white shadow rounded ${columnClass}`}
-    >
-      {panes.map((area) => {
-        switch (area) {
-          case 'preview':
-            return <Preview key={area} html={markup} />;
-          case 'markup':
-            return (
-              <MarkupEditor
-                key={area}
-                onChange={setMarkup}
-                initialValue={markup}
-              />
-            );
-          case 'query':
-            return (
-              <Query key={area} initialValue={query} onChange={setQuery} />
-            );
-          case 'result':
-            return <Result key={area} />;
-          default:
-            return null;
-        }
-      })}
-    </div>
+    <PlaygroundProvider onChange={onStateChange} initialValues={initialValues}>
+      <div
+        className={`h-full overflow-hidden grid grid-flow-col gap-4 p-4 bg-white shadow rounded ${columnClass}`}
+      >
+        {panes.map((area) => {
+          switch (area) {
+            case 'preview':
+              return <Preview key={area} />;
+            case 'markup':
+              return <MarkupEditor key={area} />;
+            case 'query':
+              return <Query key={area} />;
+            case 'result':
+              return <Result key={area} />;
+            default:
+              return null;
+          }
+        })}
+      </div>
+    </PlaygroundProvider>
   );
 }
 

src/components/MarkupEditor.js

@@ -1,11 +1,29 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import Editor from './Editor';
+import { usePlayground } from './Context';
+
+function MarkupEditor() {
+  const { dispatch, state } = usePlayground();
+
+  const onLoad = useCallback(
+    (editor) => dispatch({ type: 'SET_MARKUP_EDITOR', editor }),
+    [dispatch],
+  );
+
+  const onChange = useCallback(
+    (markup) => dispatch({ type: 'SET_MARKUP', markup, updateEditor: false }),
+    [dispatch],
+  );
 
-function MarkupEditor({ initialValue, onChange }) {
   return (
     <div className="h-full w-full flex flex-col">
       <div className="markup-editor flex-auto relative overflow-hidden">
-        <Editor mode="html" initialValue={initialValue} onChange={onChange} />
+        <Editor
+          mode="html"
+          initialValue={state.markup}
+          onLoad={onLoad}
+          onChange={onChange}
+        />
       </div>
     </div>
   );

src/components/Playground.js

@@ -1,51 +1,46 @@
-import React, { useEffect } from 'react';
-
-import usePlayground from '../hooks/usePlayground';
-import state from '../lib/state';
-import { initialValues } from '../constants';
+import React from 'react';
 
 import Preview from './Preview';
 import MarkupEditor from './MarkupEditor';
 import Result from './Result';
 import Query from './Query';
+import { PlaygroundProvider } from './Context';
+import state from '../lib/state';
 
-const savedState = state.load();
-
-function Playground() {
-  const [query, setQuery, markup, setMarkup, parsed] = usePlayground({
-    initialMarkup: initialValues.html || savedState.markup,
-    initialQuery: initialValues.js || savedState.js,
-  });
+function onStateChange({ markup, query, result }) {
+  state.save({ markup, query });
+  state.updateTitle(result?.expression?.expression);
+}
 
-  useEffect(() => {
-    state.save({ markup, query });
-    state.updateTitle(parsed?.expression?.expression);
-  }, [markup, query]);
+const initialValues = state.load();
 
+function Playground() {
   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={setMarkup} initialValue={markup} />
+    <PlaygroundProvider onChange={onStateChange} initialValues={initialValues}>
+      <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 />
+          </div>
+
+          <div className="flex-auto h-56 md:h-full">
+            <Preview />
+          </div>
         </div>
 
-        <div className="flex-auto h-56 md:h-full">
-          <Preview html={markup} />
-        </div>
-      </div>
+        <div className="flex-none h-8" />
 
-      <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={setQuery} initialValue={query} />
-        </div>
+        <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 />
+          </div>
 
-        <div className="flex-auto h-56 md:h-full overflow-hidden">
-          <Result />
+          <div className="flex-auto h-56 md:h-full overflow-hidden">
+            <Result />
+          </div>
         </div>
       </div>
-    </div>
+    </PlaygroundProvider>
   );
 }