Comment passer une valeur d'un component à éa vue

import DatePicker , {DateType, useDefaultStyles} from 'react-native-ui-datepicker'; export default function Station(){ const colors = useThemeColors() /* SelectDate / Calendar */ const today = dayjs().format("YYYY-MM-DD"); const defaultStyles = useDefaultStyles(); const [dateRange, setDateRange] = useState<{ startDate: DateType; endDate: DateType; }>({ startDate: dayjs(), endDate: dayjs().add(3, 'days') }); useEffect(()=>{ console.info("[ID] UseEffect") //console.info("> range: " + dayjs(dateRange.startDate).format("YYYY-MM-DD") + ' > ' + dayjs(dateRange.endDate).format("YYYY-MM-DD")) return () => { console.info("[id] Clean useEffect") } }) return( <View style={styles.dateUiContainer}> <DatePicker mode="range" startDate={dateRange.startDate} endDate={dateRange.endDate} onChange={event => setDateRange(event)} //style={{borderColor:'blue', borderWidth:1}} styles={defaultStyles} firstDayOfWeek={1} min={0} max={3} /> <Button title="Fermer" /> </View> ) }

import DatePicker , {DateType, useDefaultStyles} from 'react-native-ui-datepicker'; import { SelectDate } from "@/components/SelectDate"; export default function Station(){ const [dateRange, setDateRange] = useState<{ startDate: DateType; endDate: DateType; }>({ startDate: dayjs(), endDate: dayjs().add(3, 'days') }); return( <SelectDate styled={styles.selectDate} dateRange={dateRange} onChange={setDateRange} /> ) }

import { useThemeColors } from "@/hooks/useThemeColors"; import FontAwesome from '@expo/vector-icons/FontAwesome6'; import React, { useRef, useEffect, useState } from "react"; import { Modal, ViewStyle, StyleSheet, Image, Text, View, Pressable, Button, Dimensions } from "react-native"; import dayjs from 'dayjs' import DatePicker , {DateType, useDefaultStyles} from 'react-native-ui-datepicker'; import { Row } from "./Row"; type Props = { styled?: ViewStyle, dateRange:{ startDate:DateType, endDate:DateType, }, latestMeasure?: string, onChange?: (event:DateType) => void } // Je ne me suis pas encore pencher sur onChange, mais ca bugera car plus bas on voit onChange={event => setDateRange(event)} export function SelectDate({styled, dateRange, latestMeasure, onChange}:Props){ const colors = useThemeColors() const buttonRef = useRef<View>(null) const [isModalVisible, setModalVisibility] = useState(false) const [position, setPosition] = useState<null | {top: number, right: number}>(null) const defaultStyles = useDefaultStyles(); const onButtonPress = () => { buttonRef.current?.measureInWindow((x, y, width, height) => { setPosition({ top: y + height + 10, right: Dimensions.get("window").width - x - width, }) setModalVisibility(true) }) } const onClose = () => { setModalVisibility(false) } return ( <> <Row style={styled}> <Pressable onPress={onButtonPress}> <View ref={buttonRef} style={[styles.button, {backgroundColor: colors.grayWhite}]} > <FontAwesome name={'calendar'} size={20} color={colors.greenDark} /> </View> </Pressable> </Row> <Modal animationType="fade" transparent visible={isModalVisible} onRequestClose={onClose} > <Pressable style={styles.backdrop} onPress={onClose} /> <View style={[styles.popup, {backgroundColor: colors.tint, ...position}]}> <View style={styles.dateUiContainer}> <DatePicker mode="range" startDate={dateRange.startDate} endDate={dateRange.endDate} onChange={event => onChange} //style={{borderColor:'blue', borderWidth:1}} styles={defaultStyles} firstDayOfWeek={1} min={0} max={3} /> <Button title="Fermer" /> </View> </View> </Modal> </> )

Je pense avoir touver la solution. Qu'en pensez-vous? Est-ce une bonne manière de procéder?
Voici:

Premièrement, ma page station.tsx

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
// Je mets que les plus importantes qui concerne le sujet
import dayjs from 'dayjs'
import DatePicker , {DateType, useDefaultStyles} from 'react-native-ui-datepicker';
import { SelectDate } from "@/components/SelectDate";
 
 
export default function Station(){
 
   const [dateRange, setDateRange] = useState<{
        startDate: DateType;
        endDate: DateType;
    }>({ startDate: dayjs().subtract(1, 'days'), endDate: dayjs() });
 
   return(
      <SelectDate styled={styles.selectDate} dateRange={dateRange} onChange={setDateRange} />
   )
}

Je passe donc la date d'ajourd'hui - celle de un jours suivante dans dateRange

A savoir avant: Dans mon application, j'utilise @tanstack/react-query pour collecter les données d'une base de donnée. Avec ceci, j'affiche les résultats dans des graphiques
Il ne faut pas que lorsque je sélectionne des dates, que la page se rafraichi à cause du QueryKey (dateRange) car dès que dateRange change, useQuery rentre en action.

Code:

1
2
3
4
 const {data, isLoading, error} = useQuery({
        queryKey: ['station', params.id, dateRange],
        queryFn: () => fetchStations(params.id, dayjs(dateRange.startDate).format("YYYY-MM-DD"), dayjs(dateRange.endDate).format("YYYY-MM-DD"))
    })

Je ne vais pas expliquer ce code ci-dessus, car il est hors sujet

Donc, pour éviter ceci, dans mon component selectDate.tsx, je défini un autre state qui va récupérer les dates de ma vue principale

Code:

1
2
3
4
const [dates, setDates] = useState<{
            startDate: DateType;
            endDate: DateType;
          }>({ startDate: dateRange.startDate, endDate: dateRange.endDate });

Puis dans mon DatePicker, je mets à jour Dates

Code:

onChange={event => setDates(event)}

Puis quand je ferme mon calendrier, soit le modal (ou popup), j'envoie la valeur de Dates à ma vue principale, et @tanstack/react-query rentre en action pour faire ma requête, car dateRange est modifié

Code:

1
2
3
4
const onClose = () => {
        onChange(dates)
        setModalVisibility(false)
    }

Qu'en pensez-vous? Est-ce que c'est bien fait comme cela?

Voici le code de mon components
selectDate.tsx

Code:

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
import { useThemeColors } from "@/hooks/useThemeColors";
import FontAwesome from '@expo/vector-icons/FontAwesome6';
import React, { useRef, useEffect, useState } from "react";
import { Modal, ViewStyle, StyleSheet, View, Pressable, Button } from "react-native";
import dayjs from 'dayjs'
import DatePicker , {DateType, useDefaultStyles} from 'react-native-ui-datepicker';
import { Row } from "./Row";
 
type Props = {
    styled: ViewStyle,
    dateRange:{
        startDate:DateType,
        endDate:DateType,
    },
    latestMeasure?: string,
    onChange: (event:any) => void
}
 
export function SelectDate({styled, dateRange, latestMeasure, onChange}:Props){
 
    const colors = useThemeColors()
    const buttonRef = useRef<View>(null)
    const [isModalVisible, setModalVisibility] = useState(false)
    const [position, setPosition] = useState<null | {top: number, right: number}>(null)
 
    const defaultStyles = useDefaultStyles();
 
 
    const [dates, setDates] = useState<{
            startDate: DateType;
            endDate: DateType;
          }>({ startDate: dateRange.startDate, endDate: dateRange.endDate });
 
    useEffect(()=>{
        console.info("[SelectDate] UseEffect")
        console.info("> range: " + dayjs(dates.startDate).format("YYYY-MM-DD") + ' > ' + dayjs(dates.endDate).format("YYYY-MM-DD"))
        return () => {
            console.info("[SelectDate] Clean useEffect")
        }
    })
 
    const onButtonPress = () => {
        buttonRef.current?.measureInWindow((x, y, width, height) => {
            setPosition({
                top: y + height + 100,
                right: 0,
            })
            setModalVisibility(true)
        })
    }
    const onClose = () => {
        onChange(dates)
        setModalVisibility(false)
    }
 
 
 
    return (
        <>
        <Row style={styled}>
            <Pressable onPress={onButtonPress}>
                <View
                    ref={buttonRef} 
                    style={[styles.buttonCalendarIcon, {backgroundColor: colors.grayWhite}]}
                >
                    <FontAwesome name={'calendar-check'} size={20} color={colors.greenDark} />
                </View>
            </Pressable>
        </Row>
        <Modal
            animationType="fade"
            transparent
            visible={isModalVisible}
            onRequestClose={onClose}
        >
            <Pressable style={styles.backdrop} onPress={onClose} />
            <View style={[styles.popup, {backgroundColor: colors.tint, ...position}]}>
                <View style={styles.dateUiContainer}>
                    <DatePicker
                        mode="range"
                        startDate={dates.startDate}
                        endDate={dates.endDate}
                        onChange={event => setDates(event)}
                        //style={{borderColor:'blue', borderWidth:1}}
                        styles={defaultStyles}
                        firstDayOfWeek={1}
                        min={0}
                        max={3}
                    />
                    <View style={styles.buttonCalendarClose}>
                        <Button onPress={onClose} color={colors.white} title="Close" />
                    </View>
                </View>
            </View>
 
        </Modal>
        </>
    )
}