72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import { support_api } from "@/features/support/lib/api";
|
||
import { columnsSupport } from "@/features/support/lib/column";
|
||
import { DataTableSupport } from "@/features/support/lib/data-table";
|
||
import SendSupport from "@/features/support/ui/SendSupport";
|
||
import AddedButton from "@/shared/ui/added-button";
|
||
import { Skeleton } from "@/shared/ui/skeleton";
|
||
import { DashboardLayout } from "@/widgets/dashboard-layout/ui";
|
||
import { useQuery } from "@tanstack/react-query";
|
||
import { useState } from "react";
|
||
|
||
const SupportList = () => {
|
||
const [showMainModal, setShowMainModal] = useState<boolean>(false);
|
||
|
||
const { data, isLoading, isError } = useQuery({
|
||
queryKey: ["support_list"],
|
||
queryFn: () => support_api.list(),
|
||
select(data) {
|
||
return data.data.data;
|
||
},
|
||
});
|
||
|
||
const columns = columnsSupport();
|
||
|
||
return (
|
||
<DashboardLayout link="/">
|
||
<AddedButton onClick={() => setShowMainModal(true)} />
|
||
<div className="space-y-6">
|
||
<h1 className="text-3xl font-bold">Yordam so'rovlari</h1>
|
||
|
||
{isLoading && (
|
||
<div className="flex justify-center items-center h-64">
|
||
<span className="text-gray-500">Yuklanmoqda...</span>
|
||
</div>
|
||
)}
|
||
|
||
{isError && (
|
||
<div className="flex justify-center items-center h-64">
|
||
<span className="text-red-500">
|
||
Xatolik yuz berdi. Iltimos, qayta urinib ko‘ring.
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
{isLoading ? (
|
||
<div className="space-y-3">
|
||
{[1, 2, 3].map((i) => (
|
||
<Skeleton key={i} className="h-12 w-full rounded-md" />
|
||
))}
|
||
</div>
|
||
) : isError ? (
|
||
<p className="text-red-500">
|
||
So'rovlar yuklanmadi. Qayta urinib ko‘ring.
|
||
</p>
|
||
) : data ? (
|
||
<div className="overflow-x-auto">
|
||
<DataTableSupport columns={columns} data={data.results} />
|
||
</div>
|
||
) : (
|
||
<p className="text-gray-500">Yordam so'rovlari mavjud emas</p>
|
||
)}
|
||
</div>
|
||
|
||
<SendSupport
|
||
showMainModal={showMainModal}
|
||
setShowMainModal={setShowMainModal}
|
||
/>
|
||
</DashboardLayout>
|
||
);
|
||
};
|
||
|
||
export default SupportList;
|