73 lines
1.9 KiB
JavaScript
Executable File
73 lines
1.9 KiB
JavaScript
Executable File
//
|
|
// Thanks @kremalicious
|
|
// https://github.com/kremalicious/portfolio/blob/master/src/pages/404.jsx
|
|
//
|
|
import React, { Component } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { Link } from 'gatsby'
|
|
import giphyAPI from 'giphy-js-sdk-core'
|
|
import Seo from '../components/Seo'
|
|
import Layout from '../components/Layout'
|
|
import Content from '../components/Content'
|
|
import styles from './404.module.scss'
|
|
|
|
// Famous last words:
|
|
// "It's just the 404 page so why not expose the dev API key"
|
|
const giphyClient = giphyAPI('LfXRwufRyt6PK414G2kKJBv3L8NdnxyR')
|
|
const tag = 'ocean'
|
|
|
|
export default class NotFoundPage extends Component {
|
|
state = { gif: '' }
|
|
|
|
static propTypes = {
|
|
location: PropTypes.object
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.getRandomGif()
|
|
}
|
|
|
|
async getRandomGif() {
|
|
try {
|
|
const 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 location={this.props.location} title="404 - Not Found" />
|
|
<Layout location={this.props.location}>
|
|
<Content>
|
|
<article className={styles.content}>
|
|
<h1>Page not found.</h1>
|
|
<p>
|
|
You just hit a route that doesn't exist... the sadness.
|
|
Check your url, <Link to="/">go back to the homepage</Link>, or
|
|
check out some <em>{tag}</em> 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>
|
|
</Content>
|
|
</Layout>
|
|
</>
|
|
)
|
|
}
|
|
}
|