Skip to content

Commit

Permalink
fix(openalex): Display guided tour only for the first visit
Browse files Browse the repository at this point in the history
  • Loading branch information
@annelhote
annelhote committed Dec 12, 2024
1 parent a0b00b2 commit b1d7dc0
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 22 deletions.
17 changes: 7 additions & 10 deletions client/src/pages/openalex-affiliations/components/ror-badge.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,11 @@ import PropTypes from 'prop-types';

import useCopyToClipboard from '../../../hooks/useCopyToClipboard';

export default function RorBadge({ isRemoved, removeRor, ror, rorColor, setFilteredAffiliationName }) {
const [copyStatus, copy] = useCopyToClipboard();

const iconsType = {
Copié: 'ri-checkbox-circle-fill',
Erreur: 'ri-settings-6-fill',
};
export default function RorBadge({ className, isRemoved, removeRor, ror, rorColor, setFilteredAffiliationName }) {
const [_, copy] = useCopyToClipboard();

return (
<div className="wm-ror-badge">
<div className={`wm-ror-badge ${className}`}>
<span style={{ backgroundColor: getComputedStyle(document.documentElement).getPropertyValue(`--${rorColor}`) }} />
<div>
<img
Expand Down Expand Up @@ -52,15 +47,15 @@ export default function RorBadge({ isRemoved, removeRor, ror, rorColor, setFilte
<button
aria-label="Undo remove"
className="fr-icon fr-fi-arrow-go-back-line fr-icon--sm"
onClick={() => { removeRor(); }}
onClick={() => removeRor()}
title="Undo remove"
type="button"
/>
) : (
<button
aria-label="Remove this ROR"
className="fr-icon fr-fi-delete-line fr-icon--sm"
onClick={() => { removeRor(); }}
onClick={() => removeRor()}
title="Remove this ROR"
type="button"
/>
Expand All @@ -71,10 +66,12 @@ export default function RorBadge({ isRemoved, removeRor, ror, rorColor, setFilte
}

RorBadge.defaultProps = {
className: '',
isRemoved: false,
};

RorBadge.propTypes = {
className: PropTypes.string,
isRemoved: PropTypes.bool,
removeRor: PropTypes.func.isRequired,
ror: PropTypes.shape({
Expand Down
7 changes: 4 additions & 3 deletions client/src/pages/openalex-affiliations/results/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export default function Affiliations() {
const [rorMessageType, setRorMessageType] = useState('');
const [rorsToRemove, setRorsToRemove] = useState([]);
const [stepsEnabled, setStepsEnabled] = useState(false);
const [stepsEnabledList, setStepsEnabledList] = useState(false);
const [uniqueRors, setUniqueRors] = useState({});

const steps = [
Expand Down Expand Up @@ -98,7 +99,6 @@ export default function Affiliations() {
});

useEffect(() => {
console.log('useEffect');
// Enable guided tour only for the first visit
if (localStorage.getItem('works-magnet-tour-results') !== 'done') setStepsEnabled(true);
}, [setStepsEnabled]);
Expand Down Expand Up @@ -400,10 +400,9 @@ export default function Affiliations() {
<Steps
enabled={stepsEnabled}
initialStep={0}
onComplete={() => localStorage.setItem('works-magnet-tour-results', 'done')}
onExit={() => {
setStepsEnabled(false);
localStorage.setItem('works-magnet-tour-results', 'done');
setStepsEnabledList(true);
}}
steps={steps}
/>
Expand Down Expand Up @@ -738,6 +737,8 @@ export default function Affiliations() {
removeRorFromAddList={removeRorFromAddList}
setFilteredAffiliationName={setFilteredAffiliationName}
setSelectAffiliations={setSelectAffiliations}
setStepsEnabledList={setStepsEnabledList}
stepsEnabledList={stepsEnabledList}
toggleRemovedRor={toggleRemovedRor}
/>
</div>
Expand Down
77 changes: 69 additions & 8 deletions client/src/pages/openalex-affiliations/results/list-view.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
Spinner,
Text,
} from '@dataesr/dsfr-plus';
import { Steps } from 'intro.js-react';
import PropTypes from 'prop-types';
import { useEffect, useState } from 'react';

Expand All @@ -16,12 +17,15 @@ import RorBadge from '../components/ror-badge';
import RorName from '../components/ror-name';
import WorksList from '../components/works-list';

import 'intro.js/introjs.css';
export default function ListView({
affiliationsCount,
filteredAffiliations,
removeRorFromAddList,
setFilteredAffiliationName,
setSelectAffiliations,
setStepsEnabledList,
stepsEnabledList,
toggleRemovedRor,
}) {
const [isLoading, setIsLoading] = useState(false);
Expand Down Expand Up @@ -53,6 +57,51 @@ export default function ListView({
const sortedRor = Object.keys(rorCount).sort((a, b) => rorCount[b] - rorCount[a]);
defineRorColor.push(...sortedRor.slice(0, 5).map((ror, index) => ({ ror, color: dsColors[index % dsColors.length] })));

const steps = [
{
element: '.step-affiliations-select',
intro: 'Select all affiliations',
},
{
element: '.step-affiliations-search',
intro: 'Search through affiliations names',
},
{
element: '.step-affiliations-sort',
intro: 'Open menu to filter affiliations by country and sort them',
},
{
element: '.step-affiliations-colors',
intro: 'Explanation about the colors of ROR',
},
{
element: '.step-affiliation-checkbox',
intro: 'Select affiliation one by one',
},
{
element: '.step-affiliation-badge',
intro: <ul>
<li>Colors are given to the most 5 frequent ROR</li>
<li>Click here to see the ROR matched</li>
<li>
<i className="fr-fi-filter-line fr-icon--sm" />
{' '}
Filter on this ROR
</li>
<li>
<i className="ri-file-copy-line" />
{' '}
Copy ROR
</li>
<li>
<i className="fr-fi-delete-line fr-icon--sm" />
{' '}
Delete this ROR from this affiliation
</li>
</ul>,
},
];

useEffect(() => {
setIsLoading(true);
// Deep copy of filteredAffiliations object
Expand Down Expand Up @@ -81,12 +130,19 @@ export default function ListView({

return (
<>
<Steps
enabled={stepsEnabledList}
initialStep={0}
onComplete={() => localStorage.setItem('works-magnet-tour-results', 'done')}
onExit={() => setStepsEnabledList(false)}
steps={steps}
/>
<div
className="wm-internal-actions"
style={{ position: 'sticky', top: '44px', zIndex: 10 }}
>
<Row>
<Col xs="3">
<Col className="step-affiliations-select" xs="3">
<Checkbox
checked={sortedOrFilteredAffiliations.find((affiliation) => !affiliation.selected) === undefined}
onChange={() => {
Expand All @@ -102,7 +158,7 @@ export default function ListView({
</i>
</span>
</Col>
<Col xs="7">
<Col className="step-affiliations-search" xs="7">
<span className="fr-icon-search-line fr-mx-1w" />
<input
onChange={(e) => setSearch(e.target.value)}
Expand Down Expand Up @@ -143,10 +199,10 @@ export default function ListView({
title="Clear search"
/>
</Col>
<Col xs="2" className="text-right">
<Col className="text-right" xs="2">
<Button
aria-label="Sorts & filters"
className="fr-mr-1w"
className="fr-mr-1w step-affiliations-sort"
color="beige-gris-galet"
icon="filter-line"
onClick={() => setIsModalOpen((prev) => !prev)}
Expand All @@ -163,6 +219,7 @@ export default function ListView({
</Button>
<Button
aria-label="Open colors info modal"
className="step-affiliations-colors"
color="beige-gris-galet"
onClick={() => setIsColorInfoModalOpen((prev) => !prev)}
size="sm"
Expand Down Expand Up @@ -232,15 +289,15 @@ export default function ListView({
<div>
<ul className="wm-list">
{
sortedOrFilteredAffiliations.map((affiliation) => (
sortedOrFilteredAffiliations.map((affiliation, index) => (
<li
className={affiliation.selected ? 'selected' : ''}
key={affiliation.key}
>
<Row>
<Col>
<div style={{ display: 'inline-flex' }}>
<div style={{ display: 'inline-block', width: '20px' }}>
<div className={index === 0 ? 'step-affiliation-checkbox' : ''} style={{ display: 'inline-block', width: '20px' }}>
<Checkbox
checked={affiliation.selected}
name="affiliations"
Expand Down Expand Up @@ -272,11 +329,12 @@ export default function ListView({
<tr key={`openalex-affiliations-affiliations-${rorToCorrect.rorId}`}>
<td>
<RorBadge
className="step-affiliation-badge"
isRemoved={affiliation.removeList.includes(rorToCorrect.rorId)}
removeRor={() => toggleRemovedRor(affiliation.id, rorToCorrect.rorId)}
ror={rorToCorrect}
rorColor={defineRorColor.find((item) => item.ror === rorToCorrect.rorId)?.color || 'beige-gris-galet'}
setFilteredAffiliationName={setFilteredAffiliationName}
removeRor={() => toggleRemovedRor(affiliation.id, rorToCorrect.rorId)}
/>
<br />
<RorName
Expand All @@ -290,10 +348,11 @@ export default function ListView({
<tr key={`openalex-affiliations-affiliations-${ror.rorId}`}>
<td>
<RorBadge
className="step-affiliation-badge"
removeRor={() => removeRorFromAddList(affiliation.id, ror.rorId)}
ror={ror}
rorColor={defineRorColor.find((item) => item.ror === ror.rorId)?.color || 'beige-gris-galet'}
setFilteredAffiliationName={setFilteredAffiliationName}
removeRor={() => removeRorFromAddList(affiliation.id, ror.rorId)}
/>
<br />
<RorName ror={ror} />
Expand Down Expand Up @@ -428,5 +487,7 @@ ListView.propTypes = {
removeRorFromAddList: PropTypes.func.isRequired,
setFilteredAffiliationName: PropTypes.func.isRequired,
setSelectAffiliations: PropTypes.func.isRequired,
setStepsEnabledList: PropTypes.func.isRequired,
stepsEnabledList: PropTypes.bool.isRequired,
toggleRemovedRor: PropTypes.func.isRequired,
};
1 change: 0 additions & 1 deletion client/src/pages/openalex-affiliations/search.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,6 @@ export default function Search() {
}, [currentSearchParams.getRorChildren, deletedAffiliations, searchedAffiliations]);

useEffect(() => {
console.log('useEffect');
// Enable guided tour only for the first visit
if (localStorage.getItem('works-magnet-tour-search') !== 'done') setStepsEnabled(true);
}, [setStepsEnabled]);
Expand Down

0 comments on commit b1d7dc0

Please sign in to comment.