Skip to content

Commit

Permalink
refactor: extract and reuse render functions for various sections
Browse files Browse the repository at this point in the history 
Reduces code duplication.
  • Loading branch information
@edoardo
edoardo committed Dec 3, 2024
1 parent 28a62e6 commit ae28856
Show file tree
Hide file tree
Showing 6 changed files with 159 additions and 162 deletions.
89 changes: 38 additions & 51 deletions src/components/DataDimension/Info/DataElementInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@ import PropTypes from 'prop-types'
import React from 'react'
import i18n from '../../../locales/index.js'
import { valueTypeDisplayNames } from '../../../modules/valueTypes.js'
import { getCommonFields, InfoTable } from './InfoTable.js'
import {
getCommonFields,
renderDataSets,
renderLegendSets,
renderGroupMemberships,
InfoTable,
} from './InfoTable.js'
import styles from './styles/InfoPopover.style.js'

const dataElementQuery = {
Expand All @@ -29,20 +35,12 @@ export const DataElementInfo = ({ id, displayNameProp }) => {
<tr>
<th>{i18n.t('Data set(s)')}</th>
<td>
{data?.dataElement.dataSetElements.length === 1 ? (
data.dataElement.dataSetElements[0].dataSet
.displayName
) : (
<ul>
{data?.dataElement.dataSetElements.map(
({ dataSet }) => (
<li key={dataSet.id}>
{dataSet.displayName}
</li>
)
)}
</ul>
)}
{data?.dataElement.dataSetElements &&
renderDataSets(
data.dataElement.dataSetElements.map(
({ dataSet }) => dataSet
)
)}
</td>
</tr>
<tr>
Expand All @@ -66,18 +64,26 @@ export const DataElementInfo = ({ id, displayNameProp }) => {
<tr>
<th>{i18n.t('Category combo')}</th>
<td>
<details>
<summary>
{data?.dataElement.categoryCombo.displayName}
</summary>
<ul>
{data?.dataElement.categoryCombo.categories.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
</details>
{data?.dataElement.categoryCombo.displayName ===
'default' ? (
<span className="none">{i18n.t('None')}</span>
) : (
<details>
<summary>
{
data?.dataElement.categoryCombo
.displayName
}
</summary>
<ul>
{data?.dataElement.categoryCombo.categories.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
</details>
)}
</td>
</tr>
{data?.dataElement.optionSet && (
Expand All @@ -89,35 +95,16 @@ export const DataElementInfo = ({ id, displayNameProp }) => {
<tr>
<th>{i18n.t('Group membership')}</th>
<td>
{data?.dataElement.dataElementGroups.length === 1 ? (
data.dataElement.dataElementGroups[0].displayName
) : (
<ul>
{data?.dataElement.dataElementGroups.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
)}
{data?.dataElement.dataElementGroups &&
renderGroupMemberships(
data.dataElement.dataElementGroups
)}
</td>
</tr>
{Boolean(data?.dataElement.legendSets.length) && (
<tr>
<th>{i18n.t('Legend set(s)')}</th>
<td>
{data.dataElement.legendSets.length === 1 ? (
data.dataElement.legendSets[0].displayName
) : (
<ul>
{data.dataElement.legendSets.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
)}
</td>
<td>{renderLegendSets(data.dataElement.legendSets)}</td>
</tr>
)}
</InfoTable>
Expand Down
97 changes: 41 additions & 56 deletions src/components/DataDimension/Info/DataElementOperandInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@ import PropTypes from 'prop-types'
import React, { useCallback, useEffect, useState } from 'react'
import i18n from '../../../locales/index.js'
import { valueTypeDisplayNames } from '../../../modules/valueTypes.js'
import { getCommonFields, InfoTable } from './InfoTable.js'
import {
getCommonFields,
renderDataSets,
renderGroupMemberships,
renderLegendSets,
InfoTable,
} from './InfoTable.js'
import styles from './styles/InfoPopover.style.js'

const dataElementOperandsQuery = {
Expand Down Expand Up @@ -81,21 +87,12 @@ export const DataElementOperandInfo = ({ id, displayNameProp }) => {
<tr>
<th>{i18n.t('Data set(s)')}</th>
<td>
{data?.dataElementOperand.dataElement.dataSetElements
.length === 1 ? (
data.dataElementOperand.dataElement
.dataSetElements[0].dataSet.displayName
) : (
<ul>
{data?.dataElementOperand.dataElement.dataSetElements.map(
({ dataSet }) => (
<li key={dataSet.id}>
{dataSet.displayName}
</li>
)
)}
</ul>
)}
{data?.dataElementOperand.dataElement.dataSetElements &&
renderDataSets(
data.dataElementOperand.dataElement.dataSetElements.map(
({ dataSet }) => dataSet
)
)}
</td>
</tr>
<tr>
Expand Down Expand Up @@ -125,21 +122,26 @@ export const DataElementOperandInfo = ({ id, displayNameProp }) => {
<tr>
<th>{i18n.t('Category combo')}</th>
<td>
<details>
<summary>
{
data?.dataElementOperand.dataElement
.categoryCombo.displayName
}
</summary>
<ul>
{data?.dataElementOperand.dataElement.categoryCombo.categories.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
</details>
{data?.dataElementOperand.dataElement.categoryCombo
.displayName === 'default' ? (
<span className="none">{i18n.t('None')}</span>
) : (
<details>
<summary>
{
data?.dataElementOperand.dataElement
.categoryCombo.displayName
}
</summary>
<ul>
{data?.dataElementOperand.dataElement.categoryCombo.categories.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
</details>
)}
</td>
</tr>
{data?.dataElementOperand.dataElement.optionSet && (
Expand All @@ -156,19 +158,12 @@ export const DataElementOperandInfo = ({ id, displayNameProp }) => {
<tr>
<th>{i18n.t('Group membership')}</th>
<td>
{data?.dataElementOperand.dataElement.dataElementGroups
.length === 1 ? (
data.dataElementOperand.dataElement
.dataElementGroups[0].displayName
) : (
<ul>
{data?.dataElementOperand.dataElement.dataElementGroups.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
)}
{data?.dataElementOperand.dataElement
.dataElementGroups &&
renderGroupMemberships(
data.dataElementOperand.dataElement
.dataElementGroups
)}
</td>
</tr>
{Boolean(
Expand All @@ -177,18 +172,8 @@ export const DataElementOperandInfo = ({ id, displayNameProp }) => {
<tr>
<th>{i18n.t('Legend set(s)')}</th>
<td>
{data.dataElementOperand.dataElement.legendSets
.length === 1 ? (
data.dataElementOperand.dataElement
.legendSets[0].displayName
) : (
<ul>
{data.dataElementOperand.dataElement.legendSets.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
{renderLegendSets(
data.dataElementOperand.dataElement.legendSets
)}
</td>
</tr>
Expand Down
16 changes: 2 additions & 14 deletions src/components/DataDimension/Info/EventDataItemInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React from 'react'
import i18n from '../../../locales/index.js'
import { DIMENSION_TYPE_PROGRAM_DATA_ELEMENT } from '../../../modules/dataTypes.js'
import { valueTypeDisplayNames } from '../../../modules/valueTypes.js'
import { getCommonFields, InfoTable } from './InfoTable.js'
import { getCommonFields, renderLegendSets, InfoTable } from './InfoTable.js'
import styles from './styles/InfoPopover.style.js'

const programDataElementQuery = {
Expand Down Expand Up @@ -66,19 +66,7 @@ export const EventDataItemInfo = ({ type, id, displayNameProp }) => {
{Boolean(data?.legendSets.length) && (
<tr>
<th>{i18n.t('Legend set(s)')}</th>
<td>
{data.legendSets.length === 1 ? (
data.legendSets[0].displayName
) : (
<ul>
{data.legendSets.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
)}
</td>
<td>{renderLegendSets(data.legendSets)}</td>
</tr>
)}
</InfoTable>
Expand Down
35 changes: 7 additions & 28 deletions src/components/DataDimension/Info/IndicatorInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import { validateIndicatorExpressionMutation } from '../../../api/expression.js'
import i18n from '../../../locales/index.js'
import {
getCommonFields,
renderGroupMemberships,
renderHumanReadableExpression,
renderLegendSets,
InfoTable,
} from './InfoTable.js'
import styles from './styles/InfoPopover.style.js'
Expand Down Expand Up @@ -156,39 +158,16 @@ export const IndicatorInfo = ({ id, displayNameProp }) => {
<tr>
<th>{i18n.t('Group membership')}</th>
<td>
{data?.indicator.indicatorGroups.length === 1 ? (
data.indicator.indicatorGroups[0].displayName
) : (
<div className="content-wrap">
<ul>
{data?.indicator.indicatorGroups.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
</div>
)}
{data?.indicator.indicatorGroups &&
renderGroupMemberships(
data.indicator.indicatorGroups
)}
</td>
</tr>
{Boolean(data?.indicator.legendSets.length) && (
<tr>
<th>{i18n.t('Legend set(s)')}</th>
<td>
{data.indicator.legendSets.length === 1 ? (
data.indicator.legendSets[0].displayName
) : (
<div className="content-wrap">
<ul>
{data.indicator.legendSets.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
</div>
)}
</td>
<td>{renderLegendSets(data.indicator.legendSets)}</td>
</tr>
)}
</InfoTable>
Expand Down
Loading

0 comments on commit ae28856

Please sign in to comment.