Discussion :

[pierrot10]

je consate que la mise à jour de mon post "[Débutant] comment bien utiliser useState avec une valeur par défaut " aborde une problématique similaire à ce que je développe sur ce sujet. J'ai regardé pour l'effacer sans succès. Je suis désolé pour cette forme de doublon

Bonjour à tous,

Je crée une app après avoir suivi un tuto et j'avance au fur et à mesure

Ce tuto m'a montré comment faire appel à une API qui va extraire les données d'une station météo (ou autres), stocké dans une base de donnée MySQL

Dans mon API je défini une date (from/to) des mesures que je veux afficher.
(En réalité, le script PHP va chercher la date de la dernière mesure pour la date TO, et il va définir cette date TO moins 24h pour la date FROM. (Le script est actuellement prêt à recevoir le GET['from'] et le GET['to] pour filtrer les nouvelles mesures))

Bien entendu, ca ne sert à rien si l'utilisateur ne peut pas séectionner une autre date pour visualiser des mesures. Je dois donc ajouter un calendrier pour le 'from' et un autre pour un 'to'

Pour le moment, j'arrive sans problème afficher les mesures en fonction des dates (from/to) définie statiquement. Mais il faudrait que lorsque je sélectionne de nouvelles dates, mon API soit rappelée pour avoir les mesures en fonction des nouvelles dates, évidemment . Malheureusement, je n'ai aucune idée comment le faire.

En ce qui concerne le DatePicke, le mieux que j'ai trouvé, c'est ceci .

Je vous montre donc comment mon code se présente actuellement:

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
export default function Station(){
 
  // Je récupère l'ID de ma station (après avoir sélectionner la station que je veux visualiser depuis une autre vue)
  const params = useLocalSearchParams() as {id: string};
  // J'appelle mon API et je passe mon ID
  const {data: getstation, isFetching} = useFetchQuery("/getstation/[id]", {id: params.id})
  // Je sauve les mesures dans une variable
  const measures = getstation?.stations?.[0].measures
  // Dans la variable station, je stocke des données liées à la station uniquement
  const station = getstation?.stations?.[0]
 
  // J'ai besoin de la date de la dernière mesure qui sera utilisée dans mon calendrier pour qu'elle soit la date par defaut du calendrier, mais aussi pour qu'on ne puisse pas utiliser uen date suppérieur
  const [dateFrom, setDateFrom] = useState(new Date(dayjs(station?.latest_measure).format("YYYY-MM-DD")));
  const [dateTo, setDateTo] = useState(new Date(dayjs(station?.latest_measure).format("YYYY-MM-DD")));
 
  // Ces deux fonctions sont appelées quand on sélectionne une date dans l'un des deux calendrier
  const onChangeFrom = (event:any, selectedDate:any) => {
    const currentDate = selectedDate;
    console.log("DateFrom")
    console.log(currentDate)
    setDateFrom(currentDate);
  };
 
  const onChangeTo = (event:any, selectedDate:any) => {
    const currentDate = selectedDate;
    setDateTo(currentDate);
  };
 
  // Je construis plus haut 'dataset', mais dans ma problématique, ce code n'est pas utilise
  console.log("dataset")
  console.log(dataset)
 
  // quand l'API a fini de recevoir les données on passe
   if(isFetching)
    {
      return  <RootView><Loading /></RootView>
    }
    else
{
  return(
      // Je pense que ce n'est utile de charger le code en montrant comment j'affiche mes mesures. Tout est dans dataset
 
          <ThemedText>From</ThemedText>  
          <DateTimePicker
            //testID="dateFrom"
            value={dateFrom}
            maximumDate={dateFrom}
            mode="date"
            onChange={onChangeFrom}
            display="default"
          />
 
          <ThemedText>To</ThemedText>
          <DateTimePicker
            //testID="dateFrom"
            value={dateTo}
            maximumDate={dateTo}
            mode="date"
            onChange={onChangeTo}
            display="default"
          />
)
    }
  }

Voilà donc comment ca se présente actuellement.

Avant d'exposer le problème plus en détail, je présente comment cela se comporte actuellement.

Quand je sélectionne une date 'from', mon terminal affiche ceci

(NOBRIDGE) LOG DateFrom
(NOBRIDGE) LOG 2021-02-03T01:00:00.000Z
(NOBRIDGE) LOG dataset
(NOBRIDGE) LOG [{"data": [[Array]], "id_sensor": 9, "title": {"fontawesome": "temperature-full", "title": "Température haut [°C]"}}, {"data": [[Array]], "id_sensor": 16, "title": {"fontawesome": "battery-half", "title": "batterie [V]"}}]

Je vois que ma fonction onChangeFrom est bien appelé mais je vois aussi que le contenu de dataset est ré-affiché . Je suis un peu surpis car uniquement ma fonction onChangeFrom devrait agir, non?

Le
[QUOTE]

(NOBRIDGE) LOG DateFrom
(NOBRIDGE) LOG 2021-02-03T01:00:00.000Z

se réaffiche quand je ferme mon calendrier (voir ci-dessous) quand je clique en dehors du calendrier. (idéalement, j'aimerais bien qu'il se ferme après avoir sélectionner une date, mais je verai ca après)

C'est un peu comme si tout qui se trouve sous

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

export default function Station()

est appelé, dont l'API.

Est-ce que ca équivaut au rechargement de la vue et je pourrais rajouter des paramètres à

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
const params = useLocalSearchParams() as {id: string};

?


La problématique principale
Je ne sais pas si la manière d'appeler mon API est la bonne, car logiquement, ma fonction onChangeFrom() devrait faire appel à mon API en ajoutant les date from et to.
Non?

Dasn cette partie

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

const {data: getstation, isFetching} = useFetchQuery("/getstation/[id]", {id: params.id})

Je ne peux pas rajouter les paramètres, .. du genre:

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

const {data: getstation, isFetching} = useFetchQuery("/getstation/[id]/[from]/[to]", {id: params.id, from: dateFrom, to:dateTo})

puisque que mon useState ce trouve en dessous

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
const [dateFrom, setDateFrom] = useState(new Date(dayjs(station?.latest_measure).format("YYYY-MM-DD")));
  const [dateTo, setDateTo] = useState(new Date(dayjs(station?.latest_measure).format("YYYY-MM-DD")));

Donc je me demande si mon début de code est bien pensé, ou bien adapter à mon besoin.

Ou existe-t-il une autre méthode pour recharger une API?
Ou alors, est-ce que ma fonction onChangeFrom() devrait recharger la vue et ajouter ceci (ou un truc du genre)

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
const params = useLocalSearchParams() as {id: string, from:string, to:string};

Sur ce point, je suis un peu perdu et vous lumières me seraient d'une grande aide.




Merci beaucoup