BUGFIX-1: Ubah format penulisan tanggal menjadi dd/mm/yyyy

package.json

@@ -21,6 +21,7 @@
     "popper.js": "^1.16.1",
     "react": "^16.14.0",
     "react-datepicker": "^3.2.2",
+    "react-datetime": "^3.0.4",
     "react-dom": "^16.14.0",
     "react-hook-form": "^5.7.2",
     "react-moment": "^0.9.7",

src/__test__/batch/TambahBatch.test.js

@@ -2,6 +2,7 @@ import { act, cleanup, fireEvent, render } from "@testing-library/react";
 import AuthContext from "../../utils/contex";
 import React from "react";
 import TambahBatch from "../../page/batch/TambahBatch";
+import moment from "moment";
 
 beforeEach(() => {
   fetch.resetMocks();
@@ -10,25 +11,27 @@ afterEach(cleanup);
 test("Test tambah batch renders", async () => {
   fetch.once(JSON.stringify({}));
 
-  const { getByTestId } = render(
+  const wrapper = render(
     <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
       <TambahBatch />
     </AuthContext.Provider>
   );
-  const name_batch = getByTestId("name-batch-input");
-  const start_date = getByTestId("start-date-input");
-  const end_date = getByTestId("end-date-input");
+  const startDateMoment = moment("Fri Apr 16 2021 00:00:00 GMT+0700")
+  const endDateMoment = moment("Sat Apr 17 2021 00:00:00 GMT+0700")
+  const name_batch = wrapper.getByTestId("name-batch-input");
+  const start_date = wrapper.getByTitle("start-date-title");
+  const end_date = wrapper.getByTitle("end-date-title");
   await act(async () => {
     await fireEvent.input(name_batch, { target: { value: "test" } });
   });
   await act(async () => {
-    await fireEvent.input(start_date, { target: { value: "2020-10-08" } });
+    await fireEvent.input(start_date, { target: { value: startDateMoment } });
   });
   await act(async () => {
-    await fireEvent.input(end_date, { target: { value: "2020-10-15" } });
+    await fireEvent.input(end_date, { target: { value: endDateMoment } });
   });
   await act(async () => {
-    await fireEvent.submit(getByTestId("submit-batch"));
+    await fireEvent.submit(wrapper.getByTestId("submit-batch"));
   });
   expect(fetch.mock.calls.length).toEqual(1);
 });
@@ -48,27 +51,47 @@ test("Test tambah batch form required", async () => {
 
 test("Test tambah batch error", async () => {
   fetch.once(JSON.stringify({}), { status: 400 });
-  const { getByTestId } = render(
+  const wrapper = render(
     <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
       <TambahBatch />
     </AuthContext.Provider>
   );
-  const name_batch = getByTestId("name-batch-input");
-  const start_date = getByTestId("start-date-input");
-  const end_date = getByTestId("end-date-input");
+  const startDateMoment = moment("Fri Apr 16 2021 00:00:00 GMT+0700")
+  const endDateMoment = moment("Sat Apr 17 2021 00:00:00 GMT+0700")
+  const name_batch = wrapper.getByTestId("name-batch-input");
+  const start_date = wrapper.getByTitle("start-date-title");
+  const end_date = wrapper.getByTitle("end-date-title");
   await act(async () => {
     await fireEvent.input(name_batch, { target: { value: "test" } });
   });
   await act(async () => {
-    await fireEvent.input(start_date, { target: { value: "2020-10-08" } });
+    await fireEvent.input(start_date, { target: { value: startDateMoment } });
   });
   await act(async () => {
-    await fireEvent.input(end_date, { target: { value: "2020-10-15" } });
+    await fireEvent.input(end_date, { target: { value: endDateMoment } });
   });
   await act(async () => {
-    await fireEvent.submit(getByTestId("submit-batch"));
+    await fireEvent.submit(wrapper.getByTestId("submit-batch"));
   });
-  const batch = getByTestId("tambah-batch");
+  const batch = wrapper.getByTestId("tambah-batch");
   expect(batch.textContent).toContain("Error !, Data tidak dapat disimpan");
   expect(fetch.mock.calls.length).toEqual(1);
 });
+
+test("Test tanggal form required", async () => {
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <TambahBatch />
+    </AuthContext.Provider>
+  );
+  await act(async () => {
+    await fireEvent.submit(getByTestId("submit-batch"));
+  });
+  const formBatch = getByTestId("form-batch");
+  expect(formBatch.textContent).toContain(
+    "Tanggal mulai tidak boleh kosong"
+  );
+  expect(formBatch.textContent).toContain(
+    "Tanggal berakhir tidak boleh kosong"
+  );
+});
\ No newline at end of file

src/__test__/program/TambahProgram.test.js

@@ -2,6 +2,7 @@ import { act, cleanup, fireEvent, render } from "@testing-library/react";
 import AuthContext from "../../utils/contex";
 import React from "react";
 import TambahProgram from "../../page/program/TambahProgram";
+import moment from "moment";
 
 beforeEach(() => {
   fetch.resetMocks();
@@ -36,38 +37,40 @@ test("Test tambah program renders", async () => {
     })
   );
 
-  const { getByTestId } = render(
+  const startDateMoment = moment("Fri Apr 16 2021 00:00:00 GMT+0700")
+  const endDateMoment = moment("Sat Apr 17 2021 00:00:00 GMT+0700")
+  const wrapper = render(
     <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
       <TambahProgram />
     </AuthContext.Provider>
   );
-  const name_program = getByTestId("name-program-input");
+  const name_program = wrapper.getByTestId("name-program-input");
   await act(async () => {
     await fireEvent.input(name_program, { target: { value: "test" } });
   });
-  const desc_program = getByTestId("description-program-input");
+  const desc_program = wrapper.getByTestId("description-program-input");
   await act(async () => {
     await fireEvent.input(desc_program, { target: { value: "test" } });
   });
-  const start_date_time = getByTestId("start-date-time-program-input");
+  const start_date_time = wrapper.getByTitle("start-date-time-title");
   await act(async () => {
     await fireEvent.input(start_date_time, {
-      target: { value: "2020-05-12T19:30" },
+      target: { value: startDateMoment },
     });
   });
-  const end_date_time = getByTestId("end-date-time-program-input");
+  const end_date_time = wrapper.getByTitle("end-date-time-title");
   await act(async () => {
     await fireEvent.input(end_date_time, {
-      target: { value: "2020-05-15T19:30" },
+      target: { value: endDateMoment },
     });
   });
   await act(async () => {
-    await fireEvent.click(getByTestId("is-open-program-input"), {
+    await fireEvent.click(wrapper.getByTestId("is-open-program-input"), {
       target: { value: "true" },
     });
   });
   await act(async () => {
-    await fireEvent.submit(getByTestId("submit-program"));
+    await fireEvent.submit(wrapper.getByTestId("submit-program"));
   });
   expect(fetch.mock.calls.length).toEqual(1);
 });
@@ -78,6 +81,16 @@ test("Test tambah program required marks", async () => {
       <TambahProgram />
     </AuthContext.Provider>
   );
+  await act(async () => {
+    await fireEvent.submit(getByTestId("submit-program"));
+  });
+  const formBatch = getByTestId("form-program");
+  expect(formBatch.textContent).toContain(
+    "Tanggal dan waktu mulai tidak boleh kosong"
+  );
+  expect(formBatch.textContent).toContain(
+    "Tanggal dan waktu akhir tidak boleh kosong"
+  );
   const formProgram = getByTestId("tambah-program");
   expect(formProgram.textContent).toContain("* Perlu diisi", "Nama program*", "Deskripsi*", "Donasi*", "Tanggal dan waktu mulai*", "Tanggal dan waktu berakhir");
 });
\ No newline at end of file

src/component/FormDownload.jsx

 import React from "react";
 import { useForm } from "react-hook-form";
 import useDownloadFile from "../utils/useDownloadFile";
-import { ErrorDiv } from "./html/html";
+import { ErrorDiv, HiddenInputForm} from "./html/html";
 import Button from "@material-ui/core/Button";
 import { css } from "@emotion/core";
 import GetAppIcon from "@material-ui/icons/GetApp";
+import { useState } from "react";
+import moment from "moment";
+import DateTime from 'react-datetime';
+import "react-datetime/css/react-datetime.css";
 
 const FormDownload = ({ url }) => {
   const [download, error] = useDownloadFile(
@@ -14,6 +18,10 @@ const FormDownload = ({ url }) => {
   const onSubmit = (data) => {
     download({ ...data });
   };
+
+  const [after, setAfter] = useState('');
+  const [before, setBefore] = useState('');
+
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
@@ -36,7 +44,28 @@ const FormDownload = ({ url }) => {
         >
           Tanggal Mulai{" "}
         </label>
-        <input name="after" type="date" ref={register} />
+        <HiddenInputForm
+        type='date' 
+        value={moment(after).format('YYYY-MM-DD')} 
+        name="after" 
+        ref={register}
+        />
+        <DateTime
+        css={css`
+          flex-grow: 4;
+          border: #e0e1e2;
+          border-radius: 4px;
+          font-size: 1rem;
+          width: 175px;
+          padding-right: 5px;
+        `}
+        data-testid="after-input"
+        name="after_plain" 
+        dateFormat="DD/MM/yyyy"
+        timeFormat={false}
+        inputProps={{ placeholder: 'dd/mm/yyyy' }}
+        onChange={(e) => setAfter(moment(e).toDate())}
+        />
       </div>
       <div>
         <label
@@ -47,7 +76,28 @@ const FormDownload = ({ url }) => {
         >
           Tanggal Berakhir{" "}
         </label>
-        <input name="before" type="date" ref={register} />
+        <HiddenInputForm
+        type='date' 
+        value={moment(before).format('YYYY-MM-DD')} 
+        name="before" 
+        ref={register}
+        />
+        <DateTime
+        css={css`
+          flex-grow: 4;
+          border: #e0e1e2;
+          border-radius: 4px;
+          font-size: 1rem;
+          width: 175px;
+          padding-right: 5px;
+        `}
+        data-testid="before-input"
+        name="before_plain" 
+        dateFormat="DD/MM/yyyy"
+        timeFormat={false}
+        inputProps={{ placeholder: 'dd/mm/yyyy' }}
+        onChange={(e) => setBefore(moment(e).toDate())}
+        />
       </div>
       
       <Button

src/component/html/html.js

@@ -56,6 +56,16 @@ export const InputForm = styled.input`
   padding-left: 1rem;
 `;
 
+export const HiddenInputForm = styled.input`
+  flex-grow: 4;
+  border: 1px solid #e0e1e2;
+  box-sizing: border-box;
+  border-radius: 4px;
+  font-size: 1rem;
+  padding-left: 1rem;
+  display: none;
+`;
+
 export const InputTextArea = styled.textarea`
   flex-grow: 4;
   border: 1px solid #e0e1e2;

src/page/batch/DetailBatch.jsx

 import React from "react";
+import "moment-timezone";
+import Moment from "react-moment";
 import useFetchSingleData from "../../utils/useFetchSingleData";
 import { css } from "@emotion/core";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import { navigate } from "@reach/router";
-import { stringToCurrency, stringToDateNoTime } from "../../component/TableUtils";
+import { stringToCurrency } from "../../component/TableUtils";
 import { ErrorDiv, ButtonDeleteStyled } from "../../component/html/html";
 import LinkYellow from "../../component/LinkYellow";
 import useDelete from "../../utils/useDelete";
@@ -91,13 +93,13 @@ const DetailBatch = ({ batchId }) => {
         <div css={css`margin-right: 0.5rem;`}>
          Tanggal Mulai:{" "}
         </div>
-        <div>{stringToDateNoTime(batch.start_date)}</div>
+        <div>{<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={batch.start_date} />}</div>
       </div>
       <div css={css`font-size: 1.2rem;display: flex;`}>
         <div css={css`margin-right: 0.5rem;`}>
           Tanggal Berakhir:{" "}
         </div>
-        <div>{stringToDateNoTime(batch.end_date)}</div>
+        <div>{<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={batch.end_date} />}</div>
       </div>
       <div css={css`font-size: 1.2rem;display: flex;`}>
         <div css={css`margin-right: 0.5rem;`}>

src/page/batch/FormBatch.jsx

@@ -4,10 +4,15 @@ import {
   ErrorDiv,
   RowInput,
   InputForm,
+  HiddenInputForm,
   LabelInput,
   InputSubmitForm,
 } from "../../component/html/html";
 import { css } from "@emotion/core";
+import { useState } from "react";
+import moment from "moment";
+import DateTime from 'react-datetime';
+import "react-datetime/css/react-datetime.css";
 
 const FormBatch = ({ onSubmit, initialData = null }) => {
   const { register, handleSubmit, errors } = useForm({
@@ -18,6 +23,10 @@ const FormBatch = ({ onSubmit, initialData = null }) => {
       shipping_cost: initialData["shipping_cost"],
     } : {},
   });
+
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+
   return (
     <form
       data-testid="form-batch"
@@ -46,13 +55,27 @@ const FormBatch = ({ onSubmit, initialData = null }) => {
   <LabelInput htmlFor="start_date">Tanggal Dimulai 
     {initialData === null && <span css={css`color:red`}>*</span>}
     </LabelInput>
-        <InputForm 
+      <HiddenInputForm
+      type='date' 
+      value={moment(startDate).format('YYYY-MM-DD')} 
+      name="start_date" 
+      ref={register({ required: true })} 
+      readOnly={true}
+      disabled={initialData !== null}
+      />
+        <DateTime
+        css={css`
+          flex-grow: 4;
+          border: #e0e1e2;
+          border-radius: 4px;
+          font-size: 1rem;
+        `}
         data-testid="start-date-input"
-        type="date" 
-        name="start_date" 
-        ref={register({ required: true })} 
-        readOnly={initialData !== null} 
-        disabled={initialData !== null} 
+        name="start_date_plain" 
+        dateFormat="DD/MM/yyyy"
+        timeFormat={false}
+        inputProps={{ placeholder: 'dd/mm/yyyy' }, { title: "start-date-title" }}
+        onChange={(e) => setStartDate(moment(e).toDate())}
         />
       </RowInput>
 
@@ -60,13 +83,27 @@ const FormBatch = ({ onSubmit, initialData = null }) => {
         <LabelInput htmlFor="end_date">Tanggal Berakhir 
         {initialData === null && <span css={css`color:red`}>*</span>}
         </LabelInput>
-        <InputForm 
-        data-testid="end-date-input"
-        type="date" 
+        <HiddenInputForm
+        type='date' 
+        value={moment(endDate).format('YYYY-MM-DD')} 
         name="end_date" 
         ref={register({ required: true })} 
-        readOnly={initialData !== null} 
-        disabled={initialData !== null} 
+        readOnly={true}
+        disabled={initialData !== null}
+        />
+        <DateTime
+        css={css`
+          flex-grow: 4;
+          border: #e0e1e2;
+          border-radius: 4px;
+          font-size: 1rem;
+        `}
+        data-testid="end-date-input"
+        name="end_date_plain" 
+        dateFormat="DD/MM/yyyy"
+        timeFormat={false}
+        inputProps={{ placeholder: 'dd/mm/yyyy' }, { title: "end-date-title" }}
+        onChange={(e) => setEndDate(moment(e).toDate())}
         />
       </RowInput>
       

src/page/batch/ListBatch.jsx

@@ -3,7 +3,7 @@ import TableComponent from "../../component/TableComponent";
 import { css } from "@emotion/core";
 import LinkYellow from "../../component/LinkYellow";
 import useFetchSingleData from "../../utils/useFetchSingleData";
-import { stringToCurrency }from "../../component/TableUtils";
+import { stringToCurrency, stringToDateNoTime }from "../../component/TableUtils";
 
 const ListBatch = () =>{
   let totalCost = "Loading..."
@@ -26,8 +26,8 @@ const ListBatch = () =>{
     keyValuePairs: [
       ["id", "id"],
       ["batch_name", "Nama"],
-      ["start_date", "Tanggal Dimulai"],
-      ["end_date", "Tanggal Berakhir"],
+      ["start_date", "Tanggal Dimulai", stringToDateNoTime],
+      ["end_date", "Tanggal Berakhir", stringToDateNoTime],
     ],
     link: "",
   };

src/page/donasi/DetailDonasiUang.jsx

@@ -6,7 +6,7 @@ import PhoneIcon from "@material-ui/icons/Phone";
 import PhotoIcon from "@material-ui/icons/Photo";
 import { Link, navigate } from "@reach/router";
 import PersonIcon from "@material-ui/icons/Person";
-import { stringToCurrency, stringToDate } from "../../component/TableUtils";
+import { stringToCurrency } from "../../component/TableUtils";
 import { ErrorDiv } from "../../component/html/html";
 import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
@@ -15,6 +15,8 @@ import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import FormDonasi from "./FormDonasi";
 import StatusDonasi from "../../component/StatusDonasi";
+import "moment-timezone";
+import Moment from "react-moment";
 
 const DetailDonasiUang = ({ idDonasi }) => {
   const url = `${process.env.REACT_APP_BASE_URL}/program-donations/${idDonasi}/`;
@@ -145,7 +147,7 @@ const DetailDonasiUang = ({ idDonasi }) => {
         >
           Tanggal dibuat:{" "}
         </div>
-        <div>{stringToDate(donation.created_at)}</div>
+        <div>{<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={donation.created_at} />}</div>
       </div>
       <div
         css={css`
@@ -160,7 +162,7 @@ const DetailDonasiUang = ({ idDonasi }) => {
         >
           Tanggal Update:{" "}
         </div>
-        <div>{stringToDate(donation.updated_at)}</div>
+        <div>{<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={donation.updated_at} />}</div>
       </div>
       <div
         css={css`

src/page/program/FormProgram.jsx

@@ -5,11 +5,15 @@ import {
   ErrorDiv,
   RowInput,
   InputForm,
+  HiddenInputForm,
   LabelInput,
   InputTextArea,
   InputSubmitForm,
 } from "../../component/html/html";
 import { css } from "@emotion/core";
+import { useState } from "react";
+import DateTime from 'react-datetime';
+import "react-datetime/css/react-datetime.css";
 
 const FormProgram = ({ onSubmit, initialData = null }) => {
   const { register, handleSubmit, errors } = useForm({
@@ -64,6 +68,10 @@ const FormProgram = ({ onSubmit, initialData = null }) => {
       formData.append("poster_image", data["poster_image"][0]);
     onSubmit(formData);
   };
+
+  const [startDateTime, setStartDateTime] = useState('');
+  const [endDateTime, setEndDateTime] = useState('');
+
   return (
     <form
       data-testid="form-program"
@@ -73,6 +81,8 @@ const FormProgram = ({ onSubmit, initialData = null }) => {
         flex-direction: column;
       `}
     >
+      {errors.start_date_time && <ErrorDiv>Tanggal dan waktu mulai tidak boleh kosong</ErrorDiv>}
+      {errors.end_date_time && <ErrorDiv>Tanggal dan waktu akhir tidak boleh kosong</ErrorDiv>}
       <div
       css={css`
         font-size: 15px;
@@ -127,11 +137,26 @@ const FormProgram = ({ onSubmit, initialData = null }) => {
           Tanggal dan waktu mulai
           <span css={css`color:red`}>*</span>
         </LabelInput>
-        <InputForm
-          type="datetime-local"
-          data-testid="start-date-time-program-input"
-          name="start_date_time"
-          ref={register({ required: false })}
+        <HiddenInputForm
+        type='datetime-local' 
+        value={moment(startDateTime).format('YYYY-MM-DDTHH:mm')} 
+        name="start_date_time" 
+        ref={register({ required: true })} 
+        />
+        <DateTime
+        css={css`
+          flex-grow: 4;
+          border: #e0e1e2;
+          border-radius: 4px;
+          font-size: 1rem;
+        `}
+        data-testid="start-date-time-program-input"
+        name="start_date_time_plain" 
+        dateFormat="DD/MM/yyyy"
+        timeFormat={true}
+        utc={false}
+        inputProps={{ placeholder: 'dd/mm/yyyy --:-- --' }, { title: "start-date-time-title" }}
+        onChange={(e) => setStartDateTime(moment(e).toDate())}
         />
       </RowInput>
       <RowInput>
@@ -139,11 +164,26 @@ const FormProgram = ({ onSubmit, initialData = null }) => {
           Tanggal dan waktu berakhir
           <span css={css`color:red`}>*</span>
         </LabelInput>
-        <InputForm
-          type="datetime-local"
-          data-testid="end-date-time-program-input"
-          name="end_date_time"
-          ref={register({ required: false })}
+        <HiddenInputForm
+        type='datetime-local' 
+        value={moment(endDateTime).format('YYYY-MM-DDTHH:mm')} 
+        name="end_date_time" 
+        ref={register({ required: true })} 
+        />
+        <DateTime
+        css={css`
+          flex-grow: 4;
+          border: #e0e1e2;
+          border-radius: 4px;
+          font-size: 1rem;
+        `}
+        data-testid="end-date-time-program-input"
+        name="end_date_time_plain" 
+        dateFormat="DD/MM/yyyy"
+        timeFormat={true}
+        utc={false}
+        inputProps={{ placeholder: 'dd/mm/yyyy --:-- --' }, { title: "end-date-time-title" }}
+        onChange={(e) => setEndDateTime(moment(e).toDate())}
         />
       </RowInput>
       <RowInput>

src/page/transaksi/DetailTransaksi.jsx

@@ -15,7 +15,7 @@ import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import Paper from "@material-ui/core/Paper";
 import Status from "../../component/Status";
-import { stringToCurrency, stringToDate } from "../../component/TableUtils";
+import { stringToCurrency } from "../../component/TableUtils";
 import { ErrorDiv } from "../../component/html/html";
 import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
@@ -23,6 +23,9 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import FormStatus from "./FormStatus";
+import "moment-timezone";
+import Moment from "react-moment";
+
 const DetailTransaksi = ({ idTransaksi }) => {
   const url = `${process.env.REACT_APP_BASE_URL}/transactions/${idTransaksi}/`;
   const [transaction, error] = useFetchSingleData(url);
@@ -154,7 +157,7 @@ const DetailTransaksi = ({ idTransaksi }) => {
         >
           Tanggal Pembuatan:{" "}