@visns-studio/visns-components 5.7.0 → 5.7.2

package/src/components/crm/Notification.jsx

@@ -1,29 +1,33 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import moment from 'moment';
 import parse from 'html-react-parser';
 import { toast } from 'react-toastify';
-import { Bell, CircleX } from 'akar-icons';
+import { Bell, CircleX, Check } from 'akar-icons';
 import CustomFetch from './Fetch';
 import styles from './styles/Notification.module.scss';
 
 function Notification(props) {
-    let interval;
     const navigate = useNavigate();
     const wrapperRef = useRef(null);
     const [items, setItems] = useState([]);
     const [show, setShow] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [processingIds, setProcessingIds] = useState([]);
     const { setSystemAuth } = props;
 
-    const fetchNotification = () => {
+    const fetchNotification = useCallback(() => {
+        setLoading(true);
         CustomFetch(
             '/ajax/user/notifications',
             'POST',
             {},
             function (result) {
                 setItems(result.data);
+                setLoading(false);
             },
             function (error) {
+                setLoading(false);
                 if (String(error) === 'CSRF token mismatch.') {
                     window.open('/login');
                 } else {
@@ -34,163 +38,290 @@ function Notification(props) {
                 }
             }
         );
-    };
-
-    const handleClick = (e) => {
-        if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
-            setShow(false);
-        }
-    };
-
-    const markAsRead = (e) => {
-        e.preventDefault();
+    }, [setSystemAuth]);
 
-        let array = items;
-        let index = e.target.dataset.index;
-        let id = e.target.dataset.id;
+    const handleClickOutside = useCallback((e) => {
+        // Check if the click is outside the notification dropdown and not on the bell icon
+        const bellButton = document.querySelector(
+            `.${styles.notificationTrigger}`
+        );
+        const isClickOnBell = bellButton && bellButton.contains(e.target);
 
-        if (index >= 0) {
-            array.splice(index, 1);
-            setItems(array);
+        if (
+            wrapperRef.current &&
+            !wrapperRef.current.contains(e.target) &&
+            !isClickOnBell
+        ) {
+            setShow(false);
         }
+    }, []);
 
-        let formData = { id: id };
+    const markAsRead = useCallback(
+        (e) => {
+            e.preventDefault();
+            e.stopPropagation();
 
-        CustomFetch(
-            '/ajax/user/notification/markasread',
-            'POST',
-            formData,
-            function () {
-                fetchNotification();
-            }
-        );
-    };
+            const target = e.currentTarget;
+            const id = target.dataset.id;
+            const index = parseInt(target.dataset.index);
 
-    const markAllAsRead = (e) => {
-        e.preventDefault();
+            if (!id || processingIds.includes(id)) return;
 
-        let array = items;
-        setItems([]);
+            // Optimistic UI update
+            setProcessingIds((prev) => [...prev, id]);
+            setItems((prevItems) =>
+                prevItems.filter((_, idx) => idx !== index)
+            );
 
-        array.map((item) => {
-            let formData = { id: item.id };
+            const formData = { id };
 
             CustomFetch(
                 '/ajax/user/notification/markasread',
                 'POST',
                 formData,
                 function () {
-                    fetchNotification();
+                    setProcessingIds((prev) =>
+                        prev.filter((item) => item !== id)
+                    );
+                },
+                function (error) {
+                    setProcessingIds((prev) =>
+                        prev.filter((item) => item !== id)
+                    );
+                    toast.error(
+                        String(error) || 'Failed to mark notification as read'
+                    );
+                    fetchNotification(); // Refresh to get correct state
                 }
             );
-        });
-    };
+        },
+        [fetchNotification, processingIds]
+    );
 
-    const toggleNotification = () => {
-        setShow(!show);
-    };
+    const markAllAsRead = useCallback(
+        (e) => {
+            e.preventDefault();
+
+            if (items.length === 0 || loading) return;
+
+            setLoading(true);
+            // Optimistic UI update
+            setItems([]);
+
+            const promises = items.map((item) => {
+                return new Promise((resolve, reject) => {
+                    CustomFetch(
+                        '/ajax/user/notification/markasread',
+                        'POST',
+                        { id: item.id },
+                        resolve,
+                        reject
+                    );
+                });
+            });
+
+            Promise.all(promises)
+                .then(() => {
+                    toast.success('All notifications marked as read');
+                    setLoading(false);
+                })
+                .catch(() => {
+                    toast.error('Failed to mark all notifications as read');
+                    fetchNotification();
+                    setLoading(false);
+                });
+        },
+        [items, fetchNotification, loading]
+    );
+
+    const toggleNotification = useCallback((e) => {
+        e.stopPropagation(); // Prevent event bubbling
+        setShow((prev) => !prev);
+    }, []);
 
-    const showAllNotifications = () => {
+    const showAllNotifications = useCallback(() => {
         navigate('/notifications');
         setShow(false);
-    };
+    }, [navigate]);
 
     useEffect(() => {
         fetchNotification();
 
-        interval = setInterval(() => {
+        const interval = setInterval(() => {
             if (!document.hidden) {
                 fetchNotification();
             }
         }, 60000);
 
-        document.addEventListener('mousedown', handleClick, false);
+        document.addEventListener('mousedown', handleClickOutside, false);
 
         return function cleanup() {
             clearInterval(interval);
-            document.removeEventListener('mousedown', handleClick, false);
+            document.removeEventListener(
+                'mousedown',
+                handleClickOutside,
+                false
+            );
         };
-    }, []);
+    }, [fetchNotification, handleClickOutside]);
+
+    const formatTimeAgo = (date) => {
+        const now = moment();
+        const notificationTime = moment(date);
+        const diffHours = now.diff(notificationTime, 'hours');
+
+        if (diffHours < 24) {
+            return notificationTime.fromNow(); // e.g. "2 hours ago"
+        } else {
+            return notificationTime.format('DD MMM, HH:mm'); // e.g. "15 Jun, 14:30"
+        }
+    };
+
+    const hasNotifications = items.length > 0;
 
     return (
-        <>
-            <a
-                href="#"
+        <div className={styles.notificationContainer}>
+            <button
+                className={styles.notificationTrigger}
                 onClick={toggleNotification}
                 data-tooltip-id="system-tooltip"
-                data-tooltip-content="Notification"
+                data-tooltip-content="Notifications"
+                aria-label="Notifications"
             >
                 <Bell
-                    size={19}
+                    size={20}
                     strokeWidth={2}
-                    className={
-                        items.length > 0
-                            ? styles.noti
-                            : styles['cis-bell-exclamation']
-                    }
+                    className={hasNotifications ? styles.noti : ''}
                 />
-            </a>
+                {hasNotifications && (
+                    <span className={styles.badge}>{items.length}</span>
+                )}
+            </button>
 
             {show && (
-                <div ref={wrapperRef}>
-                    {items.length > 0 ? (
-                        <div className={styles.notibox}>
-                            <div className={styles.notiscrollwrap}>
-                                {items.map((item, index) => (
+                <div className={styles.dropdownWrapper} ref={wrapperRef}>
+                    <div className={styles.notibox}>
+                        <div className={styles.notiboxHeader}>
+                            <h3>Notifications</h3>
+                            {hasNotifications && (
+                                <button
+                                    className={styles.markAllReadBtn}
+                                    onClick={markAllAsRead}
+                                    disabled={loading}
+                                >
+                                    <Check size={16} />
+                                    <span>Mark all as read</span>
+                                </button>
+                            )}
+                        </div>
+
+                        <div className={styles.notiscrollwrap}>
+                            {loading && items.length === 0 ? (
+                                <div className={styles.loadingState}>
+                                    <div
+                                        className={styles.loadingSpinner}
+                                    ></div>
+                                    <p>Loading notifications...</p>
+                                </div>
+                            ) : hasNotifications ? (
+                                items.map((item, index) => (
                                     <div
-                                        className={styles['notibox-item']}
+                                        className={styles.notiboxItem}
                                         key={item.id}
                                     >
-                                        <Bell
-                                            size={19}
-                                            strokeWidth={2}
-                                            className={
-                                                styles.cisBellExclamation
-                                            }
-                                        />{' '}
-                                        {parse(item.data.label)}{' '}
-                                        <span>
-                                            [
-                                            {moment(item.created_at).format(
-                                                'DD/MM - H:mma'
-                                            )}
-                                            ]
-                                        </span>{' '}
-                                        <button onClick={markAsRead}>
-                                            <CircleX
-                                                size={24}
+                                        <div className={styles.notiContent}>
+                                            <div className={styles.notiIcon}>
+                                                <Bell
+                                                    size={16}
+                                                    strokeWidth={2}
+                                                />
+                                            </div>
+                                            <div className={styles.notiMessage}>
+                                                <div
+                                                    className={styles.notiText}
+                                                >
+                                                    {parse(item.data.label)}
+                                                </div>
+                                                <div
+                                                    className={styles.notiTime}
+                                                >
+                                                    {formatTimeAgo(
+                                                        item.created_at
+                                                    )}
+                                                </div>
+                                            </div>
+                                            <button
+                                                className={styles.notiDismiss}
+                                                onClick={markAsRead}
                                                 data-id={item.id}
                                                 data-index={index}
-                                                className={styles.notiRead}
-                                            />
-                                        </button>
+                                                aria-label="Dismiss notification"
+                                            >
+                                                <CircleX size={18} />
+                                            </button>
+                                        </div>
                                     </div>
-                                ))}
-                            </div>
-                            <div className={styles['notibox-actions']}>
-                                <button onClick={showAllNotifications}>
-                                    View All
-                                </button>
-                                <button onClick={markAllAsRead}>
-                                    Clear All
-                                </button>
-                            </div>
+                                ))
+                            ) : (
+                                <div className={styles.emptyState}>
+                                    <div className={styles.emptyIcon}>
+                                        <Bell size={24} strokeWidth={2} />
+                                    </div>
+                                    <p>No new notifications</p>
+                                </div>
+                            )}
                         </div>
-                    ) : (
-                        <div className={styles.notibox}>
-                            <div className={styles['notibox-item']}>
-                                No new notifications available.
-                            </div>
-                            <div className={styles['notibox-actions']}>
-                                <button onClick={showAllNotifications}>
-                                    View All
+
+                        <div className={styles.notiboxActions}>
+                            <div className={styles.buttonWrapper}>
+                                <button
+                                    className={styles.viewAllBtn}
+                                    onClick={showAllNotifications}
+                                    aria-label="View all notifications"
+                                    type="button"
+                                    style={{
+                                        backgroundColor: 'var(--primary-color)',
+                                        color: 'var(--tertiary-color, white)',
+                                        padding: '10px 20px',
+                                        borderRadius: 'var(--br, 6px)',
+                                        border: 'none',
+                                        width: 'auto',
+                                        minWidth: '200px',
+                                        textAlign: 'center',
+                                        fontWeight: '500',
+                                        fontSize: '14px',
+                                        boxShadow:
+                                            '0 2px 4px rgba(0, 0, 0, 0.1)',
+                                        cursor: 'pointer',
+                                        transition: 'all 0.2s ease',
+                                    }}
+                                    onMouseOver={(e) =>
+                                        (e.target.style.backgroundColor =
+                                            'var(--secondary-color)')
+                                    }
+                                    onMouseOut={(e) =>
+                                        (e.target.style.backgroundColor =
+                                            'var(--primary-color)')
+                                    }
+                                    onFocus={(e) => {
+                                        e.target.style.backgroundColor =
+                                            'var(--primary-color)';
+                                        e.target.style.boxShadow =
+                                            '0 0 0 3px rgba(var(--primary-color-rgb, 0, 86, 179), 0.4)';
+                                    }}
+                                    onBlur={(e) => {
+                                        e.target.style.boxShadow =
+                                            '0 2px 4px rgba(0, 0, 0, 0.1)';
+                                    }}
+                                >
+                                    View all notifications
                                 </button>
                             </div>
                         </div>
-                    )}
+                    </div>
                 </div>
             )}
-        </>
+        </div>
     );
 }