Merge pull request #250 from rairprotocol/243-clear-all-button-should…

…-be-disabled-when-no-notifications-exists 243 clear all button should be disabled when no notifications exists
rairprotocol · Oct 10, 2024 · 6aca13b · 6aca13b
2 parents d0ca9da + a3f1e88
commit 6aca13b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 24 deletions.
diff --git 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
@@ -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