Pagination component

scripts/build-client-js.sh

@@ -13,6 +13,7 @@ cross-env BABEL_ENV="browser" browserify -t [babelify] \
 		revision.js \
 		search.js \
 		statistics.js \
+		recent-imports.js \
 	-p [ factor-bundle \
 		-o ../../../static/js/entity-editor.js \
 		-o ../../../static/js/editor/edit.js \
@@ -25,5 +26,6 @@ cross-env BABEL_ENV="browser" browserify -t [babelify] \
 		-o ../../../static/js/revision.js \
 		-o ../../../static/js/search.js \
 		-o ../../../static/js/statistics.js \
+		-o ../../../static/js/recent-imports.js \
 	] > ../../../static/js/bundle.js
 popd

scripts/watch-client-js.sh

@@ -13,6 +13,7 @@ cross-env BABEL_ENV="browser" watchify -t [babelify] \
 		revision.js \
 		search.js \
 		statistics.js \
+		recent-imports.js \
 	-p [ factor-bundle \
 		-o ../../../static/js/entity-editor.js \
 		-o ../../../static/js/editor/edit.js \
@@ -25,5 +26,6 @@ cross-env BABEL_ENV="browser" watchify -t [babelify] \
 		-o ../../../static/js/revision.js \
 		-o ../../../static/js/search.js \
 		-o ../../../static/js/statistics.js \
+		-o ../../../static/js/recent-imports.js \
 	] -o ../../../static/js/bundle.js -dv
 popd

src/client/components/pages/parts/pagination-component.js

@@ -0,0 +1,134 @@
+/*
+ * Copyright (C) 2018 Shivam Tripathi
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, write to the Free Software Foundation, Inc.,
+ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+ */
+
+import * as bootstrap from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import React from 'react';
+import _ from 'lodash';
+
+
+const {Pagination, Button} = bootstrap;
+const {Item} = Pagination;
+
+function getPaginationItem({
+	active,
+	content,
+	handleClick,
+	link,
+	pageNumber
+}) {
+	function onClick() {
+		handleClick(pageNumber);
+	}
+	return (
+		<Item
+			active={active}
+			href={link}
+			key={content}
+			onClick={onClick}
+		>
+			{content}
+		</Item>
+	);
+}
+
+getPaginationItem.propTypes = {
+	active: PropTypes.bool.isRequired,
+	content: PropTypes.string.isRequired,
+	handleClick: PropTypes.func.isRequired,
+	link: PropTypes.string.isRequired,
+	pageNumber: PropTypes.number.isRequired
+};
+
+function PaginationComponent({
+	currentPage,
+	firstPage,
+	lastPage,
+	linkGenerator,
+	hasPreviousPage,
+	previousPage,
+	hasNextPage,
+	nextPage,
+	hasBeginningPage,
+	beginningPage,
+	hasEndPage,
+	endPage,
+	handleClick
+}) {
+	const items = [];
+	if (hasBeginningPage) {
+		const link = linkGenerator(beginningPage);
+		items.push(getPaginationItem(
+			{active: false, content: '<<', handleClick, link,
+				pageNumber: beginningPage}
+		));
+	}
+
+	if (hasPreviousPage) {
+		items.push(getPaginationItem(
+			{active: false, content: '<', handleClick,
+				link: linkGenerator(previousPage), pageNumber: previousPage}
+		));
+	}
+	_.range(firstPage, lastPage).forEach(pageNumber => {
+		const active = pageNumber === currentPage;
+		items.push(getPaginationItem(
+			{active, content: pageNumber.toString(), handleClick,
+				link: linkGenerator(pageNumber), pageNumber}
+		));
+	});
+
+	if (hasNextPage) {
+		items.push(getPaginationItem(
+			{active: false, content: '>', handleClick,
+				link: linkGenerator(nextPage), pageNumber: nextPage}
+		));
+	}
+
+	if (hasEndPage) {
+		items.push(getPaginationItem(
+			{active: false, content: '>>', handleClick,
+				link: linkGenerator(endPage), pageNumber: endPage}
+		));
+	}
+
+	return <Pagination bsSize="medium"> {items} </Pagination>;
+}
+
+PaginationComponent.displayName = 'PaginationComponent';
+PaginationComponent.propTypes = {
+	beginningPage: PropTypes.number.isRequired,
+	currentPage: PropTypes.number.isRequired,
+	endPage: PropTypes.number.isRequired,
+	firstPage: PropTypes.number.isRequired,
+	handleClick: PropTypes.func.isRequired,
+	hasBeginningPage: PropTypes.bool.isRequired,
+	hasEndPage: PropTypes.bool.isRequired,
+	hasNextPage: PropTypes.bool.isRequired,
+	hasPreviousPage: PropTypes.bool.isRequired,
+	lastPage: PropTypes.number.isRequired,
+	linkGenerator: PropTypes.func,
+	nextPage: PropTypes.number.isRequired,
+	previousPage: PropTypes.number.isRequired
+};
+
+PaginationComponent.defaultProps = {
+	linkGenerator: () => '#'
+};
+
+export default PaginationComponent;

src/client/components/pages/parts/recent-import-results.js

