Wrap window references for SSR (#531)

* add global window * wrap window references * import get, fix linting
hackoregon · Jun 8, 2019 · 2ec50a3 · 2ec50a3
1 parent e06b8c7
commit 2ec50a3
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 22 deletions.
diff --git a/packages/component-library/package.json b/packages/component-library/package.json
@@ -13,7 +13,7 @@
     "test:watch": "yarn run test -- -w",
     "lint": "eslint src stories",
     "storybook": "node scripts/storybook.js",
-    "start": "node scripts/start.js"        
+    "start": "node scripts/start.js"
   },
   "author": "David Daniel <[email protected]> (http://davidedaniel.github.io)",
   "license": "MIT",
@@ -84,6 +84,7 @@
     "d3-shape": "^1.0.6",
     "d3-time-format": "^2.1.3",
     "deck.gl": "^6.4.7",
+    "global": "^4.3.2",
     "emotion": "^10.0.9",
     "lodash": "^4.17.11",
     "mapbox-gl": "^0.53.1",

diff --git a/packages/component-library/src/CivicSandboxMap/CivicSandboxTooltip.js b/packages/component-library/src/CivicSandboxMap/CivicSandboxTooltip.js
@@ -1,6 +1,8 @@
 import React from "react";
 import { string, number, arrayOf, oneOfType, shape } from "prop-types";
 import { css } from "emotion";
+import { get } from "lodash";
+import window from "global/window";
 
 const tooltip = css`
   font-family: Helvetica, Arial, sans-serif;
@@ -21,14 +23,16 @@ const MapTooltip = props => {
   const { y } = tooltipData;
 
   const xPosition =
-    x < window.innerWidth * 0.66 ? x : x - window.innerWidth * 0.1;
+    x < get(window, "innerWidth", 1000) * 0.66
+      ? x
+      : x - get(window, "innerWidth", 1000) * 0.1;
   const yPostition = y < 375 ? y : y - 50;
 
   const tooltipContent = tooltipData.content.map(obj => {
     const value = obj.value ? obj.value : "No Data Available";
     return (
       <div key={`${obj.name}-${value}`}>
-        {obj.name + ": " + value.toLocaleString()}
+        {`${obj.name}: ${value.toLocaleString()}`}
       </div>
     );
   });

diff --git a/packages/component-library/src/CivicStoryCard/CivicStoryFooter.js b/packages/component-library/src/CivicStoryCard/CivicStoryFooter.js
@@ -2,6 +2,8 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import copy from "copy-to-clipboard";
 import { css } from "emotion";
+import { get } from "lodash";
+import window from "global/window";
 import CivicStoryLink from "./CivicStoryLink";
 import { ICONS } from "../styleConstants";
 
@@ -53,7 +55,7 @@ export default class StoryFooter extends Component {
   handleCopy = () => {
     const { slug } = this.props;
     // NOTE: we need to make sure this will work on all browsers
-    copy(`${window.location.origin}/cards/${slug}`);
+    copy(`${get(window, "location.origin", "")}/cards/${slug}`);
     this.switchState(MS_TO_SWITCH_TEXT);
     this.setState({ copied: true });
   };
@@ -66,7 +68,8 @@ export default class StoryFooter extends Component {
     const shareTxt = copied ? "Copied!" : "Share"; // if copied, show Link copied, otherwise, show Share card
     const shareIcon = copied ? ICONS.check : ICONS.link;
     const routeOrUndefined =
-      `${window.location.origin}/cards/${slug}` === window.location.href
+      `${get(window, "location.origin", "")}/cards/${slug}` ===
+      get(window, "location.href", "")
         ? undefined
         : `/cards/${slug}`;
     const issue = `https://github.com/hackoregon/civic/issues/new?labels=type%3Astory-card&template=story-card-improve.md&title=[FEEDBACK] ${slug}`;

diff --git a/packages/component-library/src/HexOverlay/HexOverlay.js b/packages/component-library/src/HexOverlay/HexOverlay.js
@@ -4,6 +4,8 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import DeckGL, { HexagonLayer } from "deck.gl";
+import window from "global/window";
+import { has } from "lodash";
 
 const elevationScale = { min: 1, max: 50 };
 
