fix: bug where the favorite icon would appear favorited even when the…

…re are no search results

src/pages/popup/components/home/emails/EmailDetailPane.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
 import EditButton from '@pages/popup/components/home/emails/EditButton';
 import FavoriteButton from '@pages/popup/components/home/emails/FavoriteButton';
 import {
-  getFavoriteEmails,
-  setFavoriteEmails
+  getFavoriteEmailIds,
+  setFavoriteEmailIds
 } from '../../../../../../utils/storageUtil';
 
 export default function EmailDetailPane({
@@ -15,30 +15,34 @@ export default function EmailDetailPane({
   const [isFavorited, setIsFavorited] = useState<boolean>(false);
   useEffect(() => {
     if (selectedEmailId) {
-      getFavoriteEmails().then((favoriteEmails) => {
+      getFavoriteEmailIds().then((favoriteEmails) => {
         setIsFavorited(favoriteEmails.includes(selectedEmailId));
       });
+    } else {
+      setIsFavorited(false);
     }
   }, [selectedEmailId]);
   const handleFavoriteButtonClick = async () => {
     if (selectedEmailId) {
-      const favoritedEmailIds = await getFavoriteEmails();
+      const favoritedEmailIds = await getFavoriteEmailIds();
       if (isFavorited) {
         // Remove the email from the favorites list
         const updatedFavorites = favoritedEmailIds.filter(
           (emailId) => emailId !== selectedEmailId
         );
-        await setFavoriteEmails(updatedFavorites);
+        await setFavoriteEmailIds(updatedFavorites);
         setIsFavorited(false);
       } else {
         // Add the email to the favorites list
         const updatedFavoritedEmailIds = [
           ...favoritedEmailIds,
           selectedEmailId
         ];
-        await setFavoriteEmails(updatedFavoritedEmailIds);
+        await setFavoriteEmailIds(updatedFavoritedEmailIds);
         setIsFavorited(true);
       }
+    } else {
+      setIsFavorited(false);
     }
   };
   return (

src/pages/popup/components/home/emails/EmailList.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { MaskedEmail } from 'fastmail-masked-email';
 import EmailItem from '@pages/popup/components/home/emails/EmailItem';
 import Fuse from 'fuse.js';
+import { getFavoriteEmailIds } from '../../../../../../utils/storageUtil';
 
 function isFuseResult(obj: object): obj is Fuse.FuseResult<MaskedEmail> {
   return 'item' in obj;
@@ -24,12 +25,28 @@ function EmailList({
   setSelectedEmailId,
   selectedEmailId
 }: Props) {
-  let filteredEmails = maskedEmails;
-  if (filter !== 'all') {
-    filteredEmails = maskedEmails.filter(
-      (email: MaskedEmail) => email.state === filter
-    );
-  }
+  // Keep track of the filtered emails
+  const [filteredEmails, setFilteredEmails] = useState<MaskedEmail[]>([]);
+  // Filter the emails based on the filter prop
+  useEffect(() => {
+    const applyFilter = async () => {
+      let newFilteredEmails = maskedEmails;
+      if (filter !== 'all' && filter !== 'favorited') {
+        newFilteredEmails = maskedEmails.filter(
+          (email: MaskedEmail) => email.state === filter
+        );
+      }
+      if (filter === 'favorited') {
+        const favoritedEmails = await getFavoriteEmailIds();
+        newFilteredEmails = maskedEmails.filter((email: MaskedEmail) =>
+          favoritedEmails.includes(email.id)
+        );
+      }
+      setFilteredEmails(newFilteredEmails);
+    };
+    applyFilter();
+  }, [maskedEmails, filter]);
+
   // Use Fuse.js to perform the fuzzy search
   const fuse: Fuse<MaskedEmail> = new Fuse(filteredEmails, {
     keys: ['email', 'description', 'id', 'forDomain'],
@@ -48,6 +65,8 @@ function EmailList({
         ? searchResults[0].item.id
         : searchResults[0].id;
       setSelectedEmailId(firstEmailId);
+    } else {
+      setSelectedEmailId(null);
     }
     // Call the onFilteredEmailsCountChange callback with the searchResults length
     onFilteredEmailsCountChange(searchResults.length);

utils/storageUtil.ts

@@ -1,10 +1,12 @@
 import { FAVORITE_EMAILS_KEY } from './constants';
 
-export const getFavoriteEmails = async (): Promise<string[]> => {
+export const getFavoriteEmailIds = async (): Promise<string[]> => {
   const data = await chrome.storage.sync.get(FAVORITE_EMAILS_KEY);
   return data[FAVORITE_EMAILS_KEY] || [];
 };
 
-export const setFavoriteEmails = async (emailIds: string[]): Promise<void> => {
+export const setFavoriteEmailIds = async (
+  emailIds: string[]
+): Promise<void> => {
   await chrome.storage.sync.set({ [FAVORITE_EMAILS_KEY]: emailIds });
 };