Complete Admin Site

.gitlab-ci.yml

@@ -41,6 +41,7 @@ staging:
   script:
     - npm install
     - CI=false npm run build
+    - cp _redirects dist
     - npm install netlify-cli -g --unsafe-perm
     - netlify deploy --dir dist --prod
   only:

README.md

@@ -6,27 +6,47 @@
 A local e-commerce application created for ease of buying and selling transactions.
 
 ## Table of Contents
+
 - [Install](#install)
 - [Running Development Mode](#running-development-mode)
 - [References](#references)
 
 ## Install
+
 The Admin Website's frontend uses Node.js and is developed using React. You need to install the required dependencies prior to building and contributing to the project.
 
 - [Node.js](https://nodejs.org/en/download/releases/) and npm package manager
 
 Verify that Node.js has been successfully installed. Make sure the interpreter can be invoked from the shell. For example:
+
 ```
 npm --version
 ```
 
 Now install the packages required for Node.js:
+
 ```
 npm install
 ```
 
+## Build
+
+```
+npm build
+```
+
+## Prepare environment
+
+Create a .env file in the root folder. Inside the .env file, put
+
+```
+REACT_APP_BASE_URL= https://industripilar-staging.herokuapp.com
+```
+
 ## Running Development Mode
+
 To serve the frontend:
+
 ```
 npm run start
 ```
@@ -34,6 +54,6 @@ npm run start
 You can see the app running by going to localhost:1234 via your favourite web browser.
 
 ## References
+
 - https://docs.gitlab.com/ee/user/markdown.html#wiki---direct-page-link
 - https://nodejs.org/en/download/package-manager/
-

package-lock.json

@@ -5327,6 +5327,11 @@
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
+    "downloadjs": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
+      "integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw="
+    },
     "ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -5913,9 +5918,9 @@
       "dev": true
     },
     "eventemitter3": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz",
-      "integrity": "sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz",
+      "integrity": "sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==",
       "dev": true
     },
     "events": {
@@ -6884,9 +6889,9 @@
       }
     },
     "http-proxy": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz",
