Final touches (#21)

* Fix React import

* Move code to app.tsx

* Remove unused dependencies

* Upgrade dependencies

* Move type checking to pre-push hook

* Update Prettier hook

* Fix ESLint configuration

* Fix ESLint errors and warnings

* Add .next folder to .prettierignore

* Format files

* Improve TypeScript configuration

* Fix TypeScript errors

* Add styled-components babel plugin

* Fix parseInt base

* Uncomment ESLint cypress plugin

* Fix Logout

* Fix initial customer state

* Remove serviceWorker.js

* Add compression for production

* Specify any types

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["next/babel", "@zeit/next-typescript/babel"]
+  "presets": ["next/babel", "@zeit/next-typescript/babel"],
+  "plugins": ["styled-components"]
 }

.eslintrc.js

@@ -1,39 +1,27 @@
 module.exports = {
   extends: [
-    '@strv/eslint-config-react/v16',
-    '@strv/eslint-config-react/optional',
-    '@strv/eslint-config-typescript',
+    '@strv/react',
+    '@strv/react/optional',
+    '@strv/typescript',
     'prettier',
     'prettier/react',
   ],
-  plugins: ['react-hooks', 'cypress'],
-  root: true,
+  plugins: ['cypress'],
   env: {
-    browser: true,
-    commonjs: true,
-    es6: true,
     jest: true,
-    node: true,
-  },
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 2018,
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-    },
   },
   rules: {
-    'prefer-named-capture-group': 0,
-    'react/no-did-mount-set-state': 1,
     'react/prop-types': 0,
     'no-shadow': [2, { allow: ['name'] }],
-    // let's enforce this approach a bit
-    'import/no-default-export': 1,
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'warn',
-    'no-use-before-define': 'warn',
-    '@typescript-eslint/no-use-before-define': 'warn',
+
+    // to discuss
+    'no-use-before-define': 0,
+    '@typescript-eslint/no-use-before-define': 0,
+    '@typescript-eslint/explicit-function-return-type': 0,
+    '@typescript-eslint/explicit-member-accessibility': 0,
+    '@typescript-eslint/member-ordering': 0,
+    // not released
+    'react/state-in-constructor': 0,
   },
   settings: {
     'import/resolver': {

.prettierignore

@@ -2,3 +2,4 @@
 package.json
 package-lock.json
 yarn.lock
+.next

.stylelintrc

@@ -1,5 +1,5 @@
 {
- "extends": [
+  "extends": [
     "@strv/stylelint-config-styled-components",
     "stylelint-config-prettier"
   ]

package.json

@@ -8,7 +8,7 @@
     "dev": "node server/index.js",
     "format": "prettier --write '*/**/*.{js,css,md,json}'",
     "lint:js": "eslint --ext .js,.ts,.tsx . --ignore-path .gitignore --fix",
-    "lint:css": "stylelint 'src/**/*.js'",
+    "lint:css": "stylelint 'src/**/*.{js,ts,tsx}'",
     "type-check": "tsc",
     "cypress:open": "cypress open"
   },
@@ -17,31 +17,25 @@
       "src/**/*.{js,jsx}",
       "!/node_modules/",
       "!src/index.js",
-      "!src/serviceWorker.js",
       "!src/store/index.js"
     ]
   },
   "lint-staged": {
-    "*.js": [
+    "*.{js,ts,tsx}": [
       "eslint --fix",
       "prettier --write",
       "stylelint",
       "git add"
     ],
-    "*.{ts,tsx}": [
-      "eslint --fix",
-      "prettier --parser typescript --write",
-      "stylelint",
-      "git add"
-    ],
     "*.{json,md}": [
       "prettier --write",
       "git add"
     ]
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged && yarn type-check"
+      "pre-commit": "lint-staged",
+      "pre-push": "yarn type-check"
     }
   },
   "browserslist": [
@@ -53,58 +47,58 @@
   "dependencies": {
     "@zeit/next-css": "^1.0.1",
     "@zeit/next-typescript": "^1.1.1",
-    "express": "^4.16.4",
-    "formik": "^1.5.2",
+    "compression": "^1.7.4",
+    "express": "^4.17.1",
+    "formik": "^1.5.7",
     "isomorphic-fetch": "^2.2.1",
     "next": "^8.1.0",
-    "next-redux-wrapper": "^3.0.0-alpha.2",
+    "next-redux-wrapper": "^3.0.0-alpha.3",
     "qs": "^6.7.0",
     "ramda": "^0.26.1",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
-    "react-redux": "^6.0.1",
-    "react-router": "^5.0.0",
-    "react-router-dom": "^5.0.0",
-    "react-toastify": "^5.1.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-redux": "^7.0.3",
+    "react-toastify": "^5.2.1",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
-    "sanitize.css": "^8.0.0",
-    "styled-components": "^4.2.0",
-    "styled-system": "^4.0.8",
+    "sanitize.css": "^10.0.0",
+    "styled-components": "^4.3.1",
+    "styled-system": "^5.0.5",
     "yup": "^0.27.0"
   },
   "devDependencies": {
-    "@strv/eslint-config-react": "^1.0.1",
-    "@strv/eslint-config-typescript": "^1.0.4",
-    "@strv/stylelint-config-styled-components": "^1.0.0",
+    "@strv/eslint-config-react": "^2.1.1",
+    "@strv/eslint-config-typescript": "^1.1.1",
+    "@strv/stylelint-config-styled-components": "^1.0.1",
     "@types/isomorphic-fetch": "^0.0.35",
-    "@types/jest": "^24.0.11",
+    "@types/jest": "^24.0.13",
     "@types/next": "^8.0.5",
     "@types/next-redux-wrapper": "^2.0.2",
     "@types/node": "^11.13.8",
     "@types/qs": "^6.5.3",
-    "@types/ramda": "^0.26.8",
-    "@types/react": "^16.8.14",
+    "@types/ramda": "^0.26.9",
+    "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",
-    "@types/react-redux": "^7.0.8",
-    "@types/react-router-dom": "^4.3.2",
-    "@types/styled-components": "^4.1.14",
-    "@types/styled-system": "^4.1.3",
-    "@types/yup": "^0.26.13",
-    "@typescript-eslint/parser": "^1.7.0",
-    "cypress": "^3.2.0",
+    "@types/react-redux": "^7.0.9",
+    "@types/styled-components": "^4.1.16",
+    "@types/styled-system": "^4.2.1",
+    "@types/yup": "^0.26.14",
+    "@typescript-eslint/parser": "^1.9.0",
+    "babel-eslint": "^10.0.1",
+    "babel-plugin-styled-components": "^1.10.0",
+    "cypress": "^3.3.1",
     "eslint": "^5.16.0",
-    "eslint-config-prettier": "^4.1.0",
+    "eslint-config-prettier": "^4.3.0",
     "eslint-plugin-cypress": "^2.2.1",
     "eslint-plugin-react-hooks": "^1.6.0",
     "fetch-mock": "^7.3.1",
-    "husky": "^1.3.1",
+    "husky": "^2.4.0",
     "jest-styled-components": "^6.3.1",
-    "lint-staged": "^8.1.5",
-    "prettier": "^1.16.4",
+    "lint-staged": "^8.2.0",
+    "prettier": "^1.18.2",
     "react-testing-library": "^6.1.2",
-    "stylelint": "^9.10.1",
-    "stylelint-config-prettier": "^5.0.0",
+    "stylelint": "^10.1.0",
+    "stylelint-config-prettier": "^5.2.0",
     "typescript": "3.3.4000"
   }
 }

src/App.tsx → pages/_app.tsx

@@ -5,10 +5,10 @@ import { Provider } from 'react-redux'
 import withRedux from 'next-redux-wrapper'
 import { ToastContainer, toast } from 'react-toastify'
 
-import Layout from './components/Layout'
-import GlobalStyles from './globalStyles'
-import { ErrorBoundary } from './components/ErrorBoundary'
-import { configureStore, AppStore } from './store'
+import Layout from '../src/components/Layout'
+import GlobalStyles from '../src/globalStyles'
+import { ErrorBoundary } from '../src/components/ErrorBoundary'
+import { configureStore, AppStore } from '../src/store'
 
 type Props = {
   store: AppStore
@@ -34,15 +34,15 @@ class MyApp extends App<Props> {
     return (
       <Container>
         <Provider store={this.props.store}>
-          <React.Fragment>
+          <>
             <GlobalStyles />
             <ToastContainer position={toast.POSITION.BOTTOM_RIGHT} />
             <ErrorBoundary>
               <Layout>
                 <Component {...pageProps} />
               </Layout>
             </ErrorBoundary>
-          </React.Fragment>
+          </>
         </Provider>
       </Container>
     )

pages/_document.tsx

@@ -1,9 +1,14 @@
 import React from 'react'
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, {
+  Head,
+  Main,
+  NextScript,
+  NextDocumentContext,
+} from 'next/document'
 import { ServerStyleSheet } from 'styled-components'
 
 class CustomDocument extends Document {
-  static async getInitialProps(ctx) {
+  static async getInitialProps(ctx: NextDocumentContext) {
     const sheet = new ServerStyleSheet()
     const originalRenderPage = ctx.renderPage
 

pages/_error.tsx

@@ -1,15 +1 @@
-import React from 'react'
-import { NotFound } from '../src/pages/NotFound'
-
-class Error extends React.Component {
-  static getInitialProps({ res, err }) {
-    const statusCode = res ? res.statusCode : err ? err.statusCode : null
-    return { statusCode }
-  }
-
-  render() {
-    return <NotFound />
-  }
-}
-
-export default Error
+export { NotFound as default } from '../src/pages/NotFound'

server/index.js

@@ -1,6 +1,8 @@
 /* eslint-env node */
 /* eslint-disable @typescript-eslint/no-var-requires */
 const express = require('express')
+const compression = require('compression')
+
 const next = require('next')
 
 const PORT = process.env.PORT || 3000
@@ -13,6 +15,9 @@ app
   .then(() => {
     const server = express()
 
+    // https://github.com/zeit/next.js/wiki/Getting-ready-for-production
+    if (!dev) server.use(compression())
+
     server.get('/products/:id/:name', (req, res) => {
       return app.render(req, res, '/product', req.params)
     })

src/api/api-client.ts

@@ -10,11 +10,7 @@ import { refreshCustomerToken } from './customers/refresh-customer-token'
 import { getToken } from '../utils/token'
 import { getRefreshToken } from '../utils/refresh-token'
 
-type Options = {
-  [key: string]: any
-}
-
-const makeRequest = (url: string, options?: Options, token?: string) =>
+const makeRequest = (url: string, options?: RequestInit, token?: string) =>
   fetch(`${config.apiUrl}${url}`, {
     method: 'GET',
     headers: {
@@ -24,7 +20,7 @@ const makeRequest = (url: string, options?: Options, token?: string) =>
     ...options,
   })
 
-export const api = async (url: string, options?: Options) => {
+export const api = async (url: string, options?: RequestInit) => {
   // Grab the token from the store or from the API
   let token = getToken() || (await getGuestToken())
 

src/api/use-api.ts

@@ -1,8 +1,8 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, DependencyList } from 'react'
 
 const useApi = <T>(
   fn: (...arg: any[]) => Promise<T>,
-  resolveCondition: ReadonlyArray<any> = []
+  deps: DependencyList = []
 ) => {
   const [data, setData] = useState<T | null>(null)
   const [isLoading, setLoading] = useState(false)
@@ -16,7 +16,7 @@ const useApi = <T>(
       .finally(() => setLoading(false))
   }
 
-  useEffect(request, resolveCondition)
+  useEffect(request, deps)
 
   return {
     request,

src/components/ErrorBoundary/index.tsx

@@ -2,16 +2,16 @@ import React, { ErrorInfo } from 'react'
 import { toast } from 'react-toastify'
 
 export class ErrorBoundary extends React.Component {
-  state = {
-    error: false,
-  }
-
   static getDerivedStateFromError() {
     return {
       error: true,
     }
   }
 
+  state = {
+    error: false,
+  }
+
   componentDidCatch(error: Error, info: ErrorInfo) {
     toast.error(`Error: ${error.message}`)
     console.error('Error boundary error', error, info)

src/components/Layout/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, FC } from 'react'
+import React, { FC } from 'react'
 import { connect } from 'react-redux'
 
 import { AppState } from '../../store'
@@ -11,7 +11,7 @@ type Props = ReturnType<typeof mapStateToProps> & {
 }
 
 const Layout: FC<Props> = ({ isAuthenticated, children, dataTestId }) => (
-  <Fragment>
+  <>
     <Header>
       <HeaderSection>
         <HeaderLink href={routes.PRODUCT_LIST}>All Products</HeaderLink>
@@ -32,7 +32,7 @@ const Layout: FC<Props> = ({ isAuthenticated, children, dataTestId }) => (
       </HeaderSection>
     </Header>
     <Wrapper data-testid={dataTestId}>{children}</Wrapper>
-  </Fragment>
+  </>
 )
 
 const mapStateToProps = (state: AppState) => ({

src/components/Layout/styled.tsx

@@ -25,7 +25,7 @@ export const HeaderLink = ({
   children,
 }: {
   href: string
-  children: any
+  children: React.ReactNode
 }) => (
   <Link href={href}>
     <StyledLink>{children}</StyledLink>

src/pages/Cart/CartItem.tsx

@@ -20,7 +20,7 @@ const getNameFallback = flip(propOr)('name')
 // const getNameFallback = (fallback, product) => product && product.name ? product.name : fallback
 // but it is less variable
 
-interface Props {
+type Props = {
   productId: string
   quantity: number
   removeProduct: (id: string) => void