Pbi 3 batch transaksi

src/page/batch/DetailBatch.jsx

@@ -4,13 +4,16 @@ import { css } from "@emotion/core";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import { navigate } from "@reach/router";
 import { stringToCurrency, stringToDateNoTime } from "../../component/TableUtils";
-import { ErrorDiv } from "../../component/html/html";
+import { ErrorDiv, ButtonDeleteStyled } from "../../component/html/html";
 import LinkYellow from "../../component/LinkYellow";
+import useDelete from "../../utils/useDelete";
 
 const DetailBatch = ({ batchId }) => {
   const url = `${process.env.REACT_APP_BASE_URL}/batch/${batchId}/`;
   // const url = `http://localhost:8000/batch/${batchId}/`; // for local testing purposes
   const [batch, error] = useFetchSingleData(url);
+  const [deleteBatch, errorDelete] = useDelete(url);
+
 
   if (Object.keys(batch).length === 0)
     return (
@@ -39,6 +42,12 @@ const DetailBatch = ({ batchId }) => {
       `}
     >
       {error && <ErrorDiv>Something error</ErrorDiv>}
+      {errorDelete && (
+        <ErrorDiv>
+          Tidak dapat menghapus batch, mohon periksa apakah ada transaksi
+          didalam batch ini.
+        </ErrorDiv>
+      )}
       <div>
         <button
           css={css`
@@ -103,6 +112,18 @@ const DetailBatch = ({ batchId }) => {
               UBAH
             </LinkYellow>
           </div>
+          <div
+            css={css`
+              flex-grow: 1;
+            `}
+          >
+            <ButtonDeleteStyled
+              data-testid="button-delete-category-modal"
+              onClick={() => deleteBatch()}
+            >
+              HAPUS
+            </ButtonDeleteStyled>
+          </div>
         </div>
       </div>
     </div>