From e8b30c868f9a2e7d2b046eb8c6fd95a1bdc8f8ad Mon Sep 17 00:00:00 2001
From: Ruidy <r.nemausat@empfohlen.de>
Date: Wed, 28 Jul 2021 11:35:40 +0200
Subject: [PATCH] feat: new home page

---
 README.md                   |  2 +-
 src/Router.tsx              |  6 ++++++
 src/pages/home.tsx          | 23 +++++++----------------
 src/pages/newBill/index.tsx | 28 ++++++++++++++++++++++++++++
 4 files changed, 42 insertions(+), 17 deletions(-)
 create mode 100644 src/pages/newBill/index.tsx

diff --git a/README.md b/README.md
index 471a0dc..c87e042 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ yarn dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/home.tsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
 [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
 
diff --git a/src/Router.tsx b/src/Router.tsx
index 29d80c5..883df1c 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -2,6 +2,7 @@ import { Route, Switch } from 'react-router-dom';
 import BillPage from './pages/bill';
 import BillsPage from './pages/bills';
 import HomePage from './pages/home';
+import NewBillPage from './pages/newBill';
 import NotFoundPage from './pages/notFound';
 
 type RouteConfig = {
@@ -17,6 +18,11 @@ export default function Router() {
       component: HomePage,
       exact: true
     },
+    {
+      path: '/bills/new',
+      component: NewBillPage,
+      exact: true
+    },
     {
       path: '/bills',
       component: BillsPage,
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 1a85752..140f590 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -1,28 +1,19 @@
-import { useForm } from 'react-hook-form';
+import { Button } from 'antd';
 import { useHistory } from 'react-router-dom';
-import { createBill } from '../api';
-import { BillForm } from '../components/billForm';
 import { withLayout } from '../layouts/main';
-import { BillFormType } from '../types/bill';
 
-const HomePage = () => {
+function HomePage() {
   // Hooks
-  const { handleSubmit, control } = useForm<BillFormType>();
   const history = useHistory();
 
-  // Logic
-  const onSubmit = handleSubmit(async (data) => {
-    const newId = await createBill(data);
-    history.push(`/bills/${newId}`);
-  });
-
   return (
     <>
-      <h1>Create a new bill</h1>
-
-      <BillForm onFinish={onSubmit} control={control} />
+      <h1>Rent it Like a Pro</h1>
+      <Button type="primary" size="large" onClick={() => history.push('/bills/new')}>
+        Add Bill
+      </Button>
     </>
   );
-};
+}
 
 export default withLayout(HomePage);
diff --git a/src/pages/newBill/index.tsx b/src/pages/newBill/index.tsx
new file mode 100644
index 0000000..6ec23bc
--- /dev/null
+++ b/src/pages/newBill/index.tsx
@@ -0,0 +1,28 @@
+import { useForm } from 'react-hook-form';
+import { useHistory } from 'react-router-dom';
+import { createBill } from '../../api';
+import { BillForm } from '../../components/billForm';
+import { withLayout } from '../../layouts/main';
+import { BillFormType } from '../../types/bill';
+
+const NewBillPage = () => {
+  // Hooks
+  const { handleSubmit, control } = useForm<BillFormType>();
+  const history = useHistory();
+
+  // Logic
+  const onSubmit = handleSubmit(async (data) => {
+    const newId = await createBill(data);
+    history.push(`/bills/${newId}`);
+  });
+
+  return (
+    <>
+      <h1>Create a new bill</h1>
+
+      <BillForm onFinish={onSubmit} control={control} />
+    </>
+  );
+};
+
+export default withLayout(NewBillPage);