Minor cleanup work (#555)

* chore: remove empty file * chore: Convert ExecuteButtonOperation to a SFC - Stateless functional component * chore: make cleanup toggle and spinner * chore: make results more functional * chore: move execute button operation from SFC to purecomponent per discussion in #555 * chore: remove pre-return commands from render in editor - Trying to move towards stateless, so I'm removing the pre-return render code.
graphql · Feb 6, 2018 · 32c873a · 32c873a
1 parent 55fc961
commit 32c873a
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 129 deletions.
diff --git a/packages/graphql-playground-react/src/components/Playground/DragBar.tsx b/packages/graphql-playground-react/src/components/Playground/DragBar.tsx
diff --git a/packages/graphql-playground-react/src/components/Playground/ExecuteButtonOperation.tsx b/packages/graphql-playground-react/src/components/Playground/ExecuteButtonOperation.tsx
@@ -8,31 +8,31 @@ export interface Props {
   highlight: any
 }
 
-export default class ExecuteButtonOperation extends React.Component<Props, {}> {
+class ExecuteButtonOperation extends React.PureComponent<Props> {
   render() {
-    const { operation, highlight } = this.props
     return (
       <li
-        key={operation.name ? operation.name.value : '*'}
-        className={operation === highlight ? 'selected' : ''}
-        onMouseOver={this.handleMouseOver}
-        onMouseOut={this.handleMouseOut}
-        onMouseUp={this.handleMouseUp}
+        key={this.props.operation.name ? this.props.operation.name.value : '*'}
+        className={
+          this.props.operation === this.props.highlight ? 'selected' : ''
+        }
+        onMouseOver={this.onMouseOver}
+        onMouseOut={this.props.onMouseOut}
+        onMouseUp={this.onMouseUp}
       >
-        {operation.name ? operation.name.value : '<Unnamed>'}
+        {this.props.operation.name
+          ? this.props.operation.name.value
+          : '<Unnamed>'}
       </li>
     )
   }
-
-  private handleMouseOver = () => {
+  private onMouseOver = () => {
     this.props.onMouseOver(this.props.operation)
   }
 
-  private handleMouseOut = () => {
-    this.props.onMouseOut()
-  }
-
-  private handleMouseUp = () => {
+  private onMouseUp = () => {
     this.props.onMouseUp(this.props.operation)
   }
 }
+
+export default ExecuteButtonOperation
diff --git a/packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx b/packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx
@@ -367,21 +367,6 @@ export class GraphQLEditor extends React.PureComponent<
   }
 
   render() {
-    const queryWrapStyle = {
-      WebkitFlex: this.state.editorFlex,
-      flex: this.state.editorFlex,
-    }
-
-    const variableOpen = this.state.variableEditorOpen
-    const variableStyle = {
-      height: variableOpen ? this.state.variableEditorHeight : null,
-    }
-
-    const tracingOpen = this.state.responseTracingOpen
-    const tracingStyle = {
-      height: tracingOpen ? this.state.responseTracingHeight : null,
-    }
-
     return (
       <div
         className={cn('graphiql-container', { isActive: this.props.isActive })}
@@ -496,7 +481,10 @@ export class GraphQLEditor extends React.PureComponent<
           >
             <div
               className={cn('queryWrap', this.props.localTheme)}
-              style={queryWrapStyle}
+              style={{
+                WebkitFlex: this.state.editorFlex,
+                flex: this.state.editorFlex,
+              }}
             >
               <QueryEditor
                 ref={this.setQueryEditorComponent}
@@ -512,10 +500,21 @@ export class GraphQLEditor extends React.PureComponent<
                 useVim={this.props.useVim}
                 onClickReference={this.handleClickReference}
               />
-              <div className="variable-editor" style={variableStyle}>
+              <div
+                className="variable-editor"
+                style={{
+                  height: this.state.variableEditorOpen
+                    ? this.state.variableEditorHeight
+                    : null,
+                }}
+              >
                 <div
                   className="variable-editor-title"
-                  style={{ cursor: variableOpen ? 'row-resize' : 'n-resize' }}
+                  style={{
+                    cursor: this.state.variableEditorOpen
+                      ? 'row-resize'
+                      : 'n-resize',
+                  }}
                   onMouseDown={this.handleVariableResizeStart}
                 >
                   <span
@@ -582,10 +581,21 @@ export class GraphQLEditor extends React.PureComponent<
                 {this.props.session.subscriptionActive && (
                   <div className="listening">Listening &hellip;</div>
                 )}
-                <div className="response-tracing" style={tracingStyle}>
+                <div
+                  className="response-tracing"
+                  style={{
+                    height: this.state.responseTracingOpen
+                      ? this.state.responseTracingHeight
+                      : null,
+                  }}
+                >
                   <div
                     className="response-tracing-title"
-                    style={{ cursor: tracingOpen ? 'row-resize' : 'n-resize' }}
+                    style={{
+                      cursor: this.state.responseTracingOpen
+                        ? 'row-resize'
+                        : 'n-resize',
+                    }}
                     onMouseDown={this.handleTracingResizeStart}
                   >
                     Tracing

diff --git a/packages/graphql-playground-react/src/components/Playground/Results.tsx b/packages/graphql-playground-react/src/components/Playground/Results.tsx
@@ -11,77 +11,75 @@ export interface Props {
   responses: Response[]
 }
 
-export default class Results extends React.Component<Props, {}> {
-  render() {
-    const { disableResize } = this.props
-    const isSubscription = this.props.responses.length > 1
-    return (
-      <div
-        className={cn('result-window', {
-          disableResize,
-          isSubscription,
-        })}
-        ref={this.props.setRef}
-      >
-        <style jsx={true}>{`
-          .result-window {
-            @p: .bgDarkBlue, .nosb, .relative;
-          }
+const Results: React.SFC<Props> = ({
+  disableResize,
+  setRef,
+  hideGutters,
+  responses,
+}) => (
+  <div
+    className={cn('result-window', {
+      disableResize,
+      isSubscription: responses.length > 1,
+    })}
+    ref={setRef}
+  >
+    <style jsx={true}>{`
+      .result-window {
+        @p: .bgDarkBlue, .nosb, .relative;
+      }
 
-          .result-window.disableResize :global(.CodeMirror-gutters) {
-            cursor: default !important;
-          }
+      .result-window.disableResize :global(.CodeMirror-gutters) {
+        cursor: default !important;
+      }
 
-          .subscription-time {
-            @p: .relative;
-            height: 17px;
-            margin-top: 12px;
-            margin-bottom: 4px;
-            &:before {
-              @p: .absolute, .w100;
-              content: '';
-              top: 9px;
-              left: 95px;
-              border-top: 1px solid $white20;
-            }
-          }
+      .subscription-time {
+        @p: .relative;
+        height: 17px;
+        margin-top: 12px;
+        margin-bottom: 4px;
+        &:before {
+          @p: .absolute, .w100;
+          content: '';
+          top: 9px;
+          left: 95px;
+          border-top: 1px solid $white20;
+        }
+      }
 
-          .subscription-time-text {
-            @p: .bgDarkBlue, .white50, .f12;
-            padding-left: 15px;
-          }
+      .subscription-time-text {
+        @p: .bgDarkBlue, .white50, .f12;
+        padding-left: 15px;
+      }
 
-          .result-viewer-wrapper {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            overflow: auto;
-          }
-          .isSubscription .result-viewer-wrapper {
-            position: relative;
-          }
-        `}</style>
-        {this.props.responses.map(response => (
-          <div key={response.resultID || String(response.time)}>
-            {this.props.responses.length > 1 &&
-              response.time && (
-                <div className="subscription-time">
-                  <div className="subscription-time-text">
-                    {ageOfDate(response.time)}
-                  </div>
-                </div>
-              )}
-            <div className="result-viewer-wrapper">
-              <ResultViewer
-                value={response.date}
-                hideGutters={this.props.hideGutters}
-              />
+      .result-viewer-wrapper {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: auto;
+      }
+      .isSubscription .result-viewer-wrapper {
+        position: relative;
+      }
+    `}</style>
+    {responses.map(response => (
+      <div key={response.resultID || String(response.time)}>
+        {responses.length > 1 &&
+          response.time && (
+            <div className="subscription-time">
+              <div className="subscription-time-text">
+                {ageOfDate(response.time)}
+              </div>
             </div>
-          </div>
-        ))}
+          )}
+        <div className="result-viewer-wrapper">
+          <ResultViewer value={response.date} hideGutters={hideGutters} />
+        </div>
       </div>
-    )
-  }
-}
+    ))}
+  </div>
+)
+
+export default Results
diff --git a/packages/graphql-playground-react/src/components/Spinner.tsx b/packages/graphql-playground-react/src/components/Spinner.tsx
@@ -1,15 +1,11 @@
 import * as React from 'react'
 import { keyframes, styled } from '../styled'
 
-const Spinner = () => {
-  return (
-    <Wrapper>
-      <SpinnerNode />
-    </Wrapper>
-  )
-}
-
-export default Spinner
+const Spinner = () => (
+  <Wrapper>
+    <SpinnerNode />
+  </Wrapper>
+)
 
 const rotation = keyframes`
   from {
@@ -45,3 +41,5 @@ const SpinnerNode = styled.div`
   border-right: 6px solid rgba(150, 150, 150, 0.15);
   border-top: 6px solid rgba(150, 150, 150, 0.8);
 `
+
+export default Spinner
diff --git a/packages/graphql-playground-react/src/components/Toggle.tsx b/packages/graphql-playground-react/src/components/Toggle.tsx
@@ -7,26 +7,24 @@ export interface ToggleProps {
   activeChoice: string
 }
 
-export default function Toggle({
+const Toggle: React.SFC<ToggleProps> = ({
   choices,
   onChange,
   activeChoice,
-}: ToggleProps) {
-  return (
-    <Wrapper>
-      {choices.map((choice, i) => (
-        <Choice
-          active={choice === activeChoice}
-          key={choice}
-          // tslint:disable-next-line
-          onClick={() => onChange(choice, i)}
-        >
-          {choice}
-        </Choice>
-      ))}
-    </Wrapper>
-  )
-}
+}) => (
+  <Wrapper>
+    {choices.map((choice, i) => (
+      <Choice
+        active={choice === activeChoice}
+        key={choice}
+        // tslint:disable-next-line
+        onClick={() => onChange(choice, i)}
+      >
+        {choice}
+      </Choice>
+    ))}
+  </Wrapper>
+)
 
 const Wrapper = styled.div`
   display: flex;
@@ -59,3 +57,5 @@ const Choice = styled.div`
     }
   `}
 `
+
+export default Toggle