farouq.alfiansyah/bots-frontend
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add loading

Browse Source
This commit is contained in:
Anang20
2022-11-14 10:46:56 +07:00
parent 840531c3cf
commit 526aaf5078
1 changed files with 56 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
components/Constraint/index.js
View File

@@ -1,15 +1,17 @@
import React, { useState } from 'react';
import React, { useRef, useState } from 'react';
import Image from "next/image";
import {Button, Form, Input} from "antd";
import {Button, Form, Input, Spin} from "antd";
import Transaction from "../Transaction";
import { botsRepository } from '../../repository/bots';
const Constraint = ({location}) => {
const Constraint = ({ location }) => {
const [form] = Form.useForm();
const [orderId, setOrderId] = useState('');
const [order, setOrder] = useState('');
const [orderNotFound, setOrderNotFound] = useState(false);
const [show, setShow] = useState(false)
const [loading, setLoading] = useState(false)
const inputRef = useRef(null)
const handleChangeCheckTransaction = (e) => {
const value = e.target.value
@@ -17,32 +19,38 @@ const Constraint = ({location}) => {
}
const onSubmit = async () => {
setShow(true)
if (show) {
try {
const res = await botsRepository.api.useCheckTransactionByOrderId(orderId);
const resultTransaction = res?.data;
setOrderNotFound(false);
setOrder(resultTransaction);
} catch (err) {
setOrderNotFound(true);
try {
setLoading(true)
const value = await form.getFieldValue()
if (inputRef.current) {
setShow(true)
}
const res = await botsRepository.api.useCheckTransactionByOrderId(value?.order_id);
const resultTransaction = res?.data;
setOrderNotFound(false);
setOrder(resultTransaction);
setTimeout(() => {
setLoading(false)
}, 1000);
} catch (err) {
if (err) {
setLoading(false)
}
setOrderNotFound(true);
}
}
console?.log(order, "ini ordernya")
return (
<div className={'bg-white px-7 pt-4 pb-8 mt-6'}>
<Image src={'/assets/images/logo.svg'} width={100} height={50}/>
<Image src={'/assets/images/logo.svg'} width={100} height={50} />
<h3 className={'text-lg font-bold'}>Ada kendala dengan transaksimu?</h3>
<p>Cek transaksi dengan Order ID pembayaran:</p>
<Form form={form} layout={'vertical'}>
<Form form={form} layout={'vertical'} onFinish={onSubmit}>
<Form.Item name="order_id" rules={[
{required: true, message: "Silahkan masukan Order ID!"},
{ required: true, message: "Silahkan masukan Order ID!" },
]}>
<Input
className={'rounded-lg'}
@@ -57,13 +65,14 @@ const Constraint = ({location}) => {
<Button
disabled={
!form.isFieldsTouched(true) ||
!!form.getFieldsError().filter(({errors}) => errors.length).length
!!form.getFieldsError().filter(({ errors }) => errors.length).length
}
block
className={`${!form.isFieldsTouched(true) ||
!!form.getFieldsError().filter(({errors}) => errors.length).length ? 'bg-[#919191]' : 'bg-black'}
!!form.getFieldsError().filter(({ errors }) => errors.length).length ? 'bg-[#919191]' : 'bg-black'}
text-white text-xl h-12 rounded-lg`}
onClick={onSubmit}
htmlType={'submit'}
ref={inputRef}
>
Cek
</Button>
@@ -72,33 +81,37 @@ const Constraint = ({location}) => {
</Form>
{orderNotFound || order === undefined ? (
<>
<h3 className={`font-bold text-xl my-4 ${show ? 'block' : 'hidden'}`}>Status Transaksi</h3>
loading ? (<Spin className='flex justify-center'/>) : (
<div>
<h3 className={`font-bold text-xl my-4 ${show ? 'block' : 'hidden'}`}>Status Transaksi</h3>
<div className={`${show ? 'block' : 'hidden'} bg-[#F7FCFC] border-2 border-[#DFDFDF] h-20 flex items-center gap-2 rounded-lg px-5 mt-2`}>
<Image src={'/assets/icons/cariparkir.svg'} width={40} height={40}/>
<div className={'flex flex-col'}>
<span className={'font-semibold'}>{orderId}</span>
<span className={'text-[#FB5060] font-semibold text-sm'}>BELUM ADA TRANSAKSI</span>
<div className={`${show ? 'block' : 'hidden'} bg-[#F7FCFC] border-2 border-[#DFDFDF] h-20 flex items-center gap-2 rounded-lg px-5 mt-2`}>
<Image src={'/assets/icons/cariparkir.svg'} width={40} height={40}/>
<div className={'flex flex-col'}>
<span className={'font-semibold'}>{orderId}</span>
<span className={'text-[#FB5060] font-semibold text-sm'}>BELUM ADA TRANSAKSI</span>
</div>
</div>
</div>
</div>
</>
)
) : order ? (
<>
<h3 className={`font-bold text-xl my-4 ${show ? 'block' : 'hidden'}`}>Status Transaksi</h3>
loading ? (<Spin className='flex justify-center'/>) : (
<div>
<h3 className={`font-bold text-xl my-4 ${show ? 'block' : 'hidden'}`}>Status Transaksi</h3>
<div className={`${show ? 'block' : 'hidden'} bg-[#F7FCFC] border-2 border-[#DFDFDF] h-20 flex items-center gap-2 rounded-lg px-5 mt-2`}>
<Image src={'/assets/icons/cariparkir.svg'} width={40} height={40}/>
<div className={'flex flex-col'}>
<span className={'font-semibold'}>{orderId}</span>
<div className={`${show ? 'block' : 'hidden'} bg-[#F7FCFC] border-2 border-[#DFDFDF] h-20 flex items-center gap-2 rounded-lg px-5 mt-2`}>
<Image src={'/assets/icons/cariparkir.svg'} width={40} height={40}/>
<div className={'flex flex-col'}>
<span className={'font-semibold'}>{orderId}</span>
</div>
</div>
<Transaction
show={show}
orderData={order}
location={location}
/>
</div>
</div>
<Transaction
show={show}
orderData={order}
location={location}
/>
</>
)
) : ''}
</div>
)