improve selecting process

packages/app/src/components/SearchPage/SearchResultList.tsx

@@ -12,6 +12,7 @@ type Props = {
   pages: IPageWithMeta<IPageSearchMeta>[],
   isCheckedAllItems?: boolean,
   searchResultCount?: number,
+  selectedPageId?: string,
   activePage?: number,
   pagingLimit?: number,
   onPagingNumberChanged?: (activePage: number) => void,
@@ -21,12 +22,10 @@ type Props = {
 
 const SearchResultList: FC<Props> = (props:Props) => {
   const {
-    pages, isCheckedAllItems,
+    pages, isCheckedAllItems, selectedPageId,
     onPageSelected,
   } = props;
 
-  const [selectedPageId, setSelectedPageId] = useState<string>();
-
   const pageIdsWithNoSnippet = pages
     .filter(page => (page.pageMeta?.elasticSearchResult?.snippet.length ?? 0) === 0)
     .map(page => page.pageData._id);
@@ -35,8 +34,6 @@ const SearchResultList: FC<Props> = (props:Props) => {
   const { data: idToPageInfo } = useSWRxPageInfoForList(pageIdsWithNoSnippet);
 
   const clickItemHandler = useCallback((pageId: string) => {
-    setSelectedPageId(pageId);
-
     if (onPageSelected != null) {
       const selectedPage = pages.find(page => page.pageData._id === pageId);
       onPageSelected(selectedPage);

packages/app/src/components/SearchPage2/SearchPageBase.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import AppContainer from '~/client/services/AppContainer';
 import { IPageWithMeta } from '~/interfaces/page';
 import { IPageSearchMeta } from '~/interfaces/search';
@@ -33,6 +33,13 @@ const SearchPageBase: FC<Props> = (props: Props) => {
 
   const isLoading = pages == null;
 
+  // select first item on load
+  useEffect(() => {
+    if (selectedPageWithMeta == null && pages != null && pages.length > 0) {
+      setSelectedPageWithMeta(pages[0]);
+    }
+  }, [pages, selectedPageWithMeta]);
+
   return (
     <div className="content-main">
       <div className="search-result d-flex" id="search-result">
@@ -56,6 +63,7 @@ const SearchPageBase: FC<Props> = (props: Props) => {
                 <div className="page-list px-md-4">
                   <SearchResultList
                     pages={pages}
+                    selectedPageId={selectedPageWithMeta?.pageData._id}
                     onPageSelected={page => setSelectedPageWithMeta(page)}
                   />
                 </div>