refactors

website/package.json

@@ -11,6 +11,7 @@
     "clipboard": "2.0.0",
     "codemirror": "5.36.0",
     "codemirror-graphql": "0.6.12",
+    "lodash.groupby": "4.6.0",
     "lz-string": "1.4.4",
     "prop-types": "15.6.1",
     "react": "16.3.1",

website/pages/playground/index.html

@@ -71,7 +71,7 @@
     </span>
   </header>
 
-  <div id="root"></div>
+  <div id="root" class="playground-container"></div>
 
   <script src="/playground.js"></script>
 

website/playground/Playground.js

@@ -10,6 +10,7 @@ import * as urlHash from "./urlHash";
 import formatMarkdown from "./markdown";
 
 import { Sidebar, SidebarCategory } from "./sidebar/components";
+import SidebarOptions from "./sidebar/SidebarOptions";
 import Option from "./sidebar/options";
 import { Checkbox } from "./sidebar/inputs";
 
@@ -97,24 +98,15 @@ class Playground extends React.Component {
         <VersionLink version={this.state.version} />
         <EditorState>
           {editorState => (
-            <div className="playground-container">
+            <React.Fragment>
               <div className="editors-container">
                 <Sidebar visible={editorState.showSidebar}>
-                  {categorizeOptions(
-                    availableOptions,
-                    (category, categoryOptions) => (
-                      <SidebarCategory key={category} title={category}>
-                        {categoryOptions.map(option => (
-                          <Option
-                            key={option.name}
-                            option={option}
-                            value={options[option.name]}
-                            onChange={this.handleOptionValueChange}
-                          />
-                        ))}
-                      </SidebarCategory>
-                    )
-                  )}
+                  <SidebarOptions
+                    categories={CATEGORIES_ORDER}
+                    availableOptions={availableOptions}
+                    optionValues={options}
+                    onOptionValueChange={this.handleOptionValueChange}
+                  />
                   <SidebarCategory title="Debug">
                     <Checkbox
                       label="show AST"
@@ -180,7 +172,7 @@ class Playground extends React.Component {
                   </LinkButton>
                 </div>
               </div>
-            </div>
+            </React.Fragment>
           )}
         </EditorState>
       </React.Fragment>

website/playground/buttons.js

@@ -38,6 +38,7 @@ export class ClipboardButton extends React.Component {
   render() {
     const rest = Object.assign({}, this.props);
     delete rest.children;
+    delete rest.clipboardValue;
 
     return (
       <Button ref={this.ref} {...rest}>

website/playground/sidebar/SidebarOptions.js

@@ -0,0 +1,29 @@
+import React from "react";
+import groupBy from "lodash.groupby";
+
+import { SidebarCategory } from "./components";
+import Option from "./options";
+
+export default function({
+  categories,
+  availableOptions,
+  optionValues,
+  onOptionValueChange
+}) {
+  const options = groupBy(availableOptions, "category");
+  return categories.map(
+    category =>
+      options[category] ? (
+        <SidebarCategory key={category} title={category}>
+          {options[category].map(option => (
+            <Option
+              key={option.name}
+              option={option}
+              value={optionValues[option.name]}
+              onChange={onOptionValueChange}
+            />
+          ))}
+        </SidebarCategory>
+      ) : null
+  );
+}

website/playground/sidebar/inputs.js

@@ -17,9 +17,9 @@ export function Select({ label: _label, values, selected, onChange }) {
   return (
     <label>
       {_label}{" "}
-      <select onChange={ev => onChange(ev.target.value)}>
+      <select value={selected} onChange={ev => onChange(ev.target.value)}>
         {values.map(val => (
-          <option value={val} selected={val === selected}>
+          <option key={val} value={val}>
             {val}
           </option>
         ))}

website/yarn.lock

@@ -3506,6 +3506,10 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
+lodash.groupby@4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.groupby/-/lodash.groupby-4.6.0.tgz#0b08a1dcf68397c397855c3239783832df7403d1"
+
 lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.5, lodash@^4.3.0:
   version "4.17.5"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"