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}
/>