[GREEN] Implement invalid date warning

src/page/batch/EditBatch.jsx

-import React from "react";
+import React, { useState } from "react";
 import { css } from "@emotion/core";
 import FormBatch from "./FormBatch";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
@@ -7,19 +7,25 @@ import useFetchSingleData from "../../utils/useFetchSingleData";
 import useSendData from "../../utils/useSendData";
 import { navigate } from "@reach/router";
 import {ErrorDiv } from "../../component/html/html";
+import moment from "moment";
 
 const EditBatch = ({ batchId }) => {
     const url = `${process.env.REACT_APP_BASE_URL}/batch/${batchId}/`;
     // const url = `http://localhost:8000/batch/${batchId}/`; // for local testing purposes
     const [initialData, errorState] = useFetchSingleData(url);
     const [send, error] = useSendData({ url, method: "PATCH", redirect: -1 });
+    const [errorMessage, setErrorMessage] = useState("")
     const onSubmit = (data) => {
+      if (moment(data.start_date) > moment(data.end_date)) {
+        setErrorMessage("Tanggal mulai tidak boleh melebihi tanggal akhir!")
+      } else {
         const formData = new FormData();
         formData.append("batch_name", data["batch_name"]);
         formData.append("start_date", data["start_date"]);
         formData.append("end_date", data["end_date"]);
-        formData.append("shipping_cost", data["shipping_cost"])
+        formData.append("shipping_cost", data["shipping_cost"]);
         send(formData);
+      }
     };
     if (errorState || Object.keys(initialData).length === 0)
       return (
@@ -90,7 +96,7 @@ const EditBatch = ({ batchId }) => {
             Informasi Batch
           </div>
         </div>
-        <FormBatch {...{ onSubmit, initialData, error }} />
+        <FormBatch {...{ onSubmit, initialData, error, errorMessage }} />
       </div>
     );
   };

src/page/batch/TambahBatch.jsx

-import React from "react";
+import React, { useState } from "react";
 import { css } from "@emotion/core";
 import FormBatch from "./FormBatch";
 import useSendData from "../../utils/useSendData";
 import { Link } from "@reach/router";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import moment from "moment";
 
 const TambahBatch = () => {
   const url = `${process.env.REACT_APP_BASE_URL}/batch/`;
@@ -12,14 +13,18 @@ const TambahBatch = () => {
     method: "POST",
     redirect: "/batch",
   });
+  const [errorMessage, setErrorMessage] = useState("")
   const onSubmit = (data) => {
-    const formData = new FormData();
-    formData.append("batch_name", data["batch_name"]);
-    formData.append("start_date", data["start_date"]);
-    formData.append("end_date", data["end_date"]);
-    formData.append("shipping_cost", data["shipping_cost"]);
-
-    send(formData);
+    if (moment(data.start_date) > moment(data.end_date)) {
+      setErrorMessage("Tanggal mulai tidak boleh melebihi tanggal akhir!")
+    } else {
+      const formData = new FormData();
+      formData.append("batch_name", data["batch_name"]);
+      formData.append("start_date", data["start_date"]);
+      formData.append("end_date", data["end_date"]);
+      formData.append("shipping_cost", data["shipping_cost"]);
+      send(formData);
+    }
   };
   return (
     <div
@@ -57,7 +62,7 @@ const TambahBatch = () => {
       >
         Informasi Batch
       </div>
-      <FormBatch {...{ onSubmit, error }} />
+      <FormBatch {...{ onSubmit, error, errorMessage }} />
     </div>
   );
 };