fix: ItemSelector - name functions and properties consistently (#21)

BREAKING CHANGE: property names of returned objects have changed to better reflect their content.

Changes include:

name functions consitently
name returned properties according to their content

src/components/DataDimension/DataDimension.js

@@ -181,14 +181,14 @@ export class DataDimension extends Component {
  )
  }
 
- selectDataDimensions = selectedIds => {
+ selectItems = selectedIds => {
  const itemsToAdd = this.state.items.filter(di =>
  selectedIds.includes(di.id)
  )
 
  this.props.onSelect({
- dimensionType: dxId,
- value: [
+ dimensionId: dxId,
+ items: [
  ...this.props.selectedDimensions.filter(
  item => !selectedIds.includes(item.id)
  ),
@@ -197,17 +197,17 @@ export class DataDimension extends Component {
  })
  }
 
- deselectDataDimensions = ids => {
+ deselectItems = itemIdsToRemove => {
  this.props.onDeselect({
- dimensionType: dxId,
- value: ids,
+ dimensionId: dxId,
+ itemIdsToRemove,
  })
  }
 
- setUiItems = items =>
+ reorderItems = itemIds =>
  this.props.onReorder({
- dimensionType: dxId,
- items,
+ dimensionId: dxId,
+ itemIds,
  })
 
  getUnselectedItems = () =>
@@ -244,16 +244,16 @@ export class DataDimension extends Component {
 
  const unselected = {
  items: this.getUnselectedItems(),
- onSelect: this.selectDataDimensions,
+ onSelect: this.selectItems,
  filterText: this.state.filterText,
  requestMoreItems: this.requestMoreItems,
  }
 
  const selected = {
  items: this.props.selectedDimensions,
  dialogId: dxId,
- onDeselect: this.deselectDataDimensions,
- onReorder: this.setUiItems,
+ onDeselect: this.deselectItems,
+ onReorder: this.reorderItems,
  }
 
  return (

src/components/DynamicDimension/DynamicDimension.js

@@ -43,7 +43,7 @@ export class DynamicDimension extends Component {
  })
  }
 
- selectItemsByDimensions = selectedIds => {
+ selectItems = selectedIds => {
  const unselectedIds = this.state.unselectedIds.filter(
  id => !selectedIds.includes(id)
  )
@@ -54,8 +54,8 @@ export class DynamicDimension extends Component {
  )
 
  this.props.onSelect({
- dimensionType: this.props.dialogId,
- value: [
+ dimensionId: this.props.dialogId,
+ items: [
  ...this.props.selectedItems.filter(
  item => !selectedIds.includes(item.id)
  ),
@@ -64,29 +64,29 @@ export class DynamicDimension extends Component {
  })
  }
 
- deselectItemsByDimensions = ids => {
+ deselectItems = ids => {
  const unselectedIds = [
  ...new Set([...this.state.unselectedIds, ...ids]),
  ]
  this.setState({ unselectedIds })
 
  this.props.onDeselect({
- dimensionType: this.props.dialogId,
- value: ids,
+ dimensionId: this.props.dialogId,
+ itemIdsToRemove: ids,
  })
  }
 
+ reorderItems = itemIds =>
+ this.props.onReorder({
+ dimensionId: this.props.dialogId,
+ itemIds,
+ })
+
  getUnselectedItems = () =>
  this.state.items.filter(
  item => !this.props.selectedItems.find(i => i.id === item.id)
  )
 
- setUiItems = items =>
- this.props.onReorder({
- dimensionType: this.props.dialogId,
- value: items,
- })
-
  render = () => {
  const filterZone = () => {
  return (
@@ -100,15 +100,15 @@ export class DynamicDimension extends Component {
 
  const unselected = {
  items: this.getUnselectedItems(),
- onSelect: this.selectItemsByDimensions,
+ onSelect: this.selectItems,
  filterText: this.state.filterText,
  }
 
  const selected = {
  items: this.props.selectedItems,
  dialogId: this.props.dialogId,
- onDeselect: this.deselectItemsByDimensions,
- onReorder: this.setUiItems,
+ onDeselect: this.deselectItems,
+ onReorder: this.reorderItems,
  }
 
  return (

src/components/OrgUnitDimension/OrgUnitDimension.js

@@ -158,13 +158,13 @@ class OrgUnitDimension extends Component {
 
  if (selected.some(ou => ou.path === orgUnit.path)) {
  this.props.onDeselect({
- dimensionType: ouId,
- value: [orgUnit.id],
+ dimensionId: ouId,
+ itemIdsToRemove: [orgUnit.id],
  })
  } else {
  this.props.onSelect({
- dimensionType: ouId,
- value: [
+ dimensionId: ouId,
+ items: [
  ...selected,
  {
  ...orgUnit,
@@ -184,8 +184,8 @@ class OrgUnitDimension extends Component {
  }
 
  this.props.onSelect({
- dimensionType: ouId,
- value: [
+ dimensionId: ouId,
+ items: [
  ...this.props.ouItems.filter(ou =>
  this.userOrgUnitIds.includes(ou.id)
  ),
@@ -205,8 +205,8 @@ class OrgUnitDimension extends Component {
  }
 
  this.props.onDeselect({
- dimensionType: ouId,
- value: [event.target.name],
+ dimensionId: ouId,
+ items: [event.target.name],
  })
  }
  }
@@ -215,8 +215,8 @@ class OrgUnitDimension extends Component {
  const selected = this.props.ouItems
 
  this.props.onSelect({
- dimensionType: ouId,
- value: [
+ dimensionId: ouId,
+ items: [
  ...selected,
  ...orgUnits.reduce((obj, ou) => {
  // avoid duplicates when clicking "Select children" multiple times

src/components/PeriodDimension/PeriodDimension.js

@@ -12,47 +12,48 @@ const peId = FIXED_DIMENSIONS.pe.id
 const PERIOD = 'PERIOD'
 
 export class PeriodDimension extends Component {
- selectPeriods = periods => {
+ selectItems = periods => {
  const itemsToAdd = periods.reduce((array, item) => {
  array.push({ ...item, dimensionItemType: PERIOD })
  return array
  }, [])
 
  this.props.onSelect({
- dimensionType: peId,
- value: [...this.props.selectedPeriods, ...itemsToAdd],
+ dimensionId: peId,
+ items: [...this.props.selectedPeriods, ...itemsToAdd],
  })
  }
 
- deselectPeriods = periods => {
- const idsToRemove = periods.map(period => period.id)
+ deselectItems = periods => {
+ const itemIdsToRemove = periods.map(period => period.id)
 
  this.props.onDeselect({
- dimensionType: peId,
- value: idsToRemove,
+ dimensionId: peId,
+ itemIdsToRemove,
  })
  }
 
- reorderPeriods = periods => {
- const ids = periods.map(period => period.id)
+ reorderItems = periods => {
+ const itemIds = periods.map(period => period.id)
 
  this.props.onReorder({
- dimensionType: peId,
- value: ids,
+ dimensionId: peId,
+ itemIds,
  })
  }
 
  render = () => {
  const { selectedPeriods } = this.props
+ console.log('PeriodDimension render with', selectedPeriods)
 
  return (
  <Fragment>
  <DialogTitle>{i18n.t('Period')}</DialogTitle>
  <DialogContent>
  <PeriodSelector
- onSelect={this.selectPeriods}
- onDeselect={this.deselectPeriods}
- onReorder={this.reorderPeriods}
+ onSelect={this.selectItems}
+ onDeselect={this.deselectItems}
+ onReorder={this.reorderItems}
  selectedItems={selectedPeriods}
  />
  </DialogContent>