[Code] pagination for history

elastic · Apr 18, 2019 · 41a392f · 41a392f
1 parent fad5a41
commit 41a392f
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 55 deletions.
diff --git a/x-pack/package.json b/x-pack/package.json
@@ -78,7 +78,6 @@
     "@types/proper-lockfile": "^3.0.0",
     "@types/react": "^16.8.0",
     "@types/react-dom": "^16.8.0",
-    "@types/react-infinite-scroller": "^1.2.0",
     "@types/react-redux": "^6.0.6",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-test-renderer": "^16.8.0",
@@ -288,7 +287,6 @@
     "react-dom": "^16.8.0",
     "react-dropzone": "^4.2.9",
     "react-fast-compare": "^2.0.4",
-    "react-infinite-scroller": "^1.2.4",
     "react-markdown": "^3.4.1",
     "react-markdown-renderer": "^1.4.0",
     "react-portal": "^3.2.0",

diff --git a/x-pack/plugins/code/public/components/main/commit_history.tsx b/x-pack/plugins/code/public/components/main/commit_history.tsx
@@ -5,6 +5,7 @@
  */
 
 import {
+  EuiButton,
   EuiFlexGroup,
   EuiFlexItem,
   EuiLoadingSpinner,
@@ -15,8 +16,13 @@ import {
 import _ from 'lodash';
 import moment from 'moment';
 import React from 'react';
+import styled from 'styled-components';
+import { connect } from 'react-redux';
 import { CommitInfo } from '../../../model/commit';
 import { CommitLink } from '../diff_page/commit_link';
+import { RootState } from '../../reducers';
+import { hasMoreCommitsSelector, treeCommitsSelector } from '../../selectors';
+import { fetchMoreCommits } from '../../actions';
 
 const COMMIT_ID_LENGTH = 8;
 
@@ -75,20 +81,29 @@ export const CommitHistoryLoading = () => (
   </div>
 );
 
-export const CommitHistory = (props: {
+export const PageButtons = (props: { loading: boolean; disabled: boolean; onClick: () => void }) => (
+  <EuiFlexGroup justifyContent="spaceAround">
+    <EuiFlexItem grow={false}>
+      <EuiButton onClick={props.onClick} iconType="arrowDown"
+        isLoading={props.loading}
+        isDisabled={props.disabled}
+        size="s"
+      >
+        More
+      </EuiButton>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);
+
+export const CommitHistoryComponent = (props: {
   commits: CommitInfo[];
   repoUri: string;
   header: React.ReactNode;
-  hideLoading?: boolean;
+  loadingCommits?: boolean;
+  showPagination?: boolean;
+  hasMoreCommit?: boolean;
+  fetchMoreCommits: any;
 }) => {
-  if (!props.commits) {
-    return (
-      <div className="codeContainer__commitMessages">
-        <h1>Commits</h1>
-        {!props.hideLoading && <CommitHistoryLoading />}
-      </div>
-    );
-  }
   const commits = _.groupBy(props.commits, commit => moment(commit.updated).format('YYYYMMDD'));
   const commitDates = Object.keys(commits).sort((a, b) => b.localeCompare(a)); // sort desc
   const commitList = commitDates.map(cd => (
@@ -103,6 +118,30 @@ export const CommitHistory = (props: {
     <div className="codeContainer__commitMessages">
       <div className="codeHeader__commit">{props.header}</div>
       {commitList}
+      {!props.showPagination && props.loadingCommits && <CommitHistoryLoading />}
+      {props.showPagination && (
+        <PageButtons
+          disabled={!props.hasMoreCommit || props.commits.length < 10}
+          onClick={() => props.fetchMoreCommits(props.repoUri)}
+          loading={props.loadingCommits}
+        />
+      )}
     </div>
   );
 };
+
+const mapStateToProps = (state: RootState) => ({
+  file: state.file.file,
+  commits: treeCommitsSelector(state) || [],
+  loadingCommits: state.file.loadingCommits,
+  hasMoreCommit: hasMoreCommitsSelector(state),
+});
+
+const mapDispatchToProps = {
+  fetchMoreCommits,
+};
+export const CommitHistory = connect(
+  mapStateToProps,
+  mapDispatchToProps
+  // @ts-ignore
+)(CommitHistoryComponent);
diff --git a/x-pack/plugins/code/public/components/main/content.tsx b/x-pack/plugins/code/public/components/main/content.tsx
@@ -7,7 +7,6 @@
 import { EuiButton, EuiButtonGroup, EuiFlexGroup, EuiTitle } from '@elastic/eui';
 import 'github-markdown-css/github-markdown.css';
 import React from 'react';
-import InfiniteScroll from 'react-infinite-scroller';
 import Markdown from 'react-markdown';
 import { connect } from 'react-redux';
 import { RouteComponentProps } from 'react-router-dom';
@@ -23,12 +22,7 @@ import {
   Repository,
 } from '../../../model';
 import { CommitInfo, ReferenceInfo } from '../../../model/commit';
-import {
-  changeSearchScope,
-  FetchFileResponse,
-  fetchMoreCommits,
-  SearchOptions,
-} from '../../actions';
+import { changeSearchScope, FetchFileResponse, SearchOptions } from '../../actions';
 import { MainRouteParams, PathTypes } from '../../common/types';
 import { RepoState, RepoStatus, RootState } from '../../reducers';
 import {
@@ -41,7 +35,7 @@ import {
 import { encodeRevisionString, history } from '../../utils/url';
 import { Editor } from '../editor/editor';
 import { CloneStatus } from './clone_status';
-import { CommitHistory, CommitHistoryLoading } from './commit_history';
+import { CommitHistory } from './commit_history';
 import { Directory } from './directory';
 import { ErrorPanel } from './error_panel';
 import { NotFound } from './not_found';
@@ -58,8 +52,8 @@ interface Props extends RouteComponentProps<MainRouteParams> {
   hasMoreCommits: boolean;
   loadingCommits: boolean;
   onSearchScopeChanged: (s: SearchScope) => void;
+  repoScope: string[];
   searchOptions: SearchOptions;
-  fetchMoreCommits(repoUri: string): void;
   currentRepository?: Repository;
 }
 const LANG_MD = 'markdown';
@@ -278,7 +272,7 @@ class CodeContent extends React.PureComponent<Props> {
       return this.renderProgress();
     }
 
-    const { file, commits, match, tree, hasMoreCommits, loadingCommits } = this.props;
+    const { file, commits, match, tree } = this.props;
     const { path, pathType, resource, org, repo, revision } = match.params;
     const repoUri = `${resource}/${org}/${repo}`;
     switch (pathType) {
@@ -362,24 +356,15 @@ class CodeContent extends React.PureComponent<Props> {
       case PathTypes.commits:
         return (
           <div className="codeContainer__history">
-            <InfiniteScroll
-              initialLoad={true}
-              loadMore={() => !loadingCommits && this.props.fetchMoreCommits(repoUri)}
-              hasMore={hasMoreCommits}
-              useWindow={false}
-              loader={<CommitHistoryLoading />}
-            >
-              <CommitHistory
-                hideLoading={true}
-                commits={commits}
-                repoUri={repoUri}
-                header={
-                  <EuiTitle className="codeMargin__title">
-                    <h3>Commit History</h3>
-                  </EuiTitle>
-                }
-              />
-            </InfiniteScroll>
+            <CommitHistory
+              repoUri={repoUri}
+              header={
+                <EuiTitle className="codeMargin__title">
+                  <h3>Commit History</h3>
+                </EuiTitle>
+              }
+              showPagination={true}
+            />
           </div>
         );
     }
@@ -401,7 +386,6 @@ const mapStateToProps = (state: RootState) => ({
 });
 
 const mapDispatchToProps = {
-  fetchMoreCommits,
   onSearchScopeChanged: changeSearchScope,
 };
 

diff --git a/yarn.lock b/yarn.lock
@@ -3403,13 +3403,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-infinite-scroller@^1.2.0":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@types/react-infinite-scroller/-/react-infinite-scroller-1.2.1.tgz#1cd747ef8f50d3c883e375c0491a906e5436fcb2"
-  integrity sha512-64bpbqdSgtmy1zSZ2AQoFzguwZO7TyKjqJRTEnfNMCAQbnrX90kz+rYufZyY9CmzhwpXMwRO8xR9fMQnbYUkgQ==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-intl@^2.3.15":
   version "2.3.17"
   resolved "https://registry.yarnpkg.com/@types/react-intl/-/react-intl-2.3.17.tgz#e1fc6e46e8af58bdef9531259d509380a8a99e8e"
@@ -21049,13 +21042,6 @@ react-hotkeys@2.0.0-pre4:
   dependencies:
     prop-types "^15.6.1"
 
-react-infinite-scroller@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.2.4.tgz#f67eaec4940a4ce6417bebdd6e3433bfc38826e9"
-  integrity sha512-/oOa0QhZjXPqaD6sictN2edFMsd3kkMiE19Vcz5JDgHpzEJVqYcmq+V3mkwO88087kvKGe1URNksHEOt839Ubw==
-  dependencies:
-    prop-types "^15.5.8"
-
 react-input-autosize@^2.1.2, react-input-autosize@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8"