feat: adds custom error pages

frontend/components/navbar/index.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from "react";
+import React from "react";
 import { NextComponentType } from "next";
 import Link from "next/link";
 import { signIn, signOut, useSession } from "next-auth/client";
@@ -7,14 +7,9 @@ import {
   Stack,
   Link as _Link,
   Button,
-  useColorMode,
-  Menu,
-  MenuButton,
-  Icon,
-  MenuList,
-  MenuGroup,
-  MenuItem,
   Switch,
+  IconButton,
+  useColorMode,
 } from "@chakra-ui/core";
 
 const Navbar: NextComponentType = () => {
@@ -25,51 +20,9 @@ const Navbar: NextComponentType = () => {
   const color = { light: "gray.800", dark: "gray.100" };
 
   const handleToggleTheme = () => {
-    toggleColorMode();
-  };
+    console.log("hello");
 
-  const profileDropDown = () => {
-    if (!session) {
-      return false;
-    }
-
-    return (
-      <Box>
-        <Menu closeOnSelect={false}>
-          <MenuButton
-            as={Button}
-            color={color[colorMode]}
-            borderColor={borderColor[colorMode]}
-          >
-            Profile <Icon name="chevron-down" />
-          </MenuButton>
-          <MenuList
-            color={color[colorMode]}
-            borderColor={borderColor[colorMode]}
-            placement="bottom-end"
-          >
-            <MenuGroup title="Profile">
-              <MenuItem>
-                <Link href="/my-account">
-                  <_Link>My Account</_Link>
-                </Link>
-              </MenuItem>
-              <MenuItem>
-                <Stack justify="center" align="center" spacing={4} isInline>
-                  <Box>Dark Theme</Box>
-                  <Box>
-                    <Switch
-                      isChecked={colorMode === "dark"}
-                      onChange={handleToggleTheme}
-                    />
-                  </Box>
-                </Stack>
-              </MenuItem>
-            </MenuGroup>
-          </MenuList>
-        </Menu>
-      </Box>
-    );
+    toggleColorMode();
   };
 
   const linksForAllUsers = [
@@ -86,6 +39,11 @@ const Navbar: NextComponentType = () => {
       label: "Users",
       href: "/users",
     },
+    {
+      id: "myAccount",
+      label: "My Account",
+      href: "/my-account",
+    },
   ];
 
   const signInButtonNode = () => {
@@ -132,6 +90,17 @@ const Navbar: NextComponentType = () => {
     );
   };
 
+  const themeToggleButtonNode = () => {
+    return (
+      <IconButton
+        aria-label="Toggle theme"
+        fontSize="20px"
+        icon={colorMode === "dark" ? "sun" : "moon"}
+        onClick={handleToggleTheme}
+      />
+    );
+  };
+
   return (
     <Box bg={bgColor[colorMode]}>
       <Box
@@ -149,7 +118,7 @@ const Navbar: NextComponentType = () => {
             w="full"
           >
             <Box>
-              <Stack isInline spacing={4} align="center">
+              <Stack isInline spacing={4} align="center" fontWeight="semibold">
                 {linksForAllUsers.map((link) => {
                   return (
                     <Box key={link.id}>
@@ -173,7 +142,7 @@ const Navbar: NextComponentType = () => {
             </Box>
             <Box>
               <Stack isInline spacing={4} align="center">
-                {profileDropDown()}
+                {themeToggleButtonNode()}
                 {signInButtonNode()}
                 {signOutButtonNode()}
               </Stack>

frontend/components/pages/error/index.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from "react";
+import { Box, Heading, Stack, Text, Button, Flex } from "@chakra-ui/core";
+import Link from "next/link";
+
+interface IProps {
+  statusCode: number;
+}
+
+const IndexPageComponent: FC<IProps> = ({ statusCode }) => {
+  const heightOfNavbar: string = "74px";
+  const containerPadding: string = "1rem";
+
+  const signOutButtonNode = () => {
+    return (
+      <Box>
+        <Link href="/">
+          <Button variantColor="cyan">Return to the home page</Button>
+        </Link>
+      </Box>
+    );
+  };
+
+  return (
+    <Stack>
+      <Flex
+        minH={`calc(100vh - ${heightOfNavbar} - ${containerPadding}*2)`}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Stack spacing={4} maxW="xl" mx="auto">
+          <Heading textAlign="center">Nextjs Hasura Boilerplate</Heading>
+          <Text fontSize="xl" lineHeight="tall" textAlign="center">
+            {statusCode
+              ? `An error ${statusCode} occurred on server`
+              : "An error occurred on client"}
+          </Text>
+          <Box>
+            <Stack isInline align="center" justifyContent="center">
+              {signOutButtonNode()}
+            </Stack>
+          </Box>
+        </Stack>
+      </Flex>
+    </Stack>
+  );
+};
+
+export default IndexPageComponent;

frontend/components/pages/index/index.tsx

@@ -61,7 +61,7 @@ const IndexPageComponent = () => {
       >
         <Stack spacing={4} maxW="xl" mx="auto">
           <Heading textAlign="center">Nextjs Hasura Boilerplate</Heading>
-          <Text fontSize="xl" lineHeight="tall">
+          <Text fontSize="xl" lineHeight="tall" textAlign="center">
             Boilerplate for building applications using Hasura and Next.js. This
             demo application has been built using Chakra UI, NextAuth.js and
             urql.

frontend/next.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  // https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode
+  reactStrictMode: true,
+};

frontend/pages/404.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Head from "next/head";
+import Page from "components/pages/error";
+import { NextPage } from "next";
+
+const Custom404Page: NextPage = () => {
+  return (
+    <>
+      <Head>
+        <title>Error Page</title>
+      </Head>
+      <Page statusCode={404} />
+    </>
+  );
+};
+
+export default Custom404Page;

frontend/pages/_error.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import Head from "next/head";
+import Page from "components/pages/error";
+import { NextPage } from "next";
+
+interface iProps {
+  statusCode: number;
+}
+
+const Error: NextPage<iProps> = ({ statusCode }) => {
+  return (
+    <>
+      <Head>
+        <title>Error Page</title>
+      </Head>
+      <Page statusCode={statusCode} />
+    </>
+  );
+};
+
+Error.getInitialProps = ({ res, err }) => {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+
+  return { statusCode };
+};
+
+export default Error;

frontend/pages/api/auth/[...nextauth].ts

@@ -2,13 +2,9 @@ import NextAuth from "next-auth";
 import Providers from "next-auth/providers";
 import jwt from "jsonwebtoken";
 import { NextApiRequest, NextApiResponse } from "next";
-
-interface iToken {
-  id: string;
-  email: string;
-  name: string;
-  picture: string;
-}
+import ISession from "types/session";
+import IUser from "types/user";
+import iToken from "types/token";
 
 const options = {
   providers: [
@@ -72,12 +68,12 @@ const options = {
   },
   debug: true,
   callbacks: {
-    session: async (session, user) => {
+    session: async (session: ISession, user: IUser) => {
       session.id = user.id;
 
       return Promise.resolve(session);
     },
-    jwt: async (token, user) => {
+    jwt: async (token: iToken, user: IUser) => {
       const isSignIn = user ? true : false;
 
       if (isSignIn) {

frontend/types/session.ts

@@ -4,5 +4,6 @@ export default interface ISession {
     email: string;
     image: string;
   };
+  id: number;
   expires: string;
 }

frontend/types/token.ts

@@ -0,0 +1,6 @@
+export default interface iToken {
+  id: number;
+  email: string;
+  name: string;
+  picture: string;
+}