Skip to content

Commit

Permalink
applicant notifications (#196)
Browse files Browse the repository at this point in the history 
* ft working on applicant notifications

* ft-applicant-notifications

* fixing codeclimate

* fixing codeclimate

* fixing codeclimate

* fixing codeclimate

* fixing codeclimate

* fixing codeclimate

* fixing codeclimate

* fixing codeclimate

* fix codeclimate

* fix missing close tag route.tsx

* ft-applicant-notifications

* fix: route.tsx

* fix notifications.tsx

* ft-applicant-notifications

---------

Co-authored-by: chris <iradukundachristian202@gmail.com>
  • Loading branch information
@iChris-tian
iChris-tian and chris authored Oct 23, 2024
1 parent b5d89c1 commit bb45d0c
Show file tree
Hide file tree
Showing 15 changed files with 571 additions and 79 deletions.
6 changes: 5 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down
11 changes: 8 additions & 3 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
7 changes: 5 additions & 2 deletions src/components/form/SignInForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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;

Expand Down Expand Up @@ -44,6 +45,7 @@ const LoginForm = () => {
const [isNormalLogin, setIsNormalLogin] = useState(false);
const navigate = useNavigate();
const location = useLocation();
const { setUserId } = useNotifications();

const {
register,
Expand Down Expand Up @@ -93,6 +95,7 @@ const LoginForm = () => {
localStorage.setItem("access_token", token);
if (userId) {
localStorage.setItem("userId", userId);
setUserId(userId);
}
await redirectAfterLogin();
} else {
Expand Down Expand Up @@ -253,4 +256,4 @@ const LoginForm = () => {
</div>
);
};
export default LoginForm;
export default LoginForm;
129 changes: 73 additions & 56 deletions src/components/sidebar/navHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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}
Expand All @@ -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>
Expand All @@ -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>
);
}
Expand Down
10 changes: 5 additions & 5 deletions src/components/sidebar/sidebarItems.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>,
Expand Down
Loading

0 comments on commit bb45d0c

Please sign in to comment.