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

Ajout, modification et suppression de défi

Browse Source
This commit is contained in:
Emmy D'Anello
2024-12-14 12:36:50 +01:00
parent dba5b511ae
commit fd4b0e8cd1
3 changed files with 182 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/app/(tabs)/index.tsx
View File

@@ -24,14 +24,16 @@ export default function MapScreen() {
visible={game.gameStarted || game.money > 0}
icon={(props) => <FontAwesome6 {...props} name='coins' size={20} />}
color='black'
label={`${game.money}`} />
label={`${game.money}`}
onPress={() => {}} />
<FAB
style={styles.statusBadge}
visible={game.gameStarted || game.money > 0}
size='small'
color='black'
icon={game.currentRunner ? 'run-fast' : () => <FontAwesome6 name='cat' size={20} />}
label={game.currentRunner ? "Coureuse" : "Poursuiveuse"} />
label={game.currentRunner ? "Coureuse" : "Poursuiveuse"}
onPress={() => {}} />
</View>
<FreeChaseBanner />
</Surface>

84
client/app/challenges-list.tsx
View File

@@ -1,7 +1,10 @@
import ChallengeCard from "@/components/ChallengeCard"
import { useAddChallengeMutation, useDeleteChallengeMutation, useEditChallengeMutation } from "@/hooks/mutations/useChallengeMutation"
import { useAuth } from "@/hooks/useAuth"
import { useChallenges } from "@/hooks/useChallenges"
import { Challenge } from "@/utils/features/challenges/challengesSlice"
import { FontAwesome6 } from "@expo/vector-icons"
import { useQueryClient } from "@tanstack/react-query"
import { useRouter } from "expo-router"
import { useState } from "react"
import { FlatList, StyleSheet } from "react-native"
@@ -9,6 +12,8 @@ import { Appbar, Button, Dialog, Divider, FAB, List, MD3Colors, Modal, Portal, S
export default function ChallengesList() {
const router = useRouter()
const queryClient = useQueryClient()
const auth = useAuth()
const challenges = useChallenges()
const [editChallengeVisible, setEditChallengeVisible] = useState(false)
@@ -23,6 +28,77 @@ export default function ChallengesList() {
const [errorVisible, setErrorVisible] = useState(false)
const [error, setError] = useState([200, ""])
const addChallengeMutation = useAddChallengeMutation({
auth,
onPostSuccess: () => {
setSuccessMessage("Le défi a bien été ajouté !")
setSuccessSnackbarVisible(true)
queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-challenges' })
},
onError: ({ response, error }) => {
setErrorVisible(true)
if (response)
setError([response.statusCode, response.message])
else if (error)
setError([400, error.message])
},
})
const editChallengeMutation = useEditChallengeMutation({
auth,
onPostSuccess: () => {
setSuccessMessage("Le défi a bien été modifié !")
setSuccessSnackbarVisible(true)
setEditChallengeVisible(false)
setDisplayedChallenge(null)
queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-challenges' })
},
onError: ({ response, error }) => {
setErrorVisible(true)
if (response)
setError([response.statusCode, response.message])
else if (error)
setError([400, error.message])
},
})
const deleteChallengeMutation = useDeleteChallengeMutation({
auth,
onPostSuccess: () => {
setSuccessMessage("Le défi a bien été supprimé !")
setSuccessSnackbarVisible(true)
setEditChallengeVisible(false)
queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'get-challenges' })
},
onError: ({ response, error }) => {
setErrorVisible(true)
if (response)
setError([response.statusCode, response.message])
else if (error)
setError([400, error.message])
},
})
function sendEditChallenge() {
if (editChallengeId) {
editChallengeMutation.mutate({
id: editChallengeId,
title: editChallengeTitle,
description: editChallengeDescription,
reward: editChallengeReward,
})
}
else {
addChallengeMutation.mutate({
title: editChallengeTitle,
description: editChallengeDescription,
reward: editChallengeReward,
})
}
}
function sendDeleteChallenge() {
displayedChallenge && deleteChallengeMutation.mutate(displayedChallenge)
}
return (
<Surface style={{ flex: 1 }}>
<Appbar.Header>
@@ -103,14 +179,14 @@ export default function ChallengesList() {
inputMode='numeric'
onChangeText={(text) => setEditChallengeReward(+text)}
error={!editChallengeReward}
onEndEditing={() => { }} />
onEndEditing={sendEditChallenge} />
</Dialog.Content>
<Dialog.Actions>
<Button onPress={() => setEditChallengeVisible(false)}>Annuler</Button>
<Button
onPress={() => { }}
onPress={sendEditChallenge}
disabled={!editChallengeTitle || !editChallengeDescription || !editChallengeReward}>
Ajouter
{editChallengeId ? "Modifier" : "Ajouter"}
</Button>
</Dialog.Actions>
</Dialog>
@@ -123,7 +199,7 @@ export default function ChallengesList() {
</Dialog.Content>
<Dialog.Actions>
<Button onPress={() => setConfirmDeleteVisible(false)}>Annuler</Button>
<Button onPress={() => { }}>Confirmer</Button>
<Button onPress={sendDeleteChallenge}>Confirmer</Button>
</Dialog.Actions>
</Dialog>
</Portal>

98
client/hooks/mutations/useChallengeMutation.ts
View File

@@ -1,4 +1,5 @@
import { AuthState } from "@/utils/features/auth/authSlice"
import { Challenge } from "@/utils/features/challenges/challengesSlice"
import { useMutation } from "@tanstack/react-query"
type ErrorResponse = {
@@ -17,6 +18,12 @@ type ChallengeActionProps = {
onError?: onErrorFunc
}
type ChallengeProps = {
auth: AuthState
onPostSuccess?: onPostSuccessFunc
onError?: onErrorFunc
}
export const useDrawRandomChallengeMutation = ({ auth, onPostSuccess, onError }: ChallengeActionProps) => {
return useMutation({
mutationFn: async () => {
@@ -73,3 +80,94 @@ export const useEndChallenge = ({ auth, onPostSuccess, onError }: ChallengeActio
}
})
}
export const useAddChallengeMutation = ({ auth, onPostSuccess, onError }: ChallengeProps) => {
return useMutation({
mutationFn: async (challenge: Omit<Challenge, 'id'>) => {
return fetch(`${process.env.EXPO_PUBLIC_TRAINTRAPE_MOI_SERVER}/challenges/`, {
method: "POST",
headers: {
"Authorization": `Bearer ${auth.token}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
title: challenge.title,
description: challenge.description,
reward: challenge.reward,
})
}).then(resp => resp.json())
},
onSuccess: async (data) => {
if (data.statusCode) {
if (onError)
onError({ response: data })
return
}
if (onPostSuccess)
onPostSuccess()
},
onError: async (error: Error) => {
if (onError)
onError({ error: error })
}
})
}
export const useEditChallengeMutation = ({ auth, onPostSuccess, onError }: ChallengeProps) => {
return useMutation({
mutationFn: async (challenge: Challenge) => {
return fetch(`${process.env.EXPO_PUBLIC_TRAINTRAPE_MOI_SERVER}/challenges/${challenge.id}/`, {
method: "PATCH",
headers: {
"Authorization": `Bearer ${auth.token}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
title: challenge.title,
description: challenge.description,
reward: challenge.reward,
})
}).then(resp => resp.json())
},
onSuccess: async (data) => {
if (data.statusCode) {
if (onError)
onError({ response: data })
return
}
if (onPostSuccess)
onPostSuccess()
},
onError: async (error: Error) => {
if (onError)
onError({ error: error })
}
})
}
export const useDeleteChallengeMutation = ({ auth, onPostSuccess, onError }: ChallengeProps) => {
return useMutation({
mutationFn: async (challenge: Challenge) => {
return fetch(`${process.env.EXPO_PUBLIC_TRAINTRAPE_MOI_SERVER}/challenges/${challenge.id}/`, {
method: "DELETE",
headers: {
"Authorization": `Bearer ${auth.token}`,
"Content-Type": "application/json",
},
}).then(resp => resp.json())
},
onSuccess: async (data) => {
if (data.statusCode) {
if (onError)
onError({ response: data })
return
}
if (onPostSuccess)
onPostSuccess()
},
onError: async (error: Error) => {
if (onError)
onError({ error: error })
}
})
}