app: Renommages de variables pour cohérence

This commit is contained in:
Mattéo Delabre 2019-12-04 21:24:21 -05:00
parent 27fd1ce027
commit 650f76c028
Signed by: matteo
GPG Key ID: AE3FBD02DC583ABB
5 changed files with 68 additions and 68 deletions

View File

@ -9,22 +9,22 @@ import {
const App = () => const App = () =>
{ {
const [terms, setTerms] = useState([]); const [query, setQuery] = useState([]);
const diseases = useAsync([], diseasesBySymptoms, terms); const diseases = useAsync([], diseasesBySymptoms, query);
const results = useAsync([], exploreSymptoms, diseases); const terms = useAsync([], exploreSymptoms, diseases);
return ( return (
<div className="App"> <div className="App">
<TermInput <TermInput
terms={terms} query={query}
setTerms={setTerms} setQuery={setQuery}
availableTerms={results} availableTerms={terms}
/> />
<DiseaseGraph <DiseaseGraph
terms={terms} terms={terms}
setTerms={setTerms} query={query}
results={results} setQuery={setQuery}
/> />
</div> </div>
); );

View File

@ -8,17 +8,17 @@ import {symptomsSubgraph} from '../data/mock';
/** /**
* Graphe de maladies et symptômes. * Graphe de maladies et symptômes.
* *
* @prop terms Ensemble de symptômes recherchés par lutilisateur. * @prop terms Termes à afficher.
* @prop setTerms Fonction de rappel pour ajouter de nouveaux termes de * @prop query Ensemble de termes recherchés par lutilisateur.
* @prop setQuery Fonction de rappel pour ajouter de nouveaux termes de
* recherche. * recherche.
* @prop results Maladies correspondant à la recherche de lutilisateur.
*/ */
const DiseaseGraph = ({terms, setTerms, results}) => const DiseaseGraph = ({terms, query, setQuery}) =>
{ {
const {nodes, edges} = useAsync({ const {nodes, edges} = useAsync({
nodes: {}, nodes: {},
edges: [] edges: []
}, symptomsSubgraph, results); }, symptomsSubgraph, terms);
/** /**
* Rendu dun nœud du graphe. * Rendu dun nœud du graphe.
@ -28,14 +28,14 @@ const DiseaseGraph = ({terms, setTerms, results}) =>
const render = id => const render = id =>
{ {
const term = nodes[id]; const term = nodes[id];
const isTerm = terms.some(({id: termId}) => termId === id); const isInQuery = query.some(({id: termId}) => termId === id);
const isDisease = nodes[id].types.includes(termTypes.disease); const isDisease = nodes[id].types.includes(termTypes.disease);
return ( return (
<span <span
className={[ className={[
'SearchResults_result', 'SearchResults_result',
isTerm ? 'SearchResults_result-term' : '', isInQuery ? 'SearchResults_result-inQuery' : '',
isDisease ? 'SearchResults_result-disease' : '', isDisease ? 'SearchResults_result-disease' : '',
].join(' ')} ].join(' ')}
title={ title={
@ -56,29 +56,26 @@ const DiseaseGraph = ({terms, setTerms, results}) =>
*/ */
const handleNodeClick = (id, ev) => const handleNodeClick = (id, ev) =>
{ {
const result = results.find(({id: termId}) => termId === id); const term = nodes[id];
const termIndex = terms.findIndex(({id: termId}) => termId === id); const queryIndex = query.findIndex(({id: termId}) => termId === id);
if (result !== undefined)
{
if (!ev.ctrlKey) if (!ev.ctrlKey)
{ {
// Clic normal : Ouverture de la ressource // Clic normal : Ouverture de la ressource
window.open(result.url, '_blank'); window.open(term.url, '_blank');
} }
else if (termIndex >= 0) else if (queryIndex >= 0)
{ {
// Ctrl-clic : Retrait dun terme déjà dans la requête // Ctrl-clic : Retrait dun terme déjà dans la requête
setTerms([ setQuery([
...terms.slice(0, termIndex), ...query.slice(0, queryIndex),
...terms.slice(termIndex + 1) ...query.slice(queryIndex + 1)
]); ]);
} }
else else
{ {
// Ctrl-clic : Ajout dun nouveau terme dans la requête // Ctrl-clic : Ajout dun nouveau terme dans la requête
setTerms(terms.concat([result])); setQuery(query.concat([term]));
}
} }
}; };
@ -95,8 +92,8 @@ const DiseaseGraph = ({terms, setTerms, results}) =>
DiseaseGraph.propTypes = { DiseaseGraph.propTypes = {
terms: PropTypes.arrayOf(Term).isRequired, terms: PropTypes.arrayOf(Term).isRequired,
setTerms: PropTypes.func.isRequired, query: PropTypes.arrayOf(Term).isRequired,
results: PropTypes.arrayOf(Term).isRequired, setQuery: PropTypes.func.isRequired,
}; };
export default DiseaseGraph; export default DiseaseGraph;

View File

@ -19,12 +19,11 @@ const keys = Object.assign(Object.create(null), {
/** /**
* Zone de saisie des termes de recherche. * Zone de saisie des termes de recherche.
* *
* @prop terms Ensemble de termes déjà validés. * @prop query Ensemble de termes déjà dans la requête.
* @prop setQuery Fonction de rappel utilisée pour modifier la requête.
* @param availableTerms Termes pouvant être ajoutés par lutilisateur. * @param availableTerms Termes pouvant être ajoutés par lutilisateur.
* @prop setTerms Fonction de rappel utilisée pour modifier lensemble des
* termes validés par lutilisateur.
*/ */
const TermInput = ({terms, availableTerms, setTerms}) => const TermInput = ({query, setQuery, availableTerms}) =>
{ {
// Valeur actuellement saisie dans le champ de recherche de termes // Valeur actuellement saisie dans le champ de recherche de termes
const [value, setValue] = useState(''); const [value, setValue] = useState('');
@ -41,19 +40,19 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
const inputRef = useRef(null); const inputRef = useRef(null);
/** /**
* Ajoute un terme à lensemble des termes sélectionnés. * Ajoute un terme à la requête.
* *
* @param term Terme à ajouter. * @param term Terme à ajouter.
*/ */
const addTerm = term => const addQueryTerm = term =>
{ {
if (terms.some(({id}) => id === term.id)) if (query.some(({id}) => id === term.id))
{ {
// Najoute pas les termes déjà sélectionnés // Najoute pas les termes déjà sélectionnés
return; return;
} }
setTerms(terms.concat([term])); setQuery(query.concat([term]));
setValue(''); setValue('');
setSuggestions([]); setSuggestions([]);
@ -64,15 +63,15 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
}; };
/** /**
* Supprime un terme des termes sélectionnés. * Supprime un terme de la requête.
* *
* @param index Indice du terme à supprimer dans la liste. * @param index Indice du terme à supprimer dans la liste.
*/ */
const removeTerm = index => const removeQueryTerm = index =>
{ {
setTerms([ setQuery([
...terms.slice(0, index), ...query.slice(0, index),
...terms.slice(index + 1) ...query.slice(index + 1)
]); ]);
}; };
@ -90,19 +89,19 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
if (focusedSuggestion < suggestions.length) if (focusedSuggestion < suggestions.length)
{ {
addTerm(suggestions[focusedSuggestion]); addQueryTerm(suggestions[focusedSuggestion]);
} }
} }
else if ( else if (
ev.keyCode === keys.backspace ev.keyCode === keys.backspace
&& !value && !value
&& terms.length !== 0 && query.length !== 0
) )
{ {
// Touche Retour alors que le champ de saisie est vide : // Touche Retour alors que le champ de saisie est vide :
// retrait du dernier terme // retrait du dernier terme de la requête
ev.preventDefault(); ev.preventDefault();
setTerms(terms.slice(0, -1)); setQuery(query.slice(0, -1));
} }
else if (ev.keyCode === keys.up) else if (ev.keyCode === keys.up)
{ {
@ -141,7 +140,7 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
// Sélectionne les termes qui nont pas déjà été choisis // Sélectionne les termes qui nont pas déjà été choisis
availableTerms.filter(({id: suggestionId}) => availableTerms.filter(({id: suggestionId}) =>
!terms.some(({id: termId}) => !query.some(({id: termId}) =>
termId === suggestionId termId === suggestionId
) )
) )
@ -151,11 +150,12 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
return ( return (
<div className="TermInput"> <div className="TermInput">
{terms.map((term, index) => {query.map((term, index) =>
<span <span
key={term.id} key={term.id}
className="TermInput_term" className="TermInput_queryTerm"
onClick={removeTerm.bind(null, index)} title="Cliquez pour retirer ce terme de la recherche"
onClick={removeQueryTerm.bind(null, index)}
> >
{term.name} {term.name}
</span> </span>
@ -180,14 +180,17 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
: '' : ''
].join(' ')} ].join(' ')}
onMouseEnter={setFocusedSuggestion.bind(null, index)} onMouseEnter={setFocusedSuggestion.bind(null, index)}
onClick={addTerm.bind(null, suggestion)} onClick={addQueryTerm.bind(null, suggestion)}
title="Cliquez pour ajouter ce terme à la recherche"
> >
{suggestion.name} {suggestion.name}
{suggestion.alias.length >= 1 ? ( {suggestion.alias.length >= 1 ? (
<span <span
className="TermInput_suggestionAlias" className="TermInput_suggestionAlias"
title={ title={
'Alias du terme: ' (suggestion.alias.length >= 2
? 'Autres noms: '
: 'Autre nom: ')
+ suggestion.alias.join(', ') + suggestion.alias.join(', ')
} }
> >
@ -202,9 +205,9 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
}; };
TermInput.propTypes = { TermInput.propTypes = {
terms: PropTypes.arrayOf(Term).isRequired, query: PropTypes.arrayOf(Term).isRequired,
setQuery: PropTypes.func.isRequired,
availableTerms: PropTypes.arrayOf(Term).isRequired, availableTerms: PropTypes.arrayOf(Term).isRequired,
setTerms: PropTypes.func.isRequired
}; };
export default TermInput; export default TermInput;

View File

@ -75,7 +75,7 @@ const URL = makePropType((props, propName, componentName) =>
{ {
return new Error( return new Error(
`URL “${value}”, passed as ${componentName}s ${propName} ` `URL “${value}”, passed as ${componentName}s ${propName} `
+ `prop, does not start with “http://” or “https://”.` + 'prop, does not start with “http://” or “https://”.'
); );
} }
}); });
@ -108,7 +108,7 @@ export const Term = PropTypes.exact({
/** /**
* Relation entre deux termes. * Relation entre deux termes.
*/ */
export const Relation = makePropType((props, propName, componentName) => export const Relation = makePropType((props, propName) =>
{ {
const value = props[propName]; const value = props[propName];

View File

@ -109,7 +109,7 @@ input
box-shadow: var(--shadow-high); box-shadow: var(--shadow-high);
} }
.TermInput_term .TermInput_queryTerm
{ {
display: inline-block; display: inline-block;
@ -128,7 +128,7 @@ input
transition: background var(--animation-short) var(--animation-ease-out); transition: background var(--animation-short) var(--animation-ease-out);
} }
.TermInput_term:hover .TermInput_queryTerm:hover
{ {
background: var(--color-accent); background: var(--color-accent);
} }
@ -296,7 +296,7 @@ input
color: var(--color-dark); color: var(--color-dark);
} }
.SearchResults_result-term .SearchResults_result-inQuery
{ {
background: var(--color-secondary); background: var(--color-secondary);
color: var(--color-light); color: var(--color-light);