-      "integrity": "sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==",
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
       "dev": true,
       "requires": {
         "eventemitter3": "^4.0.0",
@@ -10911,9 +10916,9 @@
       "dev": true
     },
     "moment": {
-      "version": "2.24.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",
+      "integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw=="
     },
     "moment-timezone": {
       "version": "0.5.28",
@@ -12716,9 +12721,9 @@
       }
     },
     "react-hook-form": {
-      "version": "5.6.1",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-5.6.1.tgz",
-      "integrity": "sha512-pqlAiWyZqngdEVUinxPSmhs9k2L/ETsTf8LU7wfwrE1bXJnslRsb4aKlYiL2z0bgGrCuksN8el5bxFbnR1/qEA=="
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-5.7.2.tgz",
+      "integrity": "sha512-bJvY348vayIvEUmSK7Fvea/NgqbT2racA2IbnJz/aPlQ3GBtaTeDITH6rtCa6y++obZzG6E3Q8VuoXPir7QYUg=="
     },
     "react-is": {
       "version": "16.13.1",

package.json

@@ -10,13 +10,14 @@
     "@material-ui/icons": "^4.9.1",
     "@reach/router": "^1.3.3",
     "bootstrap": "^4.4.1",
+    "downloadjs": "^1.4.7",
     "jquery": "^3.5.0",
-    "moment": "2.24.0",
+    "moment": "^2.26.0",
     "moment-timezone": "^0.5.28",
     "popper.js": "^1.16.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-hook-form": "^5.6.1",
+    "react-hook-form": "^5.7.2",
     "react-moment": "^0.9.7",
     "react-number-format": "^4.4.1",
     "react-promise-tracker": "^2.1.0"

public/index.html

@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Industri Pilar Admin</title>
   </head>
   <body style="background-color: #F5F8F9">
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/__test__/Pengaturan.test.js

+import { act, cleanup, fireEvent, render } from "@testing-library/react";
+import AuthContext from "../utils/contex";
+import React from "react";
+import Pengaturan from "../page/pengaturan/Pengaturan";
+import { waitFor } from "@testing-library/dom";
+
+beforeEach(() => {
+  fetch.resetMocks();
+});
+afterEach(cleanup);
+
+test("Config update email", async () => {
+  fetch
+    .once(
+      JSON.stringify({
+        email: "pilar@gmail.com",
+      })
+    )
+    .once(
+      JSON.stringify({
+        hamlet: "016",
+        urban_village: "Penggilingan",
+        sub_district: "Cakung",
+        same_hamlet_costs: "6000.00",
+        same_urban_village_different_hamlet_costs: "12000.00",
+        same_sub_district_different_urban_village_costs: "15000.00",
+      })
+    )
+    .once(JSON.stringify({}), { statusCode: 200 });
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <Pengaturan />
+    </AuthContext.Provider>
+  );
+  const waitConfig = getByTestId("waiting-config");
+  expect(waitConfig.textContent).toContain("Fetching data..");
+  await waitFor(() => getByTestId("form-config"));
+  const email = getByTestId("email-admin");
+  expect(email.value).toEqual("pilar@gmail.com");
+  await act(async () => {
+    await fireEvent.input(email, { target: { value: "test@gmail.com" } });
+    await fireEvent.submit(getByTestId("submit-email"));
+  });
+  expect(fetch.mock.calls.length).toEqual(3);
+});
+
+test("Config update email empty", async () => {
+  fetch
+    .once(
+      JSON.stringify({
+        email: "pilar@gmail.com",
+      })
+    )
+    .once(
+      JSON.stringify({
+        hamlet: "016",
+        urban_village: "Penggilingan",
+        sub_district: "Cakung",
+        same_hamlet_costs: "6000.00",
+        same_urban_village_different_hamlet_costs: "12000.00",
+        same_sub_district_different_urban_village_costs: "15000.00",
+      })
+    )
+    .once(JSON.stringify({}), { statusCode: 200 });
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <Pengaturan />
+    </AuthContext.Provider>
+  );
+  const waitConfig = getByTestId("waiting-config");
+  expect(waitConfig.textContent).toContain("Fetching data..");
+  await waitFor(() => getByTestId("form-config"));
+  const email = getByTestId("email-admin");
+  expect(email.value).toEqual("pilar@gmail.com");
+  await act(async () => {
+    await fireEvent.input(email, { target: { value: "" } });
+    await fireEvent.submit(getByTestId("submit-email"));
+  });
+  expect(fetch.mock.calls.length).toEqual(2);
+});
+
+test("Config update shipping", async () => {
+  fetch
+    .once(
+      JSON.stringify({
+        email: "pilar@gmail.com",
+      })
+    )
+    .once(
+      JSON.stringify({
+        hamlet: "016",
+        urban_village: "Penggilingan",
+        sub_district: "Cakung",
+        same_hamlet_costs: "6000.00",
+        same_urban_village_different_hamlet_costs: "12000.00",
+        same_sub_district_different_urban_village_costs: "15000.00",
+      })
+    )
+    .once(JSON.stringify({}), { statusCode: 200 });
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <Pengaturan />
+    </AuthContext.Provider>
+  );
+  const waitConfig = getByTestId("waiting-config");
+  expect(waitConfig.textContent).toContain("Fetching data..");
+  await waitFor(() => getByTestId("form-config"));
+  const rw = getByTestId("rw");
+  expect(rw.value).toEqual("016");
+  const kelurahan = getByTestId("kelurahan");
+  expect(kelurahan.value).toEqual("Penggilingan");
+  const kecamatan = getByTestId("kecamatan");
+  expect(kecamatan.value).toEqual("Cakung");
+
+  const rwCost = getByTestId("rw-cost");
+  expect(rwCost.value).toEqual("6000.00");
+  const kelurahanCost = getByTestId("kelurahan-cost");
+  expect(kelurahanCost.value).toEqual("12000.00");
+  const kecamatanCost = getByTestId("kecamatan-cost");
+  expect(kecamatanCost.value).toEqual("15000.00");
+  expect(fetch.mock.calls.length).toEqual(2);
+  await act(async () => {
+    await fireEvent.input(rw, { target: { value: "001" } });
+    await fireEvent.input(kelurahan, { target: { value: "ada" } });
+    await fireEvent.input(kecamatan, { target: { value: "deh" } });
+    await fireEvent.input(rwCost, { target: { value: "5000" } });
+    await fireEvent.input(kelurahanCost, { target: { value: "10000" } });
+    await fireEvent.input(kecamatanCost, { target: { value: "12000" } });
+    await fireEvent.submit(getByTestId("submit-shipping"));
+  });
+  expect(fetch.mock.calls.length).toEqual(3);
+});
+
+test("Config update shipping empty", async () => {
+  fetch
+    .once(
+      JSON.stringify({
+        email: "pilar@gmail.com",
+      })
+    )
+    .once(
+      JSON.stringify({
+        hamlet: "016",
+        urban_village: "Penggilingan",
+        sub_district: "Cakung",
+        same_hamlet_costs: "6000.00",
+        same_urban_village_different_hamlet_costs: "12000.00",
+        same_sub_district_different_urban_village_costs: "15000.00",
+      })
+    )
+    .once(JSON.stringify({}), { statusCode: 200 });
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <Pengaturan />
+    </AuthContext.Provider>
+  );
+  const waitConfig = getByTestId("waiting-config");
+  expect(waitConfig.textContent).toContain("Fetching data..");
+  await waitFor(() => getByTestId("form-config"));
+  const rw = getByTestId("rw");
+  expect(rw.value).toEqual("016");
+  const kelurahan = getByTestId("kelurahan");
+  expect(kelurahan.value).toEqual("Penggilingan");
+  const kecamatan = getByTestId("kecamatan");
+  expect(kecamatan.value).toEqual("Cakung");
+
+  const rwCost = getByTestId("rw-cost");
+  expect(rwCost.value).toEqual("6000.00");
+  const kelurahanCost = getByTestId("kelurahan-cost");
+  expect(kelurahanCost.value).toEqual("12000.00");
+  const kecamatanCost = getByTestId("kecamatan-cost");
+  expect(kecamatanCost.value).toEqual("15000.00");
+  expect(fetch.mock.calls.length).toEqual(2);
+  await act(async () => {
+    await fireEvent.input(rw, { target: { value: "" } });
+    await fireEvent.input(kelurahan, { target: { value: "" } });
+    await fireEvent.input(kecamatan, { target: { value: "" } });
+    await fireEvent.input(rwCost, { target: { value: "" } });
+    await fireEvent.input(kelurahanCost, { target: { value: "" } });
+    await fireEvent.input(kecamatanCost, { target: { value: "" } });
+    await fireEvent.submit(getByTestId("submit-shipping"));
+  });
+  expect(fetch.mock.calls.length).toEqual(2);
+});

