New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Properties don't update #14

Closed
maerzhase opened this Issue Oct 21, 2015 · 3 comments

Comments

Projects
None yet
3 participants
@maerzhase

maerzhase commented Oct 21, 2015

When you update the Properties of the component the new properties are not loaded. The result is that you only have one diqus thread until you unmount and remount the component.

is this behaviour intended? if so i will create my own fork of this component.
otherwise please implement a behaviour for ReactLifecycle componentDidUpdate()

@mzabriskie

This comment has been minimized.

Show comment
Hide comment
@mzabriskie

mzabriskie Oct 22, 2015

Owner

I am working on a release that will address this.

Owner

mzabriskie commented Oct 22, 2015

I am working on a release that will address this.

@mzabriskie mzabriskie closed this Oct 22, 2015

@maerzhase

This comment has been minimized.

Show comment
Hide comment
@maerzhase

maerzhase Mar 24, 2016

i am still experiencing the same issue with your current release – so i am still working with my own version of your component. do you want me to make a pullrequest for that issue!?

maerzhase commented Mar 24, 2016

i am still experiencing the same issue with your current release – so i am still working with my own version of your component. do you want me to make a pullrequest for that issue!?

@konsumer

This comment has been minimized.

Show comment
Hide comment
@konsumer

konsumer Jul 21, 2016

I also had this issue. 2 problems: the props weren't being propagated to state, and the shortname comes from the original js tag, so if that changes, it won't update. My code also resolves #25.

import React from 'react'

export default class Disqus extends React.Component {
  constructor (props) {
    super(props)
    this.state = props
  }

  componentWillReceiveProps (nextProps) {
    this.setState(nextProps)
  }

  componentWillMount () {
    const component = this
    if (typeof DISQUS !== 'undefined'){
      DISQUS.reset({
        reload: true,
        config: function () {  
          this.page.identifier = component.state.identifier
          this.page.title = component.state.title
          this.page.url = component.state.url
          this.page.category_id = component.state.category_id
          this.callbacks.onNewComment = component.state.onNewComment
        }
      })
    }else{
      if (typeof document != 'undefined') {
        const script = document.createElement('script')
        script.src = `//${component.state.shortname}.disqus.com/embed.js`
        script.async = true
        document.body.appendChild(script)
      }
    }
  }

  render () {
    let {shortname, identifier, title, url, category_id, onNewComment, ...props} = this.props
    return (<div id="disqus_thread" {...props}></div>)
  }
}

Disqus.propTypes = {
  /**
   * `shortname` tells the Disqus service your forum's shortname,
   * which is the unique identifier for your website as registered
   * on Disqus. If undefined , the Disqus embed will not load.
   */
  shortname: React.PropTypes.string.isRequired,

  /**
   * `identifier` tells the Disqus service how to identify the
   * current page. When the Disqus embed is loaded, the identifier
   * is used to look up the correct thread. If disqus_identifier
   * is undefined, the page's URL will be used. The URL can be
   * unreliable, such as when renaming an article slug or changing
   * domains, so we recommend using your own unique way of
   * identifying a thread.
   */
  identifier: React.PropTypes.string,

  /**
   * `title` tells the Disqus service the title of the current page.
   * This is used when creating the thread on Disqus for the first time.
   * If undefined, Disqus will use the <title> attribute of the page.
   * If that attribute could not be used, Disqus will use the URL of the page.
   */
  title: React.PropTypes.string,

  /**
   * `url` tells the Disqus service the URL of the current page.
   * If undefined, Disqus will take the global.location.href.
   * This URL is used to look up or create a thread if disqus_identifier
   * is undefined. In addition, this URL is always saved when a thread is
   * being created so that Disqus knows what page a thread belongs to.
   */
  url: React.PropTypes.string,

  /**
   * `category_id` tells the Disqus service the category to be used for
   * the current page. This is used when creating the thread on Disqus
   * for the first time.
   */
  category_id: React.PropTypes.string,

  /**
   * `onNewComment` function accepts one parameter `comment` which is a
   * JavaScript object with comment `id` and `text`. This allows you to track
   * user comments and replies and run a script after a comment is posted.
   */
  onNewComment: React.PropTypes.func
}

konsumer commented Jul 21, 2016

I also had this issue. 2 problems: the props weren't being propagated to state, and the shortname comes from the original js tag, so if that changes, it won't update. My code also resolves #25.

import React from 'react'

export default class Disqus extends React.Component {
  constructor (props) {
    super(props)
    this.state = props
  }

  componentWillReceiveProps (nextProps) {
    this.setState(nextProps)
  }

  componentWillMount () {
    const component = this
    if (typeof DISQUS !== 'undefined'){
      DISQUS.reset({
        reload: true,
        config: function () {  
          this.page.identifier = component.state.identifier
          this.page.title = component.state.title
          this.page.url = component.state.url
          this.page.category_id = component.state.category_id
          this.callbacks.onNewComment = component.state.onNewComment
        }
      })
    }else{
      if (typeof document != 'undefined') {
        const script = document.createElement('script')
        script.src = `//${component.state.shortname}.disqus.com/embed.js`
        script.async = true
        document.body.appendChild(script)
      }
    }
  }

  render () {
    let {shortname, identifier, title, url, category_id, onNewComment, ...props} = this.props
    return (<div id="disqus_thread" {...props}></div>)
  }
}

Disqus.propTypes = {
  /**
   * `shortname` tells the Disqus service your forum's shortname,
   * which is the unique identifier for your website as registered
   * on Disqus. If undefined , the Disqus embed will not load.
   */
  shortname: React.PropTypes.string.isRequired,

  /**
   * `identifier` tells the Disqus service how to identify the
   * current page. When the Disqus embed is loaded, the identifier
   * is used to look up the correct thread. If disqus_identifier
   * is undefined, the page's URL will be used. The URL can be
   * unreliable, such as when renaming an article slug or changing
   * domains, so we recommend using your own unique way of
   * identifying a thread.
   */
  identifier: React.PropTypes.string,

  /**
   * `title` tells the Disqus service the title of the current page.
   * This is used when creating the thread on Disqus for the first time.
   * If undefined, Disqus will use the <title> attribute of the page.
   * If that attribute could not be used, Disqus will use the URL of the page.
   */
  title: React.PropTypes.string,

  /**
   * `url` tells the Disqus service the URL of the current page.
   * If undefined, Disqus will take the global.location.href.
   * This URL is used to look up or create a thread if disqus_identifier
   * is undefined. In addition, this URL is always saved when a thread is
   * being created so that Disqus knows what page a thread belongs to.
   */
  url: React.PropTypes.string,

  /**
   * `category_id` tells the Disqus service the category to be used for
   * the current page. This is used when creating the thread on Disqus
   * for the first time.
   */
  category_id: React.PropTypes.string,

  /**
   * `onNewComment` function accepts one parameter `comment` which is a
   * JavaScript object with comment `id` and `text`. This allows you to track
   * user comments and replies and run a script after a comment is posted.
   */
  onNewComment: React.PropTypes.func
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment