29f71bfcba
* Moved server/lib/utils.js to Typescript * moved _app.js to Typescript * Moved _error.js to Typescript * Added argument for custom props in _app and _error * Moved _document.js to Typescript * updated one test * Updated types and added a validation for _document props * Improved types * Fixed some types * Updated AppType * Fixed some tests * Added missing import * Removed a not very useful type * Fix missing type * Move @types/styled-jsx * Fix typescript errors
88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
import React from 'react'
|
|
import Head from 'next-server/head'
|
|
import { IContext } from 'next-server/dist/lib/utils'
|
|
|
|
const statusCodes: { [code: number]: string } = {
|
|
400: 'Bad Request',
|
|
404: 'This page could not be found',
|
|
500: 'Internal Server Error',
|
|
501: 'Not Implemented',
|
|
}
|
|
|
|
export interface IErrorProps {
|
|
statusCode: number
|
|
}
|
|
|
|
export default class Error<P = {}> extends React.Component<P & IErrorProps> {
|
|
static displayName = 'ErrorPage'
|
|
|
|
static getInitialProps({ res, err }: IContext) {
|
|
const statusCode =
|
|
res && res.statusCode ? res.statusCode : err ? err.statusCode : 404
|
|
return { statusCode }
|
|
}
|
|
|
|
render() {
|
|
const { statusCode } = this.props
|
|
const title = statusCodes[statusCode] || 'An unexpected error has occurred'
|
|
|
|
return (
|
|
<div style={styles.error}>
|
|
<Head>
|
|
<title>
|
|
{statusCode}: {title}
|
|
</title>
|
|
</Head>
|
|
<div>
|
|
<style dangerouslySetInnerHTML={{ __html: 'body { margin: 0 }' }} />
|
|
{statusCode ? <h1 style={styles.h1}>{statusCode}</h1> : null}
|
|
<div style={styles.desc}>
|
|
<h2 style={styles.h2}>{title}.</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
const styles: { [k: string]: React.CSSProperties } = {
|
|
error: {
|
|
color: '#000',
|
|
background: '#fff',
|
|
fontFamily:
|
|
'-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
|
|
height: '100vh',
|
|
textAlign: 'center',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
|
|
desc: {
|
|
display: 'inline-block',
|
|
textAlign: 'left',
|
|
lineHeight: '49px',
|
|
height: '49px',
|
|
verticalAlign: 'middle',
|
|
},
|
|
|
|
h1: {
|
|
display: 'inline-block',
|
|
borderRight: '1px solid rgba(0, 0, 0,.3)',
|
|
margin: 0,
|
|
marginRight: '20px',
|
|
padding: '10px 23px 10px 0',
|
|
fontSize: '24px',
|
|
fontWeight: 500,
|
|
verticalAlign: 'top',
|
|
},
|
|
|
|
h2: {
|
|
fontSize: '14px',
|
|
fontWeight: 'normal',
|
|
lineHeight: 'inherit',
|
|
margin: 0,
|
|
padding: 0,
|
|
},
|
|
}
|