feat: new home page

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`.
 

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,

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);

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);