chore: show proper plural word in button- Remove 'Editions', 'Works'

metabrainz · Jun 29, 2020 · 089c4dd · 089c4dd
1 parent 6ca917a
commit 089c4dd
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 18 deletions.
diff --git a/src/client/components/pages/collection.js b/src/client/components/pages/collection.js
@@ -35,6 +35,14 @@ function getEntityTable(entityType) {
 	return tables[entityType];
 }
 
+function getEntityKey(entityType) {
+	const keys = {
+		Edition: 'editions',
+		Work: 'works'
+	};
+	return keys[entityType];
+}
+
 class CollectionPage extends React.Component {
 	constructor(props) {
 		super(props);
@@ -47,6 +55,8 @@ class CollectionPage extends React.Component {
 		this.handleRemoveEntities = this.handleRemoveEntities.bind(this);
 	}
 
+	entityKey = getEntityKey(this.props.collection.entityType);
+
 	toggleRow(bbid) {
 		// eslint-disable-next-line react/no-access-state-in-setstate
 		const oldSelected = this.state.selectedEntities;
@@ -75,14 +85,21 @@ class CollectionPage extends React.Component {
 				});
 		}
 		else {
-			this.setState({error: 'No Editions Selected'});
+			this.setState({error: `No ${this.entityKey} selected`});
 		}
 	}
 
 	render() {
 		const errorComponent = this.state.error ?
 			<Alert bsStyle="danger">{this.state.error}</Alert> : null;
 		const EntityTable = getEntityTable(this.props.collection.entityType);
+		const propsForTable = {
+			[this.entityKey]: this.props.entities,
+			selectedEntities: this.state.selectedEntities,
+			showAdd: false,
+			showCheckboxes: this.props.showCheckboxes,
+			toggleRow: this.toggleRow
+		};
 		return (
 			<div>
 				<Row className="entity-display-background">
@@ -112,13 +129,7 @@ class CollectionPage extends React.Component {
 						}
 					</div>
 				</Row>
-				<EntityTable
-					entities={this.props.entities}
-					selectedEntities={this.state.selectedEntities}
-					showAdd={false}
-					showCheckboxes={this.props.showCheckboxes}
-					toggleRow={this.toggleRow}
-				/>
+				<EntityTable{...propsForTable}/>
 				{errorComponent}
 				{
 					this.props.showCheckboxes ?
@@ -128,7 +139,7 @@ class CollectionPage extends React.Component {
 							onClick={this.handleRemoveEntities}
 						>
 							<FontAwesomeIcon icon="times"/>
-							&nbsp;Remove Selected Editions
+							&nbsp;Remove selected {this.entityKey}
 						</Button> : null
 				}
 			</div>

diff --git a/src/client/components/pages/entities/edition-table.js b/src/client/components/pages/entities/edition-table.js
@@ -87,9 +87,8 @@ EditionTableRow.defaultProps = {
 	toggleRow: null
 };
 
-function EditionTable({entities, entity, showAdd, showCheckboxes, selectedEntities, toggleRow}) {
+function EditionTable({editions, entity, showAdd, showCheckboxes, selectedEntities, toggleRow}) {
 	let tableContent;
-	const editions = entities;
 	if (editions.length) {
 		tableContent = (
 			<React.Fragment>
@@ -167,7 +166,7 @@ function EditionTable({entities, entity, showAdd, showCheckboxes, selectedEntiti
 }
 EditionTable.displayName = 'EditionTable';
 EditionTable.propTypes = {
-	entities: PropTypes.array.isRequired,
+	editions: PropTypes.array.isRequired,
 	entity: PropTypes.object,
 	selectedEntities: PropTypes.array,
 	showAdd: PropTypes.bool,

diff --git a/src/client/components/pages/entities/edition.js b/src/client/components/pages/entities/edition.js
@@ -142,8 +142,8 @@ function EditionDisplayPage({entity, identifierTypes}) {
 			{!entity.deleted &&
 			<React.Fragment>
 				<WorksTable
-					entities={worksContainedByEdition}
 					entity={entity}
+					works={worksContainedByEdition}
 				/>
 				<EntityLinks
 					entity={entity}

diff --git a/src/client/components/pages/entities/work-table.js b/src/client/components/pages/entities/work-table.js
@@ -69,9 +69,8 @@ WorkTableRow.defaultProps = {
 	toggleRow: null
 };
 
-function WorkTable({entity, entities, showAdd, showCheckboxes, selectedEntities, toggleRow}) {
+function WorkTable({entity, works, showAdd, showCheckboxes, selectedEntities, toggleRow}) {
 	let tableContent;
-	const works = entities;
 	if (works.length) {
 		tableContent = (
 			<React.Fragment>
@@ -146,12 +145,12 @@ function WorkTable({entity, entities, showAdd, showCheckboxes, selectedEntities,
 }
 WorkTable.displayName = 'WorkTable';
 WorkTable.propTypes = {
-	entities: PropTypes.array.isRequired,
 	entity: PropTypes.object,
 	selectedEntities: PropTypes.array,
 	showAdd: PropTypes.bool,
 	showCheckboxes: PropTypes.bool,
-	toggleRow: PropTypes.func
+	toggleRow: PropTypes.func,
+	works: PropTypes.array.isRequired
 };
 WorkTable.defaultProps = {
 	entity: null,

diff --git a/src/client/components/pages/entities/work.js b/src/client/components/pages/entities/work.js
@@ -94,7 +94,7 @@ function WorkDisplayPage({entity, identifierTypes}) {
 			{!entity.deleted &&
 			<React.Fragment>
 				<EditionTable
-					entities={editionsContainWork}
+					editions={editionsContainWork}
 					entity={entity}
 				/>
 				<EntityLinks