Merge pull request #65 from push-protocol/add-refresh

Add loader for refresh click

Author: riyanshu-patro

examples/email/src/context/AppContext.tsx

@@ -34,7 +34,6 @@ interface AppContextType {
   account: string | null;
   handleSendSignRequestToPushWallet: (data: Uint8Array) => Promise<Uint8Array>;
   wallet: Wallet | null;
-  getEmails: () => Promise<void>;
   isLoading: boolean;
   getSentEmails: () => Promise<void>;
   isSentEmailLoading: boolean;
@@ -66,8 +65,9 @@ export function AppProvider({ children }: { children: ReactNode }) {
   const { account, handleSendSignRequestToPushWallet } = usePushWalletContext();
 
   const getSentEmails = async () => {
-    if (!account || !pushEmail || isLoading || isSentEmailLoading) return;
+    if (!account || !pushEmail || isSentEmailLoading) return;
     setIsSentEmailLoading(true);
+    console.log('check');
     try {
       const sent = await pushEmail.getBySender(account);
       setEmails((prev) => ({
@@ -82,7 +82,7 @@ export function AppProvider({ children }: { children: ReactNode }) {
   };
 
   const getReceivedEmails = async () => {
-    if (!account || !pushEmail || isLoading || isReceivedEmailLoading) return;
+    if (!account || !pushEmail || isReceivedEmailLoading) return;
     setIsReceivedEmailLoading(true);
     try {
       const received = await pushEmail.getByRecipient(account);
@@ -98,7 +98,7 @@ export function AppProvider({ children }: { children: ReactNode }) {
   };
 
   const getEmails = async () => {
-    if (!account || !pushEmail || isLoading) return;
+    if (!account || !pushEmail) return;
     setIsLoading(true);
     try {
       await Promise.all([getSentEmails(), getReceivedEmails()]);
@@ -108,17 +108,15 @@ export function AppProvider({ children }: { children: ReactNode }) {
   };
 
   useEffect(() => {
+    if (!account || !pushEmail) return;
     getEmails();
-  }, [account, pushEmail]);
-
-  useEffect(() => {
     const interval = setInterval(() => {
       getSentEmails();
       getReceivedEmails();
     }, 5 * 60 * 1000); // 5 minutes interval
 
     return () => clearInterval(interval);
-  });
+  }, [account, pushEmail]);
 
   useEffect(() => {
     if (account) {
@@ -158,7 +156,6 @@ export function AppProvider({ children }: { children: ReactNode }) {
         account,
         handleSendSignRequestToPushWallet,
         wallet,
-        getEmails,
         isLoading,
         getSentEmails,
         isSentEmailLoading,

examples/email/src/modules/emailPage/EmailScreen.tsx

@@ -1,7 +1,14 @@
-import { Text, Box, TextInput, Tabs, Refresh } from 'shared-components';
+import {
+  Text,
+  Box,
+  TextInput,
+  Tabs,
+  Refresh,
+  Spinner,
+} from 'shared-components';
 import { useAppContext } from '@/context/AppContext';
 import { css } from 'styled-components';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { dummyEmail, EMAIL_BOX } from '@/common';
 import EmailLayout from '@/components/EmailLayout';
@@ -10,6 +17,11 @@ import NewEmail from './components/NewEmail';
 import { Header } from './components/Header';
 
 const EmailScreen = () => {
+  const [isLoading, setIsLoading] = useState<Record<EMAIL_BOX, boolean>>({
+    inbox: false,
+    sent: false,
+  });
+
   const navigate = useNavigate();
   const location = useLocation();
   const { id } = useParams();
@@ -22,7 +34,6 @@ const EmailScreen = () => {
     setSelectedEmail,
     selectedEmail,
     replyTo,
-    getEmails,
     getSentEmails,
     getReceivedEmails,
   } = useAppContext();
@@ -37,6 +48,18 @@ const EmailScreen = () => {
     // navigate(`/${tab}`);
   };
 
+  const handleRefreshClick = async () => {
+    if (currTab === EMAIL_BOX.INBOX) {
+      setIsLoading((prev) => ({ ...prev, inbox: true }));
+      await getReceivedEmails();
+      setIsLoading((prev) => ({ ...prev, inbox: false }));
+    } else {
+      setIsLoading((prev) => ({ ...prev, sent: true }));
+      await getReceivedEmails();
+      setIsLoading((prev) => ({ ...prev, sent: false }));
+    }
+  };
+
   useEffect(() => {
     if (location.pathname.includes(EMAIL_BOX.INBOX)) {
       setCurrTab(EMAIL_BOX.INBOX);
@@ -106,10 +129,18 @@ const EmailScreen = () => {
               alignItems="center"
               width="100%"
             >
-              <Text variant="h3-semibold">Inbox</Text>
-              <Box cursor="pointer" onClick={getEmails}>
-                <Refresh size={24} />
-              </Box>
+              <Text variant="h3-semibold" textTransform="capitalize">
+                {currTab}
+              </Text>
+              {isLoading[currTab] ? (
+                <Box>
+                  <Spinner size="medium" variant="primary" />
+                </Box>
+              ) : (
+                <Box cursor="pointer" onClick={handleRefreshClick}>
+                  <Refresh size={24} />
+                </Box>
+              )}
             </Box>
             <TextInput
               placeholder="Search for a sender address"

examples/email/src/modules/emailPage/components/EmailList.tsx

@@ -37,18 +37,18 @@ const EmailList: FC<EmailListProps> = ({ type }) => {
   return (
     <Box height="100%" width="100%" overflow="scroll">
       <Box display="flex" flexDirection="column">
+        {filteredEmails.map((email, index) => (
+          <EmailCard key={index} {...email} />
+        ))}
+        {type === EMAIL_BOX.INBOX && <EmailCard {...dummyEmail} />}
         {((isLoading && isSentEmailLoading && currTab === EMAIL_BOX.SENT) ||
           (isLoading &&
             isReceivedEmailLoading &&
             currTab === EMAIL_BOX.INBOX)) && (
-          <Box display="flex" justifyContent="center" margin="spacing-lg">
+          <Box display="flex" justifyContent="center" padding="spacing-lg">
             <Spinner size="medium" variant="primary" />
           </Box>
         )}
-        {filteredEmails.map((email, index) => (
-          <EmailCard key={index} {...email} />
-        ))}
-        {type === EMAIL_BOX.INBOX && <EmailCard {...dummyEmail} />}
       </Box>
     </Box>
   );

examples/email/src/modules/emailPage/components/NewEmail.tsx

@@ -62,7 +62,7 @@ const NewEmail: React.FC<NewEmailProps> = ({ replyTo }) => {
     setReplyTo,
     account,
     handleSendSignRequestToPushWallet,
-    getEmails,
+    getSentEmails,
     currTab,
   } = useAppContext();
   const [sendingMail, setSendingMail] = useState(false);
@@ -244,7 +244,7 @@ const NewEmail: React.FC<NewEmailProps> = ({ replyTo }) => {
       }
       console.log('Email sent:', txHash);
       setTimeout(() => {
-        getEmails();
+        getSentEmails();
       }, 5000);
       setEmailData({ subject: '', message: '' });
       setRecipients([]);