diff --git a/jam-ui/src/components/navbar/JKNotificationDropdown.js b/jam-ui/src/components/navbar/JKNotificationDropdown.js index fd7ed7a43..d6cad261a 100644 --- a/jam-ui/src/components/navbar/JKNotificationDropdown.js +++ b/jam-ui/src/components/navbar/JKNotificationDropdown.js @@ -9,24 +9,23 @@ import { isIterableArray } from '../../helpers/utils'; import FalconCardHeader from '../common/FalconCardHeader'; import Notification from '../notification/JKNotification'; import { Scrollbar } from 'react-scrollbars-custom'; - -import { fetchNotifications } from '../../store/features/notificationSlice'; -import { useDispatch, useSelector } from 'react-redux'; import { useAuth } from '../../context/UserAuth'; - import { readNotifications } from '../../helpers/rest'; +import useNotifications from '../../hooks/useNotifications'; const JKNotificationDropdown = () => { const { currentUser, isAuthenticated } = useAuth(); - const dispatch = useDispatch(); - const notifications = useSelector(state => state.notification.notifications); - const next = useSelector(state => state.notification.next); - const status = useSelector(state => state.notification.status); - const unread_total = useSelector(state => state.notification.unread_total); + const { + notifications, + offset, + setOffset, + next, + unread_total, + loadNotifications, + } = useNotifications(currentUser); const LIMIT = 20; const MAX_COUNT_ON_BADGE = 99; - const [offset, setOffset] = useState(0); const [isOpen, setIsOpen] = useState(false); const [isAllRead, setIsAllRead] = useState(false); @@ -39,19 +38,6 @@ const JKNotificationDropdown = () => { setIsOpen(!isOpen); }; - const loadNotifications = async () => { - try { - const options = { - userId: currentUser.id, - offset: offset, - limit: LIMIT - }; - await dispatch(fetchNotifications(options)).unwrap(); - } catch (error) { - console.log(error); - } - }; - useEffect(() => { if (isOpen) { readNotifications(currentUser.id) @@ -65,11 +51,12 @@ const JKNotificationDropdown = () => { }, [isOpen]); useEffect(() => { - loadNotifications(); - }, []); + if(isAuthenticated) + loadNotifications(); + }, [currentUser]); useEffect(() => { - if (offset > 0 && next !== null) { + if (isAuthenticated && offset > 0 && next !== null) { loadNotifications(); } }, [offset]); @@ -107,9 +94,16 @@ const JKNotificationDropdown = () => { })} > {isIterableArray(notifications) && notifications.length > 0 && !isAllRead && unread_total > 0 && ( -
{unread_total < MAX_COUNT_ON_BADGE ? unread_total : `${MAX_COUNT_ON_BADGE}+`}
+
+ {unread_total < MAX_COUNT_ON_BADGE ? unread_total : `${MAX_COUNT_ON_BADGE}+`} +
)} - + @@ -129,7 +123,7 @@ const JKNotificationDropdown = () => { mobileNative={true} trackClickBehavior="step" > - {isIterableArray(notifications) && + {isIterableArray(notifications) && notifications.map(notification => ( { - if (!user) - dispatch(fetchPerson({ userId: source_user_id })) - }, []); - return ( <>
diff --git a/jam-ui/src/components/notification/JKGenericNotification.js b/jam-ui/src/components/notification/JKGenericNotification.js index 193f765a5..91fbc9a93 100644 --- a/jam-ui/src/components/notification/JKGenericNotification.js +++ b/jam-ui/src/components/notification/JKGenericNotification.js @@ -1,24 +1,16 @@ -import React, { useEffect } from 'react' +import React from 'react' import ProfileAvatar from '../profile/JKProfileAvatar' import TimeAgo from '../common/JKTimeAgo'; import useUserProfile from '../../hooks/useUserProfile'; -import { useDispatch, useSelector } from 'react-redux'; -import { fetchPerson } from '../../store/features/peopleSlice'; +import { useSelector } from 'react-redux'; const JKGenericNotification = (notification) => { const {formatted_msg, created_at, source_user_id} = notification; - const dispatch = useDispatch(); - const user = useSelector(state => state.people.people.find(person => person.id === source_user_id)); const { photoUrl } = useUserProfile(user); // user is the person who sent the message - useEffect(() => { - dispatch(fetchPerson({ userId: source_user_id })) - }, []); - - return ( <>
diff --git a/jam-ui/src/components/notification/JKNotification.js b/jam-ui/src/components/notification/JKNotification.js index 730004149..a41e5c87b 100644 --- a/jam-ui/src/components/notification/JKNotification.js +++ b/jam-ui/src/components/notification/JKNotification.js @@ -5,7 +5,6 @@ import {useAuth} from '../../context/UserAuth'; import { useDispatch } from 'react-redux'; import { removeNotification } from '../../store/features/notificationSlice'; - import JKGenericNotification from './JKGenericNotification'; import JKFriendRequestNotification from './JKFriendRequestNotification'; import TextMessageNotification from './JKTextMessageNotification'; diff --git a/jam-ui/src/components/notification/JKTextMessageNotification.js b/jam-ui/src/components/notification/JKTextMessageNotification.js index a0d720536..1ffb384f0 100644 --- a/jam-ui/src/components/notification/JKTextMessageNotification.js +++ b/jam-ui/src/components/notification/JKTextMessageNotification.js @@ -1,7 +1,6 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { useAuth } from '../../context/UserAuth'; import { useDispatch, useSelector } from 'react-redux'; -import { fetchPerson, add as addPerson } from '../../store/features/peopleSlice'; import JKMessageButton from '../profile/JKMessageButton'; import ProfileAvatar from '../profile/JKProfileAvatar'; import TimeAgo from '../common/JKTimeAgo'; @@ -10,19 +9,10 @@ import useUserProfile from '../../hooks/useUserProfile'; function JKTextMessageNotification(props) { const { source_user, source_user_id, message, created_at } = props.notification; - const { currentUser } = useAuth(); - const dispatch = useDispatch(); - const user = useSelector(state => state.people.people.find(person => person.id === source_user_id)); - const { photoUrl } = useUserProfile(user); // user is the person who sent the message - useEffect(() => { - if(!user) - dispatch(fetchPerson({ userId: source_user_id })) - }, []); - return ( <>
diff --git a/jam-ui/src/components/page/JKNotifications.js b/jam-ui/src/components/page/JKNotifications.js index 97926a436..62a4419ba 100644 --- a/jam-ui/src/components/page/JKNotifications.js +++ b/jam-ui/src/components/page/JKNotifications.js @@ -5,35 +5,45 @@ import FalconCardHeader from '../common/FalconCardHeader'; import Loader from '../common/Loader'; import { isIterableArray } from '../../helpers/utils'; -import { fetchNotifications } from '../../store/features/notificationSlice'; -import { useDispatch, useSelector } from 'react-redux'; import { useAuth } from '../../context/UserAuth'; +import useNotifications from '../../hooks/useNotifications'; const JKNotifications = () => { - const { currentUser } = useAuth(); - const dispatch = useDispatch(); - const notifications = useSelector(state => state.notification.notifications); - const loadingState = useSelector(state => state.notification.state); - - const LIMIT = 20; - const [page, setPage] = useState(0); - - const loadNotifications = async () => { - try { - const options = { - userId: currentUser.id, - offset: page * LIMIT, - limit: LIMIT - }; - await dispatch(fetchNotifications(options)).unwrap(); - //setPage(prev => prev + 1); - } catch (error) { - console.log(error); - } - }; + const { currentUser, isAuthenticated } = useAuth(); + const { + notifications, + offset, + setOffset, + next, + unread_total, + loadNotifications, + notificationStatus: loadingState + } = useNotifications(currentUser); useEffect(() => { - loadNotifications(); + if(isAuthenticated) + loadNotifications(); + }, [currentUser]); + + useEffect(() => { + if (isAuthenticated && offset > 0 && next !== null) { + loadNotifications(); + } + }, [offset]); + + useEffect(() => { + const onscroll = () => { + console.log("scrolling", window.scrollY, window.innerHeight, document.body.scrollHeight); + const scrolledTo = window.scrollY + window.innerHeight; + const isReachBottom = document.body.scrollHeight === scrolledTo; + if (isReachBottom) { + setOffset(offset + 1); + } + }; + window.addEventListener("scroll", onscroll); + return () => { + window.removeEventListener("scroll", onscroll); + }; }, []); return ( diff --git a/jam-ui/src/components/profile/JKMessageButton.js b/jam-ui/src/components/profile/JKMessageButton.js index 6f7ce333d..2df20d7a9 100644 --- a/jam-ui/src/components/profile/JKMessageButton.js +++ b/jam-ui/src/components/profile/JKMessageButton.js @@ -35,7 +35,7 @@ const JKMessageButton = props => { return ( <> - +