Merge pull request #3373 from amitsingh-007/f-mantine-builtins

apps/extension/package.json

@@ -20,6 +20,8 @@
     "@mantine/dates": "7.15.1",
     "@mantine/form": "7.15.1",
     "@mantine/hooks": "7.15.1",
+    "@mantine/notifications": "7.15.2",
+    "@mantine/nprogress": "7.15.2",
     "@t3-oss/env-core": "0.11.1",
     "@tanstack/react-virtual": "3.11.1",
     "@trpc/client": "10.45.2",

apps/extension/src/BookmarksPanel/store/useBookmarkStore.ts

@@ -1,5 +1,4 @@
 import { getBookmarks } from '@helpers/fetchFromStorage';
-import useToastStore from '@/store/toast';
 import {
   ContextBookmarks,
   ECacheBucketKeys,
@@ -17,6 +16,7 @@ import md5 from 'md5';
 import { create } from 'zustand';
 import { isFolderContainsDir, setBookmarksInStorage } from '../utils';
 import { processBookmarksMove } from '../utils/manipulate';
+import { notifications } from '@mantine/notifications';
 
 interface State {
   // State
@@ -314,12 +314,11 @@ const useBookmarkStore = create<State>()((set, get) => ({
 
   handleFolderRemove: (pos: number, name: string) => {
     const { contextBookmarks, folderList, urlList, folders } = get();
-    const { displayToast } = useToastStore.getState();
     const folderHash = md5(name);
     if (isFolderContainsDir(folders, folderHash)) {
-      displayToast({
-        message: 'Remove inner folders first.',
-        severity: 'error',
+      notifications.show({
+        message: 'Remove inner folders first',
+        color: 'red',
       });
       return;
     }
@@ -358,7 +357,6 @@ const useBookmarkStore = create<State>()((set, get) => ({
 
   handleSave: async (folderContext: string) => {
     const { folders, urlList, folderList, contextBookmarks, loadData } = get();
-    const { displayToast } = useToastStore.getState();
 
     set({ isFetching: true });
 
@@ -377,10 +375,7 @@ const useBookmarkStore = create<State>()((set, get) => ({
     await loadData(folderContext);
 
     set({ isFetching: false, isSaveButtonActive: false });
-    displayToast({
-      message: 'Saved temporarily',
-      duration: 1500,
-    });
+    notifications.show({ message: 'Saved temporarily' });
   },
 
   handlePasteSelectedBookmarks: () => {

apps/extension/src/BookmarksPanel/utils/bookmark.ts

@@ -1,4 +1,3 @@
-import { AuthProgress } from '@/HomePopup/utils/authProgress';
 import { trpcApi } from '@/apis/trpcApi';
 import {
   ECacheBucketKeys,
@@ -8,6 +7,7 @@ import {
   STORAGE_KEYS,
 } from '@bypass/shared';
 import { getBookmarks, getPersons } from '@helpers/fetchFromStorage';
+import { nprogress } from '@mantine/nprogress';
 
 export const syncBookmarksToStorage = async () => {
   const bookmarks = await trpcApi.firebaseData.bookmarksGet.query();
@@ -52,25 +52,14 @@ export const cacheBookmarkFavicons = async () => {
   if (!bookmarks) {
     return;
   }
-  AuthProgress.start('Caching favicons');
   const { urlList } = bookmarks;
-  let totalResolved = 0;
   const faviconUrls = Object.values(urlList).map((item) => {
     const bookmark = getDecryptedBookmark(item);
     return getFaviconProxyUrl(bookmark.url);
   });
   const uniqueUrls = [...new Set(faviconUrls)];
   const cache = await getCacheObj(ECacheBucketKeys.favicon);
-  await Promise.all(
-    uniqueUrls.map(async (url) => {
-      const urlPromise = await cache.add(url);
-      totalResolved += 1;
-      AuthProgress.update(
-        `Caching favicons: ${totalResolved}/${uniqueUrls.length}`
-      );
-      return urlPromise;
-    })
-  );
+  await Promise.all(uniqueUrls.map((url) => cache.add(url)));
   console.log('Initialized cache for all bookmark urls');
-  AuthProgress.finish('Cached favicons');
+  nprogress.increment();
 };

apps/extension/src/HistoryPanel/components/HistoryPanel.tsx

@@ -3,10 +3,10 @@ import { Header } from '@bypass/shared';
 import { Box, Button, Stack } from '@mantine/core';
 import { DateTimePicker, DateTimePickerProps } from '@mantine/dates';
 import { useForm } from '@mantine/form';
-import useToastStore from '@store/toast';
 import { useEffect } from 'react';
 import { FaCalendarCheck } from 'react-icons/fa';
 import { MdOutlineDelete } from 'react-icons/md';
+import { notifications } from '@mantine/notifications';
 
 interface IForm {
   startDateTime: Date;
@@ -27,8 +27,6 @@ const DateTime = (props: DateTimePickerProps) => (
 );
 
 const HistoryPanel = () => {
-  const displayToast = useToastStore((state) => state.displayToast);
-
   const form = useForm<IForm>({
     initialValues: {
       startDateTime: currentDate,
@@ -57,9 +55,9 @@ const HistoryPanel = () => {
       throw new Error('start/end date time not found');
     }
     if (startDateTime > endDateTime) {
-      displayToast({
+      notifications.show({
         message: "Start date time can't be greater than end date time",
-        severity: 'error',
+        color: 'red',
       });
       return;
     }
@@ -68,7 +66,7 @@ const HistoryPanel = () => {
       endTime: endDateTime.valueOf(),
     });
     chrome.storage.local.remove('historyStartTime');
-    displayToast({ message: 'History cleared successfully' });
+    notifications.show({ message: 'History cleared successfully' });
   };
 
   return (

apps/extension/src/HomePopup/components/Authenticate.tsx

@@ -1,44 +1,62 @@
 import useFirebaseStore from '@/store/firebase/useFirebaseStore';
-import { Button, LoadingOverlay, Progress } from '@mantine/core';
-import useAuthStore from '@/store/authProgress';
+import { Button, LoadingOverlay } from '@mantine/core';
 import useExtStore from '@store/extension';
-import useToastStore from '@store/toast';
 import { useCallback, useEffect, useState } from 'react';
 import { RiLoginCircleFill, RiLogoutCircleRFill } from 'react-icons/ri';
 import { signIn, signOut } from '../utils/authentication';
-import styles from './styles/Authenticate.module.css';
+import { nprogress, nprogressStore } from '@mantine/nprogress';
+import {
+  SIGN_IN_TOTAL_STEPS,
+  SIGN_OUT_TOTAL_STEPS,
+} from '../constants/progress';
+import { notifications } from '@mantine/notifications';
+
+const initializeProgress = (totalSteps: number) => {
+  nprogressStore.setState((state) => ({
+    ...state,
+    step: 100 / totalSteps,
+  }));
+  nprogress.reset();
+};
+
+const resetProgress = () => {
+  nprogress.complete();
+};
 
 const Authenticate = () => {
   const isSignedIn = useFirebaseStore((state) => state.isSignedIn);
   const setIsSignedIn = useFirebaseStore((state) => state.setIsSignedIn);
   const isExtensionActive = useExtStore((state) => state.isExtensionActive);
-  const displayToast = useToastStore((state) => state.displayToast);
-  const authProgress = useAuthStore((state) => state.authProgress);
-  const resetAuthProgress = useAuthStore((state) => state.resetAuthProgress);
   const [isFetching, setIsFetching] = useState(false);
 
   const handleSignIn = async () => {
     setIsFetching(true);
+    initializeProgress(SIGN_IN_TOTAL_STEPS);
+
     const isSignInSuccess = await signIn();
     setIsSignedIn(isSignInSuccess);
-    resetAuthProgress();
+
+    resetProgress();
     setIsFetching(false);
   };
 
   const handleSignOut = useCallback(async () => {
     setIsFetching(true);
+    initializeProgress(SIGN_OUT_TOTAL_STEPS);
+
     const isSignedOutSuccess = await signOut();
     if (isSignedOutSuccess) {
       setIsSignedIn(!isSignedOutSuccess);
     } else {
-      displayToast({
+      notifications.show({
         message: 'Error while logging out',
-        severity: 'error',
+        color: 'red',
       });
     }
+
     setIsFetching(false);
-    resetAuthProgress();
-  }, [displayToast, resetAuthProgress, setIsSignedIn]);
+    resetProgress();
+  }, [setIsSignedIn]);
 
   // Init
   useEffect(() => {
@@ -52,7 +70,6 @@ const Authenticate = () => {
     }
   }, [handleSignOut, isExtensionActive, isSignedIn]);
 
-  const { message, progress = 7, total = 1 } = authProgress || {};
   return (
     <>
       <Button
@@ -68,24 +85,7 @@ const Authenticate = () => {
       >
         {isSignedIn ? 'Logout' : 'Login'}
       </Button>
-      {isFetching && (
-        <>
-          <LoadingOverlay w="100%" visible zIndex={100} />
-          <Progress.Root
-            size="xl"
-            radius="xl"
-            w="100%"
-            pos="fixed"
-            top={0}
-            left="50%"
-            className={styles.progress}
-          >
-            <Progress.Section striped animated value={(progress * 100) / total}>
-              <Progress.Label>{message || 'Loading'}</Progress.Label>
-            </Progress.Section>
-          </Progress.Root>
-        </>
-      )}
+      {isFetching && <LoadingOverlay w="100%" visible zIndex={100} />}
     </>
   );
 };

apps/extension/src/HomePopup/components/TwoFactorAuthenticate.tsx

@@ -3,12 +3,11 @@ import useFirebaseStore from '@/store/firebase/useFirebaseStore';
 import { InputTOTP, noOp, STORAGE_KEYS } from '@bypass/shared';
 import { getUser2FAInfo } from '@helpers/fetchFromStorage';
 import { Center, Modal } from '@mantine/core';
-import useToastStore from '@store/toast';
 import { useEffect, useState } from 'react';
 import { IUser2FAInfo } from '../interfaces/authentication';
+import { notifications } from '@mantine/notifications';
 
 const TwoFactorAuthenticate = () => {
-  const displayToast = useToastStore((state) => state.displayToast);
   const isSignedIn = useFirebaseStore((state) => state.isSignedIn);
   const [promptTOTPVerify, setPromptTOTPVerify] = useState(false);
   const [user2FAInfo, setUser2FAInfo] = useState<IUser2FAInfo>();
@@ -39,9 +38,9 @@ const TwoFactorAuthenticate = () => {
       });
       setPromptTOTPVerify(false);
     } else {
-      displayToast({
+      notifications.show({
         message: 'Entered TOTP is incorrect',
-        severity: 'error',
+        color: 'red',
       });
     }
   };

apps/extension/src/HomePopup/constants/progress.ts

@@ -0,0 +1,2 @@
+export const SIGN_IN_TOTAL_STEPS = 7;
+export const SIGN_OUT_TOTAL_STEPS = 4;

apps/extension/src/HomePopup/utils/authentication.ts

@@ -1,24 +1,20 @@
 import useFirebaseStore from '@/store/firebase/useFirebaseStore';
-import { AuthProgress } from './authProgress';
 import { processPostLogin, processPostLogout, processPreLogout } from './sync';
+import { nprogress } from '@mantine/nprogress';
 
 const userSignIn = async () => {
   const { firebaseSignIn } = useFirebaseStore.getState();
-
-  AuthProgress.start('Logging in user');
   await firebaseSignIn();
-  AuthProgress.finish('User logged in');
+  nprogress.increment();
 };
 
 export const signOut = async (): Promise<boolean> => {
   const { firebaseSignOut } = useFirebaseStore.getState();
 
   try {
-    AuthProgress.initialize(4);
     await processPreLogout();
-    AuthProgress.start('Logging out user');
     await firebaseSignOut();
-    AuthProgress.finish('User logged out');
+    nprogress.increment();
     await processPostLogout();
     return true;
   } catch (error) {
@@ -29,7 +25,6 @@ export const signOut = async (): Promise<boolean> => {
 
 export const signIn = async (): Promise<boolean> => {
   try {
-    AuthProgress.initialize(7);
     await userSignIn();
     await processPostLogin();
     return true;