migrate to new Giphy SDK

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",

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",

src/pages/404.jsx

@@ -1,64 +1,55 @@
-import React, { Component } from 'react'
+import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
 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 giphyClient = new GiphyFetch('LfXRwufRyt6PK414G2kKJBv3L8NdnxyR')
-const tag = 'fail-cat'
+const tag = 'cat'
 
-export default class NotFound extends Component {
+export default function NotFound() {
-  state = { gif: '' }
+  const [gif, setGif] = useState('')
 
-  static propTypes = {
+  async function getRandomGif() {
-    location: PropTypes.object
-  }
-
-  componentDidMount() {
-    this.getRandomGif()
-  }
-
-  async 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() {
+  useEffect(() => {
-    return (
+    getRandomGif()
-      <>
+  }, [])
-        <SEO />
 
-        <article className={styles.content}>
+  return (
-          <h1>Shenanigans, page not found.</h1>
+    <>
-          <p>
+      <SEO />
-            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 />
+      <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>
 
-          <div>
+        <video className="gif" src={gif} autoPlay loop />
-            <Button
+
-              onClick={this.handleClick}
+        <div>
-            >{`Get another '${tag}' gif`}</Button>
+          <Button onClick={handleClick}>{`Get another '${tag}' gif`}</Button>
-          </div>
+        </div>
-        </article>
+      </article>
-      </>
+    </>
-    )
+  )
-  }
 }