applicant notifications

package.json

@@ -69,7 +69,7 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "@apollo/client": "^3.8.1",
+    "@apollo/client": "^3.11.8",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
@@ -115,6 +115,8 @@
     "patch-package": "^6.4.7",
     "path": "^0.12.7",
     "popper.js": "^1.16.1",
+    "pusher": "^5.2.0",
+    "pusher-js": "^8.4.0-rc2",
     "react-datepicker": "^4.8.0",
     "react-hook-form": "^7.45.4",
     "react-hot-toast": "^2.4.1",
@@ -136,8 +138,10 @@
     "redux-devtools-extension": "^2.13.9",
     "redux-state-sync": "^3.1.4",
     "redux-thunk": "^2.4.1",
+    "socket.io-client": "^4.8.0",
     "stream": "^0.0.2",
     "stream-http": "^3.2.0",
+    "subscriptions-transport-ws": "^0.11.0",
     "ts-jest": "^29.0.3",
     "with-click-outside": "^1.0.1",
     "yup": "^1.2.0",

src/App.tsx

@@ -1,8 +1,13 @@
-import React from 'react';
-import AppRoutes from './routes/index';
+import React from "react";
+import AppRoutes from "./routes/index";
+import { NotificationProvider } from "./utils/Notifications";
 
 function App() {
-  return <AppRoutes />;
+  return (
+    <NotificationProvider>
+      <AppRoutes />
+    </NotificationProvider>
+  );
 }
 
 export default App;

src/components/form/SignInForm.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import { loginSchema } from "../validation/login";
@@ -14,6 +14,7 @@ import { loginAction } from "../../redux/actions/login";
 import { Token } from '../../utils/utils';
 import { getUserbyFilter } from "../../redux/actions/users";
 import jwtDecode from "jwt-decode";
+import { useNotifications } from "../../utils/Notifications";
 
 const googleIcn: string = require("../../assets/assets/googleIcon.jpg").default;
 
