Riyad/notification implement (#244)

* implementing notification * notification is working fine * minor fix * add notifications * notification fix * update ui of notification modal * approve milestone if voted for brief * updating the notificcations * 1. update the ui 2. update notifications * minor fix * fix again * fix string issue * 1. fix milestone completed 2. fix approver notifications 3. add loading to notifications 4. close on click on any notifications * fix the small bug * push again * add key * add new Navbar * fix bugs * hiding icons * working on optimizing notifications * fix all the conflicts --------- Co-authored-by: ssani7 <[email protected]>
ImbueNetwork · Nov 13, 2023 · 96606f9 · 96606f9
1 parent d915d1f
commit 96606f9
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 22 deletions.
diff --git a/src/components/Navbar/NewNavBar.tsx b/src/components/Navbar/NewNavBar.tsx
@@ -60,6 +60,8 @@ function NewNavbar() {
   } = useSelector((state: RootState) => state.userState);
   const dispatch = useDispatch<AppDispatch>();
 
+  const [expanded, setExpanded] = useState(false);
+
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
     setOpenMenu(Boolean(event.currentTarget));
@@ -87,6 +89,14 @@ function NewNavbar() {
     setup();
   }, [dispatch, user?.username]);
 
+  const navigateToPage = (url: string) => {
+    if (user?.username) {
+      router.push(url);
+    } else {
+      setLoginModal(true);
+    }
+  };
+
   const navPillclasses =
     'text-imbue-purple-dark h-[3rem] bg-white  rounded-[5.07319rem] !flex justify-center items-center px-5 hover:no-underline !text-[1rem] ';
 
@@ -234,6 +244,7 @@ function NewNavbar() {
                   ''
                 )}
                 <Link
+                  onClick={() => setExpanded(false)}
                   className={`mx-1 hover:bg-imbue-lime-light text-xs lg:text-sm hidden lg:inline-block cursor-pointer ${navPillclasses} nav-item nav-item-2`}
                   href='/relay'
                 >
@@ -247,6 +258,7 @@ function NewNavbar() {
                   Wallet
                 </Link>
                 <div
+                  onClick={() => setExpanded(false)}
                   className={`mx-1 relative group text-xs hover:bg-imbue-lime-light lg:text-sm hidden lg:inline-block cursor-pointer hover:underline ${navPillclasses}`}
                 >
                   <Image
@@ -320,24 +332,25 @@ function NewNavbar() {
               paddingRight: 2,
             }}
           >
-            <Badge className='mr-3' badgeContent={message} color='error'>
-              <Image
-                src='/message-dots-square.svg'
-                width={23}
-                height={20}
-                onClick={() => router.push('/dashboard/messages')}
-                alt='message'
-                className='cursor-pointer'
-              />
-            </Badge>
-            <div className='relative'>
-              {/*  */}
-
-              <div>
-                {/* <NotificationDropdown feedGroup='user' right notify /> */}
-                <NotificationIcon />
-              </div>
-            </div>
+            {user?.username && (
+              <>
+                <Badge className='mr-3' badgeContent={message} color='error'>
+                  <Image
+                    src='/message-dots-square.svg'
+                    width={23}
+                    height={20}
+                    onClick={() => router.push('/dashboard/message')}
+                    alt='message'
+                    className='cursor-pointer'
+                  />
+                </Badge>
+                <div className='relative'>
+                  <div>
+                    <NotificationIcon />
+                  </div>
+                </div>
+              </>
+            )}
             <Tooltip
               title='Account settings'
               className={`${!user?.username && !loading && 'lg:hidden'}`}
@@ -410,6 +423,13 @@ function NewNavbar() {
           />
         </Menu>
       </header>
+      {/* <Login
+        visible={loginModal}
+        setVisible={(val: any) => {
+          setLoginModal(val);
+        }}
+        redirectUrl={router?.asPath}
+      /> */}
       <LoginPopup
         visible={loginModal}
         setVisible={(val: any) => {

diff --git a/src/components/Navbar/NotificationIcon.tsx b/src/components/Navbar/NotificationIcon.tsx
@@ -13,8 +13,20 @@ export default function NotificationIcon() {
   const [lastNotification, setLastNotification] = useState<
     string | undefined
   >();
+  const [limit, setLimit] = useState(10);
+  const [notifications, setNotifications] = useState<any>([]);
+
+
+  const getNotificationList = ()=>{
+
+  }
+
 
   useEffect(() => {
+
+
+
+
     const notifications = async () => {
       const result = await getNotification();
       setNotificationCount(result.new_notification.length);
@@ -25,14 +37,12 @@ export default function NotificationIcon() {
     const timerId = setInterval(() => {
       notifications();
     }, 20000);
-
     return () => clearInterval(timerId);
   }, []);
 
   const updateFun = async () => {
     await updateLastNotification(lastNotification as string);
   };
-
   const handleOpenModal = (e: any) => {
     setModal((val) => !val);
     setAnchorEl(e.target);
@@ -47,6 +57,7 @@ export default function NotificationIcon() {
     setAnchorEl(null);
     setModal(false);
   };
+
   return (
     <div>
       <Badge badgeContent={unreadNotification} color='error'>

diff --git a/src/components/NotificationsModal/NotificationsModal.tsx b/src/components/NotificationsModal/NotificationsModal.tsx
@@ -36,7 +36,10 @@ export default function NotificationsModal({ onClose }: { onClose: any }) {
             }}
             LoadingIndicator={NotificationsLoader}
             Activity={({ activity }) => (
-              <div onClick={() => onClose(false)}>
+              <div
+                key={'notifications' + activity.id}
+                onClick={() => onClose(false)}
+              >
                 {activity.object === 'approved_Milestone.testing' && (
                   <MilestoneApprovedNotifications {...activity} />
                 )}

diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
@@ -71,7 +71,6 @@ const Dashboard = (): JSX.Element => {
         setLoadingStreamChat(false);
       }
     };
-
     setupStreamChat();
   }, [user]);