Merge pull request #983 from PeterKwesiAnsah/use-pageTitle-as-default-bookmark-name

feat: use page title as the default bookmark name

desktop-app/src/renderer/components/Previewer/Device/index.tsx

@@ -37,6 +37,7 @@ import {
   setAddress,
   setIsInspecting,
   setLayout,
+  setPageTitle,
 } from 'renderer/store/features/renderer';
 import { PREVIEW_LAYOUTS } from 'common/constants';
 import { NAVIGATION_EVENTS } from '../../ToolBar/NavigationControls';
@@ -409,6 +410,22 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
     };
   }, [device.isMobileCapable]);
 
+  useEffect(() => {
+    const webview = ref.current;
+
+    if (isPrimary && webview) {
+      webview.addEventListener('dom-ready', () => {
+        const pageTitle = webview.getTitle();
+        dispatch(setPageTitle(pageTitle));
+      });
+    }
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      webview?.removeEventListener('dom-ready', () => {});
+    };
+  }, [dispatch, isPrimary]);
+
   const scaledHeight = height * zoomfactor;
   const scaledWidth = width * zoomfactor;
 

desktop-app/src/renderer/components/ToolBar/AddressBar/BookmarkButton.tsx

@@ -1,5 +1,5 @@
 import { Icon } from '@iconify/react';
-import { useEffect, useState } from 'react';
+import { useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import cx from 'classnames';
 import Button from 'renderer/components/Button';
@@ -8,33 +8,28 @@ import BookmarkFlyout from '../Menu/Flyout/Bookmark/ViewAllBookmarks/BookmarkFly
 
 interface Props {
   currentAddress: string;
+  pageTitle: string;
 }
 
-const BookmarkButton = ({ currentAddress }: Props) => {
+const BookmarkButton = ({ currentAddress, pageTitle }: Props) => {
   const [openFlyout, setOpenFlyout] = useState<boolean>(false);
-  const [bookmark, setBookmark] = useState<IBookmarks>({
+  const initbookmark = {
     id: '',
-    name: '',
+    name: pageTitle,
     address: currentAddress,
-  });
+  };
+
   const bookmarks = useSelector(selectBookmarks);
+  const bookmarkFound = useMemo(
+    () => bookmarks.find((bm: IBookmarks) => bm.address === currentAddress),
+    [currentAddress, bookmarks]
+  );
 
-  const handleFlyout = () => setOpenFlyout(!openFlyout);
+  const isPageBookmarked = !!bookmarkFound;
 
-  useEffect(() => {
-    const bookmarkFound = bookmarks.find(
-      (bm: IBookmarks) => bm.address === currentAddress
-    );
-    setBookmark(
-      bookmarkFound || {
-        id: '',
-        name: '',
-        address: currentAddress,
-      }
-    );
-  }, [bookmarks, currentAddress]);
-
-  const isPageBookmarked = Boolean(bookmark.name);
+  const handleFlyout = () => {
+    setOpenFlyout(!openFlyout);
+  };
 
   return (
     <>
@@ -54,7 +49,10 @@ const BookmarkButton = ({ currentAddress }: Props) => {
 
       <div className="absolute top-[40px] right-[0px]">
         {openFlyout && (
-          <BookmarkFlyout bookmark={bookmark} setOpenFlyout={setOpenFlyout} />
+          <BookmarkFlyout
+            bookmark={bookmarkFound || initbookmark}
+            setOpenFlyout={setOpenFlyout}
+          />
         )}
       </div>
     </>

desktop-app/src/renderer/components/ToolBar/AddressBar/index.tsx

@@ -13,7 +13,11 @@ import {
 import { useDispatch, useSelector } from 'react-redux';
 import Button from 'renderer/components/Button';
 import { webViewPubSub } from 'renderer/lib/pubsub';
-import { selectAddress, setAddress } from 'renderer/store/features/renderer';
+import {
+  selectAddress,
+  selectPageTitle,
+  setAddress,
+} from 'renderer/store/features/renderer';
 import AuthModal from './AuthModal';
 import SuggestionList from './SuggestionList';
 import Bookmark from './BookmarkButton';
@@ -40,6 +44,7 @@ const AddressBar = () => {
     useState<PermissionRequestArg | null>(null);
   const [authRequest, setAuthRequest] = useState<AuthRequestArgs | null>(null);
   const address = useSelector(selectAddress);
+  const pageTitle = useSelector(selectPageTitle);
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -241,7 +246,7 @@ const AddressBar = () => {
           >
             <Icon icon={isHomepage ? 'mdi:home' : 'mdi:home-outline'} />
           </Button>
-          <Bookmark currentAddress={address} />
+          <Bookmark pageTitle={pageTitle} currentAddress={address} />
         </div>
         {isSuggesting ? (
           <SuggestionList match={typedAddress} onEnter={onEnter} />

desktop-app/src/renderer/store/features/renderer/index.ts

@@ -9,6 +9,7 @@ import type { RootState } from '../..';
 
 export interface RendererState {
   address: string;
+  pageTitle: string;
   individualZoomFactor: number;
   zoomFactor: number;
   rotate: boolean;
@@ -32,6 +33,7 @@ const urlFromQueryParam = () => {
 
 const initialState: RendererState = {
   address: urlFromQueryParam() ?? window.electron.store.get('homepage'),
+  pageTitle: '',
   individualZoomFactor:
     zoomSteps[window.electron.store.get('renderer.individualZoomStepIndex')],
   zoomFactor: zoomSteps[window.electron.store.get('renderer.zoomStepIndex')],
@@ -65,6 +67,11 @@ export const rendererSlice = createSlice({
         state.address = action.payload;
       }
     },
+    setPageTitle: (state, action: PayloadAction<string>) => {
+      if (action.payload !== state.pageTitle) {
+        state.pageTitle = action.payload;
+      }
+    },
     zoomIn: (state) => {
       const index =
         state.layout === PREVIEW_LAYOUTS.INDIVIDUAL
@@ -131,6 +138,7 @@ export const {
   setIsInspecting,
   setLayout,
   setIsCapturingScreenshot,
+  setPageTitle,
 } = rendererSlice.actions;
 
 // Use different zoom factor based on state's current layout
@@ -141,6 +149,7 @@ export const selectZoomFactor = (state: RootState) => {
   return state.renderer.zoomFactor;
 };
 export const selectAddress = (state: RootState) => state.renderer.address;
+export const selectPageTitle = (state: RootState) => state.renderer.pageTitle;
 export const selectRotate = (state: RootState) => state.renderer.rotate;
 export const selectIsInspecting = (state: RootState) =>
   state.renderer.isInspecting;