Merge pull request #65 from abhinav/remember-filter

feat(dropdown): Remember selected filter
ajyey · Aug 17, 2023 · 2e20e5c · 2e20e5c
2 parents 2d34be7 + bf339af
commit 2e20e5c
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 4 deletions.
diff --git a/src/pages/popup/components/home/Home.tsx b/src/pages/popup/components/home/Home.tsx
@@ -7,10 +7,17 @@ import FilterEmailsDropdown from '@pages/popup/components/home/filter/FilterEmai
 import TopComponent from '@pages/popup/components/home/top/Top';
 import EmailCount from '@pages/popup/components/home/emails/EmailCount';
 import browser from 'webextension-polyfill';
-import { getFastmailSession } from '../../../../../utils/storageUtil';
+import {
+  getFastmailSession,
+  getDefaultFilter,
+  setDefaultFilter
+} from '../../../../../utils/storageUtil';
 import CreateEmailModal from '@pages/popup/components/home/detail/modals/CreateEmailModal';
 import LogoutConfirmationModal from '@pages/popup/components/home/detail/modals/LogoutConfirmationModal';
-import { FILTER_OPTIONS } from '@pages/popup/components/home/filter/FilterOption';
+import {
+  FILTER_OPTIONS,
+  FilterOption
+} from '@pages/popup/components/home/filter/FilterOption';
 
 interface HomeComponentProps {
   onLogout: () => void;
@@ -43,6 +50,21 @@ export default function HomeComponent({ onLogout }: HomeComponentProps) {
     setShowLogoutConfirmationModal(true);
   };
 
+  const setFilterOptionAndRemember = (
+    value: ((prevState: FilterOption) => FilterOption) | FilterOption
+  ) => {
+    if (typeof value == 'function') {
+      setFilterOption((prevState) => {
+        const newValue = value(prevState);
+        setDefaultFilter(newValue);
+        return newValue;
+      });
+    } else {
+      setFilterOption(value);
+      setDefaultFilter(value);
+    }
+  };
+
   useEffect(() => {
     // Declare the async function
     const fetchActiveTabUrl = async () => {
@@ -58,8 +80,14 @@ export default function HomeComponent({ onLogout }: HomeComponentProps) {
       }
     };
 
+    const fetchDefaultFilter = async () => {
+      const filter = await getDefaultFilter();
+      setFilterOption(filter);
+    };
+
     // Call the async function
     fetchActiveTabUrl();
+    fetchDefaultFilter();
   }, []);
 
   const refreshMaskedEmails = async () => {
@@ -128,7 +156,7 @@ export default function HomeComponent({ onLogout }: HomeComponentProps) {
           <div className="columns-[250px] border-r border-r-big-stone">
             <div className="h-[35px] border-b border-b-big-stone flex items-center justify-center">
               <FilterEmailsDropdown
-                setFilterOption={setFilterOption}
+                setFilterOption={setFilterOptionAndRemember}
                 filterOption={filterOption}
               />
               <EmailCount count={filteredEmailsCount} />

diff --git a/utils/constants/constants.ts b/utils/constants/constants.ts
@@ -1,3 +1,4 @@
 export const outputFolderName = 'dist';
 export const FASTMAIL_SESSION_KEY = 'fastmail_session';
 export const FAVORITE_EMAILS_KEY = 'favorite_emails';
+export const DEFAULT_FILTER_KEY = 'default_filter';
diff --git a/utils/storageUtil.ts b/utils/storageUtil.ts
@@ -1,9 +1,11 @@
 import {
   FASTMAIL_SESSION_KEY,
-  FAVORITE_EMAILS_KEY
+  FAVORITE_EMAILS_KEY,
+  DEFAULT_FILTER_KEY
 } from './constants/constants';
 import browser from 'webextension-polyfill';
 import { Session } from 'fastmail-masked-email';
+import { FILTER_OPTIONS, FilterOption } from '@src/pages/popup/components/home/filter/FilterOption';
 
 export const getFavoriteEmailIds = async (): Promise<string[]> => {
   const data = await browser.storage.sync.get(FAVORITE_EMAILS_KEY);
@@ -25,6 +27,16 @@ export const setFastmailSession = async (session: Session): Promise<void> => {
   await browser.storage.sync.set({ [FASTMAIL_SESSION_KEY]: session });
 };
 
+export const getDefaultFilter = async (): Promise<FilterOption> => {
+  const data = await browser.storage.sync.get(DEFAULT_FILTER_KEY);
+  const value = data[DEFAULT_FILTER_KEY] || 'All';
+  return FILTER_OPTIONS[value] || FILTER_OPTIONS.All;
+}
+
+export const setDefaultFilter = async (filter: FilterOption): Promise<void> => {
+  await browser.storage.sync.set({ [DEFAULT_FILTER_KEY]: filter.value });
+}
+
 export const clearStorage = async (): Promise<void> => {
   await browser.storage.sync.clear();
 };