Pbi 9

src/__test__/ListPengguna.test.js

 import React from "react";
-import { render, cleanup } from "@testing-library/react";
+import { render, cleanup, act, fireEvent } from "@testing-library/react";
 import ListPengguna from "../page/pengguna/ListPengguna";
 import AuthContext from "../utils/contex";
 import { waitFor } from "@testing-library/dom";
@@ -53,3 +53,58 @@ test("test fetching API", async () => {
   const data = getByText("Dummy User");
   expect(data.textContent).toContain("Dummy User");
 });
+test("test sort users", async () => {
+  fetch.mockResponseOnce(
+    JSON.stringify({
+      count: 2,
+      next: null,
+      previous: null,
+      results: [
+        {
+          id: "45897cc5-968c-44cf-931d-e646b095fcaf",
+          username: "admin-staging",
+          full_name: "",
+          phone_number: "",
+          address: "",
+          neighborhood: "",
+          hamlet: "",
+          urban_village: "",
+          sub_district: "",
+          profile_picture: null,
+        },
+        {
+          id: "663392ac-1dd6-462b-9301-a19c1287cefd",
+          username: "dummyuser",
+          full_name: "Dummy User",
+          phone_number: "+6285212345678",
+          address: "Jl. Dummy No.1",
+          neighborhood: "000",
+          hamlet: "000",
+          urban_village: "Dummy Urban Village",
+          sub_district: "Dummy Sub-District",
+          profile_picture: null,
+        },
+      ],
+    })
+  );
+
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <ListPengguna />
+    </AuthContext.Provider>
+  );
+  await waitFor(() => getByTestId("sort-button"));
+  const sortButton = getByTestId("sort-button");
+  expect(sortButton.textContent).toContain("Urutkan");
+  await act(async () => {
+    await fireEvent.click(sortButton);
+  });
+  const transactionRadio = getByTestId("transaksi-radio");
+  await act(async () => {
+    await fireEvent.click(transactionRadio);
+  });
+  const saveButton = getByTestId("save-button");
+  await act(async () => {
+    await fireEvent.click(saveButton);
+  });
+});
\ No newline at end of file

src/page/pengguna/ListPengguna.jsx

-import React from "react";
+import React, {useState} from "react";
 import { css } from "@emotion/core";
 import TableComponent from "../../component/TableComponent";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import Button from "@material-ui/core/Button";
+import {
+  RowInput,
+  InputSubmitForm,
+} from "../../component/html/html";
 
 const ListPengguna = () => {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [choice, setChoice] = useState("");
+  const [sortBy, setSortBy] = useState("");
   const data = {
     url: `${process.env.REACT_APP_BASE_URL}/users/`,
     pageDefault: 1,
@@ -16,6 +28,15 @@ const ListPengguna = () => {
       ["total_program_donations", "Jumlah Donasi"],
     ],
     link: "",
+    sort: sortBy
+  };
+
+  const handleClickOpen = () => {
+    setDialogOpen(true);
+  };
+
+  const handleClose = () => {
+    setDialogOpen(false);
   };
   return (
     <div
@@ -32,7 +53,106 @@ const ListPengguna = () => {
       >
         KELOLA PENGGUNA
       </div>
+      <div css={css`
+        margin-top: 20px;
+        padding-left: 50px;
+      `}>
+      <Button
+          onClick={handleClickOpen}
+          variant="contained"
+          size="medium"
+          data-testid="sort-button"
+          css={css`
+            text-transform: none;
+            width: 25%;
+            background: #FFFFFF;
+            border: 1px solid #3c8dbc;
+            box-sizing: border-box;
+            font-size: 14px;
+            line-height: 17px;
+            text-align: center;
+            letter-spacing: 0.2em;
+            color: #3c8dbc;
+            height: 2.3rem;
+          `}
+          >
+          Urutkan
+        </Button>
+      </div>
+      
       <TableComponent {...data} />
+      <Dialog
+        maxWidth="xl"
+        open={dialogOpen}
+        onClose={handleClose}
+        aria-labelledby="max-width-dialog-title"
+      >
+        <DialogTitle id="max-width-dialog-title">Urutkan Berdasarkan</DialogTitle>
+        <DialogContent>
+        <form onSubmit={() => setSortBy(choice)}>
+        <RowInput>
+        <input
+            data-testid="transaksi-radio"
+            type="radio"
+            name="transaksi"
+            value="transaksi"
+            id="transaksi"
+            checked={choice === "transaksi"}
+            onClick={() => setChoice("transaksi")}
+          />
+          <label htmlFor="preorder" css={css`
+            margin-left:20px
+          `}>Terbanyak transaksi</label>
+          </RowInput>
+          <RowInput>
+          <input
+            type="radio"
+            name="donasi-uang"
+            value="donasi-uang"
+            id="donasi-uang"
+            checked={choice === "donasi-uang"}
+            onClick={() => setChoice("donasi-uang")}
+          />
+          <label htmlFor="preorder" css={css`
+            margin-left:20px
+          `}>Terbanyak donasi uang</label>
+          </RowInput>
+          <RowInput>
+          <input
+            type="radio"
+            name="donasi-barang"
+            value="donasi-barang"
+            id="donasi-barang"
+            checked={choice === "donasi-barang"}
+            onClick={() => setChoice("donasi-barang")}
+          />
+          <label htmlFor="preorder" css={css`
+            margin-left:20px
+          `}>Terbanyak donasi barang</label>
+          </RowInput>
+          <RowInput>
+            <InputSubmitForm
+            value="SIMPAN" 
+            type="submit" 
+            data-testid="save-button" 
+            css={css`
+                width:50%;
+                margin-top:10px;
+                margin-left:110px;
+            `}/>
+          </RowInput>
+        </form>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            data-testid="button-close-proof"
+            onClick={handleClose}
+            color="primary"
+          >
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
     </div>
   );
 };

src/page/program/DetailProgram.jsx

@@ -400,7 +400,7 @@ const DetailProgram = ({ idProgram }) => {
             {progress.length > 0 ?
             <div>
               {progress.map ( p => 
-                <div key={p.id} css={css `margin-top: 1rem; margin-bottom: 2rem; font-size: 18px`}>
+                <div key={p.id} css={css `margin-top: 1rem; font-size: 18px`}>
                   <p data-testid="progress-date">{p.date}</p>
                   <p>{p.description}</p>
                   {p.image !== null &&