From a1d6671a7b5c372b06f1a32c1aec53d1ec2a53c2 Mon Sep 17 00:00:00 2001
From: Marco Biedermann <marco.biedermann@gmx.de>
Date: Wed, 20 Dec 2017 12:04:01 +0100
Subject: [PATCH] fix ESLint auto fixable warnings

---
 cms/cms.js                    |  38 ++++----
 gatsby-config.js              |  30 +++----
 gatsby-node.js                |   4 +-
 src/components/Content.js     |   6 +-
 src/layouts/index.js          |   2 +-
 src/pages/index.js            |  10 +--
 src/templates/about-page.js   |  28 +++---
 src/templates/blog-post.js    |  36 ++++----
 src/templates/product-page.js | 161 +++++++++++++++++-----------------
 9 files changed, 163 insertions(+), 152 deletions(-)

diff --git a/cms/cms.js b/cms/cms.js
index 3bb7015..649eeac 100644
--- a/cms/cms.js
+++ b/cms/cms.js
@@ -1,9 +1,9 @@
-import React from 'react'
-import CMS from 'netlify-cms'
+import React from 'react';
+import CMS from 'netlify-cms';
 
-import Features from 'site/components/Features'
-import Testimonials from 'site/components/Testimonials'
-import Pricing from 'site/components/Pricing'
+import Features from 'site/components/Features';
+import Testimonials from 'site/components/Testimonials';
+import Pricing from 'site/components/Pricing';
 
 import { AboutPageTemplate } from 'site/templates/about-page';
 import { ProductPageTemplate } from 'site/templates/product-page';
@@ -18,19 +18,19 @@ const BlogPostPreview = ({ entry, widgetFor }) => (
     description={entry.getIn(['data', 'description'])}
     title={entry.getIn(['data', 'title'])}
   />
-)
+);
 
 const ProductPagePreview = ({ entry, widgetFor, getAsset }) => {
-  const entryBlurbs = entry.getIn(['data', 'intro', 'blurbs'])
-  const blurbs = entryBlurbs ? entryBlurbs.toJS() : []
+  const entryBlurbs = entry.getIn(['data', 'intro', 'blurbs']);
+  const blurbs = entryBlurbs ? entryBlurbs.toJS() : [];
 
-  const entryTestimonials = entry.getIn(['data', 'testimonials'])
-  const testimonials = entryTestimonials ? entryTestimonials.toJS() : []
+  const entryTestimonials = entry.getIn(['data', 'testimonials']);
+  const testimonials = entryTestimonials ? entryTestimonials.toJS() : [];
 
-  const entryPricingPlans = entry.getIn(['data', 'pricing', 'plans'])
-  const pricingPlans = entryPricingPlans ? entryPricingPlans.toJS() : []
+  const entryPricingPlans = entry.getIn(['data', 'pricing', 'plans']);
+  const pricingPlans = entryPricingPlans ? entryPricingPlans.toJS() : [];
 
-  return <ProductPageTemplate
+  return (<ProductPageTemplate
     image={entry.getIn(['data', 'image'])}
     title={entry.getIn(['data', 'title'])}
     heading={entry.getIn(['data', 'heading'])}
@@ -59,10 +59,10 @@ const ProductPagePreview = ({ entry, widgetFor, getAsset }) => {
       description: entry.getIn(['data', 'pricing', 'description']),
       plans: pricingPlans,
     }}
-  />;
-}
+  />);
+};
 
-CMS.registerPreviewStyle('/styles.css')
-CMS.registerPreviewTemplate('about', AboutPagePreview)
-CMS.registerPreviewTemplate('products', ProductPagePreview)
-CMS.registerPreviewTemplate('blog', BlogPostPreview)
+CMS.registerPreviewStyle('/styles.css');
+CMS.registerPreviewTemplate('about', AboutPagePreview);
+CMS.registerPreviewTemplate('products', ProductPagePreview);
+CMS.registerPreviewTemplate('blog', BlogPostPreview);
diff --git a/gatsby-config.js b/gatsby-config.js
index abd7f02..e96712b 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -1,31 +1,31 @@
 module.exports = {
   siteMetadata: {
-    title: `Gatsby Default Starter`
+    title: 'Gatsby Default Starter',
   },
   plugins: [
     'gatsby-plugin-react-helmet',
-    `gatsby-plugin-sass`,
+    'gatsby-plugin-sass',
     {
-      resolve: `gatsby-source-filesystem`,
+      resolve: 'gatsby-source-filesystem',
       options: {
         path: `${__dirname}/src/pages`,
-        name: 'pages'
-      }
+        name: 'pages',
+      },
     },
     {
-      resolve: `gatsby-source-filesystem`,
+      resolve: 'gatsby-source-filesystem',
       options: {
         path: `${__dirname}/src/img`,
-        name: 'images'
-      }
+        name: 'images',
+      },
     },
