Merge pull request #499 from kremalicious/fix/packages

dependencies cleanup

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["babel-preset-gatsby"]
+}

.eslintrc

@@ -1,5 +1,5 @@
 {
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",

README.md

@@ -189,7 +189,7 @@ To run all tests, including all linting tests:
 npm test
 ```
 
-All test files live beside the respective component. Testing setup, fixtures, and mocks can be found in `./jest.config.js` and `./jest` folder.
+Most test files live beside the respective component. Testing setup, fixtures, and mocks can be found in the `./tests/` folder.
 
 ### 🎈 Add a new project
 

jest/jest-preprocess.js

@@ -1,5 +0,0 @@
-const babelOptions = {
-  presets: ['babel-preset-gatsby']
-}
-
-module.exports = require('babel-jest').createTransformer(babelOptions)

package.json

@@ -14,19 +14,19 @@
     "lint:css": "stylelint ./src/**/*.{css,scss}",
     "lint": "npm run lint:js && npm run lint:css",
     "format": "prettier --write 'src/**/*.{js,jsx,css,scss}'",
-    "test": "npm run lint && jest --coverage --silent",
-    "test:watch": "npm run lint && jest --coverage --watch",
+    "test": "NODE_ENV=test npm run lint && jest --coverage --silent -c tests/jest.config.js",
+    "test:watch": "NODE_ENV=test npm run lint && jest --coverage --watch -c tests/jest.config.js",
     "deploy:s3": "./scripts/deploy-s3.sh",
     "new": "babel-node ./scripts/new.js"
   },
   "dependencies": {
-    "@loadable/component": "^5.14.1",
+    "@giphy/js-fetch-api": "^2.1.0",
     "axios": "^0.21.1",
     "file-saver": "^2.0.5",
-    "gatsby": "^2.31.1",
-    "gatsby-image": "^2.10.0",
-    "gatsby-plugin-manifest": "^2.11.0",
-    "gatsby-plugin-matomo": "^0.8.3",
+    "gatsby": "^2.32.3",
+    "gatsby-image": "^2.11.0",
+    "gatsby-plugin-manifest": "^2.12.0",
+    "gatsby-plugin-matomo": "^0.9.0",
     "gatsby-plugin-offline": "^3.9.0",
     "gatsby-plugin-postcss": "^3.6.0",
     "gatsby-plugin-react-helmet": "^3.9.0",
@@ -39,7 +39,6 @@
     "gatsby-transformer-json": "^2.10.0",
     "gatsby-transformer-sharp": "^2.11.0",
     "gatsby-transformer-yaml": "^2.10.0",
-    "giphy-js-sdk-core": "^1.0.6",
     "intersection-observer": "^0.12.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
@@ -51,40 +50,39 @@
     "remark-html": "^13.0.1",
     "remark-parse": "^9.0.0",
     "remark-react": "^8.0.0",
-    "shortid": "^2.2.15",
+    "shortid": "^2.2.16",
     "use-dark-mode": "^2.3.1",
     "vcf": "^2.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/node": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
+    "@babel/core": "^7.12.13",
+    "@babel/eslint-parser": "^7.12.13",
+    "@babel/node": "^7.12.13",
+    "@babel/preset-env": "^7.12.13",
+    "@loadable/component": "^5.14.1",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.3",
+    "@testing-library/react": "^11.2.5",
     "@welldone-software/why-did-you-render": "^6.0.5",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.5.2",
-    "babel-preset-gatsby": "^0.11.0",
+    "babel-preset-gatsby": "^0.12.1",
     "chalk": "^4.1.0",
-    "eslint": "^7.18.0",
+    "eslint": "^7.19.0",
     "eslint-config-prettier": "^7.2.0",
-    "eslint-loader": "^4.0.2",
     "eslint-plugin-graphql": "^4.0.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^4.1.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-testing-library": "^3.10.1",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.20",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.5.3",
+    "jest": "^26.6.3",
     "jest-canvas-mock": "^2.3.0",
     "js-yaml": "^4.0.0",
     "ora": "^5.3.0",
     "postcss-preset-env": "^6.7.0",
     "prepend": "^1.0.2",
     "prettier": "^2.2.1",
-    "slugify": "^1.4.5",
+    "slugify": "^1.4.6",
     "stylelint": "^13.9.0",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-prettier": "^1.1.2"

src/components/atoms/Vcard.test.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render, fireEvent, waitForElement } from '@testing-library/react'
 import Vcard, { constructVcard, toDataURL, init } from './Vcard'
-import meta from '../../../jest/__fixtures__/meta.json'
-import resume from '../../../jest/__fixtures__/resume.json'
+import meta from '../../../tests/__fixtures__/meta.json'
+import resume from '../../../tests/__fixtures__/resume.json'
 
 const metaMock = {
   ...meta.metaYaml,

src/components/molecules/LogoUnit.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import LogoUnit from './LogoUnit'
-import data from '../../../jest/__fixtures__/meta.json'
+import data from '../../../tests/__fixtures__/meta.json'
 
 describe('LogoUnit', () => {
   it('renders correctly from data file values', () => {

src/components/molecules/Repository.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import Repository from './Repository'
-import repos from '../../../jest/__fixtures__/repos.json'
+import repos from '../../../tests/__fixtures__/repos.json'
 
 describe('Repository', () => {
   it('renders correctly', () => {

src/components/organisms/Repositories.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import Repositories from './Repositories'
-import repos from '../../../jest/__fixtures__/repos.json'
+import repos from '../../../tests/__fixtures__/repos.json'
 
 describe('Repositories', () => {
   it('renders correctly', () => {

src/pages/404.jsx

@@ -1,64 +1,60 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+import React, { useEffect, useState } from 'react'
 import { Link } from 'gatsby'
-import giphyAPI from 'giphy-js-sdk-core'
+import { GiphyFetch } from '@giphy/js-fetch-api'
 import SEO from '../components/atoms/SEO'
 import Button from '../components/atoms/Button'
 import styles from './404.module.css'
 
 // Famous last words:
 // "It's just the 404 page so why not expose the dev API key"
-const giphyClient = giphyAPI('LfXRwufRyt6PK414G2kKJBv3L8NdnxyR')
-const tag = 'fail-cat'
+const giphyClient = new GiphyFetch('LfXRwufRyt6PK414G2kKJBv3L8NdnxyR')
+const tag = 'cat'
 
-export default class NotFound extends Component {
-  state = { gif: '' }
-
-  static propTypes = {
-    location: PropTypes.object
-  }
-
-  componentDidMount() {
-    this.getRandomGif()
-  }
-
-  async getRandomGif() {
-    try {
-      let response = await giphyClient.random('gifs', { tag })
-      const gif = response.data.images.original.mp4
-      this.setState({ gif })
-    } catch (error) {
-      return error
-    }
-  }
-
-  handleClick = (e) => {
-    e.preventDefault()
-    this.getRandomGif()
-  }
-
-  render() {
-    return (
-      <>
-        <SEO />
-
-        <article className={styles.content}>
-          <h1>Shenanigans, page not found.</h1>
-          <p>
-            You might want to check the url, or{' '}
-            <Link to={'/'}>go back to the homepage</Link>. Or just check out
-            some {tag} gifs, entirely your choice.
-          </p>
-
-          <video className="gif" src={this.state.gif} autoPlay loop />
-
-          <div>
-            <Button
-              onClick={this.handleClick}
-            >{`Get another '${tag}' gif`}</Button>
-          </div>
-        </article>
-      </>
-    )
+async function getRandomGif() {
+  try {
+    let response = await giphyClient.random({ tag })
+    const gif = response.data.images.original.mp4
+    return gif
+  } catch (error) {
+    console.error(error.message)
   }
 }
+
+export default function NotFound() {
+  const [gif, setGif] = useState('')
+
+  async function handleClick(e) {
+    e.preventDefault()
+    const gif = await getRandomGif()
+    setGif(gif)
+  }
+
+  useEffect(() => {
+    async function init() {
+      const gif = await getRandomGif()
+      setGif(gif)
+    }
+    init()
+  }, [])
+
+  return (
+    <>
+      <SEO />
+
+      <article className={styles.content}>
+        <h1>Shenanigans, page not found.</h1>
+        <p>
+          You might want to check the url, or{' '}
+          <Link to={'/'}>go back to the homepage</Link>. Or just check out some{' '}
+          {tag} gifs, entirely your choice.
+        </p>
+
+        <video className="gif" src={gif} autoPlay loop />
+
+        <div>
+          <Button onClick={handleClick}>{`Get another '${tag}' gif`}</Button>
+        </div>
+      </article>
+    </>
+  )
+}

tests/Home.test.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import Home from '../index'
-import projects from '../../../jest/__fixtures__/projects.json'
-import projectImageFiles from '../../../jest/__fixtures__/projectImageFiles.json'
+import Home from '../src/pages/index'
+import projects from './__fixtures__/projects.json'
+import projectImageFiles from './__fixtures__/projectImageFiles.json'
 
 describe('Home', () => {
   const data = {

tests/Project.test.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import { createHistory, createMemorySource } from '@reach/router'
-import Project from '../{ProjectsYaml.slug}'
-import project from '../../../jest/__fixtures__/project.json'
+import Project from '../src/pages/{ProjectsYaml.slug}'
+import project from './__fixtures__/project.json'
 
 describe('Project', () => {
   const history = createHistory(createMemorySource('/oceanprotocol'))

tests/jest.config.js

@@ -1,12 +1,10 @@
 module.exports = {
-  transform: {
-    '^.+\\.jsx?$': '<rootDir>/jest/jest-preprocess.js'
-  },
+  rootDir: '../',
   moduleNameMapper: {
     '.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
     '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-      '<rootDir>/jest/__mocks__/file-mock.js',
-    '\\.svg': '<rootDir>/jest/__mocks__/svgr-mock.js'
+      '<rootDir>/tests/__mocks__/file-mock.js',
+    '\\.svg': '<rootDir>/tests/__mocks__/svgr-mock.js'
   },
   testPathIgnorePatterns: [
     'node_modules',
@@ -18,6 +16,6 @@ module.exports = {
   globals: {
     __PATH_PREFIX__: ''
   },
-  setupFiles: ['<rootDir>/jest/loadershim.js'],
-  setupFilesAfterEnv: ['<rootDir>/jest/setup-test-env.js']
+  setupFiles: ['<rootDir>/tests/loadershim.js'],
+  setupFilesAfterEnv: ['<rootDir>/tests/setup-test-env.js']
 }

tests/resume.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import Resume from '../resume'
+import Resume from '../src/pages/resume'
 
 describe('Resume', () => {
   it('renders correctly from data file values', () => {