ynerant/traintrape-moi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Utilisation de snackbars pour afficher le statut d'une requête

Browse Source
This commit is contained in:
Emmy D'Anello 2024-12-14 01:44:32 +01:00
parent 57676abb02
commit 50382079c0
Signed by: ynerant
GPG Key ID: 3A75C55819C8CF85
3 changed files with 157 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
client/app/(tabs)/challenges.tsx
View File

@ -39,13 +39,22 @@ function ChallengeScreenBody() {
}, [currentChallengeAction, challenges])
const [loading, setLoading] = useState(false)
const [successSnackbarVisible, setSuccessSnackbarVisible] = useState(false)
const [errorVisible, setErrorVisible] = useState(false)
const [error, setError] = useState([200, ""])
const drawRandomChallengeMutation = useDrawRandomChallengeMutation({
auth,
onPostSuccess: () => {
setLoading(true)
setSuccessSnackbarVisible(true)
queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-challenges' || query.queryKey[0] === 'get-player' })
}
},
onError: ({ response, error }) => {
setErrorVisible(true)
if (response)
setError([response.statusCode, response.message])
else if (error)
setError([400, error.message])
},
})
const endChallenge = useEndChallenge({
auth,
@ -54,6 +63,13 @@ function ChallengeScreenBody() {
setSuccessSnackbarVisible(true)
queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-challenges' || query.queryKey[0] === 'get-player' })
},
onError: ({ response, error }) => {
setErrorVisible(true)
if (response)
setError([response.statusCode, response.message])
else if (error)
setError([400, error.message])
},
})
useEffect(() => {
if (challengeActions)
@ -95,11 +111,23 @@ function ChallengeScreenBody() {
Vous êtes poursuiveuse, et n'avez donc pas de défi à accomplir.
</Banner>
<Snackbar
key='success-snackbar'
visible={successSnackbarVisible}
icon={'close'}
onDismiss={() => setSuccessSnackbarVisible(false)}
action={{ label: "Fermer", onPress: () => setSuccessSnackbarVisible(false) }}>
onIconPress={() => setSuccessSnackbarVisible(false)}>
Jeu actualisé
</Snackbar>
<Snackbar
key='error-snackbar'
visible={errorVisible}
icon={'close'}
onDismiss={() => setErrorVisible(false)}
onIconPress={() => setErrorVisible(false)}>
<Text variant='bodyMedium' style={{ color: MD3Colors.secondary0 }}>
Erreur {error[0]} : {error[1]}
</Text>
</Snackbar>
</>
}

91
client/app/(tabs)/settings.tsx
View File

@ -1,12 +1,19 @@
import { useGameRepairMutation, useGameResetMutation, useGameStartMutation, useGameStopMutation, useGameSwitchPlayerMutation } from '@/hooks/mutations/useGameMutation'
import { useAuth } from '@/hooks/useAuth'
import { useGame, useUpdateGameState } from '@/hooks/useGame'
import { useQueryClient } from '@tanstack/react-query'
import { useRouter } from 'expo-router'
import { useState } from 'react'
import { Button, Dialog, FAB, List, Portal, Surface, Text } from 'react-native-paper'
import { Button, Dialog, FAB, List, MD3Colors, Portal, Snackbar, Surface, Text } from 'react-native-paper'
export default function HistoryScreen() {
const [successVisible, setSuccessVisible] = useState(false)
const [successMessage, setSuccessMessage] = useState("")
const [errorVisible, setErrorVisible] = useState(false)
const [error, setError] = useState([200, ""])
const router = useRouter()
const queryClient = useQueryClient()
const auth = useAuth()
const game = useGame()
const updateGameState = useUpdateGameState()
@ -14,22 +21,84 @@ export default function HistoryScreen() {
const gameStartMutation = useGameStartMutation({
auth,
updateGameState,
onPostSuccess: () => {
setSuccessVisible(true)
setSuccessMessage("Jeu démarré avec succès")
queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-game' })
},
onError: ({ response, error }) => {
setErrorVisible(true)
if (response)
setError([response.statusCode, response.message])
else if (error)
setError([400, error.message])
},
})
const gameStopMutation = useGameStopMutation({
auth,
updateGameState,
onPostSuccess: () => {
setSuccessVisible(true)
setSuccessMessage("Jeu arrêté avec succès")
queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-game' })
},
onError: ({ response, error }) => {
setErrorVisible(true)
if (response)
setError([response.statusCode, response.message])
else if (error)
setError([400, error.message])
},
})
const gameSwitchMutation = useGameSwitchPlayerMutation({
auth,
updateGameState,
onPostSuccess: () => {
setSuccessVisible(true)
setSuccessMessage("Échange de joueuse en course réalisé avec succès")
queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-game' })
},
onError: ({ response, error }) => {
setErrorVisible(true)
if (response)
setError([response.statusCode, response.message])
else if (error)
setError([400, error.message])
},
})
const gameRepairMutation = useGameRepairMutation({
auth,
updateGameState,
onPostSuccess: () => {
setSuccessVisible(true)
setSuccessMessage("Réparation du jeu effectuée avec succès")
queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-game' })
queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-player' })
queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'money-updates' })
},
onError: ({ response, error }) => {
setErrorVisible(true)
if (response)
setError([response.statusCode, response.message])
else if (error)
setError([400, error.message])
},
})
const gameResetMutation = useGameResetMutation({
auth,
updateGameState,
onPostSuccess: () => {
setSuccessVisible(true)
setSuccessMessage("Jeu réinitialisé avec succès")
queryClient.invalidateQueries()
},
onError: ({ response, error }) => {
setErrorVisible(true)
if (response)
setError([response.statusCode, response.message])
else if (error)
setError([400, error.message])
},
})
const [resetConfirmVisible, setResetConfirmVisible] = useState(false)
@ -80,6 +149,26 @@ export default function HistoryScreen() {
right={() => <FAB icon="reload-alert" size="small" variant={'tertiary'} />}
onPress={() => setResetConfirmVisible(true)} />
</List.Section>
<Snackbar
key='success-snackbar'
visible={successVisible}
icon={'close'}
onDismiss={() => setSuccessVisible(false)}
onIconPress={() => setSuccessVisible(false)}>
<Text variant='bodyMedium' style={{ color: MD3Colors.secondary0 }}>
{successMessage}
</Text>
</Snackbar>
<Snackbar
key='error-snackbar'
visible={errorVisible}
icon={'close'}
onDismiss={() => setErrorVisible(false)}
onIconPress={() => setErrorVisible(false)}>
<Text variant='bodyMedium' style={{ color: MD3Colors.secondary0 }}>
Erreur {error[0]} : {error[1]}
</Text>
</Snackbar>
<Portal>
<Dialog key="confirmReset" visible={resetConfirmVisible} onDismiss={() => setResetConfirmVisible(false)}>
<Dialog.Title>Confirmer</Dialog.Title>

39
client/app/(tabs)/train.tsx
View File

@ -4,19 +4,36 @@ import { useAuth } from '@/hooks/useAuth'
import { useTrain } from '@/hooks/useTrain'
import { TrainTrip } from '@/utils/features/train/trainSlice'
import { FontAwesome6 } from '@expo/vector-icons'
import { useQueryClient } from '@tanstack/react-query'
import { useMemo, useState } from 'react'
import { FlatList, StyleSheet } from 'react-native'
import { Button, Dialog, Divider, FAB, HelperText, List, Portal, Surface, Text, TextInput } from 'react-native-paper'
import { Button, Dialog, Divider, FAB, HelperText, List, MD3Colors, Portal, Snackbar, Surface, Text, TextInput } from 'react-native-paper'
export default function TrainScreen() {
const [addTrainVisible, setAddTrainVisible] = useState(false)
const [addTrainUrl, setAddTrainUrl] = useState("")
const trainId = useMemo(() => /[0-9A-F]{8}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{12}/.exec(addTrainUrl)?.[0], [addTrainUrl])
const [successSnackbarVisible, setSuccessSnackbarVisible] = useState(false)
const [errorVisible, setErrorVisible] = useState(false)
const [error, setError] = useState([200, ""])
const auth = useAuth()
const queryClient = useQueryClient()
const addTrainMutation = useAddTrainMutation({
auth,
onPostSuccess: () => setAddTrainVisible(false)
onPostSuccess: () => {
setAddTrainVisible(false)
setSuccessSnackbarVisible(true)
queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-trains' })
},
onError: ({ response, error }) => {
setErrorVisible(true)
if (response)
setError([response.statusCode, response.message])
else if (error)
setError([400, error.message])
},
})
const trains = useTrain()
@ -33,6 +50,24 @@ export default function TrainScreen() {
icon='plus'
style={styles.addTrainButton}
onPress={() => setAddTrainVisible(true)} />
<Snackbar
key='success-snackbar'
visible={successSnackbarVisible}
icon={'close'}
onDismiss={() => setSuccessSnackbarVisible(false)}
onIconPress={() => setSuccessSnackbarVisible(false)}>
Train ajouté avec succès
</Snackbar>
<Snackbar
key='error-snackbar'
visible={errorVisible}
icon={'close'}
onDismiss={() => setErrorVisible(false)}
onIconPress={() => setErrorVisible(false)}>
<Text variant='bodyMedium' style={{ color: MD3Colors.secondary0 }}>
Erreur {error[0]} : {error[1]}
</Text>
</Snackbar>
<Portal>
<Dialog visible={addTrainVisible} onDismiss={() => setAddTrainVisible(false)}>
<Dialog.Title>Ajout d'un train</Dialog.Title>