Added profile img
This commit is contained in:
@@ -4,7 +4,7 @@ import bank1 from "../../assets/images/bank-1.png";
|
||||
import bank2 from "../../assets/images/bank-2.png";
|
||||
import bank3 from "../../assets/images/bank-3.png";
|
||||
import bank4 from "../../assets/images/bank-4.png";
|
||||
import profileImg from "../../assets/images/profile-pic.jpg";
|
||||
import profileImg from "../../assets/images/profile.jpg";
|
||||
import useToggle from "../../hooks/useToggle";
|
||||
import usersService from "../../services/UsersService";
|
||||
import DarkModeContext from "../Contexts/DarkModeContext";
|
||||
@@ -15,10 +15,10 @@ import WalletHeader from "../MyWallet/WalletHeader";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import Flag from "../../assets/images/united-states.svg";
|
||||
import siteLogo from "../../assets/images/wrenchboard-logo-text.png";
|
||||
import formattedDate from "../../lib/fomattedDate";
|
||||
import { updateNotifications } from "../../store/notifications";
|
||||
import TimeDifference from "../Helpers/TimeDifference";
|
||||
|
||||
const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
|
||||
|
||||
export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
const [balanceDropdown, setbalanceValue] = useToggle(false);
|
||||
const [notificationDropdown, setNotificationValue] = useToggle(false);
|
||||
@@ -30,7 +30,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
const [myWalletList, setMyWalletList] = useState([]);
|
||||
const api = useMemo(() => new usersService(), []);
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate()
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { notifications } = useSelector((state) => state?.notifications); // NOTIFICATION STORE
|
||||
|
||||
@@ -100,10 +100,10 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
};
|
||||
|
||||
// User Profile
|
||||
let { firstname, lastname, email, profile_pic } = userDetails;
|
||||
let { firstname, lastname, email, profile_pic_url } = userDetails;
|
||||
let userEmail = email?.split("@")[0];
|
||||
const userProfileImage = profile_pic_url || DEFAULT_PROFILE_IMAGE;
|
||||
|
||||
// console.log("Notify: ", notifications?.data?.raw);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -255,9 +255,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
>
|
||||
<Icons name="notification" />
|
||||
<span className="absolute right-2 top-2 z-10 text-xs lg:w-5 lg:h-5 w-4 h-4 flex justify-center items-center rounded-full primary-gradient text-white cursor-default">
|
||||
{notifications?.loading
|
||||
? "●"
|
||||
: notifications?.data?.length}
|
||||
{notifications?.loading ? "●" : notifications?.data?.length}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@@ -273,46 +271,45 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
|
||||
<div className="content px-7 pb-7">
|
||||
<ul>
|
||||
{notifications?.data?.length && notifications?.data?.map((item, idx) =>
|
||||
{
|
||||
if(idx < 5){
|
||||
return (
|
||||
<li
|
||||
className={`content-item ${
|
||||
idx == 4
|
||||
? "py-5 "
|
||||
: "py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple"
|
||||
}`}
|
||||
key={idx}
|
||||
>
|
||||
<div className="notifications flex space-x-4 items-center">
|
||||
<div className="icon max-w-[52px] max-h-[52px] w-full h-full rounded-full object-cover">
|
||||
<img
|
||||
src={require(`../../assets/images/notifications/${item?.icon}`)}
|
||||
alt="icon"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-2">
|
||||
{item?.title}
|
||||
{/* <span className="ml-1 font-bold">
|
||||
{notifications?.data?.length &&
|
||||
notifications?.data?.map((item, idx) => {
|
||||
if (idx < 5) {
|
||||
return (
|
||||
<li
|
||||
className={`content-item ${
|
||||
idx == 4
|
||||
? "py-5 "
|
||||
: "py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple"
|
||||
}`}
|
||||
key={idx}
|
||||
>
|
||||
<div className="notifications flex space-x-4 items-center">
|
||||
<div className="icon max-w-[52px] max-h-[52px] w-full h-full rounded-full object-cover">
|
||||
<img
|
||||
src={require(`../../assets/images/notifications/${item?.icon}`)}
|
||||
alt="icon"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-2">
|
||||
{item?.title}
|
||||
{/* <span className="ml-1 font-bold">
|
||||
successfully done
|
||||
</span> */}
|
||||
</p>
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
<TimeDifference
|
||||
time={item?.date}
|
||||
key={item?.uid}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
</p>
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
<TimeDifference
|
||||
time={item?.date}
|
||||
key={item?.uid}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</ul>
|
||||
|
||||
<div className="add-money-btn flex justify-center items-center">
|
||||
@@ -351,9 +348,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
{/* profile-image */}
|
||||
<div className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden">
|
||||
<img
|
||||
src={profile_pic != "" ? profile_pic : profileImg}
|
||||
src={userProfileImage}
|
||||
alt="profile"
|
||||
className="w-full h-full"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="lg:block hidden">
|
||||
@@ -375,7 +372,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
<img
|
||||
src={profileImg}
|
||||
alt="profile"
|
||||
className="w-full h-full"
|
||||
className="w-full h-full object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user