feat(blog): fixing re-render and nesting on hightlight component, als…

…o added throttle to the main scroll listener

src/app/components/app/index.js

@@ -5,7 +5,7 @@ import React from 'react';
 import Meta from "react-helmet";
 import TransitionManager from 'react-transition-manager';
 import classnames from 'classnames';
-import { get } from 'lodash';
+import { get, throttle } from 'lodash';
 import find from 'lodash/collection/find';
 import includes from 'lodash/collection/includes';
 import Flux from 'app/flux';
@@ -91,7 +91,7 @@ const App = React.createClass({
     this.getViewportDimensions();
 
     /* Get dimensions of viewport to calculate mousePosition and scrollPosition (for example) */
-    window.addEventListener('scroll', this.getDocumentScrollPosition);
+    window.addEventListener('scroll', throttle(() => this.getDocumentScrollPosition(), 240));
     /* Get new dimensions when device orientationchange etc */
     window.addEventListener('resize', this.getViewportDimensions);
 

src/app/components/post/index.js

@@ -20,6 +20,9 @@ import ScrollWrapper from 'app/components/scroll-wrapper';
 
 const PagePost = React.createClass({
   mixins: [getScrollTrackerMixin('post')],
+  shouldComponentUpdate(nextProps, nextState) {
+    return !this.props.loaded;
+  },
   render() {
     const { post, footer, studios, currentPage, documentScrollPosition, viewportDimensions } = this.props;
     const category = get(post, '_embedded.wp:term.0.0', []);

src/app/lib/module-renderer.js

@@ -112,10 +112,7 @@ function renderVideo(moduleData, index, options) {
 }
 
 function renderCode(moduleData, index, options) {
-    var code = get(moduleData, 'attr.body.value').replace(/(?:\r\n|\r|\n)/g, '<br/>').replace(/ /g, '&nbsp;').replace('Button', ' Button ');
-    return (
-        <code className="hljs pf" dangerouslySetInnerHTML={{ __html: code }}></code>
-    );
+    return <CodeHighlighter code={get(moduleData, 'attr.body.value')} key={`logitem-${index}-${Date.now()}`} />
 }
 
 function renderModules(options) {