-    `gatsby-plugin-sharp`,
-    `gatsby-transformer-sharp`,
+    'gatsby-plugin-sharp',
+    'gatsby-transformer-sharp',
     {
-      resolve: `gatsby-transformer-remark`,
+      resolve: 'gatsby-transformer-remark',
       options: {
-        plugins: []
-      }
-    }
-  ]
+        plugins: [],
+      },
+    },
+  ],
 };
diff --git a/gatsby-node.js b/gatsby-node.js
index 49641ed..11f5edf 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -63,7 +63,7 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
         }
       }
     }
-  `).then(result => {
+  `).then((result) => {
     if (result.errors) {
       result.errors.forEach(e => console.error(e.toString()));
       return Promise.reject(result.errors);
@@ -72,7 +72,7 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
       createPage({
         path: node.frontmatter.path,
         component: path.resolve(`src/templates/${String(node.frontmatter.templateKey)}.js`),
-        context: {} // additional data can be passed via context
+        context: {}, // additional data can be passed via context
       });
     });
   });
diff --git a/src/components/Content.js b/src/components/Content.js
index 8aad799..40cee3a 100644
--- a/src/components/Content.js
+++ b/src/components/Content.js
@@ -1,7 +1,7 @@
-import React from 'react'
+import React from 'react';
 
 export default ({ content, className }) => <div className={className}>{content}</div>;
-export const HTMLContent = ({ content, className }) => <div
+export const HTMLContent = ({ content, className }) => (<div
   className={className}
   dangerouslySetInnerHTML={{ __html: content }}
-/>;
+/>);
diff --git a/src/layouts/index.js b/src/layouts/index.js
index 2998f7c..3cd048a 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -44,7 +44,7 @@ const TemplateWrapper = ({ children }) => (
 );
 
 TemplateWrapper.propTypes = {
-  children: PropTypes.func
+  children: PropTypes.func,
 };
 
 export default TemplateWrapper;
