diff --git a/src/components/Notification/index.jsx b/src/components/Notification/index.jsx index 44d1bc1..919ce48 100644 --- a/src/components/Notification/index.jsx +++ b/src/components/Notification/index.jsx @@ -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() {
{tabs.map(({ id, title, date }) => ( -
filterHandler(title)} className="relative"> +
filterHandler(title)} className="relative"> {date === "today" && ( - {notifications?.data?.raw?.length} + {notifications?.data?.length} )}
@@ -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} /> diff --git a/src/components/Partials/Header.jsx b/src/components/Partials/Header.jsx index abe2cb1..59f749e 100644 --- a/src/components/Partials/Header.jsx +++ b/src/components/Partials/Header.jsx @@ -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 }) { > - {notificationData.loader + {notifications?.loading ? "●" - : notificationData.data.raw?.length} + : notifications?.data?.length}
- - ))} + + ) + } + }) + }
diff --git a/src/middleware/AuthRoute.jsx b/src/middleware/AuthRoute.jsx index 97b52ef..6d6afa7 100644 --- a/src/middleware/AuthRoute.jsx +++ b/src/middleware/AuthRoute.jsx @@ -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(() => {