feat: enhance useNotices hook to support dynamic fetching of notices with URL and arguments

Author: kzamanbd

src/components/wordpress/AdminNotice.tsx

@@ -41,6 +41,8 @@ export interface Notice {
 interface AdminNoticeProps {
     interval?: number;
     notices?: Notice[];
+    noticesUrl?: string;
+    noticesUrlArgs?: Record<string, string>;
     actionUrl?: string;
 }
 
@@ -160,7 +162,7 @@ const ConfirmModal = ({ open, action, loading, onConfirm, onClose }: ConfirmModa
     </Modal>
 );
 
-const AdminNotice = ({ interval = 5000, notices: initialNotices = [], actionUrl }: AdminNoticeProps) => {
+const AdminNotice = ({ interval = 5000, notices: initialNotices = [], noticesUrl, noticesUrlArgs, actionUrl }: AdminNoticeProps) => {
     const [modalOpen, setModalOpen] = useState(false);
     const [pendingAction, setPendingAction] = useState<{
         action: NoticeAction;
@@ -177,7 +179,7 @@ const AdminNotice = ({ interval = 5000, notices: initialNotices = [], actionUrl
         resumeAutoSlide,
         executeAction,
         actionLoading
-    } = useNotices({ interval, notices: initialNotices, actionUrl });
+    } = useNotices({ interval, notices: initialNotices, noticesUrl, noticesUrlArgs, actionUrl });
 
     if (error || !notices.length) {
         return null;

src/hooks/use-notices.ts

@@ -5,23 +5,64 @@ interface NoticesOptions {
     interval?: number;
     autoSlide?: boolean;
     notices?: Notice[];
+    noticesUrl?: string;
+    noticesUrlArgs?: Record<string, string>;
     actionUrl?: string;
 }
 
 export const useNotices = ({
     interval = 5000,
     autoSlide = true,
     notices: staticNotices = [],
+    noticesUrl,
+    noticesUrlArgs,
     actionUrl
 }: NoticesOptions = {}) => {
     const [notices, setNotices] = useState<Notice[]>([...staticNotices]);
     const [error, setError] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(!!noticesUrl);
     const [currentNotice, setCurrentNotice] = useState(1);
     const [isAutoSliding, setIsAutoSliding] = useState(autoSlide);
     const [actionLoading, setActionLoading] = useState<{
         [key: number]: boolean;
     }>({});
 
+    const fetchNotices = async () => {
+        setIsLoading(true);
+
+        try {
+            const url = new URL(noticesUrl as string, window.location.href);
+
+            if (noticesUrlArgs) {
+                Object.entries(noticesUrlArgs).forEach(([key, value]) => {
+                    url.searchParams.set(key, value);
+                });
+            }
+
+            const res = await fetch(url.toString());
+
+            if (!res.ok) {
+                throw new Error(`Failed to fetch notices: ${res.status}`);
+            }
+
+            const data: Notice[] | { success: boolean; data: Notice[] } = await res.json();
+            const fetched = Array.isArray(data) ? data : data.data;
+            setNotices(fetched);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to fetch notices');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (!noticesUrl) {
+            return;
+        }
+
+        fetchNotices();
+    }, [noticesUrl, noticesUrlArgs]);
+
     useEffect(() => {
         if (!isAutoSliding || notices.length <= 1) {
             return;
@@ -118,6 +159,7 @@ export const useNotices = ({
     return {
         notices,
         error,
+        isLoading,
         currentNotice,
         nextNotice,
         prevNotice,