Fix Mutation Query,Remove unwanted Error handlers

ohcnetwork · Feb 13, 2025 · 89af39c · 89af39c
1 parent 6ebc0fe
commit 89af39c
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 123 deletions.
diff --git a/src/pages/Facility/settings/locations/LocationList.tsx b/src/pages/Facility/settings/locations/LocationList.tsx
@@ -1,19 +1,16 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 
-import ConfirmDialog from "@/components/Common/ConfirmDialog";
 import Pagination from "@/components/Common/Pagination";
 import { CardGridSkeleton } from "@/components/Common/SkeletonLoading";
 
-import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
 import { LocationList as LocationListType } from "@/types/location/location";
 import locationApi from "@/types/location/locationApi";
@@ -29,12 +26,10 @@ export default function LocationList({ facilityId }: Props) {
   const { t } = useTranslation();
   const [page, setPage] = useState(1);
   const [searchQuery, setSearchQuery] = useState("");
-  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
   const [selectedLocation, setSelectedLocation] =
     useState<LocationListType | null>(null);
   const [isSheetOpen, setIsSheetOpen] = useState(false);
   const limit = 12;
-  const queryClient = useQueryClient();
 
   const { data, isLoading } = useQuery({
     queryKey: ["locations", facilityId, page, limit, searchQuery],
@@ -58,41 +53,6 @@ export default function LocationList({ facilityId }: Props) {
     setSelectedLocation(location);
     setIsSheetOpen(true);
   };
-  const { mutate: removeLocation } = useMutation({
-    mutationFn: ({
-      facilityId,
-      locationId,
-    }: {
-      facilityId: string;
-      locationId: string;
-    }) =>
-      mutate(locationApi.delete, {
-        pathParams: { facility_id: facilityId, id: locationId },
-      })({ facilityId, locationId }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ["locations", facilityId, page, limit, searchQuery],
-      });
-      toast.success("Location removed successfully");
-    },
-    onError: (error) => {
-      const errorData = error.cause as { errors: { msg: string }[] };
-      errorData.errors.forEach((er) => {
-        toast.error(er.msg);
-      });
-    },
-  });
-
-  const handleDeleteLocation = (location: LocationListType) => {
-    setSelectedLocation(location);
-    setOpenDeleteDialog(true);
-  };
-  const confirmDelete = () => {
-    if (!selectedLocation) return;
-    removeLocation({ facilityId, locationId: selectedLocation.id });
-    setOpenDeleteDialog(false);
-    setSelectedLocation(null);
-  };
 
   const handleSheetClose = () => {
     setIsSheetOpen(false);
@@ -101,20 +61,6 @@ export default function LocationList({ facilityId }: Props) {
 
   return (
     <div className="space-y-6">
-      <ConfirmDialog
-        title={t("delete_item", { name: selectedLocation?.name })}
-        description={
-          <span>
-            {t("are_you_sure_want_to_delete", { name: selectedLocation?.name })}
-          </span>
-        }
-        action="Delete"
-        variant="destructive"
-        show={openDeleteDialog}
-        onClose={() => setOpenDeleteDialog(false)}
-        onConfirm={confirmDelete}
-        cancelLabel={t("cancel")}
-      />
       <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
         <div className="flex items-center gap-4">
           <h2 className="text-lg font-semibold">{t("locations")}</h2>
@@ -149,7 +95,7 @@ export default function LocationList({ facilityId }: Props) {
                   key={location.id}
                   location={location}
                   onEdit={handleEditLocation}
-                  onDelete={handleDeleteLocation}
+                  facilityId={facilityId}
                 />
               ))
             ) : (

diff --git a/src/pages/Facility/settings/locations/LocationView.tsx b/src/pages/Facility/settings/locations/LocationView.tsx
@@ -1,8 +1,7 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Link } from "raviger";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
@@ -18,13 +17,11 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 
-import ConfirmDialog from "@/components/Common/ConfirmDialog";
 import Page from "@/components/Common/Page";
 import Pagination from "@/components/Common/Pagination";
 import { CardGridSkeleton } from "@/components/Common/SkeletonLoading";
 import LinkDepartmentsSheet from "@/components/Patient/LinkDepartmentsSheet";
 
-import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
 import { LocationList, getLocationFormLabel } from "@/types/location/location";
 import locationApi from "@/types/location/locationApi";
@@ -43,7 +40,6 @@ export default function LocationView({ id, facilityId }: Props) {
 
   const [page, setPage] = useState(1);
   const [searchQuery, setSearchQuery] = useState("");
-  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
   const [selectedLocation, setSelectedLocation] = useState<LocationList | null>(
     null,
   );
@@ -96,47 +92,6 @@ export default function LocationView({ id, facilityId }: Props) {
     setIsSheetOpen(false);
     setSelectedLocation(null);
   };
-  const { mutate: removeLocation } = useMutation({
-    mutationFn: ({
-      facilityId,
-      locationId,
-    }: {
-      facilityId: string;
-      locationId: string;
-    }) =>
-      mutate(locationApi.delete, {
-        pathParams: { facility_id: facilityId, id: locationId },
-      })({ facilityId, locationId }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: [
-          "locations",
-          facilityId,
-          id,
-          "children",
-          { page, limit, searchQuery },
-        ],
-      });
-      toast.success("Location removed successfully");
-    },
-    onError: (error) => {
-      const errorData = error.cause as { errors: { msg: string }[] };
-      errorData.errors.forEach((er) => {
-        toast.error(er.msg);
-      });
-    },
-  });
-
-  const handleDeleteLocation = (location: LocationList) => {
-    setSelectedLocation(location);
-    setOpenDeleteDialog(true);
-  };
-  const confirmDelete = () => {
-    if (!selectedLocation) return;
-    removeLocation({ facilityId, locationId: selectedLocation.id });
-    setOpenDeleteDialog(false);
-    setSelectedLocation(null);
-  };
 
   if (!location)
     return (
@@ -160,20 +115,6 @@ export default function LocationView({ id, facilityId }: Props) {
 
   return (
     <>
-      <ConfirmDialog
-        title={t("delete_item", { name: selectedLocation?.name })}
-        description={
-          <span>
-            {t("are_you_sure_want_to_delete", { name: selectedLocation?.name })}
-          </span>
-        }
-        action="Delete"
-        variant="destructive"
-        show={openDeleteDialog}
-        onClose={() => setOpenDeleteDialog(false)}
-        onConfirm={confirmDelete}
-        cancelLabel={t("cancel")}
-      />
       <Breadcrumb className="m-4">
         <BreadcrumbList>
           <BreadcrumbItem>
@@ -275,7 +216,7 @@ export default function LocationView({ id, facilityId }: Props) {
                       key={childLocation.id}
                       location={childLocation}
                       onEdit={handleEditLocation}
-                      onDelete={handleDeleteLocation}
+                      facilityId={facilityId}
                     />
                   ))
                 ) : (

diff --git a/src/pages/Facility/settings/locations/components/LocationCard.tsx b/src/pages/Facility/settings/locations/components/LocationCard.tsx
@@ -1,3 +1,4 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import {
   Bed,
   Building,
@@ -14,26 +15,58 @@ import {
 } from "lucide-react";
 import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 
 import { cn } from "@/lib/utils";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 
+import mutate from "@/Utils/request/mutate";
 import { LocationList, getLocationFormLabel } from "@/types/location/location";
+import locationApi from "@/types/location/locationApi";
 
 interface Props {
   location: LocationList;
   onEdit?: (location: LocationList) => void;
-  onDelete?: (location: LocationList) => void;
   className?: string;
+  facilityId?: string;
 }
 
-export function LocationCard({ location, onEdit, onDelete, className }: Props) {
+export function LocationCard({
+  location,
+  onEdit,
+  className,
+  facilityId,
+}: Props) {
   const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  const { mutate: removeLocation } = useMutation({
+    mutationFn: mutate(locationApi.delete, {
+      pathParams: { facility_id: facilityId, id: location.id },
+    }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["locations", facilityId],
+      });
+      toast.success("Location removed successfully");
+    },
+  });
 
   const getLocationTypeIcon = (form: string) => {
     switch (form.toLowerCase()) {
@@ -131,9 +164,43 @@ export function LocationCard({ location, onEdit, onDelete, className }: Props) {
 
         <div className="mt-auto border-t border-gray-100 bg-gray-50 p-4">
           <div className="flex justify-between">
-            <Button variant="destructive" onClick={() => onDelete?.(location)}>
-              <CareIcon icon="l-trash" />
-            </Button>
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <Button
+                  className={cn(buttonVariants({ variant: "destructive" }))}
+                >
+                  <CareIcon icon="l-trash" />
+                </Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>
+                    {t("remove")} {location.name}
+                  </AlertDialogTitle>
+                  <AlertDialogDescription>
+                    {t("are_you_sure_want_to_delete", {
+                      name: location.name,
+                    })}
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+                  <AlertDialogAction
+                    onClick={() =>
+                      removeLocation({
+                        pathParams: {
+                          facility_id: facilityId,
+                          id: location.id,
+                        },
+                      })
+                    }
+                    className={cn(buttonVariants({ variant: "destructive" }))}
+                  >
+                    {t("remove")}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
             <Button variant="outline" asChild>
               <Link
                 href={`/location/${location.id}`}