Skip to content

Commit

Permalink
dropdowns: fix missalignment
Browse files Browse the repository at this point in the history
  • Loading branch information
jrcastro2 authored and kpsherva committed Jun 7, 2022
1 parent 74a060e commit 70e516a
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 35 deletions.
65 changes: 36 additions & 29 deletions src/lib/components/Funding/FunderDropdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,62 +11,68 @@ import { Dropdown } from 'semantic-ui-react';
import { withState } from 'react-searchkit';
import { i18next } from '@translations/i18next';

export const FunderDropdown = withState(({ currentResultsState: awardsList, updateQueryState: updateQueryState, currentQueryState: currentQueryState }) => {
export const FunderDropdown = withState(
({
currentResultsState: awardsList,
updateQueryState: updateQueryState,
currentQueryState: currentQueryState,
}) => {
const [fundersFromFacets] = useFundersFromFacets(awardsList);

/**
* Trigger on funder selection.
* Updated the query state to filter by the selected funder.
*
* @param {*} event
* @param {*} data
*
* @param {*} event
* @param {*} data
*/
function onFunderSelect(event, data) {
let newFilter = [];
if (data && data.value !== "") {
newFilter = ['funders', data.value]

if (data && data.value !== '') {
newFilter = ['funders', data.value];
}
updateQueryState({...currentQueryState, filters: newFilter, page: 1 });
updateQueryState({ ...currentQueryState, filters: newFilter, page: 1 });
}

/**
* Custom hook, triggered when the awards list changes.
* It retrieves funders from new award's facets.
*
* @param {object} awards
*
*
* @param {object} awards
*
* @returns {object[]} an array of objects, each representing a facetted funder.
*/
function useFundersFromFacets(awards) {
const [result, setResult] = React.useState([]);
React.useEffect(() => {

/**
* Retrieves funders from awards facets and sets the result in state 'result'.
*/
* Retrieves funders from awards facets and sets the result in state 'result'.
*/
function getFundersFromAwardsFacet() {
if (awards.loading) {
setResult([]);
return;
}

const funders = awards.data.aggregations?.funders?.buckets.map((agg) => {
return {
key: agg.key,
value: agg.key,
text: agg.label
};
})

const funders = awards.data.aggregations?.funders?.buckets.map(
(agg) => {
return {
key: agg.key,
value: agg.key,
text: agg.label,
};
}
);
setResult(funders);
}

getFundersFromAwardsFacet();
}, [awards]);

return [result];
}

return (
<Dropdown
placeholder={i18next.t('Funder')}
Expand All @@ -82,5 +88,6 @@ export const FunderDropdown = withState(({ currentResultsState: awardsList, upda
selectOnBlur={false}
selectOnNavigation={false}
/>
)
});
);
}
);
14 changes: 9 additions & 5 deletions src/lib/components/Funding/FundingModal.js
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ function FundingModal({
open={open}
trigger={React.cloneElement(trigger, {
'aria-expanded': open,
'aria-haspopup': "dialog"
'aria-haspopup': 'dialog',
})}
onClose={closeModal}
closeIcon
Expand All @@ -169,15 +169,15 @@ function FundingModal({
urlHandlerApi={{ enabled: false }}
initialQueryState={searchConfig.initialQueryState}
>
<Grid>
<Grid className="m-0">
<Grid.Row>
<Grid.Column
width={11}
floated="left"
verticalAlign="middle"
>
<SearchBar
placeholder={i18next.t("Search for awards")}
placeholder={i18next.t('Search for awards')}
autofocus
actionProps={{
icon: 'search',
Expand All @@ -202,11 +202,15 @@ function FundingModal({
/>
</ResultsLoader>
<Container textAlign="center" className="rel-mb-1">
<Pagination/>
<Pagination />
</Container>
</Grid.Column>

<Grid.Column width={16} textAlign="center" className="pt-0 pb-0">
<Grid.Column
width={16}
textAlign="center"
className="pt-0 pb-0"
>
<NoAwardResults
switchToCustom={() => {
resetForm();
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/RelatedWorksField.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export class RelatedWorksField extends Component {
fieldPath={`${fieldPathPrefix}.resource_type`}
labelIcon={''} // Otherwise breaks alignment
options={options.resource_type}
width={6}
width={7}
labelclassname="small field-label-class"
/>

Expand Down

0 comments on commit 70e516a

Please sign in to comment.