diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 4d6afd1d03ad7665eb9800f0c97c8d431048aae2..bac138054d7127b2429ca91e028dbda6fadee8d3 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,3 +1,4 @@
+image: node:12.16.3-buster-slim
stages:
- lint
- test
@@ -5,14 +6,12 @@ stages:
- deploy
lint:
- image: node:latest
stage: lint
script:
- npm install
- npm run lint
test:
- image: node:latest
stage: test
artifacts:
expire_in: 1 hour
@@ -34,7 +33,6 @@ sonar_scanner_test:
- sonar-scanner -Dsonar.projectKey=$SONARQUBE_PROJECT_KEY -Dsonar.host.url=$SONARQUBE_HOST_URL -Dsonar.login=$SONARQUBE_TOKEN -Dsonar.branch.name=$CI_COMMIT_REF_NAME
staging:
- image: node:latest
stage: deploy
variables:
NETLIFY_AUTH_TOKEN: $STAGING_NETLIFY_AUTH_TOKEN
@@ -49,7 +47,6 @@ staging:
- staging
production:
- image: node:latest
stage: deploy
variables:
AWS_ACCESS_KEY_ID: $PRODUCTION_AWS_ACCESS_KEY_ID
diff --git a/src/component/TableComponent.jsx b/src/component/TableComponent.jsx
index 86f97461ba8675126e31b222bc0e02d52262fc1b..622255724069b30cff1197dac37570b4c9e655a7 100644
--- a/src/component/TableComponent.jsx
+++ b/src/component/TableComponent.jsx
@@ -23,7 +23,7 @@ import {
LabelInput,
RowInput,
} from "./html/html";
-import { Search } from "@material-ui/icons";
+import SearchIcon from "@material-ui/icons/Search";
import { Link } from "@reach/router";
import ArrowDropDownCircleIcon from "@material-ui/icons/ArrowDropDownCircle";
import TableHead from "@material-ui/core/TableHead";
@@ -109,7 +109,7 @@ const TableComponent = ({
placeholder="Search..."
/>
<ButtonSearch className="border-0">
- <Search />
+ <SearchIcon />
</ButtonSearch>
</form>
{filter !== null && filter !== undefined && (
diff --git a/src/page/donasi/DetailDonasi.jsx b/src/page/donasi/DetailDonasi.jsx
index 314f5864085416c16039f6883614f4ffe4a8c06b..479127da1aa825dbb41b64697c1a5ed8110bda6c 100644
--- a/src/page/donasi/DetailDonasi.jsx
+++ b/src/page/donasi/DetailDonasi.jsx
@@ -1,7 +1,9 @@
import React, { useState } from "react";
import useFetchSingleData from "../../utils/useFetchSingleData";
import { css } from "@emotion/core";
-import { ArrowBack, Phone, Photo } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+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 Status from "../../component/Status";
@@ -65,7 +67,7 @@ const DetailDonasi = ({ idDonasi }) => {
`}
onClick={() => navigate(-1)}
>
- <ArrowBack fontSize="large" />
+ <ArrowBackIcon fontSize="large" />
</button>
<div
css={css`
@@ -172,7 +174,7 @@ const DetailDonasi = ({ idDonasi }) => {
align-items: baseline;
`}
>
- <Phone />
+ <PhoneIcon />
<div>{donation.user_phone_number}</div>
</div>
<div
@@ -234,7 +236,7 @@ const DetailDonasi = ({ idDonasi }) => {
variant="contained"
color="primary"
size="medium"
- startIcon={<Photo />}
+ startIcon={<PhotoIcon />}
data-testid="button-see-proof"
>
Bukti
diff --git a/src/page/donasi/FormDonasi.jsx b/src/page/donasi/FormDonasi.jsx
index db84379b19adf3377d586cde59b85b24db56aeaf..7afaca3db996184a3cf6c4a3e4e572567998e34c 100644
--- a/src/page/donasi/FormDonasi.jsx
+++ b/src/page/donasi/FormDonasi.jsx
@@ -9,7 +9,7 @@ import {
} from "../../component/html/html";
import { css } from "@emotion/core";
import Button from "@material-ui/core/Button";
-import { Save } from "@material-ui/icons";
+import SaveIcon from "@material-ui/icons/Save";
const FormDonasi = ({ idDonasi, defaultStatus }) => {
const url = `${process.env.REACT_APP_BASE_URL}/program-donations/${idDonasi}/`;
@@ -61,7 +61,7 @@ const FormDonasi = ({ idDonasi, defaultStatus }) => {
type="submit"
variant="contained"
color="primary"
- startIcon={<Save />}
+ startIcon={<SaveIcon />}
>
Simpan
</Button>
diff --git a/src/page/kategori/DetailKategori.jsx b/src/page/kategori/DetailKategori.jsx
index 19edb2411b7ee663fdb24281f46ccfc4e1a7fef7..8c0d25345d61512b726034df7d91d77938e30403 100644
--- a/src/page/kategori/DetailKategori.jsx
+++ b/src/page/kategori/DetailKategori.jsx
@@ -5,7 +5,7 @@ import { ButtonDeleteStyled, ErrorDiv } from "../../component/html/html";
import TableComponent from "../../component/TableComponent";
import LinkYellow from "../../component/LinkYellow";
import { navigate } from "@reach/router";
-import { ArrowBack } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
import useDelete from "../../utils/useDelete";
import {
Dialog,
@@ -93,7 +93,7 @@ const DetailKategori = ({ idKategori }) => {
`}
onClick={() => navigate("/kategori")}
>
- <ArrowBack fontSize="large" />
+ <ArrowBackIcon fontSize="large" />
</button>
<div
css={css`
diff --git a/src/page/kategori/EditKategori.jsx b/src/page/kategori/EditKategori.jsx
index bd5a22627bbfed9853adeafff1edd749df63dbc3..af3bbfcdd6452cd303e3113c81db404426ed0127 100644
--- a/src/page/kategori/EditKategori.jsx
+++ b/src/page/kategori/EditKategori.jsx
@@ -3,7 +3,8 @@ import useFetchSingleData from "../../utils/useFetchSingleData";
import { css } from "@emotion/core";
import { ErrorDiv } from "../../component/html/html";
import FormKategori from "./FormKategori";
-import { ArrowBack, ErrorOutline } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
import { navigate } from "@reach/router";
import useSendData from "../../utils/useSendData";
@@ -58,7 +59,7 @@ const EditKategori = ({ idKategori }) => {
`}
onClick={() => navigate(-1)}
>
- <ArrowBack fontSize="large" />
+ <ArrowBackIcon fontSize="large" />
</button>
<div
css={css`
@@ -74,7 +75,7 @@ const EditKategori = ({ idKategori }) => {
display: flex;
`}
>
- <ErrorOutline style={{ fontSize: 28, color: "FFC80A" }} />
+ <ErrorOutlineIcon style={{ fontSize: 28, color: "FFC80A" }} />
<div
css={css`
font-weight: 600;
diff --git a/src/page/pengguna/DetailPengguna.jsx b/src/page/pengguna/DetailPengguna.jsx
index 69445b4d17fcfe59daaa7977714f30fc6cc4cb7e..5b9678bdf1c93f48af48c2df19dba3a77ace7e32 100644
--- a/src/page/pengguna/DetailPengguna.jsx
+++ b/src/page/pengguna/DetailPengguna.jsx
@@ -1,6 +1,6 @@
import React from "react";
import { css } from "@emotion/core";
-import { ArrowBack } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
import { navigate } from "@reach/router";
import PersonIcon from "@material-ui/icons/Person";
import PhoneIcon from "@material-ui/icons/Phone";
@@ -81,7 +81,7 @@ const DetailPengguna = ({ userId }) => {
`}
onClick={() => navigate(-1)}
>
- <ArrowBack fontSize="large" />
+ <ArrowBackIcon fontSize="large" />
</button>
<div
css={css`
diff --git a/src/page/produk/DetailProduk.jsx b/src/page/produk/DetailProduk.jsx
index e732aed56195bfb2da9bd971f4c80cb0610ef8d0..d5df0f094b71c55bddf0b451dc12dc2ea82e4890 100644
--- a/src/page/produk/DetailProduk.jsx
+++ b/src/page/produk/DetailProduk.jsx
@@ -3,17 +3,15 @@ import { css } from "@emotion/core";
import { ButtonDeleteStyled } from "../../component/html/html";
import LinkYellow from "../../component/LinkYellow";
import { ErrorDiv } from "../../component/html/html";
-import {
- Search,
- ArrowBack,
- Grade,
- Category,
- AttachMoney,
- LocalShipping,
-} from "@material-ui/icons";
import { Link, navigate } from "@reach/router";
import useFetchSingleData from "../../utils/useFetchSingleData";
import useDelete from "../../utils/useDelete";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import SearchIcon from "@material-ui/icons/Search";
+import GradeIcon from "@material-ui/icons/Grade";
+import CategoryIcon from "@material-ui/icons/Category";
+import AttachMoneyIcon from "@material-ui/icons/AttachMoney";
+import LocalShippingIcon from "@material-ui/icons/LocalShipping";
import {
Dialog,
DialogActions,
@@ -93,7 +91,7 @@ const DetailProduk = ({ productId }) => {
`}
onClick={() => navigate(-1)}
>
- <ArrowBack fontSize="large" />
+ <ArrowBackIcon fontSize="large" />
</button>
<div
css={css`
@@ -131,7 +129,7 @@ const DetailProduk = ({ productId }) => {
display: inline-block;
`}
>
- <Search style={{ color: "#FFC80A" }} />
+ <SearchIcon style={{ color: "#FFC80A" }} />
</span>
<span
className="text"
@@ -173,7 +171,7 @@ const DetailProduk = ({ productId }) => {
display: inline-block;
`}
>
- <Grade style={{ color: "#FFC80A" }} />
+ <GradeIcon style={{ color: "#FFC80A" }} />
</span>
<span
className="text"
@@ -196,7 +194,7 @@ const DetailProduk = ({ productId }) => {
display: inline-block;
`}
>
- <Category style={{ color: "#FFC80A" }} />
+ <CategoryIcon style={{ color: "#FFC80A" }} />
</span>
<span
className="text"
@@ -220,7 +218,7 @@ const DetailProduk = ({ productId }) => {
display: inline-block;
`}
>
- <AttachMoney style={{ color: "#FFC80A" }} />
+ <AttachMoneyIcon style={{ color: "#FFC80A" }} />
</span>
<span
className="text"
@@ -242,7 +240,7 @@ const DetailProduk = ({ productId }) => {
display: inline-block;
`}
>
- <LocalShipping style={{ color: "#FFC80A" }} />
+ <LocalShippingIcon style={{ color: "#FFC80A" }} />
</span>
<span
className="text"
diff --git a/src/page/produk/EditProduk.jsx b/src/page/produk/EditProduk.jsx
index 365c310a30735ff51ac626d3663168eb5de3f646..fe82f2db760449719c5e64f286a0f89886e2876b 100644
--- a/src/page/produk/EditProduk.jsx
+++ b/src/page/produk/EditProduk.jsx
@@ -2,10 +2,11 @@ import React from "react";
import { css } from "@emotion/core";
import { ErrorDiv } from "../../component/html/html";
import FormProduk from "./FormProduk";
-import { navigate } from "@reach/router";
-import { ArrowBack, ErrorOutline } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
import useFetchSingleData from "../../utils/useFetchSingleData";
import useSendData from "../../utils/useSendData";
+import { navigate } from "@reach/router";
const EditProduk = ({ productId }) => {
const url = `${process.env.REACT_APP_BASE_URL}/products/${productId}/`;
@@ -56,7 +57,7 @@ const EditProduk = ({ productId }) => {
`}
onClick={() => navigate(-1)}
>
- <ArrowBack fontSize="large" />
+ <ArrowBackIcon fontSize="large" />
</button>
<div
css={css`
@@ -72,7 +73,7 @@ const EditProduk = ({ productId }) => {
display: flex;
`}
>
- <ErrorOutline style={{ fontSize: 28, color: "FFC80A" }} />
+ <ErrorOutlineIcon style={{ fontSize: 28, color: "FFC80A" }} />
<div
css={css`
font-weight: 600;
diff --git a/src/page/program/DetailProgram.jsx b/src/page/program/DetailProgram.jsx
index 6793d671082261e56a48c74e60ff3f3ba304a0d2..7d66d2eed373d25a267ffe733dc45c6ee9be559e 100644
--- a/src/page/program/DetailProgram.jsx
+++ b/src/page/program/DetailProgram.jsx
@@ -1,7 +1,7 @@
import React, { useState } from "react";
import { css } from "@emotion/core";
import { ButtonDeleteStyled, ErrorDiv } from "../../component/html/html";
-import { ArrowBack } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
import { Link } from "@reach/router";
import PersonIcon from "@material-ui/icons/Person";
import LocationOnIcon from "@material-ui/icons/LocationOn";
@@ -80,7 +80,7 @@ const DetailProgram = ({ idProgram }) => {
`}
>
<Link to="/program" style={{ color: "#000000" }}>
- <ArrowBack fontSize="large" />
+ <ArrowBackIcon fontSize="large" />
</Link>
<div
css={css`
diff --git a/src/page/program/EditProgram.jsx b/src/page/program/EditProgram.jsx
index 186a6daccfd9f7c1e3f54ef52556c9a06fa266dd..4b7148186900acdfa01fafba779d16dcb03935f6 100644
--- a/src/page/program/EditProgram.jsx
+++ b/src/page/program/EditProgram.jsx
@@ -3,7 +3,8 @@ import useFetchSingleData from "../../utils/useFetchSingleData";
import { css } from "@emotion/core";
import { ErrorDiv } from "../../component/html/html";
import FormProgram from "./FormProgram";
-import { ArrowBack, ErrorOutline } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
import { navigate } from "@reach/router";
import useSendData from "../../utils/useSendData";
@@ -64,7 +65,7 @@ const EditProgram = ({ idProgram }) => {
`}
onClick={() => navigate(-1)}
>
- <ArrowBack fontSize="large" />
+ <ArrowBackIcon fontSize="large" />
</button>
<div
css={css`
@@ -80,7 +81,7 @@ const EditProgram = ({ idProgram }) => {
display: flex;
`}
>
- <ErrorOutline style={{ fontSize: 28, color: "FFC80A" }} />
+ <ErrorOutlineIcon style={{ fontSize: 28, color: "FFC80A" }} />
<div
css={css`
font-weight: 600;
diff --git a/src/page/subkategori/DetailSubkategori.jsx b/src/page/subkategori/DetailSubkategori.jsx
index e9e59683b743254b1c2b9591a673c6240d4375b9..bfd2b6c32b1bd4690e42dc4d5f92a2d987726932 100644
--- a/src/page/subkategori/DetailSubkategori.jsx
+++ b/src/page/subkategori/DetailSubkategori.jsx
@@ -5,7 +5,7 @@ import { ButtonDeleteStyled, ErrorDiv } from "../../component/html/html";
import TableComponent from "../../component/TableComponent";
import LinkYellow from "../../component/LinkYellow";
import { Link, navigate } from "@reach/router";
-import { ArrowBack } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
import useDelete from "../../utils/useDelete";
import {
Dialog,
@@ -92,7 +92,7 @@ const DetailSubkategori = ({ idSubKategori }) => {
`}
onClick={() => navigate("/subkategori")}
>
- <ArrowBack fontSize="large" />
+ <ArrowBackIcon fontSize="large" />
</button>
<div
css={css`
diff --git a/src/page/subkategori/EditSubkategori.jsx b/src/page/subkategori/EditSubkategori.jsx
index 72c3419153ec8dd2c3fd09079e17a6b7a4b86ff2..8060172eee770458efad58855326feba8e135bde 100644
--- a/src/page/subkategori/EditSubkategori.jsx
+++ b/src/page/subkategori/EditSubkategori.jsx
@@ -3,7 +3,8 @@ import useFetchSingleData from "../../utils/useFetchSingleData";
import { css } from "@emotion/core";
import { ErrorDiv } from "../../component/html/html";
import FormSubkategori from "./FormSubkategori";
-import { ArrowBack, ErrorOutline } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
import { navigate } from "@reach/router";
import useSendData from "../../utils/useSendData";
@@ -59,7 +60,7 @@ const EditSubkategori = ({ idSubKategori }) => {
`}
onClick={() => navigate(-1)}
>
- <ArrowBack fontSize="large" />
+ <ArrowBackIcon fontSize="large" />
</button>
<div
css={css`
@@ -75,7 +76,7 @@ const EditSubkategori = ({ idSubKategori }) => {
display: flex;
`}
>
- <ErrorOutline style={{ fontSize: 28, color: "FFC80A" }} />
+ <ErrorOutlineIcon style={{ fontSize: 28, color: "FFC80A" }} />
<div
css={css`
font-weight: 600;
diff --git a/src/page/transaksi/DetailTransaksi.jsx b/src/page/transaksi/DetailTransaksi.jsx
index ab8243105f3c7c48eb0e4fa25163ec6b0ed3f77f..6951315888ea81cc154dc235356e74ba77deffca 100644
--- a/src/page/transaksi/DetailTransaksi.jsx
+++ b/src/page/transaksi/DetailTransaksi.jsx
@@ -1,7 +1,10 @@
import React, { useState } from "react";
import useFetchSingleData from "../../utils/useFetchSingleData";
import { css } from "@emotion/core";
-import { ArrowBack, Contacts, Phone, Photo } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import PhoneIcon from "@material-ui/icons/Phone";
+import PhotoIcon from "@material-ui/icons/Photo";
+import ContactsIcon from "@material-ui/icons/Contacts";
import { Link, navigate } from "@reach/router";
import PersonIcon from "@material-ui/icons/Person";
import Table from "@material-ui/core/Table";
@@ -72,7 +75,7 @@ const DetailTransaksi = ({ idTransaksi }) => {
`}
onClick={() => navigate(-1)}
>
- <ArrowBack fontSize="large" />
+ <ArrowBackIcon fontSize="large" />
</button>
<div
css={css`
@@ -182,7 +185,7 @@ const DetailTransaksi = ({ idTransaksi }) => {
align-items: baseline;
`}
>
- <Phone />
+ <PhoneIcon />
<div>{transaction.user_phone_number}</div>
</div>
<div
@@ -196,7 +199,7 @@ const DetailTransaksi = ({ idTransaksi }) => {
font-size: 1.2rem;
`}
>
- <Contacts />
+ <ContactsIcon />
Alamat Pengiriman
<div>{`${transaction.shipping_address},
RT ${transaction.shipping_neighborhood},
@@ -337,7 +340,7 @@ const DetailTransaksi = ({ idTransaksi }) => {
variant="contained"
color="primary"
size="medium"
- startIcon={<Photo />}
+ startIcon={<PhotoIcon />}
data-testid="button-see-proof"
>
Bukti
diff --git a/src/page/transaksi/FormStatus.jsx b/src/page/transaksi/FormStatus.jsx
index e3803b7690dfd4663eed1423967a9d2fc9a7c241..93eeec9e9820aa0aa9dd7247b56c53b9ca268c0e 100644
--- a/src/page/transaksi/FormStatus.jsx
+++ b/src/page/transaksi/FormStatus.jsx
@@ -9,7 +9,7 @@ import {
} from "../../component/html/html";
import { css } from "@emotion/core";
import Button from "@material-ui/core/Button";
-import { Save } from "@material-ui/icons";
+import SaveIcon from "@material-ui/icons/Save";
const FormStatus = ({ idTransaksi, defaultStatus, paymentMethod }) => {
const url = `${process.env.REACT_APP_BASE_URL}/transactions/${idTransaksi}/`;
@@ -65,7 +65,7 @@ const FormStatus = ({ idTransaksi, defaultStatus, paymentMethod }) => {
type="submit"
variant="contained"
color="primary"
- startIcon={<Save />}
+ startIcon={<SaveIcon />}
>
Simpan
</Button>