Skip to content

Commit

Permalink
fix: update user overview in use rmanagement
Browse files Browse the repository at this point in the history
  • Loading branch information
harjibbolar26 committed Aug 17, 2024
1 parent d2f5e21 commit fa138a4
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 22 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { Button } from "~/components/common/common-button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "~/components/ui/dialog";

const DeleteSuccessfulDialog = ({ onClose }: { onClose: () => void }) => {
return (
<Dialog open onOpenChange={onClose}>
<DialogContent>
<DialogHeader>
<DialogTitle className="text-lg font-semibold leading-7 text-slate-900">
User Deleted Successfully!
</DialogTitle>
<DialogDescription className="text-sm font-normal leading-tight text-slate-500">
Their account has been deleted, and they will no longer be able to
access the platform.
</DialogDescription>
</DialogHeader>
<div className="flex w-full items-center justify-end">
<Button
className="ml-2 flex items-center justify-end gap-2.5 rounded-md bg-primary px-4 py-2 text-sm font-medium leading-normal text-white"
onClick={onClose}
>
Done
</Button>
</div>
</DialogContent>
</Dialog>
);
};

export default DeleteSuccessfulDialog;
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ interface UserTableProperties {
isDeleting: boolean;
loading: boolean;
isDialogOpen: boolean;
isSuccessDeleteDialogOpen: boolean;
setIsDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
setIsSuccessDeleteDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
}

