Skip to content
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.

Sign up for GitHub

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

Wrap window references for SSR #531

Merged
merged 4 commits into from
Jun 8, 2019
Merged

Wrap window references for SSR #531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dbd5fef
add global window
jaronheard May 14, 2019
ea06820
wrap window references
jaronheard May 14, 2019
b191e03
Merge branch 'master' into wrap-component-library
jaronheard May 23, 2019
40fc0cd
import get, fix linting
jaronheard May 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/component-library/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
8 changes: 6 additions & 2 deletions packages/component-library/src/CivicSandboxMap/CivicSandboxTooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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
jaronheard marked this conversation as resolved.
Show resolved Hide resolved
? 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>
);
});
Expand Down
7 changes: 5 additions & 2 deletions packages/component-library/src/CivicStoryCard/CivicStoryFooter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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 });
};
Expand All @@ -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}`;
Expand Down
13 changes: 9 additions & 4 deletions packages/component-library/src/HexOverlay/HexOverlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 };

Expand Down Expand Up @@ -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() {
Expand All @@ -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() {
Expand Down
19 changes: 10 additions & 9 deletions packages/component-library/src/LandingPage/CanvasParticles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -12,21 +13,21 @@ class CanvasParticles extends React.Component {
componentDidMount() {
window.requestAnimFrame = (function() {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you not need to do a check that window has requestAnimFrame?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this is setting a property on window, which we've imported from global, rather than getting a property, it should be fine

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;
Expand Down
1 change: 1 addition & 0 deletions packages/component-library/src/LandingPage/LandingPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
6 changes: 5 additions & 1 deletion packages/component-library/src/MapTooltip/MapTooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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 (
Expand Down
7 changes: 6 additions & 1 deletion packages/component-library/src/PullQuote/PullQuote.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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}
Expand Down
5 changes: 4 additions & 1 deletion packages/component-library/src/Share/ShareCollection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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", "")}`);
jaronheard marked this conversation as resolved.
Show resolved Hide resolved
this.switchState(MS_TO_SWITCH_TEXT);
this.setState({ copied: true });
};
Expand Down
5 changes: 4 additions & 1 deletion packages/component-library/src/StoryCard/StoryFooter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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 });
};
Expand Down