From bc6362e412d69d2afd35b1e616f5647da8a1a154 Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Wed, 6 Apr 2022 16:31:41 -0700
Subject: [PATCH] client: improve error page design, fix isPageRequest regex in
 middleware

---
 client/components/error/index.tsx | 19 +++++++++++++++++++
 client/pages/_error.tsx           | 17 +++++++++++++++++
 client/pages/_middleware.tsx      |  6 +++---
 3 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 client/components/error/index.tsx
 create mode 100644 client/pages/_error.tsx

diff --git a/client/components/error/index.tsx b/client/components/error/index.tsx
new file mode 100644
index 0000000..af4c2c3
--- /dev/null
+++ b/client/components/error/index.tsx
@@ -0,0 +1,19 @@
+import { Page } from '@geist-ui/core'
+
+const Error = ({ status }: {
+    status: number
+}) => {
+    return (
+        <Page title={status.toString() || 'Error'}>
+            {status === 404 ? (
+                <h1>This page cannot be found.</h1>
+            ) : (
+                <section>
+                    <p>An error occurred: {status}</p>
+                </section>
+            )}
+        </Page>
+    )
+}
+
+export default Error
diff --git a/client/pages/_error.tsx b/client/pages/_error.tsx
new file mode 100644
index 0000000..6f11877
--- /dev/null
+++ b/client/pages/_error.tsx
@@ -0,0 +1,17 @@
+import ErrorComponent from '@components/error'
+
+function Error({ statusCode }: {
+    statusCode: number
+}) {
+    return <ErrorComponent status={statusCode} />
+}
+
+Error.getInitialProps = ({ res, err }: {
+    res: any
+    err: any
+}) => {
+    const statusCode = res ? res.statusCode : err ? err.statusCode : 404
+    return { statusCode }
+}
+
+export default Error
diff --git a/client/pages/_middleware.tsx b/client/pages/_middleware.tsx
index a3bba44..bf2c2ee 100644
--- a/client/pages/_middleware.tsx
+++ b/client/pages/_middleware.tsx
@@ -1,14 +1,14 @@
 import { NextFetchEvent, NextRequest, NextResponse } from 'next/server'
 
-const PUBLIC_FILE = /.(.*)$/
+const PUBLIC_FILE = /\.(.*)$/
 
 export function middleware(req: NextRequest, event: NextFetchEvent) {
     const pathname = req.nextUrl.pathname
     const signedIn = req.cookies['drift-token']
     const getURL = (pageName: string) => new URL(`/${pageName}`, req.url).href
     const isPageRequest =
-        !PUBLIC_FILE.test(req.nextUrl.pathname) &&
-        !req.nextUrl.pathname.startsWith('/api') &&
+        !PUBLIC_FILE.test(pathname) &&
+        !pathname.startsWith('/api') &&
         // header added when next/link pre-fetches a route
         !req.headers.get('x-middleware-preflight')