Merge pull request #51 from nfl/chore/addPrettier

chore(Upgrade eslint, add prettier): Upgrade eslint packages, add prettier, run prettier
nfl · Sep 18, 2017 · 17c8b89 · 17c8b89
2 parents b187381 + e46925e
commit 17c8b89
Show file tree

Hide file tree

Showing 33 changed files with 1,155 additions and 792 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -6,8 +6,22 @@
     ],
     "plugins": [
         "import",
+        "prettier",
         "react"
     ],
+    "rules": {
+        "prettier/prettier": ["error", {
+            "printWidth": 80,
+            "tabWidth": 4,
+            "singleQuote": false,
+            "trailingComma": "none",
+            "bracketSpacing": false,
+            "semi": true,
+            "useTabs": false,
+            "parser": "babylon",
+            "jsxBracketSameLine": false
+        }]
+    },
     "env": {
         "browser": true,
         "mocha": true

diff --git a/examples/apps/infinite-scrolling/app.js b/examples/apps/infinite-scrolling/app.js
@@ -16,8 +16,8 @@ class App extends Component {
     state = {
         page: 1,
         size: [728, 90]
-    }
-    time = 0
+    };
+    time = 0;
     componentDidMount() {
         window.addEventListener("scroll", this.onScroll);
         window.addEventListener("resize", this.onScroll);
@@ -47,7 +47,7 @@ class App extends Component {
                 page: ++this.state.page
             });
         }
