4

Needing a solution to a problem that I have asked in many ways without resolve.

I have external scripts from TripAdvisor that are being mounted in a component as componentDidMount. Also shouldComponentUpdate() as false to avoid future eventListeners also mounted by componentDidMount in the layouts/index.js from affecting the TripAdvisor content to disappear due to re-render of the DOM.

componentDidMount () {
    const tripadvisorLeft = document.createElement("script");
    tripadvisorLeft.src = "https://www.jscache.com/wejs?wtype=selfserveprop&uniq=789&locationId=10467767&lang=en_AU&rating=true&nreviews=0&writereviewlink=true&popIdx=true&iswide=true&border=false&display_version=2";
    document.body.appendChild(tripadvisorLeft);

    const tripadvisorRight = document.createElement("script");
    tripadvisorRight.src = "https://www.jscache.com/wejs?wtype=selfserveprop&uniq=998&locationId=10467767&lang=en_AU&rating=false&nreviews=4&writereviewlink=false&popIdx=false&iswide=true&border=false&display_version=2";
    document.body.appendChild(tripadvisorRight);
}

shouldComponentUpdate() {
    return false;
}

The problem is that when using Link by either react-route or gatsby-link to and from the page that contains the component the content from TripAdvisor is not rendered.

If I refresh the browser on the page - the content is available. See here - example

How can I unmount, forceUpdate or any other solution to getting these scripts re-render on route change?

Full source code can be found here.

Darren
  • 2,176
  • 9
  • 42
  • 98
  • isn't it a repost of [this question](https://stackoverflow.com/questions/49893481/remount-componentdidmount-by-path-name) ? – Nenu Apr 30 '18 at 11:25
  • Yes that is correct. I had not received the right answer and so decided to change the question slightly. Obviously it worked as you have answered with a solution that works. if you want to leave remove your answer from her and put it o the other I will accept and you'll get the bounty. I'l then remove this question. – Darren Apr 30 '18 at 13:41
  • yeah you are right. I'll leave my answer here, maybe it will give someone an idea for a simple and better solution ;) – Nenu Apr 30 '18 at 13:53

1 Answers1

1

It appears that the TripAdvisor script is creating a function called injectselfserveprop***. (where *** are random numbers).

This function is responsible to display the HTML code of the TripAdvisor widget.

However, for obscure reason this function is not called when you reach the Component with Link.

This is one solution for your issue, and might not be the best:

1) Define your script tags in src/layouts/index.js

Because the TripAdvisor' script creates these functions, we have to define the scripts before rendering the TripAdvisor component.

<Helmet>
  // ...
  <script src={`https://www.jscache.com/wejs?wtype=selfserveprop&uniq=789&locationId=10467767&lang=en_AU&rating=true&nreviews=0&writereviewlink=true&popIdx=true&iswide=true&border=false&display_version=2`}/>
  <script src={`https://www.jscache.com/wejs?wtype=selfserveprop&uniq=998&locationId=10467767&lang=en_AU&rating=false&nreviews=4&writereviewlink=false&popIdx=false&iswide=true&border=false&display_version=2`}/>
</Helmet>

2) call the injectselfserveprop functions on TripAdvisor componentDidMount()

componentDidMount() {
  // find any function that begins with 'injectselfserveprop'
  // and execute it.
  Object.keys(window).forEach((key) => {
    if (key.match(/^injectselfserveprop[0-9]+$/)) {
      window[key]();
    }
  });
}

I have tried this and it works for me.

Nenu
  • 2,637
  • 1
  • 18
  • 24
  • Thank you for you answer. This has worked for me. However it does open another question. If you open the URL https://gracious-allen-d5eb54.netlify.com/strawberry-patch/reviews the script is presenting the data, however if you load any page prior, such as https://gracious-allen-d5eb54.netlify.com/strawberry-patch/rates-packages the `/reviews` path does not load the script on first entry. – Darren Apr 30 '18 at 13:52
  • Yes that's my little "hacks" on the 1st part of my anwser: define the – Nenu Apr 30 '18 at 13:58
  • Unfortunately, I cannot have these scripts loading from `layouts/index.js`. Reason is that there are multiple properties, each with their own `locationID` I have put back to `templates/properties/reviews.js` of which doesn't make any difference but is at the root of the `createPages` – Darren Apr 30 '18 at 14:15
  • Oh ok I understand. What if you put the scripts on `templates/properties.js` ? You need to find the common ancestors where the – Nenu Apr 30 '18 at 14:58
  • Thank you. Unfortunately, I get the same response via your method suggested. I am going to look into perhaps other methods of fetching the data. I know that TripAdvisor have a content API so I will look into accessing this. Thank you for your help and I have accepted your answer as it is correct to the issue I originally outlined. – Darren Apr 30 '18 at 15:09
  • Alright ! It looks like an issue is always hiding in solutions... Thanks for the accepted answer and good luck with that :) – Nenu Apr 30 '18 at 15:12