graphql / graphql-playground

🎮 GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration)
MIT License
8.76k stars 734 forks source link

What is the variable "firstTime" for in ExecuteButton component #997

Open yoshiakis opened 5 years ago

yoshiakis commented 5 years ago

This issue pertains to the following package(s):

@timsuchanek Hey! I'm thinking refactoring GraphQL Playground. I looked into /graphql-playground-react/src/components/Playground/ExecuteButton.tsx and I have no idea why the following code is needed. Could I remove this code for refactoring?

let onMouseUp: any = upEvent => {
  if (initialPress && upEvent.target === downTarget) {
    initialPress = false
  } else {
    document.removeEventListener('mouseup', onMouseUp)
    onMouseUp = null
    if (downTarget.parentNode) {
      const isOptionsMenuClicked =
        // tslint:disable-next-line
        downTarget.parentNode.compareDocumentPosition(upEvent.target) &
        Node.DOCUMENT_POSITION_CONTAINED_BY
      if (!isOptionsMenuClicked) {
        // menu calls setState if it was clicked
        this.setState({ optionsOpen: false } as State)
      }
      if (firstTime) {
        this.onOptionSelected(
          this.props.operations.find(
            op => op.name.value === upEvent.target.textContent,
          ) || this.props.operations[0],
        )
        firstTime = false
      }
    }
  }
}

document.addEventListener('mouseup', onMouseUp)
yoshiakis commented 5 years ago

Now that I looked into the ExecuteButton component of GraphiQL, I understand why this event handler exists. So I change my question. What is the following code for?

if (firstTime) {
  this.onOptionSelected(
    this.props.operations.find(
      op => op.name.value === upEvent.target.textContent,
    ) || this.props.operations[0],
  )
  firstTime = false
}