feat: report request page

src/Router.tsx

@@ -4,6 +4,7 @@ import BillsPage from './pages/bills';
 import HomePage from './pages/home';
 import NewBillPage from './pages/newBill';
 import NotFoundPage from './pages/notFound';
+import ReportPage from './pages/ReportPage';
 
 type RouteConfig = {
   path: string;
@@ -13,11 +14,13 @@ type RouteConfig = {
 
 export default function Router() {
   const routes: RouteConfig[] = [
+    // Home
     {
       path: '/',
       component: HomePage,
       exact: true
     },
+    // Bills
     {
       path: '/bills/new',
       component: NewBillPage,
@@ -32,6 +35,13 @@ export default function Router() {
       path: '/bills/:id',
       component: BillPage
     },
+    //  Reports
+    {
+      path: '/reports',
+      component: ReportPage,
+      exact: true
+    },
+    // … rest
     {
       path: '*',
       component: NotFoundPage

src/components/radioInput.tsx

@@ -0,0 +1,25 @@
+import { Form, Radio } from 'antd';
+import { Controller } from 'react-hook-form';
+
+type RadioInputProps = {
+  control: any;
+  name: string;
+  label: string;
+  options: string[];
+};
+
+export const RadioInput = ({ control, name, label, options }: RadioInputProps) => (
+  <Controller
+    control={control}
+    name={name}
+    render={({ field }) => (
+      <Form.Item label={label}>
+        <Radio.Group {...field}>
+          {options.map((label, value) => (
+            <Radio value={value}>{label}</Radio>
+          ))}
+        </Radio.Group>
+      </Form.Item>
+    )}
+  />
+);

src/pages/ReportPage.tsx

@@ -0,0 +1,44 @@
+import { Button, Form } from 'antd';
+import { useForm } from 'react-hook-form';
+import { InputSelect } from '../components/inputSelect';
+import { RadioInput } from '../components/radioInput';
+import { withLayout } from '../layouts/main';
+import { monthToList, ReportFormType, ReportType } from '../types/report';
+
+function ReportPage() {
+  // hooks
+  const { control, handleSubmit, watch } = useForm<ReportFormType>();
+
+  // Logic
+  const onFinish = handleSubmit((data) => console.log(data));
+
+  const isMonthlyReport = watch('type') === ReportType.monthly;
+
+  return (
+    <>
+      <h1>Reports</h1>
+      <Form layout="vertical" onFinish={onFinish}>
+        <RadioInput
+          control={control}
+          name="type"
+          label="Report type"
+          options={['Monthly', 'Yearly']}
+        />
+        {isMonthlyReport && (
+          <InputSelect
+            control={control}
+            name="month"
+            label="Month"
+            options={monthToList()}
+            placeholder="For which month"
+          />
+        )}
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Form>
+    </>
+  );
+}
+
+export default withLayout(ReportPage);

src/pages/home.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'antd';
+import { Button, Row } from 'antd';
 import { useHistory } from 'react-router-dom';
 import { withLayout } from '../layouts/main';
 
@@ -9,9 +9,14 @@ function HomePage() {
   return (
     <>
       <h1>Rent it Like a Pro</h1>
-      <Button type="primary" size="large" onClick={() => history.push('/bills/new')}>
-        Add Bill
-      </Button>
+      <Row>
+        <Button type="primary" size="large" onClick={() => history.push('/bills/new')}>
+          Add Bill
+        </Button>
+        <Button type="default" size="large" onClick={() => history.push('/reports')}>
+          Edit Report
+        </Button>
+      </Row>
     </>
   );
 }

src/types/report/index.ts

@@ -0,0 +1,31 @@
+export type ReportFormType = {
+  type: ReportType;
+  month?: Month;
+};
+
+export enum ReportType {
+  monthly,
+  yearly
+}
+
+enum Month {
+  January,
+  February,
+  March,
+  April,
+  May,
+  June,
+  July,
+  August,
+  September,
+  October,
+  November,
+  December
+}
+
+export const monthToList = () => enumToList(Month);
+
+export const enumToList = (enumerable: any) =>
+  Object.keys(enumerable)
+    .filter((v) => !parseInt(v))
+    .slice(1);