From a3f1e8824752541cab718d8ffe4e00bf36df9635 Mon Sep 17 00:00:00 2001
From: SeanM322 <sean@rair.tech>
Date: Thu, 10 Oct 2024 14:38:33 +0300
Subject: [PATCH] disable "Clear All" btn If totalCount === 0

---
 .../MenuComponents/MobileNavigationList.tsx   | 31 ++++++++++---------
 .../PopUpNotification/PopUpNotification.tsx   | 23 ++++++++------
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx b/rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx
index 49ff058b..1f7a3a2b 100644
--- a/rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx
+++ b/rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx
@@ -90,7 +90,9 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
 
   const [copyEth, setCopyEth] = useState<boolean>(false);
   const [flagLoading, setFlagLoading] = useState(false);
-  const {notifications, totalCount} = useAppSelector(store => store.notifications);
+  const { notifications, totalCount } = useAppSelector(
+    (store) => store.notifications
+  );
   const [currentPageNotification, setCurrentPageNotification] =
     useState<number>(1);
   const reactSwal = useSwal();
@@ -124,7 +126,7 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
   }, [currentUserAddress, dispatch, reactSwal]);
 
   useEffect(() => {
-    if(currentUserAddress && isLoggedIn) {
+    if (currentUserAddress && isLoggedIn) {
       dispatch(fetchNotifications(0));
     }
   }, [currentUserAddress, isLoggedIn]);
@@ -164,19 +166,22 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
               <button
                 className="btn-clear-nofitications"
                 onClick={() => deleteAllNotificaiton()}
+                disabled={totalCount === 0}
                 style={{
                   color: textColor,
                   background: `${
-                    primaryColor === '#dedede'
-                      ? import.meta.env.VITE_TESTNET === 'true'
-                        ? 'var(--hot-drops)'
-                        : 'linear-gradient(to right, #e882d5, #725bdb)'
-                      : import.meta.env.VITE_TESTNET === 'true'
-                        ? primaryButtonColor ===
-                          'linear-gradient(to right, #e882d5, #725bdb)'
+                    totalCount === 0
+                      ? '#ababab'
+                      : primaryColor === '#dedede'
+                        ? import.meta.env.VITE_TESTNET === 'true'
                           ? 'var(--hot-drops)'
+                          : 'linear-gradient(to right, #e882d5, #725bdb)'
+                        : import.meta.env.VITE_TESTNET === 'true'
+                          ? primaryButtonColor ===
+                            'linear-gradient(to right, #e882d5, #725bdb)'
+                            ? 'var(--hot-drops)'
+                            : primaryButtonColor
                           : primaryButtonColor
-                        : primaryButtonColor
                   }`
                 }}>
                 Clear all
@@ -187,11 +192,7 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
             ) : notifications && notifications.length > 0 ? (
               notifications.map((el) => {
                 return (
-                  <NotificationBox
-                    el={el}
-                    key={el._id}
-                    title={el.message}
-                  />
+                  <NotificationBox el={el} key={el._id} title={el.message} />
                 );
               })
             ) : (
diff --git a/rair-front/src/components/UserProfileSettings/PopUpNotification/PopUpNotification.tsx b/rair-front/src/components/UserProfileSettings/PopUpNotification/PopUpNotification.tsx
index 0d76fd8f..d30a3cee 100644
--- a/rair-front/src/components/UserProfileSettings/PopUpNotification/PopUpNotification.tsx
+++ b/rair-front/src/components/UserProfileSettings/PopUpNotification/PopUpNotification.tsx
@@ -17,7 +17,9 @@ const PopUpNotification = ({ realDataNotification, notificationCount }) => {
   const reactSwal = useSwal();
   const { currentUserAddress } = useAppSelector((state) => state.web3);
   const { isLoggedIn } = useAppSelector((store) => store.user);
-  const { totalUnreadCount } = useAppSelector((store) => store.notifications);
+  const { totalUnreadCount, totalCount } = useAppSelector(
+    (store) => store.notifications
+  );
   const [totalPageForPagination, setTotalPageForPagination] = useState(0);
   const [currentPageForNotification, setCurrentPageNotification] =
     useState<number>(1);
@@ -127,19 +129,22 @@ const PopUpNotification = ({ realDataNotification, notificationCount }) => {
               <div className="notification-title">Notifications</div>
               <button
                 onClick={() => deleteAllNotificaiton()}
+                disabled={totalCount === 0}
                 style={{
                   color: textColor,
                   background: `${
-                    primaryColor === '#dedede'
-                      ? import.meta.env.VITE_TESTNET === 'true'
-                        ? 'var(--hot-drops)'
-                        : 'linear-gradient(to right, #e882d5, #725bdb)'
-                      : import.meta.env.VITE_TESTNET === 'true'
-                        ? primaryButtonColor ===
-                          'linear-gradient(to right, #e882d5, #725bdb)'
+                    totalCount === 0
+                      ? '#ababab'
+                      : primaryColor === '#dedede'
+                        ? import.meta.env.VITE_TESTNET === 'true'
                           ? 'var(--hot-drops)'
+                          : 'linear-gradient(to right, #e882d5, #725bdb)'
+                        : import.meta.env.VITE_TESTNET === 'true'
+                          ? primaryButtonColor ===
+                            'linear-gradient(to right, #e882d5, #725bdb)'
+                            ? 'var(--hot-drops)'
+                            : primaryButtonColor
                           : primaryButtonColor
-                        : primaryButtonColor
                   }`
                 }}>
                 Clear all