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

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