Fixed bugs in recent notification page

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 allUserSubscriptions = 'allUserSubscriptions';
 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 deactivatingChannel = 'deactivatingChannel';

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