TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix replacing the loader by using a DataGridLoader

Browse Source
This commit is contained in:
Wikzyy
2025-04-28 13:54:58 +07:00
parent 02bc3dc4b9
commit 6d02b7787a
2 changed files with 49 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/members/kyc/Kyc.tsx
View File

@ -1,6 +1,7 @@
import { import {
Container, Container,
DataGridInner, DataGridInner,
DataGridLoader,
DataGridProvider, DataGridProvider,
TDataGridProps, TDataGridProps,
useDataGrid useDataGrid
@ -36,11 +37,8 @@ const Kyc = () => {
}; };
const { getUser } = useAuthContext(); const { getUser } = useAuthContext();
useEffect(() => {
fetchCustomers();
}, [member]);
async function fetchCustomers() { async function fetchCustomers() {
setIsReloading(true);
try { try {
let customers = await axios.get(`${BASE_URL}/customer/list`, { let customers = await axios.get(`${BASE_URL}/customer/list`, {
params: { params: {
@ -73,7 +71,7 @@ const Kyc = () => {
toast.error(error.message); toast.error(error.message);
console.log(error); console.log(error);
} finally { } finally {
setLoading(false); // setLoading(false);
setIsReloading(false); setIsReloading(false);
} }
} }
@ -101,7 +99,7 @@ const Kyc = () => {
}; };
const handleYes = async () => { const handleYes = async () => {
setLoading(true); // setLoading(true);
const userLogin: any = await getUser(); const userLogin: any = await getUser();
const updateData: any = member; const updateData: any = member;
const customerId = member.id; const customerId = member.id;
@ -179,7 +177,7 @@ const Kyc = () => {
setDialogOpen(false); setDialogOpen(false);
setIsDialogOpen(false); setIsDialogOpen(false);
await fetchCustomers(); await fetchCustomers();
setLoading(false); // setLoading(false);
setIsReloading(false); setIsReloading(false);
} }
}; };
@ -188,7 +186,11 @@ const Kyc = () => {
setIsDialogOpen(el); setIsDialogOpen(el);
} }
if (loading) return <LoaderTransparant />; useEffect(() => {
fetchCustomers();
}, [member]);
// if (isReloading) return <DataGridLoader />;
return ( return (
<> <>
@ -237,12 +239,13 @@ const Kyc = () => {
{/* <div className="w-full overflow-x-auto"> */} {/* <div className="w-full overflow-x-auto"> */}
<div className="grid gap-5 lg:gap-7.5 mt-5 relative"> <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
{isReloading && ( {isReloading && (
<div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center"> <DataGridLoader />
<div className="flex flex-col items-center"> // <div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center">
<RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" /> // <div className="flex flex-col items-center">
<span className="text-slate-500 font-medium">Refreshing data...</span> // <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
</div> // <span className="text-slate-500 font-medium">Refreshing data...</span>
</div> // </div>
// </div>
)} )}
<DataGridProvider <DataGridProvider
data={members} data={members}

61
src/pages/members/manage-members/ManageMembers.tsx
View File

@ -6,7 +6,7 @@ import axios from 'axios';
import DetailMember from './blocks/DetailMember'; import DetailMember from './blocks/DetailMember';
import ConfirmDialog from '@/components/confirm'; import ConfirmDialog from '@/components/confirm';
import { useAuthContext } from '@/auth'; import { useAuthContext } from '@/auth';
import { Container, DataGridInner, LoaderTransparant } from '@/components'; import { Container, DataGridInner, DataGridLoader, LoaderTransparant } from '@/components';
import { DataGridProvider } from '@/components'; import { DataGridProvider } from '@/components';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { Breadcrumbs, Link } from '@mui/material'; import { Breadcrumbs, Link } from '@mui/material';
@ -34,13 +34,8 @@ const ManageMembers = () => {
}; };
const { getUser } = useAuthContext(); const { getUser } = useAuthContext();
useEffect(() => {
setLoading(true);
fetchCustomers();
setLoading(false);
}, []);
async function fetchCustomers(): Promise<void> { async function fetchCustomers(): Promise<void> {
setIsReloading(true);
try { try {
let customers = await axios.get(`${BASE_URL}/customer/list`, { let customers = await axios.get(`${BASE_URL}/customer/list`, {
params: { params: {
@ -62,6 +57,8 @@ const ManageMembers = () => {
return el; return el;
}); });
setMembers(resMembers); setMembers(resMembers);
// setIsReloading(false);
let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, { let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
params: { params: {
limit: 50, limit: 50,
@ -73,20 +70,20 @@ const ManageMembers = () => {
}); });
setProfession(getProfession.data.data.list); setProfession(getProfession.data.data.list);
let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, { let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, {
params: { params: {
limit: 50, limit: 50,
page: 1, page: 1,
with_deleted: false, with_deleted: false,
order_field: 'name', order_field: 'name',
order_direction: 'ASC' order_direction: 'ASC'
} }
}); });
setGroups(getGroups.data.data.list); setGroups(getGroups.data.data.list);
} catch (error: any) { } catch (error: any) {
toast.error(error.message); toast.error(error.message);
console.log(error); console.log(error);
} finally { } finally {
setLoading(false); // setLoading(false);
setIsReloading(false); setIsReloading(false);
} }
} }
@ -115,8 +112,9 @@ const ManageMembers = () => {
}; };
const handleYes = async () => { const handleYes = async () => {
setIsReloading(true);
try { try {
setLoading(true); // setLoading(true);
const userLogin: any = await getUser(); const userLogin: any = await getUser();
const updateData: any = member; const updateData: any = member;
updateData.updated_by = userLogin.data ? userLogin.data.id : ''; updateData.updated_by = userLogin.data ? userLogin.data.id : '';
@ -193,14 +191,14 @@ const ManageMembers = () => {
} }
} catch (error: any) { } catch (error: any) {
if (error?.response?.data?.message) { if (error?.response?.data?.message) {
toast.error(`${error?.response?.data?.error}.\n${error?.response?.data?.message}`) toast.error(`${error?.response?.data?.error}.\n${error?.response?.data?.message}`);
} } else toast.error(error.message);
else toast.error(error.message);
} finally { } finally {
setDialogOpen(false); setDialogOpen(false);
closeDialog(); closeDialog();
await fetchCustomers(); await fetchCustomers();
setLoading(false); // setLoading(false);
setIsReloading(false);
} }
}; };
@ -208,7 +206,11 @@ const ManageMembers = () => {
setIsDialogOpen(el); setIsDialogOpen(el);
} }
if (loading) return <LoaderTransparant />; useEffect(() => {
fetchCustomers();
}, []);
// if (isReloading) return <DataGridLoader />;
return ( return (
<> <>
@ -255,14 +257,15 @@ const ManageMembers = () => {
<div className="grid gap-5 lg:gap-7.5 mt-5 relative"> <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
{isReloading && ( {isReloading && (
<div className="fixed inset-0 bg-transparent flex items-center justify-center z-50 text-muted-foreground px-4 py-2"> <DataGridLoader />
<div className="bg-card flex items-center border shadow-sm rounded-md"> // <div className="fixed inset-0 bg-transparent flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
<div className="flex flex-col items-center"> // <div className="bg-card flex items-center border shadow-sm rounded-md">
<RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" /> // <div className="flex flex-col items-center">
<span className="text-slate-500 font-medium">Refreshing data...</span> // <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
</div> // <span className="text-slate-500 font-medium">Refreshing data...</span>
</div> // </div>
</div> // </div>
// </div>
)} )}
<DataGridProvider <DataGridProvider
data={members} data={members}