From 41a392fb2faecdb646ecad6fb620270fbfb2462a Mon Sep 17 00:00:00 2001 From: spacedragon Date: Tue, 16 Apr 2019 20:58:49 -0700 Subject: [PATCH] [Code] pagination for history --- x-pack/package.json | 2 - .../public/components/main/commit_history.tsx | 59 +++++++++++++++---- .../code/public/components/main/content.tsx | 42 ++++--------- yarn.lock | 14 ----- 4 files changed, 62 insertions(+), 55 deletions(-) diff --git a/x-pack/package.json b/x-pack/package.json index 36fca944ad3e70f..15885797ce08509 100644 --- 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 index cfe26c281a844ca..e253023393cdcd5 100644 --- 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 = () => ( ); -export const CommitHistory = (props: { +export const PageButtons = (props: { loading: boolean; disabled: boolean; onClick: () => void }) => ( + + + + More + + + +); + +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 ( -
-

Commits

- {!props.hideLoading && } -
- ); - } 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: {
{props.header}
{commitList} + {!props.showPagination && props.loadingCommits && } + {props.showPagination && ( + props.fetchMoreCommits(props.repoUri)} + loading={props.loadingCommits} + /> + )}
); }; + +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 index c9b0c9c3323c2b5..b34fdaf0dcd6e90 100644 --- 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 { 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 { 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 { case PathTypes.commits: return (
- !loadingCommits && this.props.fetchMoreCommits(repoUri)} - hasMore={hasMoreCommits} - useWindow={false} - loader={} - > - -

Commit History

- - } - /> - + +

Commit History

+ + } + showPagination={true} + />
); } @@ -401,7 +386,6 @@ const mapStateToProps = (state: RootState) => ({ }); const mapDispatchToProps = { - fetchMoreCommits, onSearchScopeChanged: changeSearchScope, }; diff --git a/yarn.lock b/yarn.lock index d55a687b621f1f5..51ccb20e5579d7a 100644 --- 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"