Padronizando formulário de relatório e heatmap

Author: rihor

src/pages/StatisticsPage/Heatmap.tsx

@@ -29,6 +29,7 @@ const Heatmap: React.FC = () => {
         params: {
           init: data.init,
           end: data.end,
+          city: process.env.REACT_APP_CITY,
         },
       },
     })

src/pages/StatisticsPage/Report.tsx

@@ -3,10 +3,11 @@ import { FormContext, useForm } from "react-hook-form"
 import { toast } from "react-toastify"
 
 import Api from "../../services/api"
-import { ReportContainer, ReportTable } from "./styles"
+import { ReportContainer, ReportTable, ReportForm } from "./styles"
 
 interface ReportFormData {
-  date: string
+  init: string
+  end: string
 }
 
 interface ReportData {
@@ -35,7 +36,13 @@ const Report: React.FC = () => {
     console.log(data)
     const reportResponse = await Api.get<ReportData[]>({
       pathUrl: "/statistics",
-      config: { params: { city: process.env.REACT_APP_CITY, date: data.date } },
+      config: {
+        params: {
+          init: data.init,
+          end: data.end,
+          city: process.env.REACT_APP_CITY,
+        },
+      },
     })
 
     if (!reportResponse) {
@@ -63,16 +70,19 @@ const Report: React.FC = () => {
       <section>
         <h1>Relatório</h1>
         <FormContext {...form}>
-          <form onSubmit={form.handleSubmit(handleFetchReport)}>
-            <label htmlFor="date">Data </label>
-            <input
-              name="date"
-              type="month"
-              max={new Date().toISOString()}
-              ref={form.register}
-            />
+          <ReportForm onSubmit={form.handleSubmit(handleFetchReport)}>
+            <div>
+              <div>
+                <label htmlFor="init">Data de inicio</label>
+                <input name="init" type="date" ref={form.register} />
+              </div>
+              <div>
+                <label htmlFor="init">Data de fim</label>
+                <input name="end" type="date" ref={form.register} />
+              </div>
+            </div>
             <button type="submit">Gerar relatório</button>
-          </form>
+          </ReportForm>
         </FormContext>
       </section>
       <section>

src/pages/StatisticsPage/styles.ts

@@ -20,6 +20,39 @@ export const NavBar = styled.nav`
   }
 `
 
+const StyledForm = styled.form`
+  > div {
+    display: flex;
+
+    > div {
+      margin-right: 25px;
+
+      label {
+        display: block;
+        margin-bottom: 4px;
+        font-size: 16px;
+      }
+
+      input {
+        border: 2px solid #ddd;
+        border-radius: 4px;
+        padding: 4px 8px;
+        margin-bottom: 8px;
+      }
+    }
+  }
+
+  button {
+    padding: 8px 16px;
+    border: 2px solid #0b76da;
+    border-radius: 4px;
+    background: #0b76da;
+    color: #fff;
+    font-size: 18px;
+    margin-bottom: 5px;
+  }
+`
+
 const Container = styled.article`
   padding: 10px 20px;
   background: #fff;
@@ -45,34 +78,10 @@ export const ReportContainer = styled(Container)`
   display: flex;
   justify-content: space-between;
   transition: all 0.3s;
-
-  form {
-    label {
-      display: block;
-      margin-bottom: 4px;
-      font-size: 16px;
-    }
-
-    input {
-      border: 2px solid #ddd;
-      border-radius: 4px;
-      padding: 4px 8px;
-      display: block;
-      margin-bottom: 8px;
-    }
-
-    button {
-      padding: 8px 16px;
-      border: 2px solid #0b76da;
-      border-radius: 4px;
-      background: #0b76da;
-      color: #fff;
-      font-size: 18px;
-      margin-bottom: 5px;
-    }
-  }
 `
 
+export const ReportForm = styled(StyledForm)``
+
 export const ReportTable = styled.table`
   border-collapse: collapse;
   margin: 25px 0;
@@ -116,38 +125,7 @@ export const HeatmapContainer = styled(Container)`
   transition: all 0.3s;
 `
 
-export const HeatmapForm = styled.form`
-  > div {
-    display: flex;
-
-    > div {
-      margin-right: 25px;
-
-      label {
-        display: block;
-        margin-bottom: 4px;
-        font-size: 16px;
-      }
-
-      input {
-        border: 2px solid #ddd;
-        border-radius: 4px;
-        padding: 4px 8px;
-        margin-bottom: 8px;
-      }
-    }
-  }
-
-  button {
-    padding: 8px 16px;
-    border: 2px solid #0b76da;
-    border-radius: 4px;
-    background: #0b76da;
-    color: #fff;
-    font-size: 18px;
-    margin-bottom: 5px;
-  }
-`
+export const HeatmapForm = styled(StyledForm)``
 
 export const MapContainer = styled.div`
   display: flex;