diff --git a/src/queries/hooks/channels/index.ts b/src/queries/hooks/channels/index.ts index f491416425..98dbea5b7e 100644 --- a/src/queries/hooks/channels/index.ts +++ b/src/queries/hooks/channels/index.ts @@ -11,3 +11,4 @@ export * from './useAddSubgraph'; export * from './useReactivateChannel'; export * from './useEditChannel'; export * from './useGetAliasInfo'; +export * from './useGetChannelNotifications'; diff --git a/src/queries/hooks/channels/useGetChannelNotifications.ts b/src/queries/hooks/channels/useGetChannelNotifications.ts new file mode 100644 index 0000000000..9df8ded18a --- /dev/null +++ b/src/queries/hooks/channels/useGetChannelNotifications.ts @@ -0,0 +1,24 @@ +import { useQuery } from '@tanstack/react-query'; +import { useSelector } from 'react-redux'; + +//Constants +import { channelNotifications } from '../../queryKeys'; + +//Services +import { getChannelNotifications } from '../../services'; + +//Types +import { UserStoreType } from 'types'; +import { GuestWalletAddress } from 'common'; + +export const useGetChannelNotifications = (address: string, page: number, limit: number) => { + const { userPushSDKInstance } = useSelector((state: UserStoreType) => { + return state.user; + }); + const query = useQuery({ + queryKey: [channelNotifications, address], + queryFn: () => getChannelNotifications({ userPushSDKInstance, address, page, limit }), + enabled: address !== GuestWalletAddress, // This is required to avoid extra func calls + }); + return query; +}; diff --git a/src/queries/models/channels/getChannelNotificationsModelCreator.ts b/src/queries/models/channels/getChannelNotificationsModelCreator.ts new file mode 100644 index 0000000000..ff1ecdf634 --- /dev/null +++ b/src/queries/models/channels/getChannelNotificationsModelCreator.ts @@ -0,0 +1,5 @@ +import { ChannelNotification, ChannelsNotificationsRepsonse } from 'queries/types'; + +//any remodelling needed in the response can be done here +export const getChannelNotificationsModelCreator = (response: ChannelsNotificationsRepsonse): ChannelNotification[] => + response?.notifications; diff --git a/src/queries/models/channels/index.ts b/src/queries/models/channels/index.ts index d49d7d347c..29dd04652f 100644 --- a/src/queries/models/channels/index.ts +++ b/src/queries/models/channels/index.ts @@ -7,3 +7,4 @@ export * from './removeChannelDelegateModelCreator'; export * from './sendNotificationModelCreator'; export * from './verifyAliasChainModalCreator'; export * from './getAliasInfoModelCreator'; +export * from './getChannelNotificationsModelCreator'; diff --git a/src/queries/queryKeys.ts b/src/queries/queryKeys.ts index cb329389dc..2e286d41b6 100644 --- a/src/queries/queryKeys.ts +++ b/src/queries/queryKeys.ts @@ -8,6 +8,7 @@ export const approvingPUSHToken = 'approvingPUSHToken'; export const approveVaultUser = 'approveVaultUser'; export const channelDelegates = 'channelDelegates'; export const channelDetails = 'channelDetails'; +export const channelNotifications = 'channelNotifications'; export const claimRewards = 'claimRewards'; export const createUserRewardsDetails = 'createUserRewardsDetails'; export const creatingNewChannel = 'creatingNewChannel'; diff --git a/src/queries/services/channels/getChannelNotifications.ts b/src/queries/services/channels/getChannelNotifications.ts new file mode 100644 index 0000000000..ab00038431 --- /dev/null +++ b/src/queries/services/channels/getChannelNotifications.ts @@ -0,0 +1,18 @@ +import { PushAPI } from '@pushprotocol/restapi'; + +import { getChannelNotificationsModelCreator } from '../../models'; + +type GetChannelNotificationsParams = { + userPushSDKInstance: PushAPI; + address: string; + limit: number; + page: number; +}; + +export const getChannelNotifications = ({ userPushSDKInstance, address, limit, page }: GetChannelNotificationsParams) => + userPushSDKInstance.channel + .notifications(address, { + page: page, + limit: limit, + }) + .then(getChannelNotificationsModelCreator); diff --git a/src/queries/services/channels/index.ts b/src/queries/services/channels/index.ts index 28aa966bab..a1ab27df4d 100644 --- a/src/queries/services/channels/index.ts +++ b/src/queries/services/channels/index.ts @@ -11,3 +11,4 @@ export * from './sendNotification'; export * from './verifyAliasChain'; export * from './reactivateChannel'; export * from './getAliasInfo'; +export * from './getChannelNotifications'; diff --git a/src/queries/types/channels.ts b/src/queries/types/channels.ts index d679b3aca3..e031d0897b 100644 --- a/src/queries/types/channels.ts +++ b/src/queries/types/channels.ts @@ -141,3 +141,44 @@ export type AliasInfoResponse = { channel: string; is_alias_verified: number; }; + +export type ChannelNotification = { + timestamp: string; + from: string; + to: string[]; + notifID: number; + channel: { + name: string; + icon: string; + url: string; + }; + meta: { + type: string; + }; + message: { + notification: { + title: string; + body: string; + }; + payload: { + title: string; + body: string; + cta: string; + embed: string; + meta: { + domain: string; + }; + }; + }; + config: { + expiry: string | null; + silent: boolean; + hidden: boolean; + }; + source: string; + raw: { + verificationProof: string; + }; +}; + +export type ChannelsNotificationsRepsonse = { notifications: ChannelNotification[]; total: number }; diff --git a/src/segments/ChannelProfile.tsx b/src/segments/ChannelProfile.tsx index 029ac2df73..30248f436c 100644 --- a/src/segments/ChannelProfile.tsx +++ b/src/segments/ChannelProfile.tsx @@ -1,9 +1,7 @@ // React + Web3 Essentials -import { useEffect, useState } from 'react'; // External Packages import { NotificationItem } from '@pushprotocol/uiweb'; -import { useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import styled, { useTheme } from 'styled-components'; @@ -17,77 +15,27 @@ import ViewChannelItem from 'components/ViewChannelItem'; import { ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; import APP_PATHS from 'config/AppPaths'; import { device } from 'config/Globals'; +import { useGetChannelDetails, useGetChannelNotifications } from 'queries'; // Constants const NOTIFICATIONS_PER_PAGE = 20; // Create Header const ChannelProfile = ({ channelID, loadTeaser, playTeaser, minimal, profileType }) => { - const { userPushSDKInstance } = useSelector((state: any) => { - return state.user; - }); - // get theme const themes = useTheme(); - // loading - const [loading, setLoading] = useState(true); - const [loadingNotifs, setLoadingNotifs] = useState(true); - const [notifications, setNotifications] = useState([]); - const [channelDetails, setChannelDetails] = useState(null); + // isChannelLoading + const { data: notifications, isLoading: isNotificationsLoading } = useGetChannelNotifications( + channelID, + 1, + NOTIFICATIONS_PER_PAGE + ); + const { data: channelDetails, isLoading: isChannelLoading } = useGetChannelDetails(channelID); // Setup navigation const navigate = useNavigate(); - useEffect(() => { - setChannelDetails(null); - if (userPushSDKInstance) { - setLoading(true); - (async () => { - try { - const channelBasedOnChannelID = await userPushSDKInstance.channel.info(channelID); - setChannelDetails(channelBasedOnChannelID); - setLoading(false); - } catch (error) { - console.log('Error', error); - setLoading(false); - } - })(); - } - }, [channelID, userPushSDKInstance]); - - // load notifications - useEffect(() => { - if (userPushSDKInstance) { - setLoading(true); - userPushSDKInstance.channel - .notifications(channelID, { - page: 1, - limit: NOTIFICATIONS_PER_PAGE, - }) - .then((response) => { - console.log(response); - setNotifications(response.notifications); - setLoadingNotifs(false); - - // ENABLE PAGINATION HERE - // dispatch(addPaginatedNotifications(response.notifications)); - // if (response.notifications.length === 0) { - // dispatch(setFinishedFetching()); - // } - }) - .catch((err) => { - // ENABLE NO NOTIFICATION FOUND HERE - console.error('Error >>>>', err); - setLoadingNotifs(false); - }); - } - return () => { - setNotifications([]); - setLoadingNotifs(true); - }; - }, [channelID, userPushSDKInstance]); - // Render return ( @@ -104,7 +52,7 @@ const ChannelProfile = ({ channelID, loadTeaser, playTeaser, minimal, profileTyp <> - {channelDetails && !loading && ( + {channelDetails && !isChannelLoading && ( - {loadingNotifs && ( + {isNotificationsLoading && ( )} - {!notifications.length && !loadingNotifs && ( + {!notifications?.length && !isNotificationsLoading && (
)} - {notifications.map((item, index) => { + {notifications?.map((item, index) => { const payload = item.message.payload; // render the notification item @@ -168,7 +116,7 @@ const ChannelProfile = ({ channelID, loadTeaser, playTeaser, minimal, profileTyp {/* Add Support chat */} - {/* {!loadingNotifs && ( + {/* {!isNotificationsLoading && (