WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

notification bug fixed

Browse Source
This commit is contained in:
victorAnumudu
2023-07-22 23:12:29 +01:00
parent f3ab8241a3
commit aa6e3f4b94
3 changed files with 132 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Notification/index.jsx
+35 -14
View File
@@ -12,32 +12,50 @@ const tabs = [
title: "Today's",
},
{
id: 1,
id: 2,
date: "days",
title: "7 days",
},
{
id: 1,
id: 3,
date: "all",
title: "All",
},
];
export default function Notification() {
const [selectTab, setValue] = useState(tabs ? tabs[0].title : "");
const [selectTab, setValue] = useState(tabs ? tabs[2].title : "");
const { notifications } = useSelector((state) => state?.notifications);
const [notificationData, setNotificationData] = useState(notifications?.data || [])
const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage);
const indexOfLastItem = Number(indexOfFirstItem) + 6;
const currentNotifications = notifications?.data?.raw?.slice(
indexOfFirstItem,
indexOfLastItem
);
console.log(currentNotifications);
const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
const currentNotifications = notificationData?.slice(indexOfFirstItem, indexOfLastItem);
console.log('TESTING', currentNotifications)
const filterHandler = (value) => {
setValue(value);
switch(value){
case `Today's`:
// setNotificationData(notifications?.data?.slice(0,5))
setNotificationData(notifications?.data.filter(item => (new Date().getTime() - new Date(item.date).getTime())/(1000*60*60*24) <= 1))
setCurrentPage(0)
break;
case `All`:
setNotificationData(notifications?.data)
setCurrentPage(0)
break;
case `7 days`:
// setNotificationData(notifications?.data?.slice(0,2))
setNotificationData(notifications?.data.filter(item => (new Date().getTime() - new Date(item.date).getTime())/(1000*60*60*24) <= 7))
setCurrentPage(0)
break;
default:
break;
}
};
const handlePagination = (e) => {
@@ -57,7 +75,7 @@ export default function Notification() {
</div>
<div className="slider-btns flex space-x-4">
{tabs.map(({ id, title, date }) => (
<div onClick={() => filterHandler(title)} className="relative">
<div key={id} onClick={() => filterHandler(title)} className="relative">
<span
className={`text-thin-light-gray text-18 cursor-pointer ${
selectTab === title ? "text-purple" : ""
@@ -67,7 +85,7 @@ export default function Notification() {
</span>
{date === "today" && (
<span className="absolute -right-3 -top-3 text-white text-xs w-5 h-5 rounded-full flex justify-center items-center bg-pink">
{notifications?.data?.raw?.length}
{notifications?.data?.length}
</span>
)}
</div>
@@ -104,9 +122,12 @@ export default function Notification() {
onClick={handlePagination}
prev={currentPage == 0 ? true : false}
next={
currentPage + 6 >= currentNotifications?.length ? true : false
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
notificationData.length
? true
: false
}
data={currentNotifications}
data={notificationData}
start={indexOfFirstItem}
stop={indexOfLastItem}
/>
src/components/Partials/Header.jsx
+42 -114
View File
@@ -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">
src/middleware/AuthRoute.jsx
+55 -80
View File
@@ -89,7 +89,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
return;
}
setLoadProfileDetails(res.data);
dispatch(updateUserDetails({ ...res.data, loggedIn: true }));
dispatch(updateUserDetails({ ...res.data }));
setIsLogin({ loading: false, status: true });
})
.catch((error) => {
@@ -100,89 +100,64 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
}
}, []);
// const filterNotifications = (notifications, filterType) => {
// const currentDate = new Date();
// if (filterType === "today") {
// return notifications?.filter((notification) => {
// const notificationDate = new Date(notification?.date);
// console.log(notificationDate)
// // return (
// // notificationDate.getDate() === currentDate.getDate() &&
// // notificationDate.getMonth() === currentDate.getMonth() &&
// // notificationDate.getFullYear() === currentDate.getFullYear()
// // );
// });
// } else if (filterType === "days") {
// const sevenDaysAgo = new Date(currentDate);
// sevenDaysAgo.setDate(currentDate.getDate() - 7);
// return notifications?.filter((notification) => {
// const notificationDate = new Date(notification?.date);
// return notificationDate >= sevenDaysAgo;
// });
// } else {
// return notifications;
// }
// };
useEffect(() => {
if (!loggedIn) {
const getNotifications = () => {
// function to load user notification
dispatch(updateNotifications({ loading: true }));
apiCall
.getMyNotifications()
.then((res) => {
if (res.data.internal_return < 0) {
dispatch(updateNotifications({ loading: false }));
return;
}
setLoadProfileDetails(res.data);
const getNotifications = () => {
// function to load user notification
dispatch(updateNotifications({ loading: true }));
apiCall
.getMyNotifications()
.then((res) => {
if (res.data.internal_return < 0) {
dispatch(updateNotifications({ loading: false, data: null }));
return;
}
setLoadProfileDetails(res.data);
const _raw = res.data?.result_list;
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;
});
};
// Dispatch all notifications, sorted, and recent based on their filter type
dispatch(
updateNotifications({
loading: false,
data: {
raw: _raw,
today: _today,
// days: _days(),
sort: _sorted,
header: _header,
},
})
);
})
.catch((error) => {
dispatch(updateNotifications({ loading: false }));
//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;
});
};
getNotifications();
}
// 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;
});
};
// Dispatch all notifications, sorted, and recent based on their filter type
dispatch(
updateNotifications({
loading: false,
// data: {
// raw: _raw,
// today: _today,
// // days: _days(),
// sort: _sorted,
// header: _header,
// },
data: _sorted
})
);
})
.catch((error) => {
dispatch(updateNotifications({ loading: false, data: null }));
});
};
getNotifications();
}, []);
useEffect(() => {