80388 change var name, change props tp pass

packages/app/src/components/SearchPage.jsx

@@ -30,7 +30,7 @@ class SearchPage extends React.Component {
       searchedKeyword: '',
       searchedPages: [],
       searchResultMeta: {},
-      selectedPage: {},
+      focusedPage: {},
       selectedPages: new Set(),
       excludeUsersHome: true,
       excludeTrash: true,
@@ -119,7 +119,7 @@ class SearchPage extends React.Component {
             searchedKeyword: keyword,
             searchedPages: res.data,
             searchResultMeta: res.meta,
-            selectedPage: res.data[0],
+            focusedPage: res.data[0],
           });
         }
         else {
@@ -127,7 +127,7 @@ class SearchPage extends React.Component {
             searchedKeyword: keyword,
             searchedPages: [],
             searchResultMeta: {},
-            selectedPage: {},
+            focusedPage: {},
           });
         }
       })
@@ -141,7 +141,7 @@ class SearchPage extends React.Component {
       return page._id === pageId;
     });
     this.setState({
-      selectedPage: this.state.searchedPages[index],
+      focusedPage: this.state.searchedPages[index],
     });
   }
 
@@ -159,7 +159,7 @@ class SearchPage extends React.Component {
       <SearchResultContent
         appContainer={this.props.appContainer}
         searchingKeyword={this.state.searchingKeyword}
-        selectedPage={this.state.selectedPage}
+        focusedPage={this.state.focusedPage}
       >
       </SearchResultContent>
     );
@@ -170,7 +170,7 @@ class SearchPage extends React.Component {
       <SearchResultList
         pages={this.state.searchedPages}
         deletionMode={false}
-        selectedPage={this.state.selectedPage}
+        focusedPage={this.state.focusedPage}
         selectedPages={this.state.selectedPages}
         onClickInvoked={this.selectPage}
         onChangedInvoked={this.toggleCheckBox}

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

@@ -7,7 +7,7 @@ import AppContainer from '../../client/services/AppContainer';
 type Props ={
   appContainer: AppContainer,
   searchingKeyword:string,
-  selectedPage : any,
+  focusedPage : any,
 }
 const SearchResultContent: FC<Props> = (props: Props) => {
   // Temporaly workaround for lint error
@@ -39,7 +39,7 @@ const SearchResultContent: FC<Props> = (props: Props) => {
       </div>
     );
   };
-  const content = renderPage(props.selectedPage);
+  const content = renderPage(props.focusedPage);
   return (
 
     <div>{content}</div>

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

@@ -5,8 +5,9 @@ import SearchResultListItem from './SearchResultListItem';
 class SearchResultList extends React.Component {
 
   render() {
-    const { selectedPage } = this.props;
-    const selectedPageId = selectedPage != null && selectedPage.id != null ? selectedPage.id : '';
+    const { focusedPage } = this.props;
+    const focusedPageId = focusedPage != null && focusedPage.id != null ? focusedPage.id : '';
+    console.log(focusedPageId);
     return this.props.pages.map((page) => {
       // TODO : send cetain  length of body (revisionBody) from elastisearch by adding some settings to the query and
       //         when keyword is not in page content, display revisionBody.
@@ -15,8 +16,8 @@ class SearchResultList extends React.Component {
         <SearchResultListItem
           key={page._id}
           page={page}
-          selectedPageId={selectedPageId}
           onClickInvoked={this.props.onClickInvoked}
+          isSelected={page._id === focusedPageId || false}
           noLink
         />
       );
@@ -28,7 +29,7 @@ class SearchResultList extends React.Component {
 SearchResultList.propTypes = {
   pages: PropTypes.array.isRequired,
   deletionMode: PropTypes.bool.isRequired,
-  selectedPage: PropTypes.object,
+  focusedPage: PropTypes.object,
   selectedPages: PropTypes.array.isRequired,
   onClickInvoked: PropTypes.func,
   onChangeInvoked: PropTypes.func,

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

@@ -17,13 +17,13 @@ type Props ={
       snippet: string,
     }
   },
-  selectedPageId?: string,
-  onClickInvoked: (data: string) => void,
+  isSelected: boolean,
+  onClickInvoked?: (data: string) => void,
 }
 
 const SearchResultListItem: FC<Props> = (props:Props) => {
 
-  const { page, selectedPageId, onClickInvoked } = props;
+  const { page, isSelected, onClickInvoked } = props;
 
   // Add prefix 'id_' in pageId, because scrollspy of bootstrap doesn't work when the first letter of id attr of target component is numeral.
   const pageId = `#${page._id}`;
@@ -36,7 +36,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
   // TASK : https://estoc.weseek.co.jp/redmine/issues/79606
 
   return (
-    <li key={page._id} className={`page-list-li w-100 border-bottom pr-4 list-group-item-action ${page._id === selectedPageId ? 'active' : ''}`}>
+    <li key={page._id} className={`page-list-li w-100 border-bottom pr-4 list-group-item-action ${isSelected ? 'active' : ''}`}>
       <a
         className="d-block pt-3"
         href={pageId}