From 661720f8cd822df1190bef480c2f42ea866a6b48 Mon Sep 17 00:00:00 2001
From: Daniel Soares <daniel.soares@me.com>
Date: Sun, 19 Dec 2021 22:31:26 -0300
Subject: [PATCH] fix: add error pages

---
 src/components/Dash/index.tsx | 21 ++-------------------
 src/pages/404.tsx             | 12 ++++++++++++
 src/pages/500.tsx             | 12 ++++++++++++
 3 files changed, 26 insertions(+), 19 deletions(-)
 create mode 100644 src/pages/404.tsx
 create mode 100644 src/pages/500.tsx

diff --git a/src/components/Dash/index.tsx b/src/components/Dash/index.tsx
index e900a2a..c645b97 100644
--- a/src/components/Dash/index.tsx
+++ b/src/components/Dash/index.tsx
@@ -2,7 +2,6 @@ import { isEqual } from 'lodash'
 import { useEffect, useState } from 'react'
 import Collapsible from 'react-collapsible'
 
-import { useAuth } from 'hooks/useAuth'
 import { useData } from 'hooks/useData'
 import { getLocalStorageData, setLocalStorageData } from 'utils/localStorage'
 import { Home } from 'components/Home'
@@ -22,9 +21,6 @@ export function Dash({ initialData }: DashProps) {
   const { data, setData } = useData()
   const [isLoading, setIsLoading] = useState(true)
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
-  const [activeTab, setActiveTab] = useState<'data' | 'colors'>('data')
-
-  const { user } = useAuth()
 
   useEffect(() => {
     if (isLoading) {
@@ -43,12 +39,6 @@ export function Dash({ initialData }: DashProps) {
     }
   }, [data, initialData, isLoading, setData])
 
-  const tabs = [
-    { label: 'Data', value: 'data' },
-    { label: 'Colors', value: 'colors' }
-  ]
-  const body = { data: <DataSettings />, colors: <ColorsSettings /> }
-
   return (
     <Wrapper>
       <Content>
@@ -59,15 +49,8 @@ export function Dash({ initialData }: DashProps) {
         />
         <h1>Dash </h1>
 
-        <pre>{JSON.stringify(user, null, 2)}</pre>
-
-        {tabs.map((tab, i) => (
-          <button key={i} onClick={() => setActiveTab(tab.value as 'data' | 'colors')}>
-            {tab.label}
-          </button>
-        ))}
-
-        {body[activeTab]}
+        <DataSettings />
+        <ColorsSettings />
 
         <Collapsible trigger="Start here">
           <p>This is the collapsible content. It can be any element or React component you like.</p>
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
new file mode 100644
index 0000000..27d5a72
--- /dev/null
+++ b/src/pages/404.tsx
@@ -0,0 +1,12 @@
+import { fetchData } from 'services/fetchData'
+
+import type { GetStaticProps } from 'next'
+
+export default function NotFoundPage() {
+  return <div>Not found</div>
+}
+
+export const getStaticProps: GetStaticProps = async () => {
+  const initialData = await fetchData()
+  return { props: { initialData }, revalidate: 1 }
+}
diff --git a/src/pages/500.tsx b/src/pages/500.tsx
new file mode 100644
index 0000000..acb3645
--- /dev/null
+++ b/src/pages/500.tsx
@@ -0,0 +1,12 @@
+import { fetchData } from 'services/fetchData'
+
+import type { GetStaticProps } from 'next'
+
+export default function InternalErrorPage() {
+  return <div>Internal server error</div>
+}
+
+export const getStaticProps: GetStaticProps = async () => {
+  const initialData = await fetchData()
+  return { props: { initialData }, revalidate: 1 }
+}