api ulandi
This commit is contained in:
Samandar Turgunboyev
@@ -1,6 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import { getAllFaq, getAllFaqCategory } from "@/pages/faq/lib/api";
|
||||
import {
|
||||
createFaq,
|
||||
deleteFaq,
|
||||
getAllFaq,
|
||||
getAllFaqCategory,
|
||||
getOneFaq,
|
||||
updateFaq,
|
||||
} from "@/pages/faq/lib/api";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
@@ -16,16 +23,9 @@ import {
|
||||
FormItem,
|
||||
FormMessage,
|
||||
} from "@/shared/ui/form";
|
||||
import { InfiniteScrollSelect } from "@/shared/ui/infiniteScrollSelect";
|
||||
import { Input } from "@/shared/ui/input";
|
||||
import { Label } from "@/shared/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/ui/select";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
@@ -37,70 +37,231 @@ import {
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shared/ui/tabs";
|
||||
import { Textarea } from "@/shared/ui/textarea";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Pencil, PlusCircle, Trash2 } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
useInfiniteQuery,
|
||||
useMutation,
|
||||
useQuery,
|
||||
useQueryClient,
|
||||
} from "@tanstack/react-query";
|
||||
import {
|
||||
ChevronRight,
|
||||
Loader2,
|
||||
Pencil,
|
||||
PlusCircle,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { toast } from "sonner";
|
||||
import z from "zod";
|
||||
|
||||
const faqForm = z.object({
|
||||
categories: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
title: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
title_ru: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
answer: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
answer_ru: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
});
|
||||
|
||||
const Faq = () => {
|
||||
const { t } = useTranslation();
|
||||
const { data: category } = useQuery({
|
||||
queryKey: ["all_faqcategory"],
|
||||
queryFn: () => {
|
||||
return getAllFaqCategory({ page: 1, page_size: 99 });
|
||||
},
|
||||
select(data) {
|
||||
return data.data.data.results;
|
||||
},
|
||||
});
|
||||
const { data: faq } = useQuery({
|
||||
queryKey: ["all_faq"],
|
||||
queryFn: () => {
|
||||
return getAllFaq({ page: 1, page_size: 99 });
|
||||
},
|
||||
select(data) {
|
||||
return data.data.data.results;
|
||||
},
|
||||
});
|
||||
const [activeTab, setActiveTab] = useState<string>("");
|
||||
const { t } = useTranslation();
|
||||
const [openModal, setOpenModal] = useState(false);
|
||||
const [editFaq, setEditFaq] = useState<number | null>(null);
|
||||
const queryClient = useQueryClient();
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const loaderRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Infinite scroll uchun useInfiniteQuery
|
||||
const {
|
||||
data: categoryData,
|
||||
fetchNextPage,
|
||||
hasNextPage,
|
||||
isFetchingNextPage,
|
||||
} = useInfiniteQuery({
|
||||
queryKey: ["all_faqcategory"],
|
||||
queryFn: ({ pageParam = 1 }) => {
|
||||
return getAllFaqCategory({ page: pageParam, page_size: 10 });
|
||||
},
|
||||
getNextPageParam: (lastPage) => {
|
||||
const data = lastPage.data.data;
|
||||
if (data.current_page < data.total_pages) {
|
||||
return data.current_page + 1;
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
initialPageParam: 1,
|
||||
});
|
||||
|
||||
// Barcha kategoriyalarni birlashtirib olish
|
||||
const category =
|
||||
categoryData?.pages.flatMap((page) => page.data.data.results) ?? [];
|
||||
|
||||
const { data: faq } = useQuery({
|
||||
queryKey: ["all_faq", activeTab],
|
||||
queryFn: () => {
|
||||
return getAllFaq({ page: 1, page_size: 10, category: Number(activeTab) });
|
||||
},
|
||||
select(data) {
|
||||
return data.data.data.results;
|
||||
},
|
||||
enabled: !!activeTab,
|
||||
});
|
||||
|
||||
const { data: detailFaq } = useQuery({
|
||||
queryKey: ["detail_faq", editFaq],
|
||||
queryFn: () => {
|
||||
return getOneFaq(editFaq!);
|
||||
},
|
||||
select(data) {
|
||||
return data.data.data;
|
||||
},
|
||||
enabled: !!editFaq,
|
||||
});
|
||||
|
||||
const { mutate: create, isPending } = useMutation({
|
||||
mutationFn: (body: {
|
||||
title: string;
|
||||
title_ru: string;
|
||||
text: string;
|
||||
text_ru: string;
|
||||
category: number;
|
||||
}) => createFaq(body),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["all_faq"] });
|
||||
setOpenModal(false);
|
||||
toast.success(t("Muvaffaqiyatli qo'shildi"), { position: "top-center" });
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("Xatolik yuz berdi"), {
|
||||
position: "top-center",
|
||||
richColors: true,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: edit, isPending: editPending } = useMutation({
|
||||
mutationFn: ({
|
||||
body,
|
||||
id,
|
||||
}: {
|
||||
id: number;
|
||||
body: {
|
||||
title: string;
|
||||
title_ru: string;
|
||||
text: string;
|
||||
text_ru: string;
|
||||
category?: number;
|
||||
};
|
||||
}) => updateFaq({ body, id }),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["all_faq"] });
|
||||
setOpenModal(false);
|
||||
toast.success(t("Tahrirlandi"), { position: "top-center" });
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("Xatolik yuz berdi"), {
|
||||
position: "top-center",
|
||||
richColors: true,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: deleteFaqs, isPending: deletePending } = useMutation({
|
||||
mutationFn: ({ id }: { id: number }) => deleteFaq({ id }),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["all_faq"] });
|
||||
setDeleteId(null);
|
||||
toast.success(t("O'chirildi"), { position: "top-center" });
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("Xatolik yuz berdi"), {
|
||||
position: "top-center",
|
||||
richColors: true,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (category) {
|
||||
if (category.length > 0 && !activeTab) {
|
||||
setActiveTab(String(category[0].id));
|
||||
}
|
||||
}, [category]);
|
||||
}, [category, activeTab]);
|
||||
|
||||
// Intersection Observer for lazy loading
|
||||
useEffect(() => {
|
||||
if (!scrollRef.current || !loaderRef.current) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
|
||||
fetchNextPage();
|
||||
}
|
||||
},
|
||||
{ root: scrollRef.current, threshold: 0.1 },
|
||||
);
|
||||
|
||||
if (loaderRef.current) {
|
||||
observer.observe(loaderRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
|
||||
|
||||
const [deleteId, setDeleteId] = useState<number | null>(null);
|
||||
const [editFaq, setEditFaq] = useState<any | null>(null);
|
||||
const [openModal, setOpenModal] = useState(false);
|
||||
|
||||
const form = useForm<z.infer<typeof faqForm>>({
|
||||
resolver: zodResolver(faqForm),
|
||||
defaultValues: {
|
||||
answer: "",
|
||||
answer_ru: "",
|
||||
categories: "",
|
||||
title: "",
|
||||
title_ru: "",
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (detailFaq) {
|
||||
form.setValue("title", detailFaq.title_uz);
|
||||
form.setValue("title_ru", detailFaq.title_ru);
|
||||
form.setValue("answer", detailFaq.text_uz);
|
||||
form.setValue("answer_ru", detailFaq.text_ru);
|
||||
form.setValue("categories", activeTab);
|
||||
}
|
||||
}, [detailFaq, form]);
|
||||
|
||||
function onSubmit(value: z.infer<typeof faqForm>) {
|
||||
console.log(value);
|
||||
if (editFaq === null) {
|
||||
create({
|
||||
category: Number(value.categories),
|
||||
text: value.answer,
|
||||
text_ru: value.answer_ru,
|
||||
title: value.title,
|
||||
title_ru: value.title_ru,
|
||||
});
|
||||
} else if (editFaq) {
|
||||
edit({
|
||||
body: {
|
||||
text: value.answer,
|
||||
text_ru: value.answer_ru,
|
||||
title: value.title,
|
||||
title_ru: value.title_ru,
|
||||
},
|
||||
id: editFaq,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const handleEdit = (faq: number) => {
|
||||
setOpenModal(true);
|
||||
setEditFaq(faq);
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
if (deleteId) {
|
||||
deleteFaqs({ id: deleteId });
|
||||
}
|
||||
};
|
||||
|
||||
@@ -125,22 +286,42 @@ const Faq = () => {
|
||||
setOpenModal(true);
|
||||
}}
|
||||
>
|
||||
<PlusCircle className="w-4 h-4" /> {t("Yangi qo‘shish")}
|
||||
<PlusCircle className="w-4 h-4" /> {t("Yangi qo'shish")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||||
<TabsList className="flex flex-wrap gap-2 mb-4">
|
||||
{category?.map((cat) => (
|
||||
<TabsTrigger key={cat.id} value={String(cat.id)}>
|
||||
{cat.name}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
<div className="relative">
|
||||
<TabsList
|
||||
ref={scrollRef}
|
||||
className="flex gap-2 mb-4 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-gray-800"
|
||||
>
|
||||
{category.map((cat) => (
|
||||
<TabsTrigger
|
||||
key={cat.id}
|
||||
value={String(cat.id)}
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
{cat.name}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
{hasNextPage && (
|
||||
<div ref={loaderRef} className="flex items-center px-4">
|
||||
{isFetchingNextPage ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<span className="text-xs text-gray-500">
|
||||
<ChevronRight className="size-4" />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</TabsList>
|
||||
</div>
|
||||
|
||||
{/* Tabs content */}
|
||||
{category?.map((cat) => (
|
||||
{category.map((cat) => (
|
||||
<TabsContent key={cat.id} value={String(cat.id)}>
|
||||
{faq && faq?.length > 0 ? (
|
||||
<div className="border rounded-md overflow-hidden shadow-sm">
|
||||
@@ -192,7 +373,7 @@ const Faq = () => {
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-500 text-sm mt-4 text-center">
|
||||
{t("Bu bo‘limda savollar yo‘q.")}
|
||||
{t("Bu bo'limda savollar yo'q")}
|
||||
</p>
|
||||
)}
|
||||
</TabsContent>
|
||||
@@ -200,10 +381,10 @@ const Faq = () => {
|
||||
</Tabs>
|
||||
|
||||
<Dialog open={openModal} onOpenChange={setOpenModal}>
|
||||
<DialogContent className="sm:max-w-[500px] bg-gray-900">
|
||||
<DialogContent className="sm:max-w-[500px] h-[80vh] overflow-y-scroll bg-gray-900">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{editFaq ? t("FAQni tahrirlash") : t("Yangi FAQ qo‘shish")}
|
||||
{editFaq ? t("FAQni tahrirlash") : t("Yangi FAQ qo'shish")}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
@@ -216,24 +397,37 @@ const Faq = () => {
|
||||
<FormItem>
|
||||
<Label className="text-md">{t("Kategoriya")}</Label>
|
||||
<FormControl>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
<InfiniteScrollSelect
|
||||
value={field.value}
|
||||
>
|
||||
<SelectTrigger className="w-full !h-12 border-gray-700 text-white">
|
||||
<SelectValue placeholder={t("Kategoriya tanlang")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="border-gray-700 text-white">
|
||||
<SelectGroup>
|
||||
<SelectLabel>{t("Kategoriyalar")}</SelectLabel>
|
||||
{/* {categories.map((cat) => (
|
||||
<SelectItem key={cat.value} value={cat.value}>
|
||||
{cat.label}
|
||||
</SelectItem>
|
||||
))} */}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
onValueChange={field.onChange}
|
||||
placeholder={t("Kategoriya tanlang")}
|
||||
label={t("Kategoriyalar")}
|
||||
data={category || []}
|
||||
fetchNextPage={fetchNextPage}
|
||||
renderOption={(cat) => ({
|
||||
key: cat.id,
|
||||
value: String(cat.id),
|
||||
label: cat.name,
|
||||
})}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label className="text-md">{t("Savol")}</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder={t("Savol")}
|
||||
{...field}
|
||||
className="h-12 !text-md bg-gray-800 border-gray-700 text-white"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -241,10 +435,10 @@ const Faq = () => {
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
name="title_ru"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label className="text-md">{t("Savol")}</Label>
|
||||
<Label className="text-md">{t("Savol")} (ru)</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder={t("Savol")}
|
||||
@@ -273,6 +467,23 @@ const Faq = () => {
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="answer_ru"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label className="text-md">{t("Javob")} (ru)</Label>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder={t("Javob") + " (ru)"}
|
||||
{...field}
|
||||
className="min-h-48 max-h-56 !text-md bg-gray-800 border-gray-700 text-white"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex justify-between">
|
||||
<Button
|
||||
type="button"
|
||||
@@ -288,7 +499,11 @@ const Faq = () => {
|
||||
type="submit"
|
||||
className="bg-blue-600 px-5 py-5 hover:bg-blue-700 text-white mt-4 cursor-pointer"
|
||||
>
|
||||
{t("Qo'shish")}
|
||||
{isPending || editPending ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
t("Qo'shish")
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -299,14 +514,18 @@ const Faq = () => {
|
||||
<Dialog open={!!deleteId} onOpenChange={() => setDeleteId(null)}>
|
||||
<DialogContent className="sm:max-w-[400px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t("Haqiqatan ham o‘chirmoqchimisiz?")}</DialogTitle>
|
||||
<DialogTitle>{t("Haqiqatan ham o'chirmoqchimisiz?")}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDeleteId(null)}>
|
||||
{t("Bekor qilish")}
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleDelete}>
|
||||
{t("O'chirish")}
|
||||
{deletePending ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
t("O'chirish")
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
||||
Reference in New Issue
Block a user