notification bug fixed
This commit is contained in:
victorAnumudu
@@ -29,13 +29,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
const [myWalletList, setMyWalletList] = useState([]);
|
||||
const api = useMemo(() => new usersService(), []);
|
||||
const dispatch = useDispatch();
|
||||
const [notificationData, setNotificationData] = useState({
|
||||
loader: false,
|
||||
data: {
|
||||
raw: [],
|
||||
header: [],
|
||||
},
|
||||
});
|
||||
|
||||
const { notifications } = useSelector((state) => state?.notifications); // NOTIFICATION STORE
|
||||
|
||||
const getMyWalletList = async () => {
|
||||
try {
|
||||
@@ -102,79 +97,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
} else return balanceDropdown;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!userDetails?.loggedIn) {
|
||||
const getNotifications = () => {
|
||||
// function to load user notification
|
||||
setNotificationData({
|
||||
loader: true,
|
||||
data: {
|
||||
header: null,
|
||||
raw: null
|
||||
},
|
||||
});
|
||||
api
|
||||
.getMyNotifications()
|
||||
.then((res) => {
|
||||
if (res.data.internal_return < 0) {
|
||||
setNotificationData({ loader: false });
|
||||
return;
|
||||
}
|
||||
|
||||
const _raw = res.data?.result_list;
|
||||
|
||||
//Sort the notifications in ascending order based on the API time
|
||||
const _sorted = _raw?.sort((a, b) => {
|
||||
const timeA = new Date(a?.date)?.getTime();
|
||||
const timeB = new Date(b?.date)?.getTime();
|
||||
return timeA - timeB;
|
||||
});
|
||||
|
||||
// header component
|
||||
const _header = _sorted?.slice(0, 5);
|
||||
// Notification Layout
|
||||
const _today = _sorted?.slice(0, 7);
|
||||
|
||||
const _days = () => {
|
||||
const sevenDaysAgo = new Date();
|
||||
sevenDaysAgo.setDate(new Date() - 7);
|
||||
return _sorted?.filter((notification) => {
|
||||
const notificationDate = new Date(
|
||||
formattedDate(notification?.date)
|
||||
);
|
||||
return notificationDate >= sevenDaysAgo;
|
||||
});
|
||||
};
|
||||
|
||||
setNotificationData({
|
||||
loader: false,
|
||||
data: {
|
||||
raw: _raw,
|
||||
header: _header,
|
||||
},
|
||||
});
|
||||
// Dispatch all notifications, sorted, and recent based on their filter type
|
||||
dispatch(
|
||||
updateNotifications({
|
||||
loading: false,
|
||||
data: {
|
||||
raw: _raw,
|
||||
today: _today,
|
||||
// days: _days(),
|
||||
sort: _sorted,
|
||||
},
|
||||
})
|
||||
);
|
||||
})
|
||||
.catch((error) => {
|
||||
setNotificationData({ loader: false });
|
||||
throw new Error(error);
|
||||
});
|
||||
};
|
||||
getNotifications();
|
||||
}
|
||||
}, [api, userDetails?.loggedIn]);
|
||||
|
||||
// User Profile
|
||||
let { firstname, lastname, email, profile_pic } = userDetails;
|
||||
let userEmail = email?.split("@")[0];
|
||||
@@ -331,9 +253,9 @@ 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">
|
||||
{notificationData.loader
|
||||
{notifications?.loading
|
||||
? "●"
|
||||
: notificationData.data.raw?.length}
|
||||
: notifications?.data?.length}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@@ -349,40 +271,46 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
|
||||
<div className="content px-7 pb-7">
|
||||
<ul>
|
||||
{notificationData.data.header?.map((item, idx) => (
|
||||
<li
|
||||
className={`content-item ${
|
||||
idx === notificationData.data?.header?.length - 1
|
||||
? "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}
|
||||
{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"
|
||||
/>
|
||||
</p>
|
||||
</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>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
|
||||
<div className="add-money-btn flex justify-center items-center">
|
||||
|
||||
Reference in New Issue
Block a user