Fakultas Ilmu Komputer UI

DetailPengguna.jsx 7.63 KB
Newer Older
1
import React from "react";
2
import { css } from "@emotion/core";
Michael Wiryadinata Halim's avatar
Michael Wiryadinata Halim committed
3
import ArrowBackIcon from "@material-ui/icons/ArrowBack";
Jeffrey's avatar
Jeffrey committed
4
import { navigate } from "@reach/router";
5
6
7
8
import PersonIcon from "@material-ui/icons/Person";
import PhoneIcon from "@material-ui/icons/Phone";
import LocationOnIcon from "@material-ui/icons/LocationOn";
import ScheduleIcon from "@material-ui/icons/Schedule";
Jeffrey's avatar
Jeffrey committed
9
import useFetchSingleData from "../../utils/useFetchSingleData";
10
import { ErrorDiv } from "../../component/html/html";
Jeffrey's avatar
Jeffrey committed
11
12
import { stringToCurrency, stringToDate } from "../../component/TableUtils";
import TableComponent from "../../component/TableComponent";
13
import { donationToColoredStatus } from "../../component/TableUtils";
14

15
16
17
const DetailPengguna = ({ userId }) => {
  const url = `${process.env.REACT_APP_BASE_URL}/users/${userId}/`;
  const [user, error] = useFetchSingleData(url);
Jeffrey's avatar
Jeffrey committed
18
19
20
21
  const data = {
    url: `${process.env.REACT_APP_BASE_URL}/transactions/`,
    pageDefault: 1,
    argument: `user=${userId}`,
22
    title: "",
Jeffrey's avatar
Jeffrey committed
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
    keyValuePairs: [
      ["id", "id"],
      ["transaction_number", "ID Transaksi"],
      ["created_at", "Tanggal Pembuatan", stringToDate],
      ["updated_at", "Tanggal Update", stringToDate],
      ["readable_transaction_status", "Status"],
      ["subtotal", "Total", stringToCurrency],
    ],
    link: "/transaksi/",
    filter: [
      ["updated_at_before", "Updated At Before"],
      ["updated_at_after", "Updated At After"],
      {
        transaction_status: {
          label: "Status transaksi",
          choices: [
            { "001": "Waiting for proof of payment" },
            { "002": "Waiting for seller confirmation" },
            { "003": "In process" },
            { "004": "Being shipped" },
            { "005": "Completed" },
            { "006": "Canceled" },
          ],
        },
      },
    ],
  };
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
  const data_donasi = {
    url: `${process.env.REACT_APP_BASE_URL}/program-donations/`,
    pageDefault: 1,
    argument: `user=${userId}`,
    title: "",
    keyValuePairs: [
      ["id", "id"],
      ["donation_number", "ID Donasi"],
      ["user_username", "Username"],
      ["program_name", "Nama Program"],
      ["", "Status", donationToColoredStatus],
    ],
    link: "/donasi/",
    filter: [
      ["updated_at_date_range_after", "Updated from"],
      ["updated_at_date_range_before", "Updated before"],
      {
        donation_status: {
          label: "Status Donasi",
          choices: [
            { "001": "Menunggu konfirmasi admin" },
            { "002": "Selesai" },
            { "003": "Dibatalkan" },
            { "004": "Menunggu pengunggahan kembali bukti transfer bank" },
          ],
        },
      },
    ],
  };
79
  return (
Jeffrey's avatar
Jeffrey committed
80
    <div
Jeffrey's avatar
Jeffrey committed
81
      data-testid="page-profile"
82
83
84
85
86
      css={css`
        width: 100%;
        height: 100%;
      `}
    >
87
      {error && <ErrorDiv>Error !, Please relogin..</ErrorDiv>}
88
89
90
91
92
93
94
95
96
97
      <div
        css={css`
          margin: 2rem 3rem 3rem 3rem;
          display: flex;
          flex-direction: column;
        `}
      >
        <div
          css={css`
            font-style: normal;
98
99
            font-weight: 300;
            font-size: 2.5rem;
100
101
102
            line-height: 3.4rem;
          `}
        >
Jeffrey's avatar
Jeffrey committed
103
104
105
106
107
108
109
110
111
112
113
          <button
            css={css`
              background-color: Transparent;
              background-repeat: no-repeat;
              border: none;
              cursor: pointer;
              overflow: hidden;
              outline: none;
            `}
            onClick={() => navigate(-1)}
          >
Michael Wiryadinata Halim's avatar
Michael Wiryadinata Halim committed
114
            <ArrowBackIcon fontSize="large" />
Jeffrey's avatar
Jeffrey committed
115
          </button>
116
117
118
119
120
121
          <div
            css={css`
              display: inline;
              margin-left: 2rem;
            `}
          >
Jeffrey's avatar
Jeffrey committed
122
            {user.username}
123
124
125
126
127
128
          </div>
        </div>
        <div
          className="profile"
          css={css`
            font-style: normal;
129
            font-weight: 300;
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
            font-size: 36px;
            line-height: 44px;
            margin-top: 1rem;
          `}
        >
          Profil
        </div>
        <div
          css={css`
            margin-top: 1rem;
            margin-bottom: 1rem;
          `}
        >
          <div data-testid="profile">
            <div
              css={css`
                margin-top: 1rem;
              `}
            >
              <PersonIcon 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;
                `}
              >
                {user.username}
              </div>
            </div>
            <div
              css={css`
                margin-top: 1rem;
              `}
            >
              <PhoneIcon 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;
                `}
              >
                {user.phone_number}
              </div>
            </div>
            <div
              css={css`
                margin-top: 1rem;
              `}
            >
              <LocationOnIcon 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;
                `}
              >
198
199
                {user.address}, RT {user.neighborhood}, RW {user.hamlet},
                Kelurahan {user.urban_village}, Kecamatan {user.sub_district}
200
201
202
203
204
205
206
              </div>
            </div>
          </div>
        </div>
        <div
          css={css`
            font-style: normal;
207
208
            font-weight: 300;
            font-size: 30px;
209
210
211
212
213
214
215
216
217
            line-height: 44px;
          `}
        >
          Riwayat
        </div>
        <div
          css={css`
            font-style: normal;
            font-weight: normal;
218
219
            font-size: 15px;
            line-height: 25px;
220
221
222
            margin-top: 1rem;
          `}
        >
223
224
225
226
227
228
229
230
231
232
233
234
235
236
          <div
            css={css`
              display: flex;
            `}
          >
            <ScheduleIcon style={{ fontSize: 25, color: "FFC80A" }} />
            <div
              css={css`
                font-weight: bold;
              `}
            >
              Riwayat Transaksi
            </div>
          </div>
237
238
          <div
            css={css`
239
              display: flex;
Jeffrey's avatar
Jeffrey committed
240
              flex-direction: column;
241
242
            `}
          >
Jeffrey's avatar
Jeffrey committed
243
            <TableComponent {...data} />
244
245
246
247
248
249
          </div>
        </div>
        <div
          css={css`
            font-style: normal;
            font-weight: normal;
250
            font-size: 15px;
251
            line-height: 25px;
252
253
254
255
256
            margin-top: 1rem;
          `}
        >
          <div
            css={css`
257
              display: flex;
258
259
            `}
          >
260
261
262
            <ScheduleIcon style={{ fontSize: 25, color: "FFC80A" }} />
            <div
              css={css`
263
                font-weight: bold;
264
265
266
267
              `}
            >
              Riwayat Donasi
            </div>
268
          </div>
269
270
271
272
273
274
275
276
          <div
            css={css`
              display: flex;
              flex-direction: column;
            `}
          >
            <TableComponent {...data_donasi} />
          </div>
277
278
279
280
281
282
283
        </div>
      </div>
    </div>
  );
};

export default DetailPengguna;