diff --git a/src/pages/index.js b/src/pages/index.js
index e723674..7ad09c3 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -6,7 +6,7 @@ import Script from 'react-load-script';
 export default class IndexPage extends React.Component {
   handleScriptLoad() {
     if (window.netlifyIdentity) {
-      window.netlifyIdentity.on('init', user => {
+      window.netlifyIdentity.on('init', (user) => {
         if (!user) {
           window.netlifyIdentity.on('login', () => {
             document.location.href = '/admin/';
@@ -30,9 +30,8 @@ export default class IndexPage extends React.Component {
           <div className="content">
             <h1 className="has-text-weight-bold is-size-2">Latest Stories</h1>
           </div>
-          {posts.filter(post => post.node.frontmatter.templateKey === 'blog-post').map(({ node: post }) => {
-            return (
-              <div className="content" style={{ border: '1px solid #eaecee', padding: '2em 4em' }} key={post.id}>
+          {posts.filter(post => post.node.frontmatter.templateKey === 'blog-post').map(({ node: post }) => (
+            <div className="content" style={{ border: '1px solid #eaecee', padding: '2em 4em' }} key={post.id}>
                 <p>
                   <Link className="has-text-primary" to={post.frontmatter.path}>
                     {post.frontmatter.title}
@@ -49,8 +48,7 @@ export default class IndexPage extends React.Component {
                   </Link>
                 </p>
               </div>
-            );
-          })}
+            ))}
         </div>
       </section>
     );
diff --git a/src/templates/about-page.js b/src/templates/about-page.js
index ee4b991..30ffdc5 100644
--- a/src/templates/about-page.js
+++ b/src/templates/about-page.js
@@ -3,27 +3,31 @@ import Content, { HTMLContent } from '../components/Content';
 
 export const AboutPageTemplate = ({ title, content, contentComponent }) => {
   const PageContent = contentComponent || Content;
-  return <section className="section section--gradient">
-    <div className="container">
-      <div className="columns">
-        <div className="column is-10 is-offset-1">
-          <div className="section">
-            <h2 className="title is-size-3 has-text-weight-bold is-bold-light">{title}</h2>
-            <PageContent className="content" content={content} />
+
+  return (
+    <section className="section section--gradient">
+      <div className="container">
+        <div className="columns">
+          <div className="column is-10 is-offset-1">
+            <div className="section">
+              <h2 className="title is-size-3 has-text-weight-bold is-bold-light">{title}</h2>
+              <PageContent className="content" content={content} />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </section>;
-}
+    </section>
+  );
+};
 
 export default ({ data }) => {
   const { markdownRemark: post } = data;
-  return <AboutPageTemplate
+
+  return (<AboutPageTemplate
     contentComponent={HTMLContent}
     title={post.frontmatter.title}
     content={post.html}
-  />;
+  />);
 };
 
 export const aboutPageQuery = graphql`
diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js
index b155eeb..10f7181 100644
--- a/src/templates/blog-post.js
+++ b/src/templates/blog-post.js
@@ -2,32 +2,38 @@ import React from 'react';
 import Content, { HTMLContent } from '../components/Content';
 import Helmet from 'react-helmet';
 
-export const BlogPostTemplate = ({ content, contentComponent, description, title, helmet }) => {
+export const BlogPostTemplate = ({
+  content, contentComponent, description, title, helmet,
+}) => {
   const PostContent = contentComponent || Content;
-  return <section className="section">
-    { helmet ? helmet : ""}
-    <div className="container content">
-      <div className="columns">
-        <div className="column is-10 is-offset-1">
-          <h1 className="title is-size-2 has-text-weight-bold is-bold-light">{title}</h1>
-          <p>{description}</p>
-          <PostContent content={content} />
+
+  return (
+    <section className="section">
+      { helmet || ''}
+      <div className="container content">
+        <div className="columns">
+          <div className="column is-10 is-offset-1">
+            <h1 className="title is-size-2 has-text-weight-bold is-bold-light">{title}</h1>
+            <p>{description}</p>
+            <PostContent content={content} />
+          </div>
         </div>
       </div>
-    </div>
-  </section>;
-}
+    </section>
+  );
+};
 
 export default ({ data }) => {
   const { markdownRemark: post } = data;
-  return <BlogPostTemplate
+
+  return (<BlogPostTemplate
     content={post.html}
     contentComponent={HTMLContent}
     description={post.frontmatter.description}
     helmet={<Helmet title={`Blog | ${post.frontmatter.title}`} />}
     title={post.frontmatter.title}
-  />;
-}
+  />);
+};
 
 export const pageQuery = graphql`
   query BlogPostByPath($path: String!) {
diff --git a/src/templates/product-page.js b/src/templates/product-page.js
index efbd616..4ce8be4 100644
--- a/src/templates/product-page.js
+++ b/src/templates/product-page.js
@@ -4,105 +4,108 @@ import Testimonials from '../components/Testimonials';
 import Pricing from '../components/Pricing';
 
 export const ProductPageTemplate = ({
-    image, title, heading, description, intro, main, testimonials, fullImage, pricing
-  }) => {
-    return <section className="section section--gradient">
-      <div className="container">
-        <div className="section">
-          <div className="columns">
-            <div className="column is-10 is-offset-1">
-              <div className="content">
-                <div
-                    className="full-width-image-container margin-top-0"
-                    style={{ backgroundImage: `url(${image})` }}
+  image, title, heading, description, intro, main, testimonials, fullImage, pricing,
+}) => (
+  <section className="section section--gradient">
+    <div className="container">
+      <div className="section">
+        <div className="columns">
+          <div className="column is-10 is-offset-1">
+            <div className="content">
+              <div
+                className="full-width-image-container margin-top-0"
+                style={{ backgroundImage: `url(${image})` }}
+              >
+                <h2
+                  className="has-text-weight-bold is-size-1"
+                  style={{
+                    boxShadow: '0.5rem 0 0 #f40, -0.5rem 0 0 #f40',
+                    backgroundColor: '#f40',
+                    color: 'white',
+                    padding: '1rem',
+                  }}
                 >
-                  <h2
-                      className="has-text-weight-bold is-size-1"
-                      style={{
-                        boxShadow: '0.5rem 0 0 #f40, -0.5rem 0 0 #f40',
-                        backgroundColor: '#f40',
-                        color: 'white',
-                        padding: '1rem'
-                      }}
-                  >
-                    {title}
-                  </h2>
+                  {title}
+                </h2>
+              </div>
+              <div className="columns">
+                <div className="column is-7">
+                  <h3 className="has-text-weight-semibold is-size-2">{heading}</h3>
+                  <p>{description}</p>
                 </div>
-                <div className="columns">
-                  <div className="column is-7">
-                    <h3 className="has-text-weight-semibold is-size-2">{heading}</h3>
-                    <p>{description}</p>
-                  </div>
+              </div>
+              <Features gridItems={intro.blurbs} />
+              <div className="columns">
+                <div className="column is-7">
+                  <h3 className="has-text-weight-semibold is-size-3">{main.heading}</h3>
+                  <p>{main.description}</p>
                 </div>
-                <Features gridItems={intro.blurbs} />
-                <div className="columns">
-                  <div className="column is-7">
-                    <h3 className="has-text-weight-semibold is-size-3">{main.heading}</h3>
-                    <p>{main.description}</p>
-                  </div>
-                </div>
-                <div className="tile is-ancestor">
-                  <div className="tile is-vertical">
-                    <div className="tile">
-                      <div className="tile is-parent is-vertical">
-                        <article className="tile is-child">
-                          <img
-                              style={{ borderRadius: '5px' }}
-                              src={main.image1.image}
-                              alt={main.image1.alt}
-                          />
-                        </article>
-                      </div>
-                      <div className="tile is-parent">
-                        <article className="tile is-child">
-                          <img
-                              style={{ borderRadius: '5px' }}
-                              src={main.image2.image}
-                              alt={main.image2.alt}
-                          />
-                        </article>
-                      </div>
+              </div>
+              <div className="tile is-ancestor">
+                <div className="tile is-vertical">
+                  <div className="tile">
+                    <div className="tile is-parent is-vertical">
+                      <article className="tile is-child">
+                        <img
+                          style={{ borderRadius: '5px' }}
+                          src={main.image1.image}
+                          alt={main.image1.alt}
+                        />
+                      </article>
                     </div>
                     <div className="tile is-parent">
                       <article className="tile is-child">
                         <img
-                            style={{ borderRadius: '5px' }}
-                            src={main.image3.image}
-                            alt={main.image3.alt}
+                          style={{ borderRadius: '5px' }}
+                          src={main.image2.image}
+                          alt={main.image2.alt}
                         />
                       </article>
                     </div>
                   </div>
+                  <div className="tile is-parent">
+                    <article className="tile is-child">
+                      <img
+                        style={{ borderRadius: '5px' }}
+                        src={main.image3.image}
+                        alt={main.image3.alt}
+                      />
+                    </article>
+                  </div>
                 </div>
-                <Testimonials testimonials={testimonials} />
-                <div
-                    className="full-width-image-container"
-                    style={{ backgroundImage: `url(${fullImage})` }}
-                />
-                <h2 className="has-text-weight-semibold is-size-2">{pricing.heading}</h2>
-                <p className="is-size-5">{pricing.description}</p>
-                <Pricing data={pricing.plans} />
               </div>
+              <Testimonials testimonials={testimonials} />
+              <div
+                className="full-width-image-container"
+                style={{ backgroundImage: `url(${fullImage})` }}
+              />
+              <h2 className="has-text-weight-semibold is-size-2">{pricing.heading}</h2>
+              <p className="is-size-5">{pricing.description}</p>
+              <Pricing data={pricing.plans} />
             </div>
           </div>
         </div>
       </div>
-    </section>
-  };
+    </div>
+  </section>
+);
 
 export default ({ data }) => {
   const { frontmatter } = data.markdownRemark;
-  return <ProductPageTemplate
-    image={frontmatter.image}
-    title={frontmatter.title}
-    heading={frontmatter.heading}
-    description={frontmatter.description}
-    intro={frontmatter.intro}
-    main={frontmatter.main}
-    testimonials={frontmatter.testimonials}
-    fullImage={frontmatter.full_image}
-    pricing={frontmatter.pricing}
-  />;
+
+  return (
+    <ProductPageTemplate
+      image={frontmatter.image}
+      title={frontmatter.title}
+      heading={frontmatter.heading}
+      description={frontmatter.description}
+      intro={frontmatter.intro}
+      main={frontmatter.main}
+      testimonials={frontmatter.testimonials}
+      fullImage={frontmatter.full_image}
+      pricing={frontmatter.pricing}
+    />
+  );
 };
 
 export const productPageQuery = graphql`