80783 make interface

packages/app/src/components/SearchPage.jsx

@@ -213,7 +213,7 @@ class SearchPage extends React.Component {
         activePage={this.state.activePage}
         pagingLimit={this.state.pagingLimit}
         onClickInvoked={this.selectPage}
-        toggleCheckBox={this.toggleCheckBox}
+        onChangedInvoked={this.toggleCheckBox}
         onPagingNumberChanged={this.onPagingNumberChanged}
       />
     );

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

@@ -19,7 +19,7 @@ class SearchResultList extends React.Component {
               key={page._id}
               page={page}
               onClickInvoked={this.props.onClickInvoked}
-              toggleCheckBox={this.props.toggleCheckBox}
+              onChangedInvoked={this.props.onChangedInvoked}
               isSelected={page._id === focusedPageId || false}
               noLink
             />
@@ -50,7 +50,7 @@ SearchResultList.propTypes = {
   activePage: PropTypes.number.isRequired,
   pagingLimit: PropTypes.number,
   onClickInvoked: PropTypes.func,
-  toggleCheckBox: PropTypes.func.isRequired,
+  onChangedInvoked: PropTypes.func,
   onPagingNumberChanged: PropTypes.func,
 };
 

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

@@ -5,36 +5,22 @@ import { DevidedPagePath } from '@growi/core';
 
 import loggerFactory from '~/utils/logger';
 
+import { ISearchedPage } from '../../interfaces/page';
+
 const logger = loggerFactory('growi:searchResultList');
 
 type Props ={
-  page: {
-    _id: string,
-    path: string,
-    noLink: boolean,
-    lastUpdateUser: any
-    elasticSearchResult: {
-      snippet: string,
-    }
-  },
+  page: ISearchedPage,
   isSelected: boolean,
   onClickInvoked?: (data: string) => void,
-  toggleCheckBox: (page: {
-    _id: string,
-    path: string,
-    noLink: boolean,
-    lastUpdateUser: any
-    elasticSearchResult: {
-      snippet: string,
-    }
-  }) => void,
+  onChangedInvoked: (page: ISearchedPage) => void,
 }
 
 const SearchResultListItem: FC<Props> = (props:Props) => {
 
-  const { page, onClickInvoked } = props;
-  const { page, onClickInvoked, toggleCheckBox } = props;
-  const { page, isSelected, onClickInvoked, toggleCheckBox } = props;
+  const {
+    page, isSelected, onClickInvoked, onChangedInvoked,
+  } = 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}`;
@@ -68,7 +54,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
               className="form-check-input my-auto"
               type="checkbox"
               id="flexCheckDefault"
-              onClick={() => { toggleCheckBox(page) }}
+              onClick={() => { onChangedInvoked(page) }}
             />
           </div>
           <div className="w-100">

packages/app/src/interfaces/page.ts

@@ -12,3 +12,12 @@ export type IPage = {
   updatedAt: Date,
   seenUsers: string[]
 }
+
+export type ISearchedPage = IPage & {
+  _id: string,
+  noLink: boolean,
+  lastUpdateUser: any,
+  elasticSearchResult: {
+    snippet: string,
+  }
+}