app: Renommages de variables pour cohérence

2019-12-04 21:24:21 -05:00 · 2019-12-04 21:24:21 -05:00 · 650f76c028
parent 27fd1ce027
commit 650f76c028
5 changed files with 68 additions and 68 deletions
--- a/app/src/components/App.js
+++ b/app/src/components/App.js
@ -9,22 +9,22 @@ import {

 const App = () =>
 {
-    const [terms, setTerms] = useState([]);
+    const [query, setQuery] = useState([]);

-    const diseases = useAsync([], diseasesBySymptoms, terms);
-    const results = useAsync([], exploreSymptoms, diseases);
+    const diseases = useAsync([], diseasesBySymptoms, query);
+    const terms = useAsync([], exploreSymptoms, diseases);

    return (
        <div className="App">
            <TermInput
-                terms={terms}
-                setTerms={setTerms}
-                availableTerms={results}
+                query={query}
+                setQuery={setQuery}
+                availableTerms={terms}
            />
            <DiseaseGraph
                terms={terms}
-                setTerms={setTerms}
-                results={results}
+                query={query}
+                setQuery={setQuery}
            />
        </div>
    );
--- a/app/src/components/DiseaseGraph.js
+++ b/app/src/components/DiseaseGraph.js
@ -8,17 +8,17 @@ import {symptomsSubgraph} from '../data/mock';
 /**
 * Graphe de maladies et symptômes.
 *
- * @prop terms Ensemble de symptômes recherchés par l’utilisateur.
- * @prop setTerms Fonction de rappel pour ajouter de nouveaux termes de
+ * @prop terms Termes à afficher.
+ * @prop query Ensemble de termes recherchés par l’utilisateur.
+ * @prop setQuery Fonction de rappel pour ajouter de nouveaux termes de
 * recherche.
- * @prop results Maladies correspondant à la recherche de l’utilisateur.
 */
-const DiseaseGraph = ({terms, setTerms, results}) =>
+const DiseaseGraph = ({terms, query, setQuery}) =>
 {
    const {nodes, edges} = useAsync({
        nodes: {},
        edges: []
-    }, symptomsSubgraph, results);
+    }, symptomsSubgraph, terms);

    /**
     * Rendu d’un nœud du graphe.
@ -28,14 +28,14 @@ const DiseaseGraph = ({terms, setTerms, results}) =>
    const render = 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);

        return (
            <span
                className={[
                    'SearchResults_result',
-                    isTerm ? 'SearchResults_result-term' : '',
+                    isInQuery ? 'SearchResults_result-inQuery' : '',
                    isDisease ? 'SearchResults_result-disease' : '',
                ].join(' ')}
                title={
@ -56,29 +56,26 @@ const DiseaseGraph = ({terms, setTerms, results}) =>
     */
    const handleNodeClick = (id, ev) =>
    {
-        const result = results.find(({id: termId}) => termId === id);
-        const termIndex = terms.findIndex(({id: termId}) => termId === id);
+        const term = nodes[id];
+        const queryIndex = query.findIndex(({id: termId}) => termId === id);

-        if (result !== undefined)
+        if (!ev.ctrlKey)
        {
-            if (!ev.ctrlKey)
-            {
-                // Clic normal : Ouverture de la ressource
-                window.open(result.url, '_blank');
-            }
-            else if (termIndex >= 0)
-            {
-                // Ctrl-clic : Retrait d’un terme déjà dans la requête
-                setTerms([
-                    ...terms.slice(0, termIndex),
-                    ...terms.slice(termIndex + 1)
-                ]);
-            }
-            else
-            {
-                // Ctrl-clic : Ajout d’un nouveau terme dans la requête
-                setTerms(terms.concat([result]));
-            }
+            // Clic normal : Ouverture de la ressource
+            window.open(term.url, '_blank');
+        }
+        else if (queryIndex >= 0)
+        {
+            // Ctrl-clic : Retrait d’un terme déjà dans la requête
+            setQuery([
+                ...query.slice(0, queryIndex),
+                ...query.slice(queryIndex + 1)
+            ]);
+        }
+        else
+        {
+            // Ctrl-clic : Ajout d’un nouveau terme dans la requête
+            setQuery(query.concat([term]));
        }
    };

@ -95,8 +92,8 @@ const DiseaseGraph = ({terms, setTerms, results}) =>

 DiseaseGraph.propTypes = {
    terms: PropTypes.arrayOf(Term).isRequired,
-    setTerms: PropTypes.func.isRequired,
-    results: PropTypes.arrayOf(Term).isRequired,
+    query: PropTypes.arrayOf(Term).isRequired,
+    setQuery: PropTypes.func.isRequired,
 };

 export default DiseaseGraph;
--- a/app/src/components/TermInput.js
+++ b/app/src/components/TermInput.js
@ -19,12 +19,11 @@ const keys = Object.assign(Object.create(null), {
 /**
 * 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 l’utilisateur.
- * @prop setTerms Fonction de rappel utilisée pour modifier l’ensemble des
- * termes validés par l’utilisateur.
 */
-const TermInput = ({terms, availableTerms, setTerms}) =>
+const TermInput = ({query, setQuery, availableTerms}) =>
 {
    // Valeur actuellement saisie dans le champ de recherche de termes
    const [value, setValue] = useState('');
@ -41,19 +40,19 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
    const inputRef = useRef(null);

    /**
-     * Ajoute un terme à l’ensemble des termes sélectionnés.
+     * Ajoute un terme à la requête.
     *
     * @param term Terme à ajouter.
     */
-    const addTerm = term =>
+    const addQueryTerm = term =>
    {
-        if (terms.some(({id}) => id === term.id))
+        if (query.some(({id}) => id === term.id))
        {
            // N’ajoute pas les termes déjà sélectionnés
            return;
        }

-        setTerms(terms.concat([term]));
+        setQuery(query.concat([term]));
        setValue('');
        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.
     */
-    const removeTerm = index =>
+    const removeQueryTerm = index =>
    {
-        setTerms([
-            ...terms.slice(0, index),
-            ...terms.slice(index + 1)
+        setQuery([
+            ...query.slice(0, index),
+            ...query.slice(index + 1)
        ]);
    };

@ -90,19 +89,19 @@ const TermInput = ({terms, availableTerms, setTerms}) =>

            if (focusedSuggestion < suggestions.length)
            {
-                addTerm(suggestions[focusedSuggestion]);
+                addQueryTerm(suggestions[focusedSuggestion]);
            }
        }
        else if (
            ev.keyCode === keys.backspace
            && !value
-            && terms.length !== 0
+            && query.length !== 0
        )
        {
            // Touche Retour alors que le champ de saisie est vide :
-            // retrait du dernier terme
+            // retrait du dernier terme de la requête
            ev.preventDefault();
-            setTerms(terms.slice(0, -1));
+            setQuery(query.slice(0, -1));
        }
        else if (ev.keyCode === keys.up)
        {
@ -141,7 +140,7 @@ const TermInput = ({terms, availableTerms, setTerms}) =>

                // Sélectionne les termes qui n’ont pas déjà été choisis
                availableTerms.filter(({id: suggestionId}) =>
-                    !terms.some(({id: termId}) =>
+                    !query.some(({id: termId}) =>
                        termId === suggestionId
                    )
                )
@ -151,11 +150,12 @@ const TermInput = ({terms, availableTerms, setTerms}) =>

    return (
        <div className="TermInput">
-            {terms.map((term, index) => 
+            {query.map((term, index) => 
                <span
                    key={term.id}
-                    className="TermInput_term"
-                    onClick={removeTerm.bind(null, index)}
+                    className="TermInput_queryTerm"
+                    title="Cliquez pour retirer ce terme de la recherche"
+                    onClick={removeQueryTerm.bind(null, index)}
                >
                    {term.name}
                </span>
@ -180,14 +180,17 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
                                : ''
                        ].join(' ')}
                        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.alias.length >= 1 ? (
                            <span
                                className="TermInput_suggestionAlias"
                                title={
-                                    'Alias du terme : '
+                                    (suggestion.alias.length >= 2
+                                        ? 'Autres noms : '
+                                        : 'Autre nom : ')
                                    + suggestion.alias.join(', ')
                                }
                            >
@ -202,9 +205,9 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
 };

 TermInput.propTypes = {
-    terms: PropTypes.arrayOf(Term).isRequired,
+    query: PropTypes.arrayOf(Term).isRequired,
+    setQuery: PropTypes.func.isRequired,
    availableTerms: PropTypes.arrayOf(Term).isRequired,
-    setTerms: PropTypes.func.isRequired
 };

 export default TermInput;
--- a/app/src/data/model.js
+++ b/app/src/data/model.js
@ -75,7 +75,7 @@ const URL = makePropType((props, propName, componentName) =>
    {
        return new Error(
            `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.
 */
-export const Relation = makePropType((props, propName, componentName) =>
+export const Relation = makePropType((props, propName) =>
 {
    const value = props[propName];

--- a/app/style/style.css
+++ b/app/style/style.css
@ -109,7 +109,7 @@ input
    box-shadow: var(--shadow-high);
 }

-.TermInput_term
+.TermInput_queryTerm
 {
    display: inline-block;

@ -128,7 +128,7 @@ input
    transition: background var(--animation-short) var(--animation-ease-out);
 }

-.TermInput_term:hover
+.TermInput_queryTerm:hover
 {
    background: var(--color-accent);
 }
@ -296,7 +296,7 @@ input
    color: var(--color-dark);
 }

-.SearchResults_result-term
+.SearchResults_result-inQuery
 {
    background: var(--color-secondary);
    color: var(--color-light);