PBI-11: Menambahkan data donasi barang pada program

package.json

@@ -15,7 +15,7 @@
     "caniuse-lite": "^1.0.30001161",
     "downloadjs": "^1.4.7",
     "jquery": "^3.5.0",
-    "moment": "^2.26.0",
+    "moment": "^2.29.1",
     "moment-timezone": "^0.5.28",
     "node-fetch": "^2.6.1",
     "popper.js": "^1.16.1",
@@ -31,7 +31,7 @@
     "reactstrap": "^8.9.0"
   },
   "scripts": {
-    "start": "cross-env REACT_APP_BASE_URL=$(grep REACT_APP_BASE_URL .env_var | cut -d '=' -f2) parcel public/index.html",
+    "start": "cross-env REACT_APP_BASE_URL=http://localhost:8000 parcel public/index.html",
     "build": "cross-env REACT_APP_BASE_URL=$(grep REACT_APP_BASE_URL .env_var | cut -d '=' -f2) parcel build public/index.html",
     "test": "jest",
     "test:coverage": "jest --coverage",

src/__test__/program/DetailProgram.test.js

+import { cleanup, render } from "@testing-library/react";
+import AuthContext from "../../utils/contex";
+import React from "react";
+import DetailProgram from "../../page/program/DetailProgram";
+import { waitFor } from "@testing-library/dom";
+
+beforeEach(() => {
+    fetch.resetMocks();
+});
+afterEach(cleanup)
+
+test("Test detail program", async () => {
+    fetch.mockResponseOnce(
+        JSON.stringify({
+            id: "282007ff-d0be-4d68-823e-03bde086ee79",
+            name: "Pilar Belajar",
+            description: "Pilar Belajar adalah program belajar untuk anak-anak.",
+            start_date_time: "2020-04-08T10:00:00+07:00",
+            end_date_time: "2020-04-09T10:00:00+07:00",
+            location: "Balai Warga Jatinegara Baru",
+            speaker: "Sherlock Holmes",
+            poster_image: null,
+            goods_donation: [
+                {
+                    id: "282007ff-d0be-4d68-823e-03bde086ee79",
+                    desc: "Roti",
+                    quantity: 10
+                }
+            ]
+        })
+    );
+    const { getByTestId } = render(
+        <AuthContext.Provider value={{ profile: { token: "tester" } }}>
+          <DetailProgram idProgram={"282007ff-d0be-4d68-823e-03bde086ee79"} />
+        </AuthContext.Provider>
+    );
+    await waitFor(() => getByTestId("detail-program-page"));
+    const data = getByTestId("detail-program-page");
+    expect(data.textContent).toContain("Roti");
+})
\ No newline at end of file

src/page/program/DetailProgram.jsx

@@ -7,7 +7,10 @@ import PersonIcon from "@material-ui/icons/Person";
 import LocationOnIcon from "@material-ui/icons/LocationOn";
 import EventIcon from "@material-ui/icons/Event";
 import MoneyIcon from "@material-ui/icons/Money";
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import LanguageIcon from "@material-ui/icons/Language";
+import InboxIcon from '@material-ui/icons/Inbox';
+import ArrowRightIcon from '@material-ui/icons/ArrowRight';
 import useFetchSingleData from "../../utils/useFetchSingleData";
 import LinkYellow from "../../component/LinkYellow";
 import useDelete from "../../utils/useDelete";
@@ -69,7 +72,7 @@ const DetailProgram = ({ idProgram }) => {
   const end_date_time = new Date(program.end_date_time).toLocaleString();
   return (
     <div
-      data-testid="page"
+      data-testid="detail-program-page"
       css={css`
         width: 100%;
         height: 100%;
@@ -296,7 +299,36 @@ const DetailProgram = ({ idProgram }) => {
                       margin-top: 1rem;
                     `}
                   >
-                    <MoneyIcon style={{ fontSize: 20, color: "FFC80A" }} />
+                    <LanguageIcon style={{ fontSize: 20, color: "FFC80A" }} />
+                    <div
+                      css={css`
+                        display: inline;
+                        margin-left: 2rem;
+                        font-style: normal;
+                        font-weight: normal;
+                        font-size: 18px;
+                        line-height: 22px;
+                      `}
+                    >
+                      {program.link === null || program.link === "" ? (
+                        "Tidak ada tautan"
+                      ) : (
+                        <a
+                          href={`${program.link}`}
+                          rel="noopener noreferrer"
+                          target="_blank"
+                        >
+                          {program.link}
+                        </a>
+                      )}
+                    </div>
+                  </div>
+                  <div
+                    css={css`
+                      margin-top: 1rem;
+                    `}
+                  >
+                    <CheckBoxIcon style={{ fontSize: 20, color: "FFC80A" }} />
                     <div
                       css={css`
                         display: inline;
@@ -310,7 +342,25 @@ const DetailProgram = ({ idProgram }) => {
                       {program.open_donation
                         ? "Donasi dibuka"
                         : "Donasi ditutup"}
-                      {" - "}
+                    </div>
+                  </div>
+                  <div
+                    css={css`
+                      margin-top: 1rem;
+                    `}
+                  >
+                    <MoneyIcon style={{ fontSize: 20, color: "FFC80A" }} />
+                    <div
+                      css={css`
+                        display: inline;
+                        margin-left: 2rem;
+                        font-style: normal;
+                        font-weight: normal;
+                        font-size: 18px;
+                        line-height: 22px;
+                      `}
+                    >
+                      {"Total Donasi Uang - "}
                       {stringToCurrency(program.total_donation_amount)}
                     </div>
                   </div>
@@ -319,7 +369,7 @@ const DetailProgram = ({ idProgram }) => {
                       margin-top: 1rem;
                     `}
                   >
-                    <LanguageIcon style={{ fontSize: 20, color: "FFC80A" }} />
+                    <InboxIcon style={{ fontSize: 20, color: "FFC80A" }} />
                     <div
                       css={css`
                         display: inline;
@@ -330,17 +380,25 @@ const DetailProgram = ({ idProgram }) => {
                         line-height: 22px;
                       `}
                     >
-                      {program.link === null || program.link === "" ? (
-                        "Tidak ada tautan"
-                      ) : (
-                        <a
-                          href={`${program.link}`}
-                          rel="noopener noreferrer"
-                          target="_blank"
-                        >
-                          {program.link}
-                        </a>
-                      )}
+                      {"Donasi Barang - "}
+                      {program.goods_donation ?
+                        program.goods_donation.map(p => 
+                          <div 
+                            key={p.key}
+                            css={css`
+                              margin-left: 3rem;
+                              font-style: normal;
+                              font-weight: normal;
+                              font-size: 18px;
+                              line-height: 22px;
+                            `}
+                          >
+                            
+                            <ArrowRightIcon style={{ fontSize: 20, color: "FFC80A" }} />
+                            {p.desc} - {p.quantity} buah
+                            </div>): 
+                          <div>Tidak ada donasi barang</div>
+                      }
                     </div>
                   </div>
                   <div