@@ -0,0 +1,87 @@
+/*
+ * Copyright (C) 2018 Shivam Tripathi
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, write to the Free Software Foundation, Inc.,
+ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+ */
+
+import * as bootstrap from 'react-bootstrap';
+import * as utilsHelper from '../../../helpers/utils';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+
+const {formatDate, getImportUrl} = utilsHelper;
+const {Table} = bootstrap;
+
+/**
+ * Renders the document and displays the recentImports table.
+ * @returns {ReactElement} a HTML document which displays the recentImports
+ */
+
+function RecentImportsTable(props) {
+	const {offset, recentImports} = props;
+	return (
+		<div>
+			<div> <h2 className="text-center">Click to review them!</h2> </div>
+			<Table
+				bordered
+				condensed
+				striped
+			>
+				<thead>
+					<tr>
+						<th >#</th>
+						<th>Name</th>
+						<th>Type</th>
+						<th>Date Added</th>
+						<th>Source</th>
+					</tr>
+				</thead>
+				<tbody>
+					{
+						recentImports.map((imports, i) => {
+							const type = imports.type.toLowerCase();
+							const {import_id: id, importedAt} = imports;
+							return (
+								<tr key={id}>
+									<td>{i + 1 + offset}</td>
+									<td>
+										<a	href={getImportUrl(type, id)}>
+											{imports.defaultAlias.name}
+										</a>
+									</td>
+									<td>{imports.type}</td>
+									<td>
+										{formatDate(new Date(importedAt))}
+									</td>
+									<td>
+										{imports.source}
+									</td>
+								</tr>
+							);
+						})
+					}
+				</tbody>
+			</Table>
+		</div>
+	);
+}
+
+RecentImportsTable.propTypes = {
+	offset: PropTypes.number.isRequired,
+	recentImports: PropTypes.array.isRequired
+};
+
+export default RecentImportsTable;

src/client/components/pages/recent-imports.js

@@ -0,0 +1,106 @@
+import * as bootstrap from 'react-bootstrap';
+import PaginationProps from '../../helpers/pagination-props';
+import PropTypes from 'prop-types';
+import React from 'react';
+import RecentImportsTable from './parts/recent-import-results';
+import request from 'superagent-bluebird-promise';
+
+
+const {PageHeader, Pagination} = bootstrap;
+
+class RecentImports extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.paginationPropsGenerator = PaginationProps({
+			displayedPagesRange: 10,
+			itemsPerPage: props.limit
+		});
+
+		this.state = {
+			currentPage: props.currentPage,
+			offset: 0,
+			paginationProps: {
+				hasBeginningPage: false,
+				hasEndPage: false,
+				hasNextPage: false,
+				hasPreviousPage: false,
+				totalPages: 0
+			},
+			recentImports: []
+		};
+
+		this.handleClick = this.handleClick.bind(this);
+		this.handleCb = this.handleCb.bind(this);
+	}
+
+	componentDidMount() {
+		this.handleClick(this.state.currentPage);
+	}
+
+	componentDidUpdate() {
+		window.history.replaceState(
+			null, null, `?page=${this.state.currentPage}`
+		);
+	}
+
+	async handleClick(pageNumber) {
+		const {currentPage, limit, offset, totalResults, recentImports} =
+			await request.get(`/imports/recent/raw?page=${pageNumber}`)
+				.then((res) => JSON.parse(res.text));
+
+		const paginationProps = this.paginationPropsGenerator(
+			totalResults, currentPage
+		);
+
+		this.setState({
+			currentPage, limit, offset, paginationProps, recentImports,
+			totalResults
+		});
+	}
+
+	handleCb() {
+		this.handleClick(this.state.currentPage + 1);
+	}
+
+	render() {
+		const {currentPage, limit, totalResults, paginationProps} = this.state;
+		return (
+			<div>
+				<PageHeader>Recent Imports</PageHeader>
+				<h4> The following data has been imported recently. </h4>
+				<RecentImportsTable
+					offset={this.state.offset}
+					recentImports={this.state.recentImports}
+				/>
+				<p> {`Displaying ${limit} of ${totalResults} results`} </p>
+				<Pagination
+					boundaryLinks
+					ellipsis
+					activePage={currentPage}
+					className={paginationProps.totalPages === 0 ?
+						'hidden' : 'shown'}
+					first={paginationProps.hasBeginningPage}
+					items={paginationProps.totalPages}
+					last={paginationProps.hasEndPage}
+					next={paginationProps.hasNextPage}
+					prev={paginationProps.hasPreviousPage}
+					onSelect={this.handleClick}
+				/>
+			</div>
+		);
+	}
+}
+
+RecentImports.displayName = 'RecentImports';
+RecentImports.propTypes = {
+	currentPage: PropTypes.number,
+	limit: PropTypes.number
+};
+RecentImports.defaultProps = {
+	currentPage: 1,
+	limit: 10
+};
+
+export default RecentImports;
+

src/client/containers/layout.js

@@ -140,6 +140,12 @@ class Layout extends React.Component {
 						{' Statistics '}
 					</NavItem>
 				</Nav>
+				<Nav pullRight>
+					<NavItem href="/imports/recent">
+						<FontAwesome name="user-check"/>
+						{' Review recent imports '}
+					</NavItem>
+				</Nav>
 				{!(homepage || hideSearch) &&
 				<form
 					action="/search"