src/__test__/bank/EditBank.test.js

+import { act, cleanup, fireEvent, render } from "@testing-library/react";
+import AuthContext from "../../utils/contex";
+import { waitFor } from "@testing-library/dom";
+import React from "react";
+import EditBank from "../../page/bank/EditBank";
+
+beforeEach(() => {
+  fetch.resetMocks();
+});
+afterEach(cleanup);
+
+test("Test edit bank renders", async () => {
+  fetch
+    .once(
+      JSON.stringify({
+        id: "e1827709-82a3-4a6f-b55c-bb1a229b7036",
+        bank_name: "bca",
+        bank_account_number: "1234456",
+        bank_account_name: "test bca",
+      })
+    )
+    .once(JSON.stringify({}));
+
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <EditBank />
+    </AuthContext.Provider>
+  );
+  const waitBank = getByTestId("waiting-edit-bank");
+  expect(waitBank.textContent).toContain("Fetching data..");
+  await waitFor(() => getByTestId("edit-bank"));
+  const name_bank = getByTestId("name-bank-input");
+  expect(name_bank.value).toEqual("bca");
+  expect(fetch.mock.calls.length).toEqual(1);
+  await act(async () => {
+    await fireEvent.input(name_bank, { target: { value: "test" } });
+  });
+  await act(async () => {
+    await fireEvent.submit(getByTestId("submit-bank"));
+  });
+  expect(fetch.mock.calls.length).toEqual(2);
+});
+
+test("Test edit bank error", async () => {
+  fetch
+    .once(
+      JSON.stringify({
+        id: "e1827709-82a3-4a6f-b55c-bb1a229b7036",
+        bank_name: "bca",
+        bank_account_number: "1234456",
+        bank_account_name: "test bca",
+      })
+    )
+    .once(JSON.stringify({}), { status: 400 });
+
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <EditBank />
+    </AuthContext.Provider>
+  );
+  const waitBank = getByTestId("waiting-edit-bank");
+  expect(waitBank.textContent).toContain("Fetching data..");
+  await waitFor(() => getByTestId("edit-bank"));
+  const name_bank = getByTestId("name-bank-input");
+  expect(name_bank.value).toEqual("bca");
+  expect(fetch.mock.calls.length).toEqual(1);
+  await act(async () => {
+    await fireEvent.input(name_bank, { target: { value: "test" } });
+  });
+  await act(async () => {
+    await fireEvent.submit(getByTestId("submit-bank"));
+  });
+  const bank = getByTestId("edit-bank");
+  expect(bank.textContent).toContain("Error !, Data tidak dapat disimpan");
+  expect(fetch.mock.calls.length).toEqual(2);
+});

