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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
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);
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,7 +81,8 @@ const Constraint = ({location}) => {
</Form>
{orderNotFound || order === undefined ? (
<>
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`}>
@ -82,9 +92,11 @@ const Constraint = ({location}) => {
<span className={'text-[#FB5060] font-semibold text-sm'}>BELUM ADA TRANSAKSI</span>
</div>
</div>
</>
</div>
)
) : order ? (
<>
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`}>
@ -98,7 +110,8 @@ const Constraint = ({location}) => {
orderData={order}
location={location}
/>
</>
</div>
)
) : ''}
</div>
)