Skip to content

Commit

Permalink
refactor: switch DataUsePill to JSX
Browse files Browse the repository at this point in the history
  • Loading branch information
fboulnois committed Jan 23, 2024
1 parent f4515b2 commit a571fb1
Showing 1 changed file with 27 additions and 18 deletions.
45 changes: 27 additions & 18 deletions src/components/collection_voting_slab/DataUsePill.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {div, h3, span} from 'react-hyperscript-helpers';
import React from 'react';
import {isNil} from 'lodash';
import { ControlledAccessType } from '../../libs/dataUseTranslation';

Expand Down Expand Up @@ -31,25 +31,34 @@ const styles = {
}
};

export const DataUsePill = (props) => {
const { dataUse, key } = props;

export function DataUsePill(props) {
const {dataUse, key} = props;

return div({key: `data_use_pill_${dataUse.type}_${dataUse.code}_${key}`, style: styles.baseStyle}, [
span({ style: styles.code }, !isNil(dataUse) ? [dataUse.code] : []),
span({ style: styles.description }, !isNil(dataUse) ? [dataUse.description] : [])
]);
}
return (
<div key={`data_use_pill_${dataUse.type}_${dataUse.code}_${key}`} style={styles.baseStyle}>
<span style={styles.code}>{!isNil(dataUse) ? [dataUse.code] : []}</span>
<span style={styles.description}>{!isNil(dataUse) ? [dataUse.description] : []}</span>
</div>
);
};

export function DataUsePills(dataUses){
export const DataUsePills = (dataUses) => {
const permissionsUses = dataUses.filter(dataUse => dataUse.type === ControlledAccessType.permissions);
const modifierUses = dataUses.filter(dataUse => dataUse.type === ControlledAccessType.modifiers);
return(
div([permissionsUses.map((dataUse, idx)=>{return DataUsePill({dataUse, key: `${dataUse.code}-${idx}`});}),
div({isRendered: modifierUses.length > 0},[
h3({style: styles.subheading}, ControlledAccessType.modifiers),
modifierUses.map((dataUse,idx)=>{return DataUsePill({dataUse, key: `${dataUse.code}-${idx}`});})
])
])

return (
<div>
{permissionsUses.map((dataUse, idx) => (
<DataUsePill dataUse={dataUse} key={`${dataUse.code}-${idx}`} />
))}
{modifierUses.length > 0 && (
<div>
<h3 style={styles.subheading}>{ControlledAccessType.modifiers}</h3>
{modifierUses.map((dataUse, idx) => (
<DataUsePill dataUse={dataUse} key={`${dataUse.code}-${idx}`} />
))}
</div>
)}
</div>
);
}
};

0 comments on commit a571fb1

Please sign in to comment.