const UserTable: React.FC<UserTableProperties> = ({
Expand All @@ -21,24 +23,32 @@ const UserTable: React.FC<UserTableProperties> = ({
loading,
isDialogOpen,
setIsDialogOpen,
isSuccessDeleteDialogOpen,
setIsSuccessDeleteDialogOpen,
}) => {
return (
<>
<table className="user-table h-full w-full overflow-hidden">
<UserTableHead />
{loading ? (
<span className="mx-auto flex w-full items-center justify-center gap-x-2">
<span className="mx-auto mt-4 flex w-full items-center justify-center gap-x-2">
<span className="animate-pulse">Fetching user data...</span>{" "}
<LoadingSpinner className="size-4 animate-spin sm:size-5" />
</span>
) : (
) : data.length > 0 ? (
<UserTableBody
data={data}
onDelete={onDelete}
isDeleting={isDeleting}
isDialogOpen={isDialogOpen}
setIsDialogOpen={setIsDialogOpen}
isSuccessDeleteDialogOpen={isSuccessDeleteDialogOpen}
setIsSuccessDeleteDialogOpen={setIsSuccessDeleteDialogOpen}
/>
) : (
<div className="w-full pb-5 pt-10 text-center text-neutral-dark-2">
No user data
</div>
)}
</table>
</>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,16 @@ import {
} from "~/components/ui/dropdown-menu";
import { UserData } from "../page";
import DeleteDialog from "./dialogue/delete-dialog";
import DeleteSuccessfulDialog from "./dialogue/delete-successful";

interface UserTableProperties {
data: UserData[];
onDelete: (userId: string) => void;
isDeleting: boolean;
isDialogOpen: boolean;
isSuccessDeleteDialogOpen: boolean;
setIsDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
setIsSuccessDeleteDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
}

const UserTableBody: React.FC<UserTableProperties> = ({
Expand All @@ -27,6 +30,8 @@ const UserTableBody: React.FC<UserTableProperties> = ({
isDeleting,
isDialogOpen,
setIsDialogOpen,
isSuccessDeleteDialogOpen,
setIsSuccessDeleteDialogOpen,
}) => {
const [userId, setUserId] = useState("");

Expand All @@ -35,6 +40,8 @@ const UserTableBody: React.FC<UserTableProperties> = ({
setUserId(id);
};
const handleCloseDialog = () => setIsDialogOpen(false);
const handleCloseDeleteSuccessDialog = () =>
setIsSuccessDeleteDialogOpen(false);
return (
<>
<tbody className="user-table z-10">
Expand Down Expand Up @@ -133,6 +140,9 @@ const UserTableBody: React.FC<UserTableProperties> = ({
onDelete={() => onDelete(userId)}
/>
)}
{isSuccessDeleteDialogOpen && (
<DeleteSuccessfulDialog onClose={handleCloseDeleteSuccessDialog} />
)}
</>
);
};
Expand Down
51 changes: 31 additions & 20 deletions src/app/dashboard/(admin)/admin/(overview)/users/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,9 @@ const UserPage = () => {
const [loading, setLoading] = useState(false);

const [isDialogOpen, setIsDialogOpen] = useState(false);
const [isSuccessDeleteDialogOpen, setIsSuccessDeleteDialogOpen] =
useState(false);
const { toast } = useToast();
// const { data: session } = useSession();

const [totalUserOverview, setTotalUserOverview] = useState<UserCardData>({
title: "Total Users",
Expand Down Expand Up @@ -104,6 +105,8 @@ const UserPage = () => {
FilterDataProperties | undefined
>();

const deletedUser = 0;

const filterActionsHandler = (title: string) => {
if (title === "Active") {
const _data = data?.filter((item) => item.is_active);
Expand Down Expand Up @@ -137,10 +140,7 @@ const UserPage = () => {
const usersData: UserData[] = response.data.data?.users || [];
setData(usersData);
setFilterData(usersData);
const totalUser = response.data.data.total || 0;
const deletedUser = usersData.filter(
(user) => user.deleted_at !== null,
).length;
const totalUser = response.data.data.pagination.total || 0;

setTotalUserOverview((previous) => ({
...previous,
Expand Down Expand Up @@ -176,48 +176,57 @@ const UserPage = () => {
} finally {
setLoading(false);
}
}, [page, toast]);
}, [deletedUser, page, toast]);

useEffect(() => {
fetchData();
}, [fetchData]);

const deleteUser = async (userId: string) => {
try {
const session = await getSession();
const baseUrl = await getApiUrl();
const API_URL = `${baseUrl}/api/v1/users/${userId}`;
setIsDeleting(true);
await axios.delete(API_URL);
fetchData();
await axios.delete(API_URL, {
headers: {
Authorization: `Bearer ${session?.access_token}`,
},
});

// Update data without calling fetchData
const updatedUser = data.filter((user) => user.id !== userId);
setData(updatedUser);
setFilterData(updatedUser);
const deletedCount = updatedUser.filter(
(user) => user.deleted_at !== null,
).length;

// Update overviews
setdeletedUserOverview((previous) => ({
...previous,
value: deletedCount,
value: previous.value + 1, // Increment the count
}));
const activeCount = updatedUser.filter((user) => user.is_active).length;
setActiveUserOverview((previous) => ({
...previous,
value: activeCount,
}));
} catch {
setIsDeleting(false);
setTotalUserOverview((previous) => ({
...previous,
value: previous.value - 1,
}));
setIsSuccessDeleteDialogOpen(true);
} catch (error) {
toast({
title: `Error deleting user`,
description:
error instanceof Error ? error.message : "An unknown error occurred",
variant: "destructive",
});
} finally {
setIsDeleting(false);
setIsDialogOpen(false);
}
};

if (!data) {
<div className="w-full pb-5 pt-10 text-center text-neutral-dark-2">
No data
</div>;
}

return (
<>
<section>
Expand Down Expand Up @@ -303,6 +312,8 @@ const UserPage = () => {
loading={loading}
isDialogOpen={isDialogOpen}
setIsDialogOpen={setIsDialogOpen}
isSuccessDeleteDialogOpen={isSuccessDeleteDialogOpen}
setIsSuccessDeleteDialogOpen={setIsSuccessDeleteDialogOpen}
/>
</div>

Expand Down

0 comments on commit fa138a4

Please sign in to comment.