Skip to content

Commit

Permalink
Merge pull request rairprotocol#113 from rairprotocol/clear-all-notif…
Browse files Browse the repository at this point in the history 
…ications-pagination

Clear all notifications pagination
  • Loading branch information
@sarora180673
sarora180673 authored Jul 11, 2024
2 parents 0f9a037 + 2abe648 commit 1173fbf
Show file tree
Hide file tree
Showing 12 changed files with 197 additions and 59 deletions.
7 changes: 3 additions & 4 deletions rair-front/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,10 +198,9 @@ function App() {

const getNotificationsCount = useCallback( async () => {
if (currentUserAddress) {
const result = await rFetch(`/api/notifications?read=false`);
if (result.success && result.notifications.length > 0) {
const readNotifications = result.notifications.filter(el => el.read === false);
setNotificationCount(readNotifications.length);
const result = await rFetch(`/api/notifications?onlyUnread=true`);
if (result.success && result.totalCount > 0) {
setNotificationCount(result.totalCount);
}
}
}, [currentUserAddress]);
Expand Down
17 changes: 9 additions & 8 deletions rair-front/src/components/Header/MainHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,9 +125,11 @@ const MainHeader: React.FC<IMainHeader> = ({
setTextSearch('');
};

const getNotifications = useCallback(async () => {
const getNotifications = useCallback(async (pageNum?: number) => {
if(currentUserAddress) {
const result = await rFetch(`/api/notifications`);
// const result = await rFetch(`/api/notifications${itemsPerPage && pageNum ? `?itemsPerPage=${itemsPerPage}&pageNum=${pageNum}` : ''}`);
const result = await rFetch(`/api/notifications${`?pageNum=${Number(pageNum)}`}`);

if (result.success) {
setRealDataNotification(result.notifications);
}
Expand All @@ -136,10 +138,9 @@ const MainHeader: React.FC<IMainHeader> = ({

const getNotificationsCount = useCallback( async () => {
if(currentUserAddress) {
const result = await rFetch(`/api/notifications?read=false`);
if (result.success && result.notifications.length > 0) {
const readNotifications = result.notifications.filter(el => el.read === false);
setNotificationCount(readNotifications.length);
const result = await rFetch(`/api/notifications?onlyUnread=true`);
if (result.success && result.totalCount > 0) {
setNotificationCount(result.totalCount);
}
}
}, [currentUserAddress])
Expand All @@ -150,7 +151,7 @@ const MainHeader: React.FC<IMainHeader> = ({


useEffect(() => {
getNotifications();
getNotifications(0);
}, [currentUserAddress])

const Highlight = (props) => {
Expand Down Expand Up @@ -445,7 +446,7 @@ const MainHeader: React.FC<IMainHeader> = ({
isSplashPage={isSplashPage}
/>
<div className="social-media">
{currentUserAddress && <PopUpNotification notificationCount={notificationCount} getNotificationsCount={getNotificationsCount} getNotifications={getNotifications} realDataNotification={realDataNotification} />}
{currentUserAddress && <PopUpNotification setRealDataNotification={setRealDataNotification} notificationCount={notificationCount} getNotificationsCount={getNotificationsCount} getNotifications={getNotifications} realDataNotification={realDataNotification} />}

<AdminPanel
creatorViewsDisabled={creatorViewsDisabled}
Expand Down
17 changes: 15 additions & 2 deletions rair-front/src/components/MockUpPage/PaginationBox/PaginationBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,16 @@ const PaginationBox: React.FC<IPaginationBox> = ({
changePage,
currentPage,
totalPageForPagination,
whatPage
whatPage,
itemsPerPageNotifications
}) => {
const itemsPerPage = useSelector<RootState, number>(
(store) => store.nftDataStore.itemsPerPage
);

console.info(totalPageForPagination, 'totalPageForPagination');
console.info(itemsPerPageNotifications, 'itemsPerPageNotifications')

const { primaryColor, primaryButtonColor } = useSelector<
RootState,
ColorStoreType
Expand All @@ -26,6 +30,8 @@ const PaginationBox: React.FC<IPaginationBox> = ({
const [totalPage, setTotalPages] = useState<number>();
const [totalPageVideo, setTotalPagesVideo] = useState<number>();

console.info(totalPage, 'totalPage')

// const hotdropsVar = import.meta.env.VITE_TESTNET;

const pagesArray: number[] = [];
Expand All @@ -37,6 +43,10 @@ const PaginationBox: React.FC<IPaginationBox> = ({
for (let i = 0; i < totalPageVideo; i++) {
pagesArray.push(i + 1);
}
} else if(whatPage && whatPage === 'notifications' && totalPage) {
for (let i = 0; i < totalPage; i++) {
pagesArray.push(i + 1);
}
}

const getPagesCount = (totalCount: number, itemsPerPage: number) => {
Expand All @@ -56,7 +66,10 @@ const PaginationBox: React.FC<IPaginationBox> = ({
} else if (totalPageForPagination && whatPage === 'video') {
setTotalPagesVideo(getPagesCount(totalPageForPagination, itemsPerPage));
}
}, [setTotalPages, totalPageForPagination, itemsPerPage, whatPage]);
else if(totalPageForPagination && whatPage === 'notifications' && itemsPerPageNotifications){
setTotalPages(getPagesCount(totalPageForPagination, itemsPerPageNotifications));
}
}, [setTotalPages, totalPageForPagination, itemsPerPage, whatPage, itemsPerPageNotifications]);

if (totalPageForPagination === 0) {
return null;
Expand Down
3 changes: 2 additions & 1 deletion rair-front/src/components/MockUpPage/mockupPage.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,14 @@ export interface ISvgLock {
color: string;
}

export type TWhatPage = 'nft' | 'video';
export type TWhatPage = 'nft' | 'video' | 'notifications';

export interface IPaginationBox {
changePage: (currentPage: number) => void;
currentPage: number;
totalPageForPagination: number | undefined;
whatPage: TWhatPage;
itemsPerPageNotifications?: number;
}

export interface ILikeButton {
Expand Down
4 changes: 2 additions & 2 deletions rair-front/src/components/Navigation/Menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import {
UserIconMobile
} from '../../styled-components/SocialLinkIcons/SocialLinkIcons';
import chainData from '../../utils/blockchainData';
import LoadingComponent from '../common/LoadingComponent';
import { SvgUserIcon } from '../UserProfileSettings/SettingsIcons/SettingsIcons';

import MobileChoiseNav from './MenuComponents/MobileChoiseNav';
Expand Down Expand Up @@ -318,7 +317,8 @@ useEffect(() => {
display: "flex",
justifyContent: "center",
alignItems: "center",
fontWeight: "bold"
fontWeight: "bold",
color: '#fff'
}}>{notificationCount > 9 ? "9+" : notificationCount}</div>
) : ''}
</SocialBox>
Expand Down
10 changes: 5 additions & 5 deletions rair-front/src/components/Navigation/MenuComponents/MobileChoiseNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,9 @@ const MobileChoiseNav: React.FC<IMobileChoiseNav> = ({

const getNotificationsCount = useCallback( async () => {
if (currentUserAddress) {
const result = await rFetch(`/api/notifications?read=false`);
if (result.success && result.notifications.length > 0) {
const readNotifications = result.notifications.filter(el => el.read === false);
setNotificationCount(readNotifications.length);
const result = await rFetch(`/api/notifications?onlyUnread=true`);
if (result.success && result.totalCount > 0) {
setNotificationCount(result.totalCount);
}
}
}, [currentUserAddress, messageAlert])
Expand Down Expand Up @@ -97,7 +96,8 @@ const MobileChoiseNav: React.FC<IMobileChoiseNav> = ({
display: "flex",
justifyContent: "center",
alignItems: "center",
fontWeight: "bold"
fontWeight: "bold",
color: '#fff'
}} className="red-circle-notifications">{notificationCount > 9 ? "9+" : notificationCount}</div>
)}
</SocialBox>
Expand Down
41 changes: 30 additions & 11 deletions rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,13 @@ import { TooltipBox } from '../../common/Tooltip/TooltipBox';
import { NavFooter, NavFooterBox } from '../../Footer/FooterItems/FooterItems';
import NotificationBox from '../../UserProfileSettings/PopUpNotification/NotificationBox/NotificationBox';
import { BackBtnMobileNav } from '../NavigationItems/NavigationItems';
import PaginationBox from '../../MockUpPage/PaginationBox/PaginationBox';
import { ColorStoreType } from '../../../ducks/colors/colorStore.types';

interface IMobileNavigationList {
messageAlert: string | null;
setMessageAlert: (arg: string | null) => void;
primaryColor: string;
primaryColor?: string;
currentUserAddress: string | undefined;
toggleMenu: (otherPage?: string) => void;
setTabIndexItems: (arg: number) => void;
Expand All @@ -32,7 +34,6 @@ interface IMobileNavigationList {
const MobileNavigationList: React.FC<IMobileNavigationList> = ({
messageAlert,
setMessageAlert,
primaryColor,
toggleMenu,
currentUserAddress,
click
Expand All @@ -47,6 +48,11 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
(store) => store.userStore
);

const { primaryColor } = useSelector<
RootState,
ColorStoreType
>((store) => store.colorStore);

const { web3TxHandler } = useWeb3Tx();

const { erc777Instance, currentChain } = useSelector<
Expand Down Expand Up @@ -85,13 +91,14 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
const [notificationArray, setNotificationArray] = useState<any>();
const [notificationCount, setNotificationCount] = useState<number>(0);
const [flagLoading, setFlagLoading] = useState(false);
const [currentPageNotification, setCurrentPageNotification] = useState<number>(1);

const { logoutUser } = useConnectUser();

const getNotifications = useCallback(async () => {
const getNotifications = useCallback(async (pageNum: number) => {
if (messageAlert && currentUserAddress) {
setFlagLoading(true);
const result = await rFetch(`/api/notifications`);
const result = await rFetch(`/api/notifications${`?pageNum=${Number(pageNum)}`}`);
if (result.success) {
setNotificationArray(result.notifications);
setFlagLoading(false);
Expand All @@ -100,23 +107,28 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
}, [messageAlert, currentUserAddress]);

const getNotificationsCount = useCallback( async () => {
if (messageAlert && currentUserAddress) {
if (currentUserAddress) {
setFlagLoading(true);
const result = await rFetch(`/api/notifications?read=false`);
if (result.success && result.notifications.length > 0) {
const readNotifications = result.notifications.filter(el => el.read === false);
setNotificationCount(readNotifications.length);
const result = await rFetch(`/api/notifications`);
if (result.success && result.totalCount > 0) {
setNotificationCount(result.totalCount);
setFlagLoading(true);
}
}
}, [currentUserAddress])

const changePageForVideo = (currentPage: number) => {
setCurrentPageNotification(currentPage);
const currentPageNumber = currentPage === 0 ? currentPage : currentPage - 1;
getNotifications(Number(currentPageNumber));
};

useEffect(() => {
getNotificationsCount();
}, [getNotificationsCount])

useEffect(() => {
getNotifications();
getNotifications(0);
}, [getNotifications]);

useEffect(() => {
Expand Down Expand Up @@ -147,7 +159,7 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
<div
style={{
width: '90vw',
height: '80vh',
height: '65vh',
overflowY: 'auto',
marginTop: '20px',
padding: '20px 0'
Expand Down Expand Up @@ -177,6 +189,13 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
</div>
)}
</div>
{notificationCount && <PaginationBox
totalPageForPagination={notificationCount}
changePage={changePageForVideo}
currentPage={currentPageNotification}
itemsPerPageNotifications={10}
whatPage={"notifications"}
/>}
</NavFooterBox>
) : messageAlert === 'profile' ? (
<NavFooterBox
Expand Down
9 changes: 9 additions & 0 deletions rair-front/src/components/UserProfileSettings/NotificationPage/NotificationPage.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,15 @@
transition: all 0.3s ease;
}

.wrapper-notification.rhyno .box-notification {
background: #fff;
color: #000;
}

.wrapper-notification.rhyno .box-notification:hover {
background-color: #a9a9a9;
}

.wrapper-notification .box-notification:hover {
background-color: #4e4e4e;
}
Expand Down
6 changes: 2 additions & 4 deletions rair-front/src/components/UserProfileSettings/NotificationPage/NotificationPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,12 @@ import { useSelector } from 'react-redux';
import { RootState } from '../../../ducks';
import { ColorStoreType } from '../../../ducks/colors/colorStore.types';

import IconRemove from './images/icon-remove.png';
// import IconRemove from './images/icon-remove.png';

// import { useSelector } from 'react-redux';
import './NotificationPage.css';

const NotificationPage = ({ el, readNotification, removeItem }) => {
const currentName =
import.meta.env.VITE_TESTNET === 'true' ? 'HotDrops' : 'Rair.tech';
const { headerLogoMobile, primaryColor } = useSelector<RootState, ColorStoreType>(
(store) => store.colorStore
);
Expand All @@ -22,7 +20,7 @@ const NotificationPage = ({ el, readNotification, removeItem }) => {
}, [])

return (
<div className="wrapper-notification">
<div className={`wrapper-notification ${primaryColor === '#dedede' ? 'rhyno' : ''}`}>
<div className="notification-from-rair">
<div className="notification-new">
<div
Expand Down
1 change: 1 addition & 0 deletions .../src/components/UserProfileSettings/PopUpNotification/NotificationBox/NotificationBox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

@media screen and (max-width: 1024px) {
Expand Down
Loading

0 comments on commit 1173fbf

Please sign in to comment.