AmirReza Jamali
021ee7d11e
This commit replaces the static notification dropdown in the header with a fully functional component that fetches live data from the API. Key features include: - Fetches and displays the latest notifications. - Shows a badge with the count of unseen notifications. - Opens a modal with notification details upon clicking an item. - Marks notifications as seen when they are viewed. Additionally, this commit includes several related improvements: - refactor: Replaced the global loading component with a custom Tailwind CSS spinner for a consistent look and feel. - feat: Enhanced the DatePicker component to optionally include a time picker. - style: Improved the layout of the notification details page by moving the message to a dedicated section and capitalizing the 'priority' and 'type' fields for better readability.
84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import { API_ENDPOINTS } from "@/lib/api";
|
|
import { notificationService } from "@/lib/api/services/notification-service";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { useMemo } from "react";
|
|
import { toast } from "react-toastify";
|
|
|
|
export const useGetNotificationHistoryQuery = (
|
|
params?: Record<string, any>,
|
|
) => {
|
|
const queryKey = useMemo(
|
|
() => [API_ENDPOINTS.NOTIFICATIONS.HISTORY, params],
|
|
[params],
|
|
);
|
|
return useQuery({
|
|
queryKey,
|
|
queryFn: () => notificationService.getNotifications(params),
|
|
});
|
|
};
|
|
export const useGetMyNotifications = (params?: Record<string, any>) => {
|
|
const queryKey = useMemo(
|
|
() => [API_ENDPOINTS.NOTIFICATIONS.MY_NOTIFICATIONS, params],
|
|
[params],
|
|
);
|
|
return useQuery({
|
|
queryKey,
|
|
queryFn: () => notificationService.getMyNotifications(params),
|
|
});
|
|
};
|
|
export const useMarkNotificationAsSeen = (
|
|
id: string,
|
|
successCallback?: () => void,
|
|
) => {
|
|
const queryClient = useQueryClient();
|
|
const mutationKey = useMemo(
|
|
() => [API_ENDPOINTS.NOTIFICATIONS.MARK_AS_SEEN(id), id],
|
|
[id],
|
|
);
|
|
return useMutation({
|
|
mutationKey,
|
|
mutationFn: () => notificationService.markNotificationAsSeen(id),
|
|
onSuccess: () => {
|
|
if (successCallback) {
|
|
successCallback();
|
|
}
|
|
queryClient.invalidateQueries({
|
|
queryKey: [API_ENDPOINTS.NOTIFICATIONS.MY_NOTIFICATIONS],
|
|
});
|
|
},
|
|
});
|
|
};
|
|
export const useGetNotificationDetails = (id: string) => {
|
|
const queryKey = useMemo(
|
|
() => [API_ENDPOINTS.NOTIFICATIONS.DETAILS(id), "NOTIFICATION DETAILS"],
|
|
[id],
|
|
);
|
|
return useQuery({
|
|
queryKey,
|
|
queryFn: () => notificationService.getNotificationDetails(id),
|
|
});
|
|
};
|
|
export const useCreateNotificationQuery = (successCallback?: () => void) => {
|
|
const queryClient = useQueryClient();
|
|
const mutationKey = useMemo(
|
|
() => [API_ENDPOINTS.NOTIFICATIONS.CREATE, "CREATE NOTIFICATION"],
|
|
[],
|
|
);
|
|
return useMutation({
|
|
mutationKey,
|
|
mutationFn: notificationService.createNotification,
|
|
onSuccess: ({ message }: { message: string }) => {
|
|
toast.success(message);
|
|
queryClient.invalidateQueries({
|
|
queryKey: [API_ENDPOINTS.NOTIFICATIONS.HISTORY],
|
|
});
|
|
queryClient.invalidateQueries({
|
|
queryKey: [API_ENDPOINTS.NOTIFICATIONS.MY_NOTIFICATIONS],
|
|
});
|
|
if (successCallback) {
|
|
successCallback();
|
|
}
|
|
},
|
|
});
|
|
};
|