@@ -44,6 +45,7 @@ const LoginForm = () => {
   const [isNormalLogin, setIsNormalLogin] = useState(false);
   const navigate = useNavigate();
   const location = useLocation();
+  const { setUserId } = useNotifications();
 
   const {
     register,
@@ -93,6 +95,7 @@ const LoginForm = () => {
         localStorage.setItem("access_token", token);
         if (userId) {
           localStorage.setItem("userId", userId);
+          setUserId(userId);
         }
         await redirectAfterLogin();
       } else {
@@ -253,4 +256,4 @@ const LoginForm = () => {
     </div>
   );
 };
-export default LoginForm;
+export default LoginForm;

src/components/sidebar/navHeader.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import Sidebar from "./sidebar";
 import { SunIcon } from "@heroicons/react/outline";
 import { MoonIcon } from "@heroicons/react/solid";
@@ -8,48 +8,89 @@ import { IoClose } from "react-icons/io5";
 import * as icon from "react-icons/hi2";
 import { AiOutlineBell } from "react-icons/ai";
 import { useTheme } from "../../hooks/darkmode";
+import jwtDecode from "jwt-decode";
+import { useNotifications } from "../../utils/Notifications";
+
 const logo: string = require("../../assets/logo.svg").default;
 const profile: string = require("../../assets/avatar.png").default;
 const LogoWhite: string = require("../../assets/logoWhite.svg").default;
-import jwtDecode from "jwt-decode";
 import {destination} from '../../utils/utils'
 import SearchBar from "../../components/SearchBar";
 
 const placeholderImage = profile;
 
 const onImageError = (e) => {
-  e.target.src = placeholderImage
-}
+  e.target.src = placeholderImage;
+};
+
+const ThemeToggle = ({ theme, handleToggleTheme }) => (
+  <div
+    className={`mx-4 dark:text-zinc-100 rounded-full px-2 text-xl cursor-pointer flex items-center w-9 h-9`}
+    onClick={handleToggleTheme}
+  >
+    {theme ? (
+      <MoonIcon className="w-8" />
+    ) : (
+      <SunIcon className="w-8 text-dark-text-fill" />
+    )}
+  </div>
+);
+
+const NotificationBell = ({ unreadCount, handleShowNotification }) => (
+  <span className="flex items-center">
+    <AiOutlineBell
+      className=" text-[25px] cursor-pointer  dark:text-dark-text-fill  "
+      onClick={handleShowNotification}
+    />
+    {unreadCount > 0 && (
+      <span className="top-0 bg-orange-600 text-white text-xs rounded-full px-1">
+        {unreadCount}
+      </span>
+    )}
+  </span>
+);
+
+const ProfileSection = ({ user, onImageError, handleShowProfileDropdown }) => (
+  <span onClick={handleShowProfileDropdown}>
+    <img
+      src={user}
+      alt="profile"
+      onError={onImageError}
+      className="w-[30px] cursor-pointer mx-2 rounded"
+    />
+  </span>
+);
 
 function NavBar() {
   const userDestination = destination();
   const access_token = localStorage.getItem("access_token");
   //@ts-ignore
   const user = access_token ? jwtDecode(access_token).picture : profile;
-  const [showNotification, setShowNotification] = useState(false);
-  const [showProfileDropdown, setShowprofileDropdown] = useState(false);
-  const { theme, setTheme } = useTheme();
-  function handleToggleTheme() {
-    setTheme(!theme);
-  }
+
   const [nav, setNav] = useState(false);
-  const handleClick = () => setNav(!nav);
-  const handleShowNotification = () => setShowNotification(!showNotification);
+  const [showProfileDropdown, setShowProfileDropdown] = useState(false);
+
+  const { theme, setTheme } = useTheme();
+  const handleToggleTheme = () => setTheme(!theme);
+
+  const navigate = useNavigate();
+  const handleShowNotification = () => navigate("/applicant/notifications");
   const handleShowProfileDropdown = () =>
-    setShowprofileDropdown(!showProfileDropdown);
+    setShowProfileDropdown(!showProfileDropdown);
+
+  const { unreadCount } = useNotifications();
+
+  const handleClick = () => setNav(!nav);
 
   return (
-
-    <div className="flex items-center dark:bg-zinc-800 ">
+    <div className="flex items-center dark:bg-zinc-800">
       {showProfileDropdown && (
         <ProfileDropdown
           handleShowProfileDropdown={handleShowProfileDropdown}
         />
       )}
-      <div
-        className={`flex items-center justify-between h-[70px] fixed z-50 top-0 border-b w-screen bg-white dark:bg-dark-bg`}
-      >
-        <div className="flex items-center ">
+      <div className="flex items-center justify-between h-[70px] fixed z-50 top-0 border-b w-screen bg-white dark:bg-dark-bg">
+        <div className="flex items-center">
           <span
             onClick={handleClick}
             onKeyDown={handleClick}
@@ -67,19 +108,15 @@ function NavBar() {
           <span>
             <Link to={userDestination} className="flex items-center">
               {theme ? (
-                <img
-                  className="cursor-pointer mx-2 fill-[blue]"
-                  src={logo}
-                  style={{ fill: "#333" }}
-                />
+                <img className="cursor-pointer mx-2 fill-[blue]" src={logo} />
               ) : (
                 <img
-                  className="cursor-pointer  mx-2"
+                  className="cursor-pointer mx-2"
                   src={LogoWhite}
                   alt="logoWhite"
                 />
               )}
-              <h1 className=" sm-text-1xl mr-12  font-bold font-lexend text-primary  md:hidden dark:text-green">
+              <h1 className="sm-text-1xl mr-12 font-bold font-lexend text-primary md:hidden dark:text-green">
                 PULSE
               </h1>
             </Link>
@@ -92,38 +129,18 @@ function NavBar() {
         {/* End of Search Bar */}
 
         <div className="flex items-center mr-4">
-          <span className="flex items-center">
-            {" "}
-            {/* <FaMoon className="text-[20px] cursor-pointer mx-1" /> */}
-            <AiOutlineBell
-              className=" text-[25px] cursor-pointer  dark:text-dark-text-fill  "
-              onClick={handleShowNotification}
-            />
-          </span>
-          <div
-            className={`mx-4 dark:text-zinc-100 rounded-full px-2 text-xl cursor-pointer flex items-center w-9 h-9`}
-            onClick={handleToggleTheme}
-          >
-            {theme ? (
-              <MoonIcon className="w-8" />
-            ) : (
-              <SunIcon className="w-8 text-dark-text-fill" />
-            )}
-          </div>
-          <span onClick={handleShowProfileDropdown}>
-            <img
-              src={user}
-              alt="profile"
-              onError={onImageError}
-              className="w-[30px] cursor-pointer mx-2 rounded "
-            />
-          </span>
+          <NotificationBell
+            unreadCount={unreadCount}
+            handleShowNotification={handleShowNotification}
+          />
+          <ThemeToggle theme={theme} handleToggleTheme={handleToggleTheme} />
+          <ProfileSection
+            user={user}
+            onImageError={onImageError}
+            handleShowProfileDropdown={handleShowProfileDropdown}
+          />
         </div>
       </div>
-      {/* <ul className={!nav ? "hidden" : "bg-white  cursor-pointer text-black  "}>
-        <Sidebar />
-      </ul>
-      <div className="block md:hidden">{<Sidebar />}</div> */}
     </div>
   );
 }

src/components/sidebar/sidebarItems.tsx

@@ -79,11 +79,11 @@ export const applicantSidebarItems = [
     ),
     title: "Schedule Interview",
   },
-  {
-    path: "notifications",
-    icon: <Icon icon="heroicons-solid:inbox-in"></Icon>,
-    title: "Notifications",
-  },
+  // {
+  //   path: "notifications",
+  //   icon: <Icon icon="heroicons-solid:inbox-in"></Icon>,
+  //   title: "Notifications",
+  // },
   {
     path: "calendar",
     icon: <Icon icon="ant-design:calendar-filled"></Icon>,