@@ -38,7 +40,8 @@ class HexOverlay extends Component {
     this._stopAnimate();
 
     // wait 1.5 secs to start animation so that all data are loaded
-    this.startAnimationTimer = window.setTimeout(this._startAnimate, 1500);
+    this.startAnimationTimer =
+      has(window, "setTimeout") && window.setTimeout(this._startAnimate, 1500);
   }
 
   _animateHeight() {
@@ -50,12 +53,14 @@ class HexOverlay extends Component {
   }
 
   _startAnimate() {
-    this.intervalTimer = window.setInterval(this._animateHeight, 20);
+    this.intervalTimer =
+      has(window, "setInterval") && window.setInterval(this._animateHeight, 20);
   }
 
   _stopAnimate() {
-    window.clearTimeout(this.startAnimationTimer);
-    window.clearTimeout(this.intervalTimer);
+    has(window, "clearTimeout") &&
+      window.clearTimeout(this.startAnimationTimer);
+    has(window, "clearTimeout") && window.clearTimeout(this.intervalTimer);
   }
 
   render() {

diff --git a/packages/component-library/src/LandingPage/CanvasParticles.js b/packages/component-library/src/LandingPage/CanvasParticles.js
@@ -1,8 +1,9 @@
 /* Not currently used, updated and moved to 2018 package */
-/* eslint-disable */
 
 import React from "react";
 import { css } from "emotion";
+import window from "global/window";
+import { get, has } from "lodash";
 
 const canvasStyles = css`
   position: fixed;
@@ -12,21 +13,21 @@ class CanvasParticles extends React.Component {
   componentDidMount() {
     window.requestAnimFrame = (function() {
       return (
-        window.requestAnimationFrame ||
-        window.webkitRequestAnimationFrame ||
-        window.mozRequestAnimationFrame ||
-        window.oRequestAnimationFrame ||
-        window.msRequestAnimationFrame ||
+        get(window, "requestAnimationFrame") ||
+        get(window, "webkitRequestAnimationFrame") ||
+        get(window, "mozRequestAnimationFrame") ||
+        get(window, "oRequestAnimationFrame") ||
+        get(window, "msRequestAnimationFrame") ||
         function(callback) {
-          window.setTimeout(callback, 1000 / 60);
+          has(window, "setTimeout") && window.setTimeout(callback, 1000 / 60);
         }
       );
     })();
     const { canvas } = this.refs;
     const ctx = canvas.getContext("2d");
     const img = this.refs.image;
-    const W = window.innerWidth;
-    const H = window.innerHeight;
+    const W = get(window, "innerWidth", 1000);
+    const H = get(window, "innerHeight", 1000);
     canvas.width = W * 1.2;
     canvas.height = H * 1.2;
     const particleCount = 40;

diff --git a/packages/component-library/src/LandingPage/LandingPage.js b/packages/component-library/src/LandingPage/LandingPage.js
@@ -3,6 +3,7 @@
 
 import React from "react";
 import { cx, css } from "emotion";
+import window from "global/window";
 
 import { Header, Footer } from "@hackoregon/component-library";
 import CanvasParticles from "./CanvasParticles";

diff --git a/packages/component-library/src/MapTooltip/MapTooltip.js b/packages/component-library/src/MapTooltip/MapTooltip.js
@@ -1,6 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { css } from "emotion";
+import { get } from "lodash";
+import window from "global/window";
 
 const tooltip = css`
   font-family: Helvetica, Arial, sans-serif;
@@ -28,7 +30,9 @@ const MapTooltip = props => {
   } = props;
 
   const xPosition =
-    x < window.innerWidth * 0.66 ? x : x - window.innerWidth * 0.1;
+    x < get(window, "innerWidth", 1000) * 0.66
+      ? x
+      : x - get(window, "innerWidth", 1000) * 0.1;
   const yPostition = y < 375 ? y : y - 50;
 
   return (

diff --git a/packages/component-library/src/PullQuote/PullQuote.js b/packages/component-library/src/PullQuote/PullQuote.js
@@ -2,6 +2,8 @@ import PropTypes from "prop-types";
 import React from "react";
 import { css } from "emotion";
 import { TwitterShareButton, TwitterIcon } from "react-share";
+import { get } from "lodash";
+import window from "global/window";
 
 const quoteClass = css`
   font-family: "Merriweather", serif;
@@ -30,7 +32,10 @@ const wrapperClass = css`
 
 const PullQuote = ({ quoteText, quoteAttribution, url }) => (
   <div className={wrapperClass}>
-    <TwitterShareButton url={url || window.location.href} title={quoteText}>
+    <TwitterShareButton
+      url={url || get(window, "location.href", "")}
+      title={quoteText}
+    >
       <blockquote className={quoteClass}>
         &#8220;
         {quoteText}

diff --git a/packages/component-library/src/Share/ShareCollection.js b/packages/component-library/src/Share/ShareCollection.js
@@ -4,6 +4,9 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import copy from "copy-to-clipboard";
+import { get } from "lodash";
+import window from "global/window";
+
 import StoryLink from "../StoryCard/StoryLink";
 import { ICONS } from "../styleConstants";
 
@@ -29,7 +32,7 @@ export default class ShareCollection extends Component {
 
   handleCopy = () => {
     // NOTE: we need to make sure this will work on all browsers
-    copy(`${window.location.href}`);
+    copy(`${get(window, "location.href", "")}`);
     this.switchState(MS_TO_SWITCH_TEXT);
     this.setState({ copied: true });
   };

diff --git a/packages/component-library/src/StoryCard/StoryFooter.js b/packages/component-library/src/StoryCard/StoryFooter.js
@@ -5,6 +5,9 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import copy from "copy-to-clipboard";
 import { css } from "emotion";
+import { get } from "lodash";
+import window from "global/window";
+
 import StoryLink from "./StoryLink";
 import { ICONS } from "../styleConstants";
 
@@ -43,7 +46,7 @@ export default class StoryFooter extends Component {
   handleCopy = () => {
     const { collectionId, cardId } = this.props;
     // NOTE: we need to make sure this will work on all browsers
-    copy(`${window.location.origin}/${collectionId}/${cardId}`);
+    copy(`${get(window, "location.href", "")}/${collectionId}/${cardId}`);
     this.switchState(MS_TO_SWITCH_TEXT);
     this.setState({ copied: true });
   };