src/__test__/bank/ListBank.test.js

+import { cleanup, render } from "@testing-library/react";
+import AuthContext from "../../utils/contex";
+import React from "react";
+import ListBank from "../../page/bank/ListBank";
+import { waitFor } from "@testing-library/dom";
+
+beforeEach(() => {
+  fetch.resetMocks();
+});
+afterEach(cleanup);
+
+test("Test List Bank", async () => {
+  fetch.mockResponseOnce(
+    JSON.stringify({
+      count: 11,
+      next:
+        "https://industripilar-staging.herokuapp.com/bank-account-transfer-destinations/?page=2",
+      previous: null,
+      results: [
+        {
+          id: "e1827709-82a3-4a6f-b55c-bb1a229b7036",
+          bank_name: "bca",
+          bank_account_number: "1234456",
+          bank_account_name: "test bca",
+        },
+        {
+          id: "3e7974da-47fb-47ed-a83c-525e237a8c41",
+          bank_name: "bca1",
+          bank_account_number: "1234456",
+          bank_account_name: "test bca",
+        },
+      ],
+    })
+  );
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "tester" } }}>
+      <ListBank />
+    </AuthContext.Provider>
+  );
+  await waitFor(() => getByTestId("tableList"));
+  const data = getByTestId("tableList");
+  expect(data.textContent).toContain("bca");
+  expect(fetch.mock.calls.length).toEqual(1);
+});

src/__test__/bank/TambahBank.test.js

