Merge pull request #10 from treetips/feature/add_error_page

Add error page

Author: treetips

constants/Page.ts

@@ -1,5 +1,5 @@
 import { Color } from "@material-ui/core"
-import { blue, orange, pink } from "@material-ui/core/colors"
+import { blue, orange, pink, red } from "@material-ui/core/colors"
 import { SvgIconProps } from "@material-ui/core/SvgIcon"
 import HomeIcon from "@material-ui/icons/Home"
 import InfoIcon from "@material-ui/icons/Info"
@@ -46,6 +46,16 @@ export class Page implements IEnum<Page> {
     InfoIcon,
     orange
   )
+  public static readonly ERROR = new Page(
+    99,
+    "Error",
+    "Error",
+    "Error | sample",
+    "Error.",
+    "/error",
+    InfoIcon,
+    red
+  )
 
   /**
    * constructor

pages/_error.tsx

@@ -0,0 +1,53 @@
+import { Typography } from "@material-ui/core"
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
+import React from "react"
+import { AppContext } from "../components/AppContext"
+import { SpacingPaper } from "../components/atoms"
+import { HeaderArticleContainer } from "../components/organisms"
+import { Layout } from "../components/templates"
+import { Page } from "../constants"
+import { IPagePayload, PageActions } from "../store/page"
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {},
+  })
+)
+
+interface IProps {
+  httpStatusCode: number
+}
+
+function Error(props: IProps) {
+  const { httpStatusCode } = props
+  const classes = useStyles(props)
+  return (
+    <Layout>
+      <HeaderArticleContainer>
+        <SpacingPaper>
+          <Typography variant="h5">
+            Http status code {httpStatusCode} error !
+          </Typography>
+        </SpacingPaper>
+      </HeaderArticleContainer>
+    </Layout>
+  )
+}
+
+/**
+ * Server side rendering
+ */
+Error.getInitialProps = async (ctx: AppContext): Promise<IProps> => {
+  const pagePayload: IPagePayload = {
+    selectedPage: Page.ERROR,
+  }
+  ctx.store.dispatch({
+    type: PageActions.changePage.toString(),
+    payload: pagePayload,
+  })
+  return {
+    httpStatusCode: ctx.res.statusCode,
+  }
+}
+
+export default Error