2019-12-05 02:46:57 +00:00
|
|
|
|
import React from 'react';
|
2019-12-03 22:00:21 +00:00
|
|
|
|
import TermInput from './TermInput.js';
|
|
|
|
|
import DiseaseGraph from './DiseaseGraph.js';
|
2019-12-05 02:46:57 +00:00
|
|
|
|
import {useAsync, useQuery} from '../util.js';
|
2019-12-03 22:00:21 +00:00
|
|
|
|
import {
|
|
|
|
|
diseasesBySymptoms,
|
2019-12-05 16:04:09 +00:00
|
|
|
|
exploreSymptoms,
|
2019-12-04 23:54:44 +00:00
|
|
|
|
} from '../data/mock';
|
2019-12-03 22:00:21 +00:00
|
|
|
|
|
|
|
|
|
const App = () =>
|
|
|
|
|
{
|
2019-12-05 02:46:57 +00:00
|
|
|
|
const {
|
|
|
|
|
query,
|
|
|
|
|
addTerm: addQueryTerm,
|
2019-12-05 16:04:09 +00:00
|
|
|
|
removeTerm: removeQueryTerm,
|
2019-12-05 02:46:57 +00:00
|
|
|
|
} = useQuery();
|
2019-12-03 22:00:21 +00:00
|
|
|
|
|
2019-12-05 02:46:57 +00:00
|
|
|
|
// Récupération des résultats de la recherche
|
2019-12-05 02:24:21 +00:00
|
|
|
|
const diseases = useAsync([], diseasesBySymptoms, query);
|
|
|
|
|
const terms = useAsync([], exploreSymptoms, diseases);
|
2019-12-03 22:00:21 +00:00
|
|
|
|
|
2019-12-05 02:46:57 +00:00
|
|
|
|
// Tous les termes compatibles avec la recherche qui n’apparaissent pas
|
|
|
|
|
// dans la recherche
|
|
|
|
|
const availableTerms = terms.filter(({id}) =>
|
|
|
|
|
!query.some(({id: termId}) => termId === id)
|
|
|
|
|
);
|
|
|
|
|
|
2019-12-03 22:00:21 +00:00
|
|
|
|
return (
|
|
|
|
|
<div className="App">
|
|
|
|
|
<TermInput
|
2019-12-05 02:24:21 +00:00
|
|
|
|
query={query}
|
2019-12-05 02:46:57 +00:00
|
|
|
|
addQueryTerm={addQueryTerm}
|
|
|
|
|
removeQueryTerm={removeQueryTerm}
|
|
|
|
|
availableTerms={availableTerms}
|
2019-12-04 04:20:06 +00:00
|
|
|
|
/>
|
|
|
|
|
<DiseaseGraph
|
|
|
|
|
terms={terms}
|
2019-12-05 02:24:21 +00:00
|
|
|
|
query={query}
|
2019-12-05 02:46:57 +00:00
|
|
|
|
addQueryTerm={addQueryTerm}
|
|
|
|
|
removeQueryTerm={removeQueryTerm}
|
2019-12-03 22:00:21 +00:00
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default App;
|