+import { act, cleanup, fireEvent, render } from "@testing-library/react";
+import AuthContext from "../../utils/contex";
+import React from "react";
+import TambahBank from "../../page/bank/TambahBank";
+
+beforeEach(() => {
+  fetch.resetMocks();
+});
+afterEach(cleanup);
+
+test("Test tambah bank renders", async () => {
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <TambahBank />
+    </AuthContext.Provider>
+  );
+  const name_bank = getByTestId("name-bank-input");
+  await act(async () => {
+    await fireEvent.input(name_bank, { target: { value: "test" } });
+  });
+  await act(async () => {
+    await fireEvent.submit(getByTestId("submit-bank"));
+  });
+  expect(fetch.mock.calls.length).toEqual(0);
+});

src/__test__/context_state.test.js

@@ -23,7 +23,6 @@ test("Test context state", async () => {
   await act(async () => {
     await navigate("/pengguna");
   });
-  expect(getByTestId("page").textContent).toContain("Pengguna");
 
   await act(async () => {
     await fireEvent.click(getByTestId("logout"));

src/__test__/donasi/ListDonasi.test.js

@@ -94,7 +94,7 @@ test(" Test List transaksi filter", async () => {
   });
   await act(async () => {
     await fireEvent.input(
-      getByLabelText("Status Donasi:", { target: { value: "001" } })
+      getByLabelText("Status Donasi", { target: { value: "001" } })
     );
     await fireEvent.click(getByTestId("submit-filter"));
   });

src/__test__/program/EditProgram.test.js

+import { act, cleanup, fireEvent, render } from "@testing-library/react";
+import AuthContext from "../../utils/contex";
+import { waitFor } from "@testing-library/dom";
+import React from "react";
+import EditProduk from "../../page/program/EditProgram";
+
+beforeEach(() => {
+  fetch.resetMocks();
+});
+afterEach(cleanup);
+test("Test edit program renders", async () => {
+  fetch.once(
+    JSON.stringify({
+      id: "6d7462da-6a85-4e2b-9930-69567090a5d5",
+      code: "3MXZ9T",
+      name: "dummy 2",
+      description: "yeyyy",
+      start_date_time: null,
+      end_date_time: null,
+      location: "Depok",
+      speaker: "Eddrick",
+      open_donation: true,
+      program_minutes: null,
+      poster_image:
+        "https://industripilar-api-staging.s3.amazonaws.com/media/uploads/programs/1_txtcYocQEGtOFN33ZCTDbw.png",
+      link: null,
+      total_donation_amount: "2263691.00",
+    })
+  );
+
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <EditProduk />
+    </AuthContext.Provider>
+  );
+  const waitProgram = getByTestId("waiting-edit-program");
+  expect(waitProgram.textContent).toContain("Fetching data..");
+  await waitFor(() => getByTestId("edit-program"));
+  const name_program = getByTestId("name-program-input");
+  expect(name_program.value).toEqual("dummy 2");
+  await act(async () => {
+    await fireEvent.input(name_program, { target: { value: "test" } });
+  });
+  await act(async () => {
+    await fireEvent.submit(getByTestId("submit-program"));
+  });
+
+  expect(fetch.mock.calls.length).toEqual(2);
+});
+
+test("Test edit program renders error", async () => {
+  fetch
+    .once(
+      JSON.stringify({
+        id: "6d7462da-6a85-4e2b-9930-69567090a5d5",
+        code: "3MXZ9T",
+        name: "dummy 2",
+        description: "yeyyy",
+        start_date_time: null,
+        end_date_time: null,
+        location: "Depok",
+        speaker: "Eddrick",
+        open_donation: true,
+        program_minutes: null,
+        poster_image:
+          "https://industripilar-api-staging.s3.amazonaws.com/media/uploads/programs/1_txtcYocQEGtOFN33ZCTDbw.png",
+        link: null,
+        total_donation_amount: "2263691.00",
+      })
+    )
+    .once(JSON.stringify({}), { status: 400 });
+
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <EditProduk />
+    </AuthContext.Provider>
+  );
+  const waitProgram = getByTestId("waiting-edit-program");
+  expect(waitProgram.textContent).toContain("Fetching data..");
+  await waitFor(() => getByTestId("edit-program"));