From 8408befdc9be0e7d75eff798be9a076f499a27c0 Mon Sep 17 00:00:00 2001 From: Matt Barraza-Carl Date: Tue, 12 Mar 2019 21:42:51 -0700 Subject: [PATCH 1/9] lint: Arrow function expected no return value --- src/utils/auth.js | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/src/utils/auth.js b/src/utils/auth.js index e5aa4360..b842f5d7 100644 --- a/src/utils/auth.js +++ b/src/utils/auth.js @@ -1,6 +1,6 @@ import auth0js from 'auth0-js'; -export const isBrowser = typeof window !== 'undefined'; +export const isBrowser = typeof window !== `undefined`; // To speed things up, we’ll keep the profile stored unless the user logs out. // This prevents a flicker while the HTTP round-trip completes. @@ -13,8 +13,8 @@ const auth0 = isBrowser clientID: process.env.AUTH0_CLIENTID, redirectUri: process.env.AUTH0_CALLBACK, audience: process.env.AUTH0_AUDIENCE, - responseType: 'token id_token', - scope: 'openid profile email' + responseType: `token id_token`, + scope: `openid profile email`, }) : {}; @@ -28,9 +28,9 @@ export const login = () => { export const logout = callback => { if (isBrowser) { - localStorage.removeItem('access_token'); - localStorage.removeItem('id_token'); - localStorage.removeItem('expires_at'); + localStorage.removeItem(`access_token`); + localStorage.removeItem(`id_token`); + localStorage.removeItem(`expires_at`); } // Remove the locally cached profile to avoid confusing errors. @@ -48,11 +48,11 @@ const setSession = authResult => { authResult.expiresIn * 1000 + new Date().getTime() ); - localStorage.setItem('access_token', authResult.accessToken); - localStorage.setItem('id_token', authResult.idToken); - localStorage.setItem('expires_at', expiresAt); + localStorage.setItem(`access_token`, authResult.accessToken); + localStorage.setItem(`id_token`, authResult.idToken); + localStorage.setItem(`expires_at`, expiresAt); - return true; + return; }; export const handleAuthentication = callback => { @@ -76,20 +76,20 @@ export const isAuthenticated = () => { return false; } - let expiresAt = JSON.parse(localStorage.getItem('expires_at')); + let expiresAt = JSON.parse(localStorage.getItem(`expires_at`)); return new Date().getTime() < expiresAt; }; export const getAccessToken = () => { if (!isBrowser) { - return ''; + return ``; } - return localStorage.getItem('access_token'); + return localStorage.getItem(`access_token`); }; -export const getUserInfo = () => { - return new Promise((resolve, reject) => { +export const getUserInfo = () => + new Promise((resolve, reject) => { // If the user has already logged in, don’t bother fetching again. if (profile) { resolve(profile); @@ -113,4 +113,3 @@ export const getUserInfo = () => { resolve(profile); }); }); -}; From 9298281860c2bd4f7ebbf236250fa90278b57991 Mon Sep 17 00:00:00 2001 From: Matt Barraza-Carl Date: Tue, 12 Mar 2019 21:45:33 -0700 Subject: [PATCH 2/9] lint: Expected to return a value at the end of arrow function --- src/pages/login.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/pages/login.js b/src/pages/login.js index 136dac25..74d26eb8 100644 --- a/src/pages/login.js +++ b/src/pages/login.js @@ -4,14 +4,14 @@ import styled from 'react-emotion'; import { isAuthenticated } from '../utils/auth'; import { TextContainer, - Text as BaseText + Text as BaseText, } from '../components/shared/Typography'; const Text = styled(BaseText)` text-align: center; `; -export default () => { +const login = () => { if (!isAuthenticated()) { return ( @@ -19,4 +19,7 @@ export default () => { ); } + return null; }; + +export default login; From 1dcdf021c169091e349fa45e5eb4a2d98caf893b Mon Sep 17 00:00:00 2001 From: Matt Barraza-Carl Date: Tue, 12 Mar 2019 21:50:59 -0700 Subject: [PATCH 3/9] lint: 'featuredFluid' is not defined --- src/components/ProductPage/ProductImage.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/ProductPage/ProductImage.js b/src/components/ProductPage/ProductImage.js index 3486dd7a..80d3c2ec 100644 --- a/src/components/ProductPage/ProductImage.js +++ b/src/components/ProductPage/ProductImage.js @@ -34,10 +34,10 @@ const ZoomHelper = styled(`span`)` background: rgba(255, 255, 255, 0.5); border-radius: ${radius.large}px; display: flex; - left: ${spacing['xs']}px; - padding: ${spacing['xs']}px; + left: ${spacing[`xs`]}px; + padding: ${spacing[`xs`]}px; position: absolute; - top: ${spacing['xs']}px; + top: ${spacing[`xs`]}px; svg { fill: ${colors.brand}; @@ -60,10 +60,10 @@ class ProductImage extends Component { componentDidUpdate = prevProps => { if (prevProps.image.id !== this.props.image.id) { - this.imageLink.classList.add('change'); + this.imageLink.classList.add(`change`); setTimeout( - () => this.imageLink.classList.remove('change'), + () => this.imageLink.classList.remove(`change`), IMAGE_CHANGE_ANIM_DURATION ); } @@ -79,11 +79,11 @@ class ProductImage extends Component { const { image: { localFile: { - childImageSharp: { fluid } - } + childImageSharp: { fluid }, + }, }, onClick, - imageFeatured = null + imageFeatured = null, } = this.props; return ( @@ -94,7 +94,7 @@ class ProductImage extends Component { href={fluid.src} onClick={this.handleClick(onClick)} > - + @@ -106,7 +106,7 @@ class ProductImage extends Component { ProductImage.propTypes = { image: PropTypes.object.isRequired, onClick: PropTypes.func, - imageFeatured: PropTypes.object + imageFeatured: PropTypes.object, }; export default ProductImage; From 2d0b72fb0bc0ec756d6be2856e2724e995964121 Mon Sep 17 00:00:00 2001 From: Matt Barraza-Carl Date: Wed, 13 Mar 2019 00:03:35 -0700 Subject: [PATCH 4/9] bumps --- package.json | 49 +++++++++++++++++++++++++++---------------------- 1 file changed, 27 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 605c0ccf..909d9d1b 100644 --- a/package.json +++ b/package.json @@ -1,35 +1,35 @@ { "name": "gatsby-store", "description": "Gatsby store for swag and other Gatsby goodies.", - "version": "1.0.0", + "version": "1.2.0", "author": "Jason Lengstorf ", "dependencies": { - "apollo-boost": "^0.1.16", - "auth0-js": "^9.6.1", + "apollo-boost": "^0.3.1", + "auth0-js": "^9.10.0", "axios": "^0.18.0", "emotion": "^9.1.3", "emotion-server": "^9.1.3", - "gatsby": "^2.0.18", - "gatsby-image": "^2.0.29", + "gatsby": "^2.1.31", + "gatsby-image": "^2.0.33", "gatsby-plugin-emotion": "^2.0.5", - "gatsby-plugin-google-analytics": "^2.0.9", - "gatsby-plugin-layout": "^1.0.10", + "gatsby-plugin-google-analytics": "^2.0.17", + "gatsby-plugin-layout": "^1.0.13", "gatsby-plugin-manifest": "^2.0.7", - "gatsby-plugin-offline": "^2.0.20", - "gatsby-plugin-react-helmet": "^3.0.0", - "gatsby-plugin-sharp": "^2.0.6", - "gatsby-source-shopify": "^2.0.5", - "gatsby-transformer-sharp": "^2.1.3", - "react": "^16.8.0-alpha.0", - "react-apollo": "^2.2.4", - "react-dom": "^16.8.0-alpha.0", + "gatsby-plugin-offline": "^2.0.25", + "gatsby-plugin-react-helmet": "^3.0.9", + "gatsby-plugin-sharp": "^2.0.28", + "gatsby-source-shopify": "^2.0.18", + "gatsby-transformer-sharp": "^2.1.17", + "react": "^16.8.4", + "react-apollo": "^2.5.2", + "react-dom": "^16.8.4", "react-emotion": "^9.1.3", "react-helmet": "^5.2.0", - "react-icons": "^3.1.0", - "react-onclickoutside": "^6.7.1", + "react-icons": "^3.5.0", + "react-onclickoutside": "^6.8.0", "react-router-dom": "^4.3.1", "recompose": "^0.30.0", - "shopify-buy": "^2.0.0" + "shopify-buy": "^2.1.1" }, "keywords": [ "gatsby" @@ -40,17 +40,22 @@ "serve": "gatsby serve", "develop": "gatsby develop", "format": "prettier --write src/**/*.js", - "lint": "echo \"Error: no linter specified\" && exit 0", + "lint": "eslint .", "start": "npm run develop", "test": "echo \"Error: no test specified\" && exit 0", "stylelint": "stylelint './src/**/*.js'" }, "devDependencies": { - "prettier": "^1.12.0", - "stylelint": "^9.9.0", + "eslint": "5.15.1", + "eslint-config-google": "0.12.0", + "eslint-config-prettier": "^4.1.0", + "eslint-plugin-react": "^7.12.4", + "prettier": "^1.16.4", + "prop-types": "15.7.2", + "stylelint": "^9.10.1", "stylelint-config-standard": "^18.2.0", "stylelint-config-styled-components": "^0.1.1", - "stylelint-order": "^2.0.0", + "stylelint-order": "^2.1.0", "stylelint-processor-styled-components": "^1.5.1" } } From 539c65f1a68ea60103a187c95237e28da4cde7c2 Mon Sep 17 00:00:00 2001 From: Matt Barraza-Carl Date: Wed, 13 Mar 2019 00:07:04 -0700 Subject: [PATCH 5/9] Fixes lint issues --- .eslintrc.json | 8 +- gatsby-browser.js | 5 + gatsby-config.js | 60 +- gatsby-node.js | 46 +- src/assets/Butler.js | 4 +- src/assets/ButlerHand.js | 9 +- src/assets/FreeBonus.js | 747 ++-- src/components/Cart/Cart.js | 40 +- src/components/Cart/CartIndicator.js | 10 +- src/components/Cart/CartList.js | 13 +- src/components/Cart/CartListItem.js | 32 +- src/components/Cart/CartThumbail.js | 9 +- src/components/Cart/EmptyCart.js | 6 +- src/components/Cart/FreeBonus.js | 2 +- src/components/Cart/Gift.js | 4 +- src/components/Cart/ShippingInfo.js | 8 +- src/components/ContributorArea/CloseBar.js | 36 +- .../ContributorArea/ContentContainer.js | 2 +- .../ContributorArea/ContentForContributor.js | 25 +- .../ContentForContributorWithNoAccount.js | 10 +- .../ContributorArea/ContentForLoggedIn.js | 6 +- .../ContentForNotContributor.js | 12 +- .../ContributorArea/ContributorArea.js | 40 +- .../ContributorArea/CreateAccountForm.js | 29 +- src/components/ContributorArea/Error.js | 15 +- src/components/ContributorArea/LogoutBar.js | 2 +- src/components/ContributorArea/OpenBar.js | 112 +- src/components/ContributorArea/OpenIssues.js | 8 +- .../ContributorArea/OpenIssuesList.js | 12 +- src/components/Dashboard/Contributions.js | 12 +- src/components/Dashboard/Dashboard.js | 4 +- src/components/Dashboard/IssueList.js | 42 +- src/components/Dashboard/OpenIssues.js | 5 +- src/components/Layout/Footer.js | 10 +- src/components/Layout/Header.js | 16 +- src/components/Layout/Layout.js | 342 +- src/components/Layout/Logo.js | 4 +- src/components/Layout/PageContent.js | 78 +- .../ProductDetails/ProductDetails.js | 25 +- .../ProductDetails/SizeChartTable.js | 25 +- .../ProductListing/ProductListing.js | 2 +- .../ProductListing/ProductListingItem.js | 38 +- src/components/ProductPage/BackLink.js | 4 +- .../ProductPage/CommunityCaption.js | 26 +- src/components/ProductPage/ProductForm.js | 32 +- .../ProductPage/ProductImagesBrowser.js | 42 +- .../ProductPage/ProductImagesDesktop.js | 4 +- .../ProductPage/ProductImagesMobile.js | 10 +- src/components/ProductPage/ProductPage.js | 8 +- src/components/ProductPage/ProductSpecs.js | 8 +- .../ProductPage/ProductThumbnails.js | 10 +- src/components/shared/Buttons.js | 10 +- src/components/shared/FormElements.js | 2 +- src/components/shared/Link.js | 10 +- src/components/shared/PrivateRoute.js | 2 +- src/components/shared/SiteMetadata.js | 5 +- src/components/shared/Typography.js | 6 +- src/context/ApolloContext.js | 8 +- src/context/InterfaceContext.js | 8 +- src/context/StoreContext.js | 13 +- src/context/UserContext.js | 2 +- src/pages/404.js | 4 +- src/pages/callback.js | 6 +- src/templates/ProductPageTemplate.js | 10 +- src/utils/helpers.js | 2 +- src/utils/styles.js | 84 +- stylelint.config.js | 20 +- yarn.lock | 3427 +++++++---------- 68 files changed, 2685 insertions(+), 2993 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index a049b127..1dcbac2e 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -26,6 +26,12 @@ "globals": { "spyOn": true }, + "settings": { + "react": { + "pragma": "React", + "version": "detect" + } + }, "rules": { "no-console": "off", "no-inner-declarations": "off", @@ -39,7 +45,7 @@ { "requireReturnForObjectLiteral": true } ], "jsx-quotes": ["error", "prefer-double"], - "semi": ["error", "never"], + "semi": ["error", "always"], "object-curly-spacing": ["error", "always"], "comma-dangle": [ "error", diff --git a/gatsby-browser.js b/gatsby-browser.js index 51718c37..2c130feb 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,7 +1,12 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { ApolloProvider } from 'react-apollo'; import { client } from './src/context/ApolloContext'; export const wrapRootElement = ({ element }) => ( {element} ); + +wrapRootElement.propTypes = { + element: PropTypes.object, +}; diff --git a/gatsby-config.js b/gatsby-config.js index f4b73308..97d4b308 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,50 +1,50 @@ -require('dotenv').config({ - path: `.env.${process.env.NODE_ENV}` +require(`dotenv`).config({ + path: `.env.${process.env.NODE_ENV}`, }); module.exports = { siteMetadata: { - siteUrl: 'https://store.gatsbyjs.org', - title: 'Holy buckets! Get your Gatsby swag here!', + siteUrl: `https://store.gatsbyjs.org`, + title: `Holy buckets! Get your Gatsby swag here!`, description: - 'Do you like spaced-out socks? All purple everything? Hitting #maximumcomf with JAMstack Jammies? Oh boy have we got the swag store for you!' + `Do you like spaced-out socks? All purple everything? Hitting #maximumcomf with JAMstack Jammies? Oh boy have we got the swag store for you!`, }, plugins: [ { resolve: `gatsby-plugin-layout`, options: { - component: require.resolve(`./src/components/Layout/`) - } + component: require.resolve(`./src/components/Layout/`), + }, }, - 'gatsby-transformer-sharp', + `gatsby-transformer-sharp`, { - resolve: 'gatsby-source-shopify', + resolve: `gatsby-source-shopify`, options: { - shopName: 'gatsby-swag', - accessToken: process.env.SHOPIFY_ACCESS_TOKEN - } + shopName: `gatsby-swag`, + accessToken: process.env.SHOPIFY_ACCESS_TOKEN, + }, }, - 'gatsby-plugin-react-helmet', - 'gatsby-plugin-emotion', + `gatsby-plugin-react-helmet`, + `gatsby-plugin-emotion`, { - resolve: 'gatsby-plugin-manifest', + resolve: `gatsby-plugin-manifest`, options: { - name: 'Gatsby Store', - short_name: 'Gatsby Store', - start_url: '/', - background_color: '#ffffff', - theme_color: '#663399', - display: 'minimal-ui', - icon: 'static/android-chrome-512x512.png' - } + name: `Gatsby Store`, + short_name: `Gatsby Store`, + start_url: `/`, + background_color: `#ffffff`, + theme_color: `#663399`, + display: `minimal-ui`, + icon: `static/android-chrome-512x512.png`, + }, }, - 'gatsby-plugin-offline', + `gatsby-plugin-offline`, { - resolve: 'gatsby-plugin-google-analytics', + resolve: `gatsby-plugin-google-analytics`, options: { - trackingId: 'UA-93349937-6', - respectDNT: true - } - } - ] + trackingId: `UA-93349937-6`, + respectDNT: true, + }, + }, + ], }; diff --git a/gatsby-node.js b/gatsby-node.js index 579d06d2..cf0156dd 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,8 +1,8 @@ -const path = require('path'); +const path = require(`path`); exports.createPages = async ({ graphql, - actions: { createPage, createRedirect } + actions: { createPage, createRedirect }, }) => { const pages = await graphql(` { @@ -20,38 +20,38 @@ exports.createPages = async ({ pages.data.allShopifyProduct.edges.forEach(edge => { createPage({ path: `/product/${edge.node.handle}`, - component: path.resolve('./src/templates/ProductPageTemplate.js'), + component: path.resolve(`./src/templates/ProductPageTemplate.js`), context: { id: edge.node.id, - handle: edge.node.handle - } + handle: edge.node.handle, + }, }); }); // Redirects for old product slugs. [ { - oldSlug: 'purple-logo-tee-w-natural-process-print', - newSlug: 'vintage-purple-tee' + oldSlug: `purple-logo-tee-w-natural-process-print`, + newSlug: `vintage-purple-tee`, }, { - oldSlug: 'copy-of-gatsby-full-zip-sweatshirt-horizontal-logo', - newSlug: 'all-purple-everything-hoodie' + oldSlug: `copy-of-gatsby-full-zip-sweatshirt-horizontal-logo`, + newSlug: `all-purple-everything-hoodie`, }, { - oldSlug: 'gatsby-full-zip-sweatshirt', - newSlug: 'all-purple-everything-hoodie-vertical' + oldSlug: `gatsby-full-zip-sweatshirt`, + newSlug: `all-purple-everything-hoodie-vertical`, }, - { oldSlug: 'black-socks', newSlug: 'space-socks' }, - { oldSlug: 'dark-deploy-t-shirt', newSlug: 'dark-deploy-tee' }, - { oldSlug: 'gatsby-trucker-hat', newSlug: 'monogram-trucker-hat' }, - { oldSlug: 'gatsby-water-bottle', newSlug: '12oz-travel-mug' }, - { oldSlug: 'purple-gatsby-hat', newSlug: 'blazig-purple-hat' } + { oldSlug: `black-socks`, newSlug: `space-socks` }, + { oldSlug: `dark-deploy-t-shirt`, newSlug: `dark-deploy-tee` }, + { oldSlug: `gatsby-trucker-hat`, newSlug: `monogram-trucker-hat` }, + { oldSlug: `gatsby-water-bottle`, newSlug: `12oz-travel-mug` }, + { oldSlug: `purple-gatsby-hat`, newSlug: `blazig-purple-hat` }, ].map(({ oldSlug, newSlug }) => { const config = { toPath: `/product/${newSlug}`, isPermanent: true, - redirectInBrowser: true + redirectInBrowser: true, }; createRedirect({ fromPath: `/product/${oldSlug}`, ...config }); createRedirect({ fromPath: `/product/${oldSlug}/`, ...config }); @@ -69,14 +69,14 @@ exports.onCreatePage = async ({ page, actions: { createPage } }) => { * Take a look at `src/pages/account.js` for more details. */ if (page.path.match(/^\/account/)) { - page.matchPath = '/account/*'; + page.matchPath = `/account/*`; createPage(page); } }; exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => { - if (stage === 'build-html') { + if (stage === `build-html`) { /* * During the build step, `auth0-js` will break because it relies on * browser-specific APIs. Fortunately, we don’t need it during the build. @@ -89,10 +89,10 @@ exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => { rules: [ { test: /auth0-js/, - use: loaders.null() - } - ] - } + use: loaders.null(), + }, + ], + }, }); } }; diff --git a/src/assets/Butler.js b/src/assets/Butler.js index 7467941f..8e8a5277 100644 --- a/src/assets/Butler.js +++ b/src/assets/Butler.js @@ -1,7 +1,7 @@ import React from 'react'; import { colors } from '../utils/styles'; -export default () => ( +const Butler = () => ( ( /> ); + +export default Butler; diff --git a/src/assets/ButlerHand.js b/src/assets/ButlerHand.js index a94d7a9b..79fc726b 100644 --- a/src/assets/ButlerHand.js +++ b/src/assets/ButlerHand.js @@ -1,7 +1,8 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { colors } from '../utils/styles'; -export default ({ purple }) => { +const ButlerHand = ({ purple }) => { const strokeColor = purple || colors.brand; return ( @@ -92,3 +93,9 @@ export default ({ purple }) => { ); }; + +ButlerHand.propTypes = { + purple: PropTypes.any, +}; + +export default ButlerHand; diff --git a/src/assets/FreeBonus.js b/src/assets/FreeBonus.js index 419c99d1..9345b6fb 100644 --- a/src/assets/FreeBonus.js +++ b/src/assets/FreeBonus.js @@ -1,7 +1,6 @@ import React from 'react'; -import { colors } from '../utils/styles'; -export default () => ( +export const FreeBonus = () => ( ( /> diff --git a/src/components/Cart/Cart.js b/src/components/Cart/Cart.js index 9c943a70..75d80e0f 100644 --- a/src/components/Cart/Cart.js +++ b/src/components/Cart/Cart.js @@ -6,7 +6,7 @@ import { MdClose, MdShoppingCart, MdArrowBack, - MdArrowForward + MdArrowForward, } from 'react-icons/md'; import StoreContext from '../../context/StoreContext'; @@ -22,7 +22,7 @@ import { colors, fonts, spacing, - dimensions + dimensions, } from '../../utils/styles'; const CartRoot = styled(`div`)` @@ -150,7 +150,7 @@ const ItemsInCart = styled(`div`)` } `; -const Costs = styled('div')` +const Costs = styled(`div`)` display: flex; flex-direction: column; margin-top: ${spacing.sm}px; @@ -158,7 +158,7 @@ const Costs = styled('div')` const Cost = styled(`div`)` display: flex; - padding: 0 ${spacing.xs}px ${spacing['2xs']}px; + padding: 0 ${spacing.xs}px ${spacing[`2xs`]}px; :last-child { padding-bottom: 0; @@ -260,8 +260,8 @@ const CartToggle = styled(Button)` ${ItemsNumber} { animation: ${numberEntry} 0.5s ease forwards; position: absolute; - right: ${spacing['3xs']}px; - top: ${spacing['3xs']}px; + right: ${spacing[`3xs`]}px; + top: ${spacing[`3xs`]}px; transform: scale(0.6); } `; @@ -280,8 +280,8 @@ const BackLink = styled(Button)` class Cart extends Component { state = { - className: 'closed', - isLoading: false + className: `closed`, + isLoading: false, }; componentDidUpdate(prevProps) { @@ -292,22 +292,22 @@ class Cart extends Component { if (componentStatusChanged) { this.setState({ - className: this.props.status + className: this.props.status, }); } if (this.props.isDesktopViewport) { if (imageBrowserStatusChanged) { - if (this.props.productImagesBrowserStatus === 'open') { + if (this.props.productImagesBrowserStatus === `open`) { setTimeout(() => { - this.setState(state => ({ - className: state.className + ' covered' - })); + this.setState(state => {return { + className: state.className + ` covered`, + };}); }, 500); } else { - this.setState(state => ({ - className: state.className.replace('covered', '') - })); + this.setState(state => {return { + className: state.className.replace(`covered`, ``), + };}); } } } @@ -344,7 +344,7 @@ class Cart extends Component { return ( @@ -352,7 +352,7 @@ class Cart extends Component { aria-label={`Shopping cart with ${itemsInCart} items`} onClick={toggle} > - {status === 'open' ? ( + {status === `open` ? ( ) : ( <> @@ -384,7 +384,7 @@ class Cart extends Component { - Subtotal:{' '} + Subtotal:{` `} USD ${checkout.subtotalPrice} @@ -426,7 +426,7 @@ Cart.propTypes = { toggle: PropTypes.func.isRequired, contributorAreaStatus: PropTypes.string.isRequired, isDesktopViewport: PropTypes.bool, - productImagesBrowserStatus: PropTypes.string + productImagesBrowserStatus: PropTypes.string, }; export default Cart; diff --git a/src/components/Cart/CartIndicator.js b/src/components/Cart/CartIndicator.js index d81c269a..ed37ce32 100644 --- a/src/components/Cart/CartIndicator.js +++ b/src/components/Cart/CartIndicator.js @@ -8,7 +8,7 @@ const CartIndicatorRoot = styled(`div`)` background: ${colors.lemon}; border-radius: ${radius.default}px; color: ${colors.brand}; - display: ${props => (props.visible ? 'flex' : 'none')}; + display: ${props => (props.visible ? `flex` : `none`)}; justify-content: center; left: 0; padding: ${spacing.xs}px ${spacing.sm}px; @@ -20,7 +20,7 @@ const CartIndicatorRoot = styled(`div`)` class CartIndicator extends Component { state = { visible: false, - message: '' + message: ``, }; componentDidUpdate(prevProps) { @@ -28,7 +28,7 @@ class CartIndicator extends Component { if (this.props.adding) { this.setState({ visible: true, - message: 'updating cart ...' + message: `updating cart ...`, }); } else { if (this.props.itemsInCart > prevProps.itemsInCart) { @@ -41,7 +41,7 @@ class CartIndicator extends Component { this.setState({ message }); setTimeout( - () => this.setState({ visible: false, message: '' }), + () => this.setState({ visible: false, message: `` }), 3000 ); } @@ -58,7 +58,7 @@ class CartIndicator extends Component { CartIndicator.propTypes = { itemsInCart: PropTypes.number.isRequired, - adding: PropTypes.bool.isRequired + adding: PropTypes.bool.isRequired, }; export default CartIndicator; diff --git a/src/components/Cart/CartList.js b/src/components/Cart/CartList.js index 086a69e0..4f1dcf02 100644 --- a/src/components/Cart/CartList.js +++ b/src/components/Cart/CartList.js @@ -1,10 +1,10 @@ import React from 'react'; import styled from 'react-emotion'; import CartListItem from './CartListItem'; - +import PropTypes from 'prop-types'; import { colors, spacing } from '../../utils/styles'; -const CartListRoot = styled('ul')` +const CartListRoot = styled(`ul`)` list-style: none; margin: 0; padding: 0; @@ -35,7 +35,7 @@ const CartList = ({ handleRemove, updateQuantity, setCartLoading, - isCartLoading + isCartLoading, }) => ( <> @@ -58,4 +58,11 @@ const CartList = ({ ); +CartList.propTypes = { + handleRemove: PropTypes.func, + items: PropTypes.array, + updateQuantity: PropTypes.func, + setCartLoading: PropTypes.func, + isCartLoading: PropTypes.bool, +}; export default CartList; diff --git a/src/components/Cart/CartListItem.js b/src/components/Cart/CartListItem.js index b07b8a1a..de5a213a 100644 --- a/src/components/Cart/CartListItem.js +++ b/src/components/Cart/CartListItem.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import styled from 'react-emotion'; - +import PropTypes from 'prop-types'; import { MdClose } from 'react-icons/md'; import CartThumbail from './CartThumbail'; @@ -9,7 +9,7 @@ import { Button } from '../shared/Buttons'; import { breakpoints, colors, spacing } from '../../utils/styles'; -const CartListItemRoot = styled('li')` +const CartListItemRoot = styled(`li`)` align-items: center; border-bottom: 1px solid ${colors.brandLight}; display: flex; @@ -19,21 +19,21 @@ const CartListItemRoot = styled('li')` const Thumbail = styled(CartThumbail)` flex-grow: 0; - margin-left: ${spacing['2xs']}px; + margin-left: ${spacing[`2xs`]}px; margin-right: ${spacing.sm}px; `; -const Info = styled('div')` +const Info = styled(`div`)` flex-grow: 1; `; -const Name = styled('span')` +const Name = styled(`span`)` display: block; font-size: 1rem; line-height: 1.2; `; -const Meta = styled('span')` +const Meta = styled(`span`)` color: ${colors.textLight}; display: block; font-size: 0.95rem; @@ -58,7 +58,7 @@ const Remove = styled(Button)` display: flex; height: 44px; justify-content: center; - margin-right: ${spacing['2xs']}px; + margin-right: ${spacing[`2xs`]}px; padding: 0; width: 44px; @@ -69,16 +69,16 @@ const Remove = styled(Button)` } `; -export default ({ +const cartlistitem = ({ item, setCartLoading, updateQuantity, handleRemove, - isCartLoading + isCartLoading, }) => { const [quantity, setQuantity] = useState(1); - if (item.quantity !== quantity && quantity !== '' && !isCartLoading) { + if (item.quantity !== quantity && quantity !== `` && !isCartLoading) { setQuantity(item.quantity); } @@ -98,7 +98,7 @@ export default ({ } // If the field is empty, update the state but don’t do anything else. - if (value === '') { + if (value === ``) { setQuantity(value); return; } @@ -152,3 +152,13 @@ export default ({ ); }; + +cartlistitem.propTypes = { + setCartLoading: PropTypes.func, + handleRemove: PropTypes.func, + isCartLoading: PropTypes.bool, + updateQuantity: PropTypes.func, + item: PropTypes.object, +}; + +export default cartlistitem; diff --git a/src/components/Cart/CartThumbail.js b/src/components/Cart/CartThumbail.js index 999eec97..660e0464 100644 --- a/src/components/Cart/CartThumbail.js +++ b/src/components/Cart/CartThumbail.js @@ -2,7 +2,7 @@ import React from 'react'; import { graphql, StaticQuery } from 'gatsby'; import styled from 'react-emotion'; import Image from 'gatsby-image'; - +import PropTypes from 'prop-types'; import { colors, radius } from '../../utils/styles'; const CartThumbailRoot = styled(Image)` @@ -29,6 +29,7 @@ const CartThumbail = ({ return ; }; +// eslint-disable-next-line react/display-name export default props => ( ( }} /> ); + +CartThumbail.propTypes = { + shopifyImages: PropTypes.array, + id: PropTypes.string, + fallback: PropTypes.string, +}; diff --git a/src/components/Cart/EmptyCart.js b/src/components/Cart/EmptyCart.js index f9199a72..3315bd4d 100644 --- a/src/components/Cart/EmptyCart.js +++ b/src/components/Cart/EmptyCart.js @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'react-emotion'; import { colors, spacing } from '../../utils/styles'; -const EmptyCartRoot = styled('div')` +const EmptyCartRoot = styled(`div`)` align-items: center; display: flex; flex-direction: column; @@ -10,7 +10,7 @@ const EmptyCartRoot = styled('div')` justify-content: center; `; -const SadCartCopy = styled('div')` +const SadCartCopy = styled(`div`)` color: ${colors.lilac}; margin-top: ${spacing.lg}px; max-width: 200px; @@ -100,7 +100,7 @@ const EmptyCart = () => (

