diff --git a/package-lock.json b/package-lock.json index fc9915c..46e46ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "license": "MIT", "dependencies": { + "@giphy/js-fetch-api": "^2.1.0", "@loadable/component": "^5.14.1", "axios": "^0.21.1", "file-saver": "^2.0.5", @@ -28,7 +29,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", @@ -1589,6 +1589,50 @@ "node": ">=8" } }, + "node_modules/@giphy/js-fetch-api": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@giphy/js-fetch-api/-/js-fetch-api-2.1.0.tgz", + "integrity": "sha512-I2xXeJrzScawxev1rSk4+zMkVGmjrKiGcY90otXh2Hb3zBjnsZZGanHFJuF3dyUnE2wYgmWa812z2u86i/cpGw==", + "dependencies": { + "@giphy/js-types": "^3.0.0", + "@giphy/js-util": "^2.1.0", + "qs": "^6.9.4" + } + }, + "node_modules/@giphy/js-fetch-api/node_modules/qs": { + "version": "6.9.6", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz", + "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==", + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/@giphy/js-types": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@giphy/js-types/-/js-types-3.0.0.tgz", + "integrity": "sha512-o0e/0eyT7xxqU1el7rc5xL7K1ibWxiRSzqJcUDB9Zy/YGrAYx01YZNji84gNnR83w/rC3Zmw+TN3fm7WHA4dKA==" + }, + "node_modules/@giphy/js-util": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@giphy/js-util/-/js-util-2.1.0.tgz", + "integrity": "sha512-MY75RHk4rhSYqZ7y87RB/xhDeIHrzHsaeJSfpi7HALs5TZp4HTkAoO8Hh0KeCwVDK/9dP52AMqbjDgrIYp7xDw==", + "dependencies": { + "@giphy/js-types": "^3.0.0", + "dompurify": "^2.2.2", + "uuid": "^8.3.0" + } + }, + "node_modules/@giphy/js-util/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/@graphql-tools/batch-execute": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-7.0.0.tgz", @@ -4686,11 +4730,6 @@ "node": ">=0.10.0" } }, - "node_modules/asap": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", - "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" - }, "node_modules/asn1": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz", @@ -9350,6 +9389,11 @@ "url": "https://github.com/fb55/domhandler?sponsor=1" } }, + "node_modules/dompurify": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.2.6.tgz", + "integrity": "sha512-7b7ZArhhH0SP6W2R9cqK6RjaU82FZ2UPM7RO8qN1b1wyvC/NY1FNWcX1Pu00fFOAnzEORtwXe4bPaClg6pUybQ==" + }, "node_modules/domutils": { "version": "2.4.4", "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.4.tgz", @@ -9606,25 +9650,6 @@ "node": ">= 0.8" } }, - "node_modules/encoding": { - "version": "0.1.13", - "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", - "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", - "dependencies": { - "iconv-lite": "^0.6.2" - } - }, - "node_modules/encoding/node_modules/iconv-lite": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.2.tgz", - "integrity": "sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==", - "dependencies": { - "safer-buffer": ">= 2.1.2 < 3.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/end-of-stream": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", @@ -9887,11 +9912,6 @@ "es6-symbol": "^3.1.1" } }, - "node_modules/es6-promise": { - "version": "4.2.8", - "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz", - "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==" - }, "node_modules/es6-symbol": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz", @@ -14373,17 +14393,6 @@ "omggif": "^1.0.10" } }, - "node_modules/giphy-js-sdk-core": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/giphy-js-sdk-core/-/giphy-js-sdk-core-1.0.6.tgz", - "integrity": "sha512-WaOm2ZEMSyPzlM+XbiVSDPZiSNfNfCItIeLh9QNglqiSl5fqewjTl7TY9wJT41Q/ORyOekV5rJDe4EIkjLDLFw==", - "dependencies": { - "es6-promise": "^4.1.0", - "isomorphic-fetch": "^2.2.1", - "lodash": "^4.17.4", - "promise": "^7.1.1" - } - }, "node_modules/git-up": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/git-up/-/git-up-4.0.2.tgz", @@ -16910,32 +16919,6 @@ "node": ">=0.10.0" } }, - "node_modules/isomorphic-fetch": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", - "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", - "dependencies": { - "node-fetch": "^1.0.1", - "whatwg-fetch": ">=0.10.0" - } - }, - "node_modules/isomorphic-fetch/node_modules/is-stream": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", - "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/isomorphic-fetch/node_modules/node-fetch": { - "version": "1.7.3", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", - "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", - "dependencies": { - "encoding": "^0.1.11", - "is-stream": "^1.0.1" - } - }, "node_modules/isomorphic-form-data": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isomorphic-form-data/-/isomorphic-form-data-2.0.0.tgz", @@ -23517,14 +23500,6 @@ "node": ">=0.4.0" } }, - "node_modules/promise": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", - "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", - "dependencies": { - "asap": "~2.0.3" - } - }, "node_modules/promise-inflight": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", @@ -31674,11 +31649,6 @@ "iconv-lite": "0.4.24" } }, - "node_modules/whatwg-fetch": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.5.0.tgz", - "integrity": "sha512-jXkLtsR42xhXg7akoDKvKWE40eJeI+2KZqcp2h3NsOrRnDvtWX36KcKl30dy+hxECivdk2BVUHVNrPtoMBUx6A==" - }, "node_modules/whatwg-mimetype": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz", @@ -33787,6 +33757,45 @@ } } }, + "@giphy/js-fetch-api": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@giphy/js-fetch-api/-/js-fetch-api-2.1.0.tgz", + "integrity": "sha512-I2xXeJrzScawxev1rSk4+zMkVGmjrKiGcY90otXh2Hb3zBjnsZZGanHFJuF3dyUnE2wYgmWa812z2u86i/cpGw==", + "requires": { + "@giphy/js-types": "^3.0.0", + "@giphy/js-util": "^2.1.0", + "qs": "^6.9.4" + }, + "dependencies": { + "qs": { + "version": "6.9.6", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz", + "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==" + } + } + }, + "@giphy/js-types": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@giphy/js-types/-/js-types-3.0.0.tgz", + "integrity": "sha512-o0e/0eyT7xxqU1el7rc5xL7K1ibWxiRSzqJcUDB9Zy/YGrAYx01YZNji84gNnR83w/rC3Zmw+TN3fm7WHA4dKA==" + }, + "@giphy/js-util": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@giphy/js-util/-/js-util-2.1.0.tgz", + "integrity": "sha512-MY75RHk4rhSYqZ7y87RB/xhDeIHrzHsaeJSfpi7HALs5TZp4HTkAoO8Hh0KeCwVDK/9dP52AMqbjDgrIYp7xDw==", + "requires": { + "@giphy/js-types": "^3.0.0", + "dompurify": "^2.2.2", + "uuid": "^8.3.0" + }, + "dependencies": { + "uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + } + } + }, "@graphql-tools/batch-execute": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-7.0.0.tgz", @@ -36200,11 +36209,6 @@ "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=", "dev": true }, - "asap": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", - "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" - }, "asn1": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz", @@ -39906,6 +39910,11 @@ "domelementtype": "^2.1.0" } }, + "dompurify": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.2.6.tgz", + "integrity": "sha512-7b7ZArhhH0SP6W2R9cqK6RjaU82FZ2UPM7RO8qN1b1wyvC/NY1FNWcX1Pu00fFOAnzEORtwXe4bPaClg6pUybQ==" + }, "domutils": { "version": "2.4.4", "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.4.tgz", @@ -40112,24 +40121,6 @@ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" }, - "encoding": { - "version": "0.1.13", - "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", - "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", - "requires": { - "iconv-lite": "^0.6.2" - }, - "dependencies": { - "iconv-lite": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.2.tgz", - "integrity": "sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==", - "requires": { - "safer-buffer": ">= 2.1.2 < 3.0.0" - } - } - } - }, "end-of-stream": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", @@ -40360,11 +40351,6 @@ "es6-symbol": "^3.1.1" } }, - "es6-promise": { - "version": "4.2.8", - "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz", - "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==" - }, "es6-symbol": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz", @@ -43834,17 +43820,6 @@ "omggif": "^1.0.10" } }, - "giphy-js-sdk-core": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/giphy-js-sdk-core/-/giphy-js-sdk-core-1.0.6.tgz", - "integrity": "sha512-WaOm2ZEMSyPzlM+XbiVSDPZiSNfNfCItIeLh9QNglqiSl5fqewjTl7TY9wJT41Q/ORyOekV5rJDe4EIkjLDLFw==", - "requires": { - "es6-promise": "^4.1.0", - "isomorphic-fetch": "^2.2.1", - "lodash": "^4.17.4", - "promise": "^7.1.1" - } - }, "git-up": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/git-up/-/git-up-4.0.2.tgz", @@ -45755,31 +45730,6 @@ "resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz", "integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==" }, - "isomorphic-fetch": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", - "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", - "requires": { - "node-fetch": "^1.0.1", - "whatwg-fetch": ">=0.10.0" - }, - "dependencies": { - "is-stream": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", - "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=" - }, - "node-fetch": { - "version": "1.7.3", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", - "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", - "requires": { - "encoding": "^0.1.11", - "is-stream": "^1.0.1" - } - } - } - }, "isomorphic-form-data": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isomorphic-form-data/-/isomorphic-form-data-2.0.0.tgz", @@ -51091,14 +51041,6 @@ "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==" }, - "promise": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", - "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", - "requires": { - "asap": "~2.0.3" - } - }, "promise-inflight": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", @@ -57580,11 +57522,6 @@ "iconv-lite": "0.4.24" } }, - "whatwg-fetch": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.5.0.tgz", - "integrity": "sha512-jXkLtsR42xhXg7akoDKvKWE40eJeI+2KZqcp2h3NsOrRnDvtWX36KcKl30dy+hxECivdk2BVUHVNrPtoMBUx6A==" - }, "whatwg-mimetype": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz", diff --git a/package.json b/package.json index 9533697..9021746 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "new": "babel-node ./scripts/new.js" }, "dependencies": { + "@giphy/js-fetch-api": "^2.1.0", "@loadable/component": "^5.14.1", "axios": "^0.21.1", "file-saver": "^2.0.5", @@ -39,7 +40,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", diff --git a/src/pages/404.jsx b/src/pages/404.jsx index 33c6e7c..e1bbd42 100644 --- a/src/pages/404.jsx +++ b/src/pages/404.jsx @@ -1,64 +1,55 @@ -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: '' } +export default function NotFound() { + const [gif, setGif] = useState('') - static propTypes = { - location: PropTypes.object - } - - componentDidMount() { - this.getRandomGif() - } - - async getRandomGif() { + async function getRandomGif() { try { - let response = await giphyClient.random('gifs', { tag }) + let response = await giphyClient.random({ tag }) const gif = response.data.images.original.mp4 - this.setState({ gif }) + setGif(gif) } catch (error) { - return error + console.error(error.message) } } - handleClick = (e) => { + async function handleClick(e) { e.preventDefault() - this.getRandomGif() + await getRandomGif() } - render() { - return ( - <> - + useEffect(() => { + getRandomGif() + }, []) -
-

Shenanigans, page not found.

-

- You might want to check the url, or{' '} - go back to the homepage. Or just check out - some {tag} gifs, entirely your choice. -

+ return ( + <> + -
+ + ) }