{"action":"created","issue":{"url":"https://api.github.com/repos/gilbarbara/react-joyride/issues/102","repository_url":"https://api.github.com/repos/gilbarbara/react-joyride","labels_url":"https://api.github.com/repos/gilbarbara/react-joyride/issues/102/labels{/name}","comments_url":"https://api.github.com/repos/gilbarbara/react-joyride/issues/102/comments","events_url":"https://api.github.com/repos/gilbarbara/react-joyride/issues/102/events","html_url":"https://github.com/gilbarbara/react-joyride/issues/102","id":166874537,"number":102,"title":"This.refs.joyride undefined","user":{"login":"sonrtomas","id":16649596,"avatar_url":"https://avatars.githubusercontent.com/u/16649596?v=3","gravatar_id":"","url":"https://api.github.com/users/sonrtomas","html_url":"https://github.com/sonrtomas","followers_url":"https://api.github.com/users/sonrtomas/followers","following_url":"https://api.github.com/users/sonrtomas/following{/other_user}","gists_url":"https://api.github.com/users/sonrtomas/gists{/gist_id}","starred_url":"https://api.github.com/users/sonrtomas/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sonrtomas/subscriptions","organizations_url":"https://api.github.com/users/sonrtomas/orgs","repos_url":"https://api.github.com/users/sonrtomas/repos","events_url":"https://api.github.com/users/sonrtomas/events{/privacy}","received_events_url":"https://api.github.com/users/sonrtomas/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2016-07-21T17:29:17Z","updated_at":"2016-07-22T12:14:13Z","closed_at":"2016-07-22T12:14:13Z","body":"```\r\nimport Joyride from 'react-joyride';\r\nimport $ from 'jquery';\r\nimport React, { Component } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport classnames from 'classnames';\r\nimport { connect } from 'react-redux';\r\n\r\nimport PrimaryLayout from './PrimaryLayout';\r\nimport Modal from './Modal';\r\nimport Prompt from './Prompt';\r\n\r\nimport { closeModal } from '../actions/modal';\r\n\r\nimport '../../less/Layout.less';\r\nimport '../../less/Joyride.less';\r\n\r\nconst hostname = window.location.hostname;\r\nconst subdomain = hostname.split('.')[0];\r\n\r\nconst $window = $(window);\r\nlet userIsNotDefined = true;\r\n\r\n@connect(({ modal, prompt, user }) => ({ modal, prompt, user }))\r\nexport default class Layout extends Component {\r\n\r\n  constructor({}) {\r\n    super(...arguments);\r\n    const globalError = null;\r\n    const globalErrorExpanded = false;\r\n    const joyrideOverlay = true;\r\n    const joyrideType = 'continuous';\r\n    const ready = false;\r\n    const steps = [];\r\n    this.state = { globalError, globalErrorExpanded, joyrideOverlay, joyrideType, ready, steps };\r\n  }\r\n\r\n  componentDidMount() {\r\n    $window[0].onerror = this.onErrorConfirmDialog.bind(this);\r\n\r\n    setTimeout(() => {\r\n      this.setState({\r\n        ready: true\r\n      });\r\n    }, 1000);\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    $window.off('resize');\r\n  }\r\n\r\n  componentDidUpdate(prevProps, prevState) {\r\n    if (!prevState.ready && this.state.ready) {\r\n      this.refs.joyride.start();\r\n    }\r\n\r\n  }\r\n\r\n  addSteps(steps) {\r\n    let joyride = this.refs.joyride;\r\n\r\n    if (!Array.isArray(steps)) {\r\n      steps = [steps];\r\n    }\r\n\r\n    if (!steps.length) {\r\n      return false;\r\n    }\r\n\r\n    this.setState(function(currentState) {\r\n      currentState.steps = currentState.steps.concat(joyride.parseSteps(steps));\r\n      return currentState;\r\n    });\r\n  }\r\n\r\n  addTooltip(data) {\r\n    this.refs.joyride.addTooltip(data);\r\n  }\r\n\r\n  onErrorConfirmDialog(message, file, line, col, error) {\r\n    const globalError = { message, file, line, col, error };\r\n    this.setState({ globalError });\r\n  }\r\n\r\n  onClickLayout(event) {\r\n    const { open } = this.props.modal;\r\n    // close modal if click happens outside of it\r\n    if (open) {\r\n      const modalNode = ReactDOM.findDOMNode(this.refs.modal);\r\n      if (!$.contains(modalNode, event.target)) {\r\n        const { dispatch } = this.props;\r\n        dispatch(closeModal());\r\n      }\r\n    }\r\n  }\r\n\r\n  onClickToggleStackTrace() {\r\n    const globalErrorExpanded = !this.state.globalErrorExpanded;\r\n    this.setState({ globalErrorExpanded });\r\n  }\r\n\r\n  onClickRefreshPage() {\r\n    document.location.reload(true);\r\n  }\r\n\r\n  onClickIgnoreError() {\r\n    const globalError = null;\r\n    const globalErrorExpanded = false;\r\n    this.setState({ globalError, globalErrorExpanded });\r\n  }\r\n\r\n  render() {\r\n    const { user } = this.props;\r\n    if (!user) {\r\n      return null;\r\n    }\r\n\r\n    return (\r\n      <div>\r\n        {this.renderWalkthrough()}\r\n        <section className=\"Layout container\"\r\n                 onClick={this.onClickLayout.bind(this)}>\r\n          {this.renderPrimaryLayout()}\r\n        </section>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderPrimaryLayout() {\r\n    const { children } = this.props;\r\n    return (<PrimaryLayout addSteps={this.addSteps.bind(this)}>{children}</PrimaryLayout>);\r\n  }\r\n\r\n  renderWalkthrough() {\r\n    const state = this.state;\r\n\r\n    if (state.ready) {\r\n      return (\r\n        <Joyride\r\n          ref=\"joyride\"\r\n          debug={false}\r\n          steps={state.steps}\r\n          type={state.joyrideType}\r\n          locale={{\r\n              back: (<span>Back</span>),\r\n              close: (<span>Close</span>),\r\n              last: (<span>Last</span>),\r\n              next: (<span>Next</span>),\r\n              skip: (<span>Skip</span>)\r\n            }}\r\n          showSkipButton={true}\r\n          showStepsProgress={true}\r\n          showOverlay={state.joyrideOverlay}\r\n          callback={() => {}}/>\r\n      );\r\n    } else {\r\n      return null;\r\n    }\r\n  }\r\n\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/gilbarbara/react-joyride/issues/comments/234528165","html_url":"https://github.com/gilbarbara/react-joyride/issues/102#issuecomment-234528165","issue_url":"https://api.github.com/repos/gilbarbara/react-joyride/issues/102","id":234528165,"user":{"login":"gilbarbara","id":31954,"avatar_url":"https://avatars.githubusercontent.com/u/31954?v=3","gravatar_id":"","url":"https://api.github.com/users/gilbarbara","html_url":"https://github.com/gilbarbara","followers_url":"https://api.github.com/users/gilbarbara/followers","following_url":"https://api.github.com/users/gilbarbara/following{/other_user}","gists_url":"https://api.github.com/users/gilbarbara/gists{/gist_id}","starred_url":"https://api.github.com/users/gilbarbara/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gilbarbara/subscriptions","organizations_url":"https://api.github.com/users/gilbarbara/orgs","repos_url":"https://api.github.com/users/gilbarbara/repos","events_url":"https://api.github.com/users/gilbarbara/events{/privacy}","received_events_url":"https://api.github.com/users/gilbarbara/received_events","type":"User","site_admin":false},"created_at":"2016-07-22T12:14:13Z","updated_at":"2016-07-22T12:14:13Z","body":"It looks like an implementation error on your code..\r\nMaybe because you are binding the `addStep` method before the Joyride component is mounted.\r\nAnyway you don't need a `ready` state, it was just something I've used in the demo."}}
{"actor":{"display_login":"gilbarbara"}}