doctor list

src/features/region/ui/AddedRegion.tsx

@@ -1,3 +1,4 @@
+import { region_api } from "@/features/region/lib/api";
 import type { RegionType } from "@/features/region/lib/data";
 import { regionForm } from "@/features/region/lib/form";
 import { Button } from "@/shared/ui/button";
@@ -11,42 +12,69 @@ import {
 import { Input } from "@/shared/ui/input";
 import { Label } from "@/shared/ui/label";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
 import { Loader2 } from "lucide-react";
-import { useState, type Dispatch, type SetStateAction } from "react";
+import { type Dispatch, type SetStateAction } from "react";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import type z from "zod";
 
 interface Props {
   initialValues: RegionType | null;
   setDialogOpen: Dispatch<SetStateAction<boolean>>;
-  setPlans: Dispatch<SetStateAction<RegionType[]>>;
 }
 
-const AddedRegion = ({ initialValues, setDialogOpen, setPlans }: Props) => {
-  const [load, setLoad] = useState<boolean>(false);
+const AddedRegion = ({ initialValues, setDialogOpen }: Props) => {
   const form = useForm<z.infer<typeof regionForm>>({
     resolver: zodResolver(regionForm),
     defaultValues: { name: initialValues?.name || "" },
   });
+  const queryClient = useQueryClient();
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: (body: { name: string }) => region_api.create(body),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["region_list"] });
+      toast.success(`Yangi hudud qo'shildi`);
+      setDialogOpen(false);
+    },
+    onError: (err: AxiosError) => {
+      const errMessage = err.response?.data as { message: string };
+      const messageText = errMessage.message;
+      toast.error(messageText || "Xatolik yuz berdi", {
+        richColors: true,
+        position: "top-center",
+      });
+    },
+  });
+
+  const { mutate: edit, isPending: editPending } = useMutation({
+    mutationFn: ({ body, id }: { id: number; body: { name: string } }) =>
+      region_api.update({ body, id }),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["region_list"] });
+      toast.success(`Yangi hudud qo'shildi`);
+      setDialogOpen(false);
+    },
+    onError: (err: AxiosError) => {
+      const errMessage = err.response?.data as { message: string };
+      const messageText = errMessage.message;
+      toast.error(messageText || "Xatolik yuz berdi", {
+        richColors: true,
+        position: "top-center",
+      });
+    },
+  });
 
   function onSubmit(value: z.infer<typeof regionForm>) {
-    setLoad(true);
-
-    setTimeout(() => {
-      setPlans((prev) => {
-        if (initialValues) {
-          return prev.map((item) =>
-            item.id === initialValues.id ? { ...item, ...value } : item,
-          );
-        }
-        return [
-          ...prev,
-          { id: prev.length ? prev[prev.length - 1].id + 1 : 1, ...value },
-        ];
+    if (initialValues) {
+      edit({ id: initialValues.id, body: { name: value.name } });
+    } else {
+      mutate({
+        name: value.name,
       });
-      setLoad(false);
-      setDialogOpen(false);
-    }, 2000);
+    }
   }
 
   return (
@@ -66,8 +94,11 @@ const AddedRegion = ({ initialValues, setDialogOpen, setPlans }: Props) => {
           )}
         />
 
-        <Button className="w-full bg-blue-500 cursor-pointer hover:bg-blue-500">
-          {load ? (
+        <Button
+          type="submit"
+          className="w-full bg-blue-500 cursor-pointer hover:bg-blue-500"
+        >
+          {isPending || editPending ? (
             <Loader2 className="animate-spin" />
           ) : initialValues ? (
             "Tahrirlash"

src/features/region/ui/DeleteRegion.tsx

@@ -0,0 +1,88 @@
+import { region_api } from "@/features/region/lib/api";
+import type { RegionListResData } from "@/features/region/lib/data";
+import { Button } from "@/shared/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/ui/dialog";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { Loader2, Trash, X } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+import { toast } from "sonner";
+
+interface Props {
+  opneDelete: boolean;
+  setOpenDelete: Dispatch<SetStateAction<boolean>>;
+  setRegionDelete: Dispatch<SetStateAction<RegionListResData | null>>;
+  regionDelete: RegionListResData | null;
+}
+
+const DeleteRegion = ({
+  opneDelete,
+  setOpenDelete,
+  setRegionDelete,
+  regionDelete,
+}: Props) => {
+  const queryClient = useQueryClient();
+
+  const { mutate: deleteRegion, isPending } = useMutation({
+    mutationFn: (id: number) => region_api.delete(id),
+
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["region_list"] });
+      toast.success(`Foydalanuvchi o'chirildi`);
+      setOpenDelete(false);
+      setRegionDelete(null);
+    },
+    onError: (err: AxiosError) => {
+      const errMessage = err.response?.data as { message: string };
+      const messageText = errMessage.message;
+      toast.error(messageText || "Xatolik yuz berdi", {
+        richColors: true,
+        position: "top-center",
+      });
+    },
+  });
+
+  return (
+    <Dialog open={opneDelete} onOpenChange={setOpenDelete}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Foydalanuvchini o'chrish</DialogTitle>
+          <DialogDescription className="text-md font-semibold">
+            Siz rostan ham {regionDelete?.name} hududini o'chimoqchimiszi
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            className="bg-blue-600 cursor-pointer hover:bg-blue-600"
+            onClick={() => setOpenDelete(false)}
+          >
+            <X />
+            Bekor qilish
+          </Button>
+          <Button
+            variant={"destructive"}
+            onClick={() => regionDelete && deleteRegion(regionDelete.id)}
+          >
+            {isPending ? (
+              <Loader2 className="animate-spin" />
+            ) : (
+              <>
+                <Trash />
+                O'chirish
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteRegion;

src/features/region/ui/RegionList.tsx

@@ -1,5 +1,8 @@
-import { fakeRegionList, type RegionType } from "@/features/region/lib/data";
+import { region_api } from "@/features/region/lib/api";
+import { type RegionListResData } from "@/features/region/lib/data";
 import AddedRegion from "@/features/region/ui/AddedRegion";
+import DeleteRegion from "@/features/region/ui/DeleteRegion";
+import RegionTable from "@/features/region/ui/RegionTable";
 import { Button } from "@/shared/ui/button";
 import {
   Dialog,
@@ -8,28 +11,33 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/shared/ui/dialog";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/shared/ui/table";
-import clsx from "clsx";
-import { ChevronLeft, ChevronRight, Edit, Plus, Trash } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+
+import { Plus } from "lucide-react";
 import { useState } from "react";
 
 const RegionList = () => {
-  const [currentPage, setCurrentPage] = useState(1);
-  const totalPages = 5;
-  const [plans, setPlans] = useState<RegionType[]>(fakeRegionList);
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["region_list"],
+    queryFn: () => region_api.list({}),
+    select(data) {
+      return data.data.data;
+    },
+  });
 
-  const [editingPlan, setEditingPlan] = useState<RegionType | null>(null);
+  const [regionDelete, setRegionDelete] = useState<RegionListResData | null>(
+    null,
+  );
+  const [opneDelete, setOpenDelete] = useState<boolean>(false);
+
+  const [editingPlan, setEditingPlan] = useState<RegionListResData | null>(
+    null,
+  );
   const [dialogOpen, setDialogOpen] = useState(false);
 
-  const handleDelete = (id: number) => {
-    setPlans(plans.filter((p) => p.id !== id));
+  const handleDelete = (user: RegionListResData) => {
+    setRegionDelete(user);
+    setOpenDelete(true);
   };
 
   return (
@@ -58,91 +66,27 @@ const RegionList = () => {
               <AddedRegion
                 initialValues={editingPlan}
                 setDialogOpen={setDialogOpen}
-                setPlans={setPlans}
               />
             </DialogContent>
           </Dialog>
         </div>
       </div>
-
-      <div className="flex-1 overflow-auto">
-        <Table>
-          <TableHeader>
-            <TableRow className="text-center">
-              <TableHead className="text-start">ID</TableHead>
-              <TableHead className="text-start">Nomi</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {plans.map((plan) => (
-              <TableRow key={plan.id} className="text-start">
-                <TableCell>{plan.id}</TableCell>
-                <TableCell>{plan.name}</TableCell>
-                <TableCell className="flex gap-2 justify-end">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="bg-blue-500 text-white hover:bg-blue-500 hover:text-white cursor-pointer"
-                    onClick={() => {
-                      setEditingPlan(plan);
-                      setDialogOpen(true);
-                    }}
-                  >
-                    <Edit className="h-4 w-4" />
-                  </Button>
-                  <Button
-                    variant="destructive"
-                    size="sm"
-                    className="cursor-pointer"
-                    onClick={() => handleDelete(plan.id)}
-                  >
-                    <Trash className="h-4 w-4" />
-                  </Button>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-
-      <div className="mt-2 sticky bottom-0 bg-white flex justify-end gap-2 z-10 py-2 border-t">
-        <Button
-          variant="outline"
-          size="icon"
-          disabled={currentPage === 1}
-          className="cursor-pointer"
-          onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
-        >
-          <ChevronLeft />
-        </Button>
-        {Array.from({ length: totalPages }, (_, i) => (
-          <Button
-            key={i}
-            variant={currentPage === i + 1 ? "default" : "outline"}
-            size="icon"
-            className={clsx(
-              currentPage === i + 1
-                ? "bg-blue-500 hover:bg-blue-500"
-                : " bg-none hover:bg-blue-200",
-              "cursor-pointer",
-            )}
-            onClick={() => setCurrentPage(i + 1)}
-          >
-            {i + 1}
-          </Button>
-        ))}
-        <Button
-          variant="outline"
-          size="icon"
-          disabled={currentPage === totalPages}
-          onClick={() =>
-            setCurrentPage((prev) => Math.min(prev + 1, totalPages))
-          }
-          className="cursor-pointer"
-        >
-          <ChevronRight />
-        </Button>
-      </div>
+      {data && (
+        <RegionTable
+          region={data!}
+          handleDelete={handleDelete}
+          isError={isError}
+          setDialogOpen={setDialogOpen}
+          isLoading={isLoading}
+          setEditingRegion={setEditingPlan}
+        />
+      )}
+      <DeleteRegion
+        opneDelete={opneDelete}
+        regionDelete={regionDelete}
+        setOpenDelete={setOpenDelete}
+        setRegionDelete={setRegionDelete}
+      />
     </div>
   );
 };

src/features/region/ui/RegionTable.tsx

@@ -0,0 +1,89 @@
+import type { RegionListResData } from "@/features/region/lib/data";
+import { Button } from "@/shared/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/ui/table";
+import { Edit, Loader2, Trash } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+
+const RegionTable = ({
+  region,
+  handleDelete,
+  isLoading,
+  isError,
+  setEditingRegion,
+  setDialogOpen,
+}: {
+  region: RegionListResData[];
+  isLoading: boolean;
+  isError: boolean;
+  setEditingRegion: Dispatch<SetStateAction<RegionListResData | null>>;
+  setDialogOpen: Dispatch<SetStateAction<boolean>>;
+  handleDelete: (user: RegionListResData) => void;
+}) => {
+  return (
+    <div className="flex-1 overflow-auto">
+      {isLoading && (
+        <div className="h-full flex items-center justify-center bg-white/70 z-10">
+          <span className="text-lg font-medium">
+            <Loader2 className="animate-spin" />
+          </span>
+        </div>
+      )}
+
+      {isError && (
+        <div className="h-full flex items-center justify-center z-10">
+          <span className="text-lg font-medium text-red-600">
+            Ma'lumotlarni olishda xatolik yuz berdi.
+          </span>
+        </div>
+      )}
+      {!isLoading && !isError && (
+        <Table>
+          <TableHeader>
+            <TableRow className="text-center">
+              <TableHead className="text-start">ID</TableHead>
+              <TableHead className="text-start">Nomi</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {region.map((plan, index) => (
+              <TableRow key={plan.id} className="text-start">
+                <TableCell>{index + 1}</TableCell>
+                <TableCell>{plan.name}</TableCell>
+                <TableCell className="flex gap-2 justify-end">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="bg-blue-500 text-white hover:bg-blue-500 hover:text-white cursor-pointer"
+                    onClick={() => {
+                      setEditingRegion(plan);
+                      setDialogOpen(true);
+                    }}
+                  >
+                    <Edit className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    className="cursor-pointer"
+                    onClick={() => handleDelete(plan)}
+                  >
+                    <Trash className="h-4 w-4" />
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </div>
+  );
+};
+
+export default RegionTable;