-    })
+    });
     startTimer() {
         this.stopTimer();
         this.timer = setInterval(() => {
@@ -68,7 +68,7 @@ class App extends Component {
         const targeting = {
             test: "infinitescroll"
         };
-        while (contentCnt < page * 3) { // eslint-disable-line no-unmodified-loop-condition
+        while (contentCnt < page * 3) {
             contents.push(
                 <Content
                     index={contentCnt % 3}
@@ -92,9 +92,7 @@ class App extends Component {
                         targeting={targeting}
                     />
                 </div>
-                <div style={styles.main}>
-                    {contents}
-                </div>
+                <div style={styles.main}>{contents}</div>
             </div>
         );
     }

diff --git a/examples/apps/infinite-scrolling/content.js b/examples/apps/infinite-scrolling/content.js
diff --git a/examples/apps/infinite-scrolling/main.js b/examples/apps/infinite-scrolling/main.js
@@ -2,6 +2,4 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./app";
 
-ReactDOM.render((
-    <App />
-), document.getElementById("example"));
+ReactDOM.render(<App />, document.getElementById("example"));
diff --git a/examples/apps/interstitial/app.js b/examples/apps/interstitial/app.js
@@ -6,28 +6,25 @@ import styles from "./styles";
 class App extends Component {
     state = {
         adUnitPath: "/4595/nfl.test.open/page/A"
-    }
+    };
 
     onClick = () => {
         this.setState({
-            adUnitPath: this.state.adUnitPath.indexOf("B") > -1 ? "/4595/nfl.test.open/page/A" : "/4595/nfl.test.open/page/B"
+            adUnitPath:
+                this.state.adUnitPath.indexOf("B") > -1
+                    ? "/4595/nfl.test.open/page/A"
+                    : "/4595/nfl.test.open/page/B"
         });
-    }
+    };
 
     render() {
         const {adUnitPath} = this.state;
         return (
             <div>
-                <button
-                    style={styles.button}
-                    onClick={this.onClick}
-                >
+                <button style={styles.button} onClick={this.onClick}>
                     Change ad unit path (navigate to different page)
                 </button>
-                <Gpt
-                    adUnitPath={adUnitPath}
-                    outOfPage={true}
-                />
+                <Gpt adUnitPath={adUnitPath} outOfPage={true} />
             </div>
         );
     }

diff --git a/examples/apps/interstitial/main.js b/examples/apps/interstitial/main.js
@@ -2,6 +2,4 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./app";
 
-ReactDOM.render((
-    <App />
-), document.getElementById("example"));
+ReactDOM.render(<App />, document.getElementById("example"));
diff --git a/examples/apps/lazy-render/app.js b/examples/apps/lazy-render/app.js
@@ -10,14 +10,11 @@ Gpt.configure({viewableThreshold: 0});
 class App extends Component {
     onClick = () => {
         Gpt.render();
-    }
+    };
     render() {
         return (
             <div>
-                <button
-                    style={styles.button}
-                    onClick={this.onClick}
-                >
+                <button style={styles.button} onClick={this.onClick}>
                     Re-render
                 </button>
                 <div style={styles.hWrap}>

diff --git a/examples/apps/lazy-render/main.js b/examples/apps/lazy-render/main.js
@@ -2,6 +2,4 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./app";
 
-ReactDOM.render((
-    <App />
-), document.getElementById("example"));
+ReactDOM.render(<App />, document.getElementById("example"));
diff --git a/examples/apps/log.js b/examples/apps/log.js
@@ -11,9 +11,18 @@ GPT.on(Events.SLOT_RENDER_ENDED, event => {
     }, {});
 
     if (!event.isEmpty && event.size) {
-        console.log(`ad creative '${event.creativeId}' is rendered to slot '${divId}' of size '${event.size[0]}x${event.size[1]}'`, event, targeting);
+        console.log(
+            `ad creative '${event.creativeId}' is rendered to slot '${divId}' of size '${event
+                .size[0]}x${event.size[1]}'`,
+            event,
+            targeting
+        );
     } else {
-        console.log(`ad rendered but empty, div id is ${divId}`, event, targeting);
+        console.log(
+            `ad rendered but empty, div id is ${divId}`,
+            event,
+            targeting
+        );
     }
 });
 

diff --git a/examples/apps/responsive/app.js b/examples/apps/responsive/app.js
@@ -1,3 +1,4 @@
+/* eslint-disable indent */
 import React, {Component} from "react";
 import Radium from "radium";
 import {Bling as Gpt} from "react-gpt"; // eslint-disable-line import/no-unresolved
@@ -19,17 +20,20 @@ class App extends Component {
             {viewport: [1050, 200], slot: [1024, 120]}
         ],
         style: styles.adBorder
-    }
+    };
 
-    onClick = (params) => {
+    onClick = params => {
         if (params === "refresh") {
             Gpt.refresh();
             return;
         }
         let newState;
         if (params === "adUnitPath") {
             newState = {
-                adUnitPath: this.state.adUnitPath === "/4595/nfl.test.open" ? "/4595/nfl.test.open/new" : "/4595/nfl.test.open"
+                adUnitPath:
+                    this.state.adUnitPath === "/4595/nfl.test.open"
+                        ? "/4595/nfl.test.open/new"
+                        : "/4595/nfl.test.open"
             };
         } else if (params === "targeting") {
             newState = {
@@ -40,47 +44,38 @@ class App extends Component {
             };
         } else if (params === "size") {
             newState = {
-                sizeMapping: (this.state.sizeMapping[1].slot[1] === 50) ? [
-                    {viewport: [0, 0], slot: [1, 1]},
-                    {viewport: [340, 0], slot: [300, 250]},
-                    {viewport: [750, 200], slot: [728, 90]},
-                    {viewport: [1050, 200], slot: [1024, 120]}
-                ] : [
-                    {viewport: [0, 0], slot: [1, 1]},
-                    {viewport: [340, 0], slot: [320, 50]},
-                    {viewport: [750, 200], slot: [728, 90]},
-                    {viewport: [1050, 200], slot: [1024, 120]}
-                ]
+                sizeMapping:
+                    this.state.sizeMapping[1].slot[1] === 50
+                        ? [
+                              {viewport: [0, 0], slot: [1, 1]},
+                              {viewport: [340, 0], slot: [300, 250]},
+                              {viewport: [750, 200], slot: [728, 90]},
+                              {viewport: [1050, 200], slot: [1024, 120]}
+                          ]
+                        : [
+                              {viewport: [0, 0], slot: [1, 1]},
+                              {viewport: [340, 0], slot: [320, 50]},
+                              {viewport: [750, 200], slot: [728, 90]},
+                              {viewport: [1050, 200], slot: [1024, 120]}
+                          ]
             };
         }
         this.setState(newState);
-    }
+    };
 
     render() {
         return (
             <div>
-                <Button
-                    params="refresh"
-                    onClick={this.onClick}
-                >
+                <Button params="refresh" onClick={this.onClick}>
                     Refresh
                 </Button>
-                <Button
-                    params="adUnitPath"
-                    onClick={this.onClick}
-                >
+                <Button params="adUnitPath" onClick={this.onClick}>
                     Change adUnitPath
                 </Button>
-                <Button
-                    params="targeting"
-                    onClick={this.onClick}
-                >
+                <Button params="targeting" onClick={this.onClick}>
                     Change targeting
                 </Button>
-                <Button
-                    params="size"
-                    onClick={this.onClick}
-                >
+                <Button params="size" onClick={this.onClick}>
                     Change size mapping
                 </Button>
                 <div style={styles.lb}>

diff --git a/examples/apps/responsive/button.js b/examples/apps/responsive/button.js
@@ -6,20 +6,15 @@ export default class Button extends Component {
     static propTypes = {
         children: PropTypes.node,
         onClick: PropTypes.func.isRequired,
-        params: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.object
-        ]).isRequired
-    }
+        params: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+            .isRequired
+    };
     onClick = () => {
         this.props.onClick(this.props.params);
-    }
+    };
     render() {
         return (
-            <button
-                style={styles.button}
-                onClick={this.onClick}
-            >
+            <button style={styles.button} onClick={this.onClick}>
                 {this.props.children}
             </button>
         );

diff --git a/examples/apps/responsive/main.js b/examples/apps/responsive/main.js
@@ -2,6 +2,4 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./app";
 
-ReactDOM.render((
-    <App />
-), document.getElementById("example"));
+ReactDOM.render(<App />, document.getElementById("example"));
diff --git a/examples/apps/routing/app.js b/examples/apps/routing/app.js
@@ -16,7 +16,7 @@ class App extends Component {
         location: PropTypes.object,
         history: PropTypes.object,
         children: PropTypes.node
-    }
+    };
 
     createHref(path) {
         return `${window.location.origin}${window.location.pathname}#${path}`;
@@ -33,9 +33,19 @@ class App extends Component {
         return (
             <div>
                 <ul>
-                    <li><a href={this.createHref("/Travel/Europe")}>Home</a></li>
-                    <li><a href={this.createHref("/Travel/Europe/France")}>France</a></li>
-                    <li><a href={this.createHref("/Travel/Europe/Spain")}>Spain</a></li>
+                    <li>
+                        <a href={this.createHref("/Travel/Europe")}>Home</a>
+                    </li>
+                    <li>
+                        <a href={this.createHref("/Travel/Europe/France")}>
+                            France
+                        </a>
+                    </li>
+                    <li>
+                        <a href={this.createHref("/Travel/Europe/Spain")}>
+                            Spain
+                        </a>
+                    </li>
                 </ul>
                 <div style={styles.topAd}>
                     <Gpt
@@ -51,19 +61,14 @@ class App extends Component {
 }
 
 class AppContainer extends Component {
-    routes = { // eslint-disable-line react/sort-comp
-        "/Travel/Europe": {component: Home},
-        "/Travel/Europe/France": {component: Page, params: {id: "France"}},
-        "/Travel/Europe/Spain": {component: Page, params: {id: "Spain"}}
-    }
-
     state = {
         routeComponent: this.routes["/Travel/Europe"].component
-    }
+    };
 
     componentWillMount() {
         this.unlisten = this.history.listen(location => {
-            const route = this.routes[location.pathname] || this.routes["/Travel/Europe"];
+            const route =
+                this.routes[location.pathname] || this.routes["/Travel/Europe"];
             const {component: routeComponent, params} = route;
             this.setState({routeComponent, location, params});
         });
@@ -74,13 +79,21 @@ class AppContainer extends Component {
         this.unlisten();
     }
 
-    history = createHistory()
+    history = createHistory();
+
+    routes = {
+        // eslint-disable-line react/sort-comp
+        "/Travel/Europe": {component: Home},
+        "/Travel/Europe/France": {component: Page, params: {id: "France"}},
+        "/Travel/Europe/Spain": {component: Page, params: {id: "Spain"}}
+    };
 
     render() {
         return (
-            <App history={this.history}
-                 location={this.state.location}
-                 params={this.state.params}
+            <App
+                history={this.history}
+                location={this.state.location}
+                params={this.state.params}
             >
                 {React.createElement(this.state.routeComponent)}
             </App>