Skip to content

Commit

Permalink
feat(openalex): Refactor affiliation handling and enhance button inte…
Browse files Browse the repository at this point in the history 
…ractions
  • Loading branch information
@jerem1508
jerem1508 committed Nov 27, 2024
1 parent e790e12 commit 004a844
Showing 1 changed file with 67 additions and 52 deletions.
119 changes: 67 additions & 52 deletions client/src/pages/openalex-ror/results/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
Badge,
Button,
ButtonGroup,
Col,
Container,
Link,
Expand Down Expand Up @@ -148,19 +149,22 @@ export default function Affiliations() {

useEffect(() => {
const get = async () => {
console.log('before get');

setIsLoadingRorData(true);
const addedRors = await Promise.all(
addList.map((add) => getRorData(add)),
);
const uniqueRorsTmp = {};
addedRors.flat().forEach((addedRor) => {
if (!Object.keys(uniqueRors).includes(addedRor.rorId)) {
uniqueRorsTmp[addedRor.rorId] = { ...addedRor, countAffiliations: 0 };
uniqueRorsTmp[addedRor.rorId] = { ...addedRor, countAffiliations: selectedOpenAlex.length };
}
});
setUniqueRors({ ...uniqueRors, ...uniqueRorsTmp });
setIsLoadingRorData(false);
};

get();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [addList]);
Expand Down Expand Up @@ -265,6 +269,10 @@ export default function Affiliations() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ror]);

console.log('uniqueRors', uniqueRors);
console.log('selectedOpenAlex', selectedOpenAlex);
console.log('addList', addList);

return (
<>
<Header id="openalex-tile-title" />
Expand Down Expand Up @@ -414,7 +422,7 @@ export default function Affiliations() {
<thead>
<tr>
<th>ROR</th>
<th>Name</th>
{/* <th>Name</th> */}
<th>Number of affiliations</th>
<th>Added by</th>
<th>Removed by</th>
Expand All @@ -441,14 +449,16 @@ export default function Affiliations() {
uniqueRor.rorId,
) ? (<strike>{` https://ror.org/${uniqueRor.rorId}`}</strike>) : (` https://ror.org/${uniqueRor.rorId}`)}
</Link>
</td>
<td>
{getFlagEmoji(uniqueRor.rorCountry)}
<span className="fr-ml-1w">
{/* </td>
<td> */}
<br />
<span className="fr-icon-arrow-right-s-fill" aria-hidden="true" />
<span className="fr-mx-1w">
{removeList.includes(
uniqueRor.rorId,
) ? (<strike>{uniqueRor.rorName}</strike>) : (uniqueRor.rorName)}
</span>
{getFlagEmoji(uniqueRor.rorCountry)}
</td>
<td>
{uniqueRor.countAffiliations}
Expand All @@ -460,11 +470,12 @@ export default function Affiliations() {
<td>{uniqueRor.addedBy}</td>
<td>{uniqueRor.removedBy}</td>
<td style={{ minWidth: '160px' }}>
{removeList.includes(
uniqueRor.rorId,
) ? (
<>
<Button
<ButtonGroup>
{removeList.includes(
uniqueRor.rorId,
)
? (
<Button
aria-label="Undo remove"
color="blue-ecume"
icon="arrow-go-back-line"
Expand All @@ -473,56 +484,59 @@ export default function Affiliations() {
))}
size="sm"
title="Undo remove"
/>
<Badge
variant="secondary"
>
Undo remove
</Button>
) : (
<Button
aria-label="Remove ROR"
color="pink-tuile"
className="fr-mr-1w"
disabled={removeList.includes(
uniqueRor.rorId,
)}
icon="delete-line"
onClick={() => setRemoveList((prevList) => [
...prevList,
uniqueRor.rorId,
])}
size="sm"
title="Remove ROR"
variant="secondary"
>
Removed
</Badge>
</>
) : (
Remove this ROR
</Button>
)}
{(uniqueRor.countAffiliations < selectedOpenAlex.length) && (
<Button
aria-label="Remove ROR"
color="pink-tuile"
disabled={removeList.includes(
uniqueRor.rorId,
)}
icon="delete-line"
onClick={() => setRemoveList((prevList) => [
aria-label="Propagate ROR to all affiliations"
className="fr-ml-1w"
color="green-emeraude"
disabled={
uniqueRor.countAffiliations
=== selectedOpenAlex.length
}
icon="chat-check-line"
onClick={() => setAddList((prevList) => [
...prevList,
uniqueRor.rorId,
])}
size="sm"
title="Remove ROR"
/>
title={`Propagate ROR to ${selectedOpenAlex?.length ?? 0 - uniqueRor.countAffiliations} affiliations`}
variant="secondary"
>
Propagate this ROR
</Button>
)}
{(uniqueRor.countAffiliations < selectedOpenAlex.length) && (
<Button
aria-label="Propagate ROR to all affiliations"
className="fr-ml-1w"
color="pink-tuile"
disabled={
uniqueRor.countAffiliations
=== selectedOpenAlex.length
}
icon="chat-check-line"
onClick={() => setAddList((prevList) => [
...prevList,
uniqueRor.rorId,
])}
size="sm"
title={`Propagate ROR to ${selectedOpenAlex?.length ?? 0 - uniqueRor.countAffiliations} affiliations`}
/>
)}
{(addList.includes(uniqueRor.rorId)) && (
{/* {(addList.includes(uniqueRor.rorId)) && (
<Badge
color="pink-tuile"
color="green-emeraude"
className="fr-mr-1w"
>
Added
</Badge>
)}
)} */}
</ButtonGroup>
</td>
</tr>
),
Expand Down Expand Up @@ -556,10 +570,11 @@ export default function Affiliations() {
aria-label="Add ROR"
color="blue-ecume"
disabled={['', 'error'].includes(rorMessageType)}
onClick={() => {
setAddList([...addList, ror]);
setRor('');
}}
// onClick={() => {
// setAddList([...addList, ror]);
// setRor('');
// }}
onClick={() => getRorData()}
title="Add ROR"
>
+ Add
Expand Down

0 comments on commit 004a844

Please sign in to comment.