- Your Cart is sad{' '} + Your Cart is sad{` `} 😔 diff --git a/src/components/Cart/FreeBonus.js b/src/components/Cart/FreeBonus.js index d8ec1df8..b9022662 100644 --- a/src/components/Cart/FreeBonus.js +++ b/src/components/Cart/FreeBonus.js @@ -29,7 +29,7 @@ const FreeBonusRoot = styled(`div`)` const SmileIcon = styled(MdSentimentSatisfied)` color: ${colors.lilac}; - margin-right: ${spacing['2xs']}px; + margin-right: ${spacing[`2xs`]}px; vertical-align: middle; `; diff --git a/src/components/Cart/Gift.js b/src/components/Cart/Gift.js index 87a91216..2b27a0bd 100644 --- a/src/components/Cart/Gift.js +++ b/src/components/Cart/Gift.js @@ -1,6 +1,6 @@ import React from 'react'; -export default () => ( +const Gift = () => ( ( /> ); + +export default Gift; diff --git a/src/components/Cart/ShippingInfo.js b/src/components/Cart/ShippingInfo.js index d7e08ad1..581db072 100644 --- a/src/components/Cart/ShippingInfo.js +++ b/src/components/Cart/ShippingInfo.js @@ -63,13 +63,13 @@ const ArrowIcon = styled(MdKeyboardArrowDown)` const InfoIcon = styled(MdInfo)` color: ${colors.lilac}; - margin-right: ${spacing['2xs']}px; + margin-right: ${spacing[`2xs`]}px; vertical-align: middle; `; class ShippingInfo extends Component { state = { - detailsVisible: false + detailsVisible: false, }; toggle = () => { @@ -80,7 +80,7 @@ class ShippingInfo extends Component { const { detailsVisible } = this.state; return ( - + International shipments can take 6 weeks or more to @@ -89,7 +89,7 @@ class ShippingInfo extends Component {

Tracking updates may not always show up in real time on your tracking link. If you still have not received your order at the end of 6 weeks, - please let us know by sending an email to{' '} + please let us know by sending an email to{` `} team@gatsbyjs.com
diff --git a/src/components/ContributorArea/CloseBar.js b/src/components/ContributorArea/CloseBar.js index 4e8cdd3e..eac1d1ef 100644 --- a/src/components/ContributorArea/CloseBar.js +++ b/src/components/ContributorArea/CloseBar.js @@ -9,12 +9,12 @@ import { colors, fonts, spacing, - dimensions + dimensions, } from '../../utils/styles'; const { contributorAreaWidth: { openDesktop: desktopMaxWidth, openHd: hdMaxWidth }, - contributorAreaBarHeight: height + contributorAreaBarHeight: height, } = dimensions; const CloseBarRoot = styled(`button`)` @@ -98,7 +98,7 @@ const CloseBarRoot = styled(`button`)` class CloseBar extends Component { state = { - className: 'closed' + className: `closed`, }; componentDidUpdate(prevProps) { @@ -113,35 +113,35 @@ class CloseBar extends Component { if (isDesktopViewportChanged && prevProps.isDesktopViewport === null) { this.setState({ - className: this.props.isDesktopViewport ? 'open' : 'closed' + className: this.props.isDesktopViewport ? `open` : `closed`, }); } if (areaStatusChanged) { - if (this.props.areaStatus === 'open') { + if (this.props.areaStatus === `open`) { this.setState({ className: `${this.state.className} unhide` }); - setTimeout(() => this.setState({ className: 'opening' }), 0); - setTimeout(() => this.setState({ className: 'open' }), 500); + setTimeout(() => this.setState({ className: `opening` }), 0); + setTimeout(() => this.setState({ className: `open` }), 500); } - if (this.props.areaStatus === 'closed') { - this.setState({ className: 'closing' }); - setTimeout(() => this.setState({ className: 'closed' }), 500); + if (this.props.areaStatus === `closed`) { + this.setState({ className: `closing` }); + setTimeout(() => this.setState({ className: `closed` }), 500); } } if (this.props.isDesktopViewport) { if (imageBrowserStatusChanged) { - if (this.props.productImagesBrowserStatus === 'open') { + if (this.props.productImagesBrowserStatus === `open`) { setTimeout(() => { - this.setState(state => ({ - className: state.className + ' covered' - })); + this.setState(state => {return { + className: state.className + ` covered`, + };}); }, 500); } else { - this.setState(state => ({ - className: state.className.replace('covered', '') - })); + this.setState(state => {return { + className: state.className.replace(`covered`, ``), + };}); } } } @@ -164,7 +164,7 @@ CloseBar.propTypes = { onClick: PropTypes.func.isRequired, areaStatus: PropTypes.string.isRequired, isDesktopViewport: PropTypes.bool, - productImagesBrowserStatus: PropTypes.string + productImagesBrowserStatus: PropTypes.string, }; export default CloseBar; diff --git a/src/components/ContributorArea/ContentContainer.js b/src/components/ContributorArea/ContentContainer.js index b68ed7a9..b6557e91 100644 --- a/src/components/ContributorArea/ContentContainer.js +++ b/src/components/ContributorArea/ContentContainer.js @@ -76,7 +76,7 @@ const ContentContainer = () => ( handleLogout, loading, profile, - profile: { nickname } + profile: { nickname }, }) => nickname || loading ? ( ( {({ contributor }) => { const { shopify: { codes }, - github: { contributionCount } + github: { contributionCount }, } = contributor; const showLevelTwoIncentive = @@ -158,7 +158,8 @@ const ContentForContributor = () => ( Here you go! Thanks for going the extra mile to help build Gatsby! 💪 You have - made {contributionCount}{' '} + made {contributionCount} + {` `} {`contribution${contributionCount > 1 ? `s` : ``}`}! {text} diff --git a/src/components/ContributorArea/ContentForContributorWithNoAccount.js b/src/components/ContributorArea/ContentForContributorWithNoAccount.js index e319ecef..ac18b72b 100644 --- a/src/components/ContributorArea/ContentForContributorWithNoAccount.js +++ b/src/components/ContributorArea/ContentForContributorWithNoAccount.js @@ -54,8 +54,8 @@ const ContentForContributorWithNoAccount = () => ( You’re the best @{profile.nickname}! - You’ve made{' '} - {contributor.github.contributionCount}{' '} + You’ve made{` `} + {contributor.github.contributionCount}{` `} contributions to Gatsby. 💪💜 @@ -72,9 +72,9 @@ const ContentForContributorWithNoAccount = () => ( githubUsername: userData.username, email: userData.email, firstName: userData.first_name, - acceptsMarketing: userData.subscribe - } - } + acceptsMarketing: userData.subscribe, + }, + }, }); }} /> diff --git a/src/components/ContributorArea/ContentForLoggedIn.js b/src/components/ContributorArea/ContentForLoggedIn.js index 9112ad32..f73e739f 100644 --- a/src/components/ContributorArea/ContentForLoggedIn.js +++ b/src/components/ContributorArea/ContentForLoggedIn.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import ContentForNotContributor from './ContentForNotContributor'; @@ -31,7 +31,7 @@ const ContentForLoggedIn = ({ error, handleLogout, loading, - profile + profile, }) => ( <> { this.setState({ - issuesVisible: true + issuesVisible: true, }); }; render() { const { issuesVisible } = this.state; const { - profile: { nickname } + profile: { nickname }, } = this.props; return ( @@ -42,9 +42,9 @@ class ContentForNotContributor extends Component { come back here to claim free swag. - If you have questions, ask on any issue (you can tag{' '} + If you have questions, ask on any issue (you can tag{` `} @jlengstorf if you’d like) - or hit us up{' '} + or hit us up{` `} on Twitter at @gatsbyjs. @@ -66,7 +66,7 @@ class ContentForNotContributor extends Component { } ContentForNotContributor.propTypes = { - profile: PropTypes.object.isRequired + profile: PropTypes.object.isRequired, }; export default ContentForNotContributor; diff --git a/src/components/ContributorArea/ContributorArea.js b/src/components/ContributorArea/ContributorArea.js index 2f6b031b..103ba4cc 100644 --- a/src/components/ContributorArea/ContributorArea.js +++ b/src/components/ContributorArea/ContributorArea.js @@ -8,7 +8,7 @@ import ContentContainer from './ContentContainer'; import { breakpoints, colors, dimensions } from '../../utils/styles'; const { - contributorAreaWidth: { openDesktop: desktopMaxWidth, openHd: hdMaxWidth } + contributorAreaWidth: { openDesktop: desktopMaxWidth, openHd: hdMaxWidth }, } = dimensions; const ContributorAreaRoot = styled(`aside`)` @@ -85,8 +85,8 @@ const ContributorAreaRoot = styled(`aside`)` class ContributorArea extends Component { state = { - className: 'closed', - issuesVisible: false + className: `closed`, + issuesVisible: false, }; componentDidUpdate(prevProps) { @@ -100,41 +100,41 @@ class ContributorArea extends Component { // set inital status of the component after isDesktopViewport is set for the first time (value changes from null to true/false) if (isDesktopViewportChanged && prevProps.isDesktopViewport === null) { this.setState({ - className: this.props.isDesktopViewport ? 'open' : 'closed' + className: this.props.isDesktopViewport ? `open` : `closed`, }); } // apply transitions after changes of the component's status, trigerred by user (toggleContributorArea) if (componentStatusChanged) { - if (this.props.status === 'open') { + if (this.props.status === `open`) { // before we start opening the component we first have to unhide it this.setState({ - className: `${this.state.className} unhide` + className: `${this.state.className} unhide`, }); setTimeout( () => this.setState({ - className: 'opening' + className: `opening`, }), 0 ); setTimeout( () => this.setState({ - className: 'open' + className: `open`, }), 750 ); } - if (this.props.status === 'closed') { + if (this.props.status === `closed`) { this.setState({ - className: 'closing' + className: `closing`, }); setTimeout( () => this.setState({ - className: 'closed' + className: `closed`, }), 750 ); @@ -144,16 +144,16 @@ class ContributorArea extends Component { // for desktop viewport, hide all content when ProductImagesBrowser is open if (this.props.isDesktopViewport) { if (imageBrowserStatusChanged) { - if (this.props.productImagesBrowserStatus === 'open') { + if (this.props.productImagesBrowserStatus === `open`) { setTimeout(() => { - this.setState(state => ({ - className: state.className + ' covered' - })); + this.setState(state => {return { + className: state.className + ` covered`, + };}); }, 500); } else { - this.setState(state => ({ - className: state.className.replace('covered', '') - })); + this.setState(state => {return { + className: state.className.replace(`covered`, ``), + };}); } } } @@ -169,7 +169,7 @@ class ContributorArea extends Component { status, toggle, isDesktopViewport, - productImagesBrowserStatus + productImagesBrowserStatus, } = this.props; const { className } = this.state; @@ -203,7 +203,7 @@ ContributorArea.propTypes = { location: PropTypes.object.isRequired, toggle: PropTypes.func.isRequired, isDesktopViewport: PropTypes.bool, - productImagesBrowserStatus: PropTypes.string + productImagesBrowserStatus: PropTypes.string, }; export default ContributorArea; diff --git a/src/components/ContributorArea/CreateAccountForm.js b/src/components/ContributorArea/CreateAccountForm.js index 2b5ae5c8..d52b9530 100644 --- a/src/components/ContributorArea/CreateAccountForm.js +++ b/src/components/ContributorArea/CreateAccountForm.js @@ -1,15 +1,15 @@ import React from 'react'; import styled from 'react-emotion'; - +import PropTypes from 'prop-types'; import { PrimaryButton } from '../shared/Buttons'; import { Fieldset as BaseFieldset, Input as BaseInput, - Label as BaseLabel + Label as BaseLabel, } from '../shared/FormElements'; import { breakpoints, colors, spacing, radius } from '../../utils/styles'; -const CreateAccountFormRoot = styled('form')` +const CreateAccountFormRoot = styled(`form`)` display: flex; flex-direction: row; flex-wrap: wrap; @@ -69,7 +69,7 @@ const CheckboxLabel = styled(BaseLabel)` } `; -const Checkbox = styled('input')` +const Checkbox = styled(`input`)` display: inline-block; margin-right: 0.25rem; opacity: 0; @@ -96,7 +96,7 @@ const Submit = styled(PrimaryButton)` width: 100%; `; -const PrivacyNotice = styled('p')` +const PrivacyNotice = styled(`p`)` color: ${colors.brandBright}; font-size: 0.75rem; `; @@ -109,9 +109,9 @@ class CreateAccountForm extends React.Component { this.state = { subscribe: true, - first_name: name.split(' ')[0], + first_name: name.split(` `)[0], username: nickname, - email + email, }; } @@ -119,14 +119,16 @@ class CreateAccountForm extends React.Component { event.preventDefault(); this.setState({ - [event.target.name]: event.target.value + [event.target.name]: event.target.value, }); }; onToggle = () => { - this.setState(state => ({ - subscribe: !state.subscribe - })); + this.setState(state => { + return { + subscribe: !state.subscribe, + }; + }); }; render() { @@ -179,4 +181,9 @@ class CreateAccountForm extends React.Component { } } +CreateAccountForm.propTypes = { + onSubmit: PropTypes.func, + profile: PropTypes.any, +}; + export default CreateAccountForm; diff --git a/src/components/ContributorArea/Error.js b/src/components/ContributorArea/Error.js index a79b4ac5..343c82d4 100644 --- a/src/components/ContributorArea/Error.js +++ b/src/components/ContributorArea/Error.js @@ -1,12 +1,12 @@ import React from 'react'; import { Heading, Text } from './AreaTypography'; import styled from 'react-emotion'; - +import PropTypes from 'prop-types'; import { MdSentimentDissatisfied } from 'react-icons/md'; import { animations, colors, spacing } from '../../utils/styles'; -const ErrorRoot = styled('div')` +const ErrorRoot = styled(`div`)` animation: ${animations.simpleEntry}; ${Heading} { @@ -20,7 +20,7 @@ const ErrorRoot = styled('div')` } `; -const ErrorText = styled('pre')` +const ErrorText = styled(`pre`)` background: ${colors.lightest}; border-radius: 3px; padding: ${spacing.sm}px ${spacing.md}px; @@ -47,13 +47,18 @@ const Error = ({ error }) => ( Please reload the page and try again. If a page refresh doesn’t clear - things up, please{' '} + things up, please{` `} open an issue - {' '} + + {` `} and we’ll figure out what’s going on. ); +Error.propTypes = { + error: PropTypes.any, +}; + export default Error; diff --git a/src/components/ContributorArea/LogoutBar.js b/src/components/ContributorArea/LogoutBar.js index a18298e0..5e7af70a 100644 --- a/src/components/ContributorArea/LogoutBar.js +++ b/src/components/ContributorArea/LogoutBar.js @@ -46,7 +46,7 @@ LogoutBar.propTypes = { error: PropTypes.any.isRequired, handleLogout: PropTypes.func.isRequired, loading: PropTypes.bool.isRequired, - profile: PropTypes.object.isRequired + profile: PropTypes.object.isRequired, }; export default LogoutBar; diff --git a/src/components/ContributorArea/OpenBar.js b/src/components/ContributorArea/OpenBar.js index 66357b48..4acdc37b 100644 --- a/src/components/ContributorArea/OpenBar.js +++ b/src/components/ContributorArea/OpenBar.js @@ -215,7 +215,7 @@ const ContentFor = ({ contributor }) => { class OpenBar extends Component { state = { - className: 'closed' + className: `closed`, }; componentDidUpdate(prevProps) { @@ -230,40 +230,44 @@ class OpenBar extends Component { if (isDesktopViewportChanged && prevProps.isDesktopViewport === null) { if (this.props.isDesktopViewport) { - this.setState({ className: 'closed' }); + this.setState({ className: `closed` }); } else { this.setState({ className: /\/product\//.test(this.props.location.pathname) - ? 'closed' - : 'open' + ? `closed` + : `open`, }); } } if (areaStatusChanged) { - if (this.revertStatus(this.props.areaStatus) === 'open') { - this.setState({ className: 'opening' }); - setTimeout(() => this.setState({ className: 'open' }), 500); + if (this.revertStatus(this.props.areaStatus) === `open`) { + this.setState({ className: `opening` }); + setTimeout(() => this.setState({ className: `open` }), 500); } - if (this.revertStatus(this.props.areaStatus) === 'closed') { - this.setState({ className: 'closing' }); - setTimeout(() => this.setState({ className: 'closed' }), 500); + if (this.revertStatus(this.props.areaStatus) === `closed`) { + this.setState({ className: `closing` }); + setTimeout(() => this.setState({ className: `closed` }), 500); } } if (this.props.isDesktopViewport) { if (imageBrowserStatusChanged) { - if (this.props.productImagesBrowserStatus === 'open') { + if (this.props.productImagesBrowserStatus === `open`) { setTimeout(() => { - this.setState(state => ({ - className: state.className + ' covered' - })); + this.setState(state => { + return { + className: state.className + ` covered`, + }; + }); }, 500); } else { - this.setState(state => ({ - className: state.className.replace('covered', '') - })); + this.setState(state => { + return { + className: state.className.replace(`covered`, ``), + }; + }); } } } @@ -272,58 +276,60 @@ class OpenBar extends Component { if (!this.props.isDesktopViewport) { if (this.props.location.pathname !== prevProps.location.pathname) { if (/\/product\//.test(this.props.location.pathname)) { - this.setState(state => ({ - className: state.className + ' hidden' - })); + this.setState(state => { + return { + className: state.className + ` hidden`, + }; + }); } else { - this.setState(state => ({ - className: 'open' - })); + this.setState(state => { + return { + className: `open`, + }; + }); } } } } revertStatus = status => { - if (status === 'open') { - return 'closed'; - } else if (status === 'closed') { - return 'open'; + if (status === `open`) { + return `closed`; + } else if (status === `closed`) { + return `open`; } else { return status; } }; render() { - const { onClick, areaStatus } = this.props; + const { onClick } = this.props; const { className } = this.state; return ( - {({ contributor }) => { - return ( - - -
- - - - - <ContentFor contributor={contributor} /> - - - - -
-
- -
- - - ); - }} + {({ contributor }) => ( + + +
+ + + + + <ContentFor contributor={contributor} /> + + + + +
+
+ +
+ + + )} ); } @@ -334,7 +340,7 @@ OpenBar.propTypes = { location: PropTypes.object.isRequired, onClick: PropTypes.func.isRequired, isDesktopViewport: PropTypes.bool, - productImagesBrowserStatus: PropTypes.string + productImagesBrowserStatus: PropTypes.string, }; export default OpenBar; diff --git a/src/components/ContributorArea/OpenIssues.js b/src/components/ContributorArea/OpenIssues.js index fcca5fef..2c7d4f5f 100644 --- a/src/components/ContributorArea/OpenIssues.js +++ b/src/components/ContributorArea/OpenIssues.js @@ -4,13 +4,13 @@ import styled from 'react-emotion'; import { Query } from 'react-apollo'; import { GoMarkGithub } from 'react-icons/go'; -import { Subheading, Text } from './AreaTypography'; +import { Subheading } from './AreaTypography'; import OpenIssuesList from './OpenIssuesList'; import { Button as BaseButton } from '../shared/Buttons'; import { spacing } from '../../utils/styles'; const OpenIssuesRoot = styled(`div`)` - margin-top: ${spacing['2xl']}px; + margin-top: ${spacing[`2xl`]}px; `; const Button = styled(BaseButton)` @@ -30,7 +30,7 @@ const GitHubIssueFragment = gql` } `; -const GITHUB_LABEL = 'status: help wanted'; +const GITHUB_LABEL = `status: help wanted`; const GET_OPEN_ISSUES = gql` query($label: String!) { @@ -45,7 +45,7 @@ const GET_OPEN_ISSUES = gql` `; const filterClaimedIssues = issue => - !issue.labels.map(label => label.name).includes('Hacktoberfest - Claimed'); + !issue.labels.map(label => label.name).includes(`Hacktoberfest - Claimed`); const OpenIssues = () => ( diff --git a/src/components/ContributorArea/OpenIssuesList.js b/src/components/ContributorArea/OpenIssuesList.js index 94b971fa..f99cc847 100644 --- a/src/components/ContributorArea/OpenIssuesList.js +++ b/src/components/ContributorArea/OpenIssuesList.js @@ -5,14 +5,14 @@ import { MdArrowForward } from 'react-icons/md'; import { colors, radius, spacing } from '../../utils/styles'; -const OpenIssuesListRoot = styled('ul')` +const OpenIssuesListRoot = styled(`ul`)` list-style: none; margin: 0; margin-top: ${spacing.lg}px; padding: 0; `; -const Issue = styled('li')` +const Issue = styled(`li`)` margin: 0; `; @@ -25,7 +25,7 @@ const swing = keyframes` } `; -const Link = styled('a')` +const Link = styled(`a`)` border-radius: ${radius.large}px; color: ${colors.lightest}; display: block; @@ -40,7 +40,7 @@ const Link = styled('a')` svg { color: ${colors.lemon}; - margin-right: ${spacing['2xs']}px; + margin-right: ${spacing[`2xs`]}px; vertical-align: middle; } @@ -61,7 +61,7 @@ const OpenIssuesList = ({ issues }) => ( - {issue.title} #{issue.url.split('/').pop()} + {issue.title} #{issue.url.split(`/`).pop()} ))} @@ -69,7 +69,7 @@ const OpenIssuesList = ({ issues }) => ( ); OpenIssuesList.propTypes = { - issues: PropTypes.array.isRequired + issues: PropTypes.array.isRequired, }; export default OpenIssuesList; diff --git a/src/components/Dashboard/Contributions.js b/src/components/Dashboard/Contributions.js index 37e36c07..2449fe21 100644 --- a/src/components/Dashboard/Contributions.js +++ b/src/components/Dashboard/Contributions.js @@ -4,13 +4,13 @@ import DiscountCode from '../DiscountCode/DiscountCode'; import IssueList from './IssueList'; import { Heading, Subheading, Lede, Text } from '../shared/Typography'; -export default () => ( +const Contributions = () => ( {({ contributions, loading, profile }) => loading || contributions.count > 0 ? ( <> - + Your Most Recent Contribution @@ -23,13 +23,13 @@ export default () => ( This is your Gatsby Maintainer Dashboard. Once you’ve had your first - pull request merged into Gatsby, you can come back here to{' '} + pull request merged into Gatsby, you can come back here to{` `} claim free swag. - If you have questions, ask on any issue (you can tag{' '} + If you have questions, ask on any issue (you can tag{` `} @jlengstorf if you’d - like) or hit us up{' '} + like) or hit us up{` `} on Twitter at @gatsbyjs. @@ -40,3 +40,5 @@ export default () => ( } ); + +export default Contributions; diff --git a/src/components/Dashboard/Dashboard.js b/src/components/Dashboard/Dashboard.js index cbf30067..652b4d1a 100644 --- a/src/components/Dashboard/Dashboard.js +++ b/src/components/Dashboard/Dashboard.js @@ -3,10 +3,12 @@ import Helmet from 'react-helmet'; import Contributions from './Contributions'; import OpenIssues from './OpenIssues'; -export default () => ( +const Dashboard = () => ( <> ); + +export default Dashboard; diff --git a/src/components/Dashboard/IssueList.js b/src/components/Dashboard/IssueList.js index ef8a96d5..c1dd613c 100644 --- a/src/components/Dashboard/IssueList.js +++ b/src/components/Dashboard/IssueList.js @@ -2,14 +2,15 @@ import React from 'react'; import styled from 'react-emotion'; import { colors, radius, spacing } from '../../utils/styles'; import gql from 'graphql-tag'; +import PropTypes from 'prop-types'; -const IssueList = styled('ul')` +const UnorderedIssueList = styled(`ul`)` list-style: none; margin: 1rem 0 0; padding: 0; `; -const Issue = styled('li')` +const Issue = styled(`li`)` border-bottom: 1px solid ${colors.brandLight}; margin: 0; padding: 0.5rem 0; @@ -19,17 +20,17 @@ const Issue = styled('li')` } `; -const IssueTitle = styled('span')` +const IssueTitle = styled(`span`)` border-bottom: 1px solid ${colors.lightest}; transition: 200ms border-color linear; `; -const IssueId = styled('span')` +const IssueId = styled(`span`)` color: ${colors.textLighter}; transition: 200ms color linear; `; -const IssueLink = styled('a')` +const IssueLink = styled(`a`)` background-color: ${colors.lightest}; color: ${colors.darkest}; display: block; @@ -52,7 +53,7 @@ const IssueLink = styled('a')` } `; -const Label = styled('a')` +const Label = styled(`a`)` background-color: ${colors.brandLight}; border: 1px solid ${colors.brandLight}; border-radius: ${radius.default}px; @@ -62,7 +63,7 @@ const Label = styled('a')` font-size: 0.75rem; line-height: 1; margin: 0 ${spacing.xs}px ${spacing.xs}px 0; - padding: ${spacing['2xs']}px ${spacing.xs}px; + padding: ${spacing[`2xs`]}px ${spacing.xs}px; text-decoration: none; transition: 200ms all linear; @@ -75,7 +76,7 @@ const Label = styled('a')` `; const formatLabelUrl = url => { - const urlParts = url.split('/'); + const urlParts = url.split(`/`); const organization = urlParts[4]; const repository = urlParts[5]; const label = urlParts.slice(-1)[0]; @@ -96,23 +97,28 @@ export const GitHubIssueFragment = gql` } `; -export default ({ issues }) => ( - +// eslint-disable-next-line react/display-name +const IssueList = ({ issues }) => ( + {issues.map(issue => ( - {issue.title}{' '} - #{issue.url.split('/').pop()} + {issue.title} + {` `} + #{issue.url.split(`/`).pop()} - {issue.labels.map(({url, name}) => ( - ))} - + ); + +IssueList.propTypes = { + issues: PropTypes.object, +}; + +export default IssueList; diff --git a/src/components/Dashboard/OpenIssues.js b/src/components/Dashboard/OpenIssues.js index 440531e4..b06b8567 100644 --- a/src/components/Dashboard/OpenIssues.js +++ b/src/components/Dashboard/OpenIssues.js @@ -4,7 +4,7 @@ import { Query } from 'react-apollo'; import { Subheading, Text } from '../shared/Typography'; import IssueList, { GitHubIssueFragment } from './IssueList'; -const GITHUB_LABEL = 'status: help wanted'; +const GITHUB_LABEL = `status: help wanted`; const GET_OPEN_ISSUES = gql` query($label: String!) { openIssues(label: $label) { @@ -18,8 +18,9 @@ const GET_OPEN_ISSUES = gql` `; const filterClaimedIssues = issue => - !issue.labels.map(label => label.name).includes('Hacktoberfest - Claimed'); + !issue.labels.map(label => label.name).includes(`Hacktoberfest - Claimed`); +// eslint-disable-next-line react/display-name export default () => ( {({ data, loading, error }) => { diff --git a/src/components/Layout/Footer.js b/src/components/Layout/Footer.js index 08ae2161..bddfb5a9 100644 --- a/src/components/Layout/Footer.js +++ b/src/components/Layout/Footer.js @@ -3,7 +3,7 @@ import styled from 'react-emotion'; import { breakpoints, colors, spacing } from '../../utils/styles'; -const FooterRoot = styled('footer')` +const FooterRoot = styled(`footer`)` align-items: center; color: ${colors.textMild}; display: flex; @@ -30,7 +30,7 @@ const Row = styled(`span`)` display: inline-block; flex-shrink: 0; line-height: 1.3; - padding-bottom: ${spacing['2xs']}px; + padding-bottom: ${spacing[`2xs`]}px; text-align: center; @media (min-width: ${breakpoints.desktop}px) { @@ -57,17 +57,17 @@ const Footer = () => ( Talk to us on Twitter @gatsbyjs -  or send an email to{' '} +  or send an email to{` `} team@gatsbyjs.com • - Built with 💜 by the{' '} + Built with 💜 by the{` `} Gatsby Inkteam • - See the source code on{' '} + See the source code on{` `} GitHub diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js index 002f9ffc..09b8d46d 100644 --- a/src/components/Layout/Header.js +++ b/src/components/Layout/Header.js @@ -6,17 +6,17 @@ import Logo from './Logo'; import { breakpoints, colors, dimensions, spacing } from '../../utils/styles'; -const HeaderRoot = styled('header')` +const HeaderRoot = styled(`header`)` align-items: center; background-color: ${colors.lightest}; border-bottom: 1px solid ${colors.brandLight}; box-sizing: border-box; - display: ${props => (props.isCovered ? 'none' : 'flex')}; + display: ${props => (props.isCovered ? `none` : `flex`)}; height: ${dimensions.headerHeight}; justify-content: space-between; left: 0; padding-left: ${spacing.md}px; - padding-right: ${spacing['3xl']}px; + padding-right: ${spacing[`3xl`]}px; position: sticky; right: 0; top: 0; @@ -38,7 +38,7 @@ const HomeLink = styled(Link)` class Header extends Component { state = { - className: '' + className: ``, }; componentDidUpdate(prevProps) { @@ -48,15 +48,15 @@ class Header extends Component { prevProps.productImagesBrowserStatus; if (imageBrowserStatusChanged) { - if (this.props.productImagesBrowserStatus === 'open') { + if (this.props.productImagesBrowserStatus === `open`) { setTimeout(() => { this.setState({ - className: 'covered' + className: `covered`, }); }, 500); } else { this.setState({ - className: '' + className: ``, }); } } @@ -78,7 +78,7 @@ class Header extends Component { Header.propTypes = { productImagesBrowserStatus: PropTypes.string.isRequired, - isDesktopViewport: PropTypes.bool + isDesktopViewport: PropTypes.bool, }; export default Header; diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js index 0adfd0a3..41262f64 100644 --- a/src/components/Layout/Layout.js +++ b/src/components/Layout/Layout.js @@ -1,12 +1,12 @@ import React from 'react'; import styled, { injectGlobal } from 'react-emotion'; import { navigate } from 'gatsby'; - +import PropTypes from 'prop-types'; import { client } from '../../context/ApolloContext'; import StoreContext, { defaultStoreContext } from '../../context/StoreContext'; import UserContext, { defaultUserContext } from '../../context/UserContext'; import InterfaceContext, { - defaultInterfaceContext + defaultInterfaceContext, } from '../../context/InterfaceContext'; import Header from './Header'; @@ -17,7 +17,7 @@ import Cart from '../Cart'; import SiteMetadata from '../shared/SiteMetadata'; import { logout, getUserInfo } from '../../utils/auth'; -import { breakpoints, spacing } from '../../utils/styles'; +import { breakpoints } from '../../utils/styles'; // Import Futura PT typeface import '../../fonts/futura-pt/Webfonts/futurapt_demi_macroman/stylesheet.css'; @@ -49,55 +49,65 @@ export default class Layout extends React.Component { interface: { ...defaultInterfaceContext, toggleCart: () => { - this.setState(state => ({ - interface: { - ...state.interface, - contributorAreaStatus: - state.interface.isDesktopViewport === false && - state.interface.contributorAreaStatus === 'open' - ? 'closed' - : state.interface.contributorAreaStatus, - cartStatus: - this.state.interface.cartStatus === 'open' ? 'closed' : 'open' - } - })); + this.setState(state => { + return { + interface: { + ...state.interface, + contributorAreaStatus: + state.interface.isDesktopViewport === false && + state.interface.contributorAreaStatus === `open` + ? `closed` + : state.interface.contributorAreaStatus, + cartStatus: + this.state.interface.cartStatus === `open` ? `closed` : `open`, + }, + }; + }); }, toggleProductImagesBrowser: img => { - this.setState(state => ({ - interface: { - ...state.interface, - productImagesBrowserStatus: img ? 'open' : 'closed', - productImageFeatured: img - ? img - : state.interface.productImageFeatured - } - })); + this.setState(state => { + return { + interface: { + ...state.interface, + productImagesBrowserStatus: img ? `open` : `closed`, + productImageFeatured: img + ? img + : state.interface.productImageFeatured, + }, + }; + }); }, featureProductImage: img => { - this.setState(state => ({ - interface: { - ...state.interface, - productImageFeatured: img - } - })); + this.setState(state => { + return { + interface: { + ...state.interface, + productImageFeatured: img, + }, + }; + }); }, setCurrentProductImages: images => { - this.setState(state => ({ - interface: { - ...state.interface, - currentProductImages: images, - productImageFeatured: null - } - })); + this.setState(state => { + return { + interface: { + ...state.interface, + currentProductImages: images, + productImageFeatured: null, + }, + }; + }); }, toggleContributorArea: () => { - this.setState(state => ({ - interface: { - ...state.interface, - contributorAreaStatus: this.toggleContributorAreaStatus() - } - })); - } + this.setState(state => { + return { + interface: { + ...state.interface, + contributorAreaStatus: this.toggleContributorAreaStatus(), + }, + }; + }); + }, }, user: { ...defaultUserContext, @@ -105,103 +115,113 @@ export default class Layout extends React.Component { this.setState({ user: { ...defaultUserContext, - loading: false - } + loading: false, + }, }); - logout(() => navigate('/')); + logout(() => navigate(`/`)); }, updateContributor: data => { - this.setState(state => ({ - user: { - ...state.user, - contributor: data, - loading: false - } - })); - } + this.setState(state => { + return { + user: { + ...state.user, + contributor: data, + loading: false, + }, + }; + }); + }, }, store: { ...defaultStoreContext, addVariantToCart: (variantId, quantity) => { - if (variantId === '' || !quantity) { - console.error('Both a size and quantity are required.'); + if (variantId === `` || !quantity) { + console.error(`Both a size and quantity are required.`); return; } - this.setState(state => ({ - store: { - ...state.store, - adding: true - } - })); + this.setState(state => { + return { + store: { + ...state.store, + adding: true, + }, + }; + }); const { checkout, client } = this.state.store; const checkoutId = checkout.id; const lineItemsToUpdate = [ - { variantId, quantity: parseInt(quantity, 10) } + { variantId, quantity: parseInt(quantity, 10) }, ]; + // eslint-disable-next-line consistent-return return client.checkout .addLineItems(checkoutId, lineItemsToUpdate) .then(checkout => { - this.setState(state => ({ - store: { - ...state.store, - checkout, - adding: false - } - })); + this.setState(state => { + return { + store: { + ...state.store, + checkout, + adding: false, + }, + }; + }); }); }, - removeLineItem: (client, checkoutID, lineItemID) => { - return client.checkout - .removeLineItems(checkoutID, [lineItemID]) - .then(res => { - this.setState(state => ({ + removeLineItem: (client, checkoutID, lineItemID) => + client.checkout.removeLineItems(checkoutID, [lineItemID]).then(res => { + this.setState(state => { + return { store: { ...state.store, - checkout: res - } - })); + checkout: res, + }, + }; }); - }, + }), updateLineItem: (client, checkoutID, lineItemID, quantity) => { const lineItemsToUpdate = [ - { id: lineItemID, quantity: parseInt(quantity, 10) } + { id: lineItemID, quantity: parseInt(quantity, 10) }, ]; return client.checkout .updateLineItems(checkoutID, lineItemsToUpdate) .then(res => { - this.setState(state => ({ - store: { - ...state.store, - checkout: res - } - })); + this.setState(state => { + return { + store: { + ...state.store, + checkout: res, + }, + }; + }); }); - } - } + }, + }, }; async initializeCheckout() { // Check for an existing cart. - const isBrowser = typeof window !== 'undefined'; + const isBrowser = typeof window !== `undefined`; const existingCheckoutID = isBrowser - ? localStorage.getItem('shopify_checkout_id') + ? localStorage.getItem(`shopify_checkout_id`) : null; const setCheckoutInState = checkout => { if (isBrowser) { - localStorage.setItem('shopify_checkout_id', checkout.id); + localStorage.setItem(`shopify_checkout_id`, checkout.id); } - this.setState(state => ({ - store: { - ...state.store, - checkout - } - })); + this.setState(state => { + return { + store: { + ...state.store, + checkout, + }, + }; + }); }; const createNewCheckout = () => this.state.store.client.checkout.create(); @@ -217,7 +237,7 @@ export default class Layout extends React.Component { return; } } catch (e) { - localStorage.setItem('shopify_checkout_id', null); + localStorage.setItem(`shopify_checkout_id`, null); } } @@ -249,28 +269,33 @@ export default class Layout extends React.Component { } } `, - variables: { user: nickname } + variables: { user: nickname }, }); - this.setState(state => ({ - user: { - ...state.user, - contributor: data.updateContributorTags, - loading: false - } - })); + this.setState(state => { + return { + user: { + ...state.user, + contributor: data.updateContributorTags, + loading: false, + }, + }; + }); } catch (error) { - this.setState(state => ({ - user: { - ...state.user, - error: error.toString(), - loading: false - } - })); + this.setState(state => { + return { + user: { + ...state.user, + error: error.toString(), + loading: false, + }, + }; + }); } } componentDidMount() { + const { pathname } = this.props.location; // Observe viewport switching from mobile to desktop and vice versa const mediaQueryToMatch = `(min-width: ${breakpoints.desktop}px)`; @@ -283,14 +308,16 @@ export default class Layout extends React.Component { this.initializeCheckout(); // Mounting Layout on 'callback' page triggers user 'loading' flag - if (this.props.location.pathname === '/callback/') { - this.setState(state => ({ - user: { ...state.user, loading: true } - })); + if (pathname === `/callback/`) { + this.setState(state => { + return { + user: { ...state.user, loading: true }, + }; + }); } // Make sure to set user.profile when a visitor reloads the app - if (this.props.location.pathname !== '/callback/') { + if (pathname !== `/callback/`) { this.setUserProfile(); } } @@ -299,14 +326,16 @@ export default class Layout extends React.Component { // Set user.profile after redirection from '/callback/' to '/' if ( prevProps.location.pathname !== this.props.location.pathname && - prevProps.location.pathname === '/callback/' + prevProps.location.pathname === `/callback/` ) { - this.setState(state => ({ - interface: { - ...state.interface, - contributorAreaStatus: 'open' - } - })); + this.setState(state => { + return { + interface: { + ...state.interface, + contributorAreaStatus: `open`, + }, + }; + }); this.setUserProfile(); } } @@ -316,12 +345,14 @@ export default class Layout extends React.Component { }; updateViewPortState = e => { - this.setState(state => ({ - interface: { - ...state.interface, - isDesktopViewport: this.desktopMediaQuery.matches - } - })); + this.setState(state => { + return { + interface: { + ...state.interface, + isDesktopViewport: this.desktopMediaQuery.matches, + }, + }; + }); }; setUserProfile = async () => { @@ -330,13 +361,15 @@ export default class Layout extends React.Component { // If logged in set user.profile if (profile.nickname) { - this.setState(state => ({ - user: { - ...state.user, - profile, - loading: true - } - })); + this.setState(state => { + return { + user: { + ...state.user, + profile, + loading: true, + }, + }; + }); // and load the contributor data this.loadContributor(profile.nickname); @@ -348,21 +381,23 @@ export default class Layout extends React.Component { } updateViewPortState = e => { - this.setState(state => ({ - interface: { - ...state.interface, - isDesktopViewport: this.desktopMediaQuery.matches - } - })); + this.setState(state => { + return { + interface: { + ...state.interface, + isDesktopViewport: this.desktopMediaQuery.matches, + }, + }; + }); }; toggleContributorAreaStatus = () => { - if (this.state.interface.contributorAreaStatus === 'initial') { - return this.state.interface.isDesktopViewport ? 'closed' : 'open'; + if (this.state.interface.contributorAreaStatus === `initial`) { + return this.state.interface.isDesktopViewport ? `closed` : `open`; } else { - return this.state.interface.contributorAreaStatus === 'closed' - ? 'open' - : 'closed'; + return this.state.interface.contributorAreaStatus === `closed` + ? `open` + : `closed`; } }; @@ -386,7 +421,7 @@ export default class Layout extends React.Component { currentProductImages, featureProductImage, productImageFeatured, - toggleProductImagesBrowser + toggleProductImagesBrowser, }) => ( <>
( ); -export default () => ( +const Logo = () => (
); + +export default Logo; diff --git a/src/components/Layout/PageContent.js b/src/components/Layout/PageContent.js index 31d0760f..705ee2b7 100644 --- a/src/components/Layout/PageContent.js +++ b/src/components/Layout/PageContent.js @@ -9,8 +9,8 @@ const { contributorAreaWidth: { openDesktop: desktopMaxWidth, openHd: hdMaxWidth, - closedDesktop: desktopMinWidth - } + closedDesktop: desktopMinWidth, + }, } = dimensions; const PageContentRoot = styled(`main`)` @@ -54,7 +54,7 @@ const PageContentRoot = styled(`main`)` @media (min-width: ${breakpoints.hd}px) { padding-left: ${props => - props.contributorAreaStatus === 'closed' ? desktopMinWidth : hdMaxWidth}; + props.contributorAreaStatus === `closed` ? desktopMinWidth : hdMaxWidth}; } `; @@ -74,7 +74,7 @@ const Overlay = styled(`div`)` class PageContent extends Component { state = { - className: '' + className: ``, }; componentDidUpdate(prevProps) { @@ -87,67 +87,67 @@ class PageContent extends Component { if (this.props.isDesktopViewport) { if (imageBrowserStatusChanged) { - if (this.props.productImagesBrowserStatus === 'open') { + if (this.props.productImagesBrowserStatus === `open`) { setTimeout(() => { - this.setState(state => ({ - className: state.className + ' covered' - })); + this.setState(state => {return { + className: state.className + ` covered`, + };}); }, 500); } else { - this.setState(state => ({ - className: state.className.replace(' covered', '') - })); + this.setState(state => {return { + className: state.className.replace(` covered`, ``), + };}); } } if (contributorAreaStatusChanged) { - if (this.props.contributorAreaStatus === 'closed') { - this.setState(state => ({ + if (this.props.contributorAreaStatus === `closed`) { + this.setState(state => {return { className: - this.props.contributorAreaStatus !== 'open' - ? state.className + ' wide' - : state.className - })); + this.props.contributorAreaStatus !== `open` + ? state.className + ` wide` + : state.className, + };}); } else { - this.setState(state => ({ + this.setState(state => {return { className: - state.className !== 'open' - ? state.className.replace('wide', '') - : state.className - })); + state.className !== `open` + ? state.className.replace(`wide`, ``) + : state.className, + };}); } } if (cartStatusChanged) { - if (this.props.cartStatus === 'open') { - this.setState(state => ({ - className: state.className + ' moved' - })); + if (this.props.cartStatus === `open`) { + this.setState(state => {return { + className: state.className + ` moved`, + };}); } else { - this.setState(state => ({ - className: state.className.replace('moved', '') - })); + this.setState(state => {return { + className: state.className.replace(`moved`, ``), + };}); } } } else { if (contributorAreaStatusChanged || cartStatusChanged) { this.setState({ className: - this.props.contributorAreaStatus === 'open' || - this.props.cartStatus === 'open' - ? 'covered' - : '' + this.props.contributorAreaStatus === `open` || + this.props.cartStatus === `open` + ? `covered` + : ``, }); } } if (prevProps.location.pathname !== this.props.location.pathname) { - this.setState(state => ({ className: state.className + ' entry' })); + this.setState(state => {return { className: state.className + ` entry` };}); setTimeout(() => { - this.setState(state => ({ - className: state.className.replace('entry', '') - })); + this.setState(state => {return { + className: state.className.replace(`entry`, ``), + };}); }, 500); } } @@ -159,7 +159,7 @@ class PageContent extends Component { return ( {children} - {cartStatus === 'open' && } + {cartStatus === `open` && }