fixed channel notifications (#1852)

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';

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;
+};

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;

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';

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';

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);

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';

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

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 (
  <Container>
@@ -104,7 +52,7 @@ const ChannelProfile = ({ channelID, loadTeaser, playTeaser, minimal, profileTyp
  </BackContainer>
 
  <>
- {channelDetails && !loading && (
+ {channelDetails && !isChannelLoading && (
  <ViewChannelItem
  channelObjectProp={channelDetails}
  loadTeaser={loadTeaser}
@@ -115,7 +63,7 @@ const ChannelProfile = ({ channelID, loadTeaser, playTeaser, minimal, profileTyp
  )}
 
  {/* Show Latest Notifications of the Channel */}
- {!loading && (
+ {!isChannelLoading && (
  <TextContainer>
  <SpanV2
  fontSize="20px"
@@ -131,20 +79,20 @@ const ChannelProfile = ({ channelID, loadTeaser, playTeaser, minimal, profileTyp
  )}
 
  <NotificationItems>
- {loadingNotifs && (
+ {isNotificationsLoading && (
  <LoaderSpinner
  type={LOADER_TYPE.SEAMLESS}
  spinnerSize={40}
  />
  )}
 
- {!notifications.length && !loadingNotifs && (
+ {!notifications?.length && !isNotificationsLoading && (
  <div style={{ textAlign: 'center' }}>
  <DisplayNotice title="You currently have no notifications, try subscribing to some channels." />
  </div>
  )}
 
- {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 && (
  <SupportChat
  supportAddress={channelID} //support address, this belongs to you
  account={account} //signer