From dba5b511ae79943210ec7a88be7e6aaaa1bac82c Mon Sep 17 00:00:00 2001
From: Emmy D'Anello <emmy@luemy.eu>
Date: Sat, 14 Dec 2024 11:55:11 +0100
Subject: [PATCH] =?UTF-8?q?Affichage=20de=20la=20liste=20des=20d=C3=A9fis?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/app/(tabs)/_layout.tsx       |   2 +-
 client/app/(tabs)/challenges.tsx    |   9 +-
 client/app/_layout.tsx              |   1 +
 client/app/challenges-list.tsx      | 151 ++++++++++++++++++++++++++++
 client/components/ChallengeCard.tsx |  17 ++--
 5 files changed, 168 insertions(+), 12 deletions(-)
 create mode 100644 client/app/challenges-list.tsx

diff --git a/client/app/(tabs)/_layout.tsx b/client/app/(tabs)/_layout.tsx
index 2df0456..f2cefac 100644
--- a/client/app/(tabs)/_layout.tsx
+++ b/client/app/(tabs)/_layout.tsx
@@ -25,7 +25,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="challenges"
         options={{
-          title: 'Défis',
+          title: 'Défi en cours',
           headerShown: false,
           tabBarIcon: ({ color }) => <FontAwesome6 name="coins" size={24} color={color} />,
         }}
diff --git a/client/app/(tabs)/challenges.tsx b/client/app/(tabs)/challenges.tsx
index 413f28d..543fad9 100644
--- a/client/app/(tabs)/challenges.tsx
+++ b/client/app/(tabs)/challenges.tsx
@@ -7,15 +7,17 @@ import { useChallenges } from '@/hooks/useChallenges'
 import { useGame } from '@/hooks/useGame'
 import { FontAwesome6 } from '@expo/vector-icons'
 import { useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'expo-router'
 import { useEffect, useMemo, useState } from 'react'
 import { View } from 'react-native'
 import { ActivityIndicator, Appbar, Banner, FAB, MD3Colors, Snackbar, Surface, Text, TouchableRipple } from 'react-native-paper'
 
 function ChallengeScreenHeader() {
+  const router = useRouter()
   return <>
     <Appbar.Header>
-      <Appbar.Content title={"Défis"} />
-      <Appbar.Action icon='format-list-bulleted' />
+      <Appbar.Content title={"Défi en cours"} />
+      <Appbar.Action icon='format-list-bulleted' onPress={() => router.navigate('/challenges-list')} />
     </Appbar.Header>
     <PenaltyBanner />
   </>
@@ -85,7 +87,8 @@ function ChallengeScreenBody() {
       <ChallengeCard
           challenge={currentChallenge}
           onSuccess={() => { setLoading(true); endChallenge.mutate({ success: true }) }}
-          onFail={() => endChallenge.mutate({ success: false })} />}
+          onFail={() => endChallenge.mutate({ success: false })}
+          style={{ flex: 1, margin: 20 }} />}
     {!loading && !game.penaltyEnd && !currentChallenge && game.currentRunner && <>
       <Banner
           visible={!currentChallenge && game.currentRunner && !loading}
diff --git a/client/app/_layout.tsx b/client/app/_layout.tsx
index d6a6860..af7a3f2 100644
--- a/client/app/_layout.tsx
+++ b/client/app/_layout.tsx
@@ -53,6 +53,7 @@ export default function RootLayout() {
                   <Stack>
                     <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
                     <Stack.Screen name="login" options={{ headerShown: false }} />
+                    <Stack.Screen name="challenges-list" options={{ headerShown: false }} />
                     <Stack.Screen name="+not-found" />
                   </Stack>
                   <StatusBar style="auto" />
diff --git a/client/app/challenges-list.tsx b/client/app/challenges-list.tsx
new file mode 100644
index 0000000..1ba2afa
--- /dev/null
+++ b/client/app/challenges-list.tsx
@@ -0,0 +1,151 @@
+import ChallengeCard from "@/components/ChallengeCard"
+import { useChallenges } from "@/hooks/useChallenges"
+import { Challenge } from "@/utils/features/challenges/challengesSlice"
+import { FontAwesome6 } from "@expo/vector-icons"
+import { useRouter } from "expo-router"
+import { useState } from "react"
+import { FlatList, StyleSheet } from "react-native"
+import { Appbar, Button, Dialog, Divider, FAB, List, MD3Colors, Modal, Portal, Snackbar, Surface, Text, TextInput } from "react-native-paper"
+
+export default function ChallengesList() {
+  const router = useRouter()
+  const challenges = useChallenges()
+
+  const [editChallengeVisible, setEditChallengeVisible] = useState(false)
+  const [editChallengeTitle, setEditChallengeTitle] = useState("")
+  const [editChallengeDescription, setEditChallengeDescription] = useState("")
+  const [editChallengeReward, setEditChallengeReward] = useState(0)
+  const [editChallengeId, setEditChallengeId] = useState<number |null>(null)
+  const [displayedChallenge, setDisplayedChallenge] = useState<Challenge | null>(null)
+  const [confirmDeletedVisible, setConfirmDeleteVisible] = useState(false)
+  const [successSnackbarVisible, setSuccessSnackbarVisible] = useState(false)
+  const [successMessage, setSuccessMessage] = useState("")
+  const [errorVisible, setErrorVisible] = useState(false)
+  const [error, setError] = useState([200, ""])
+
+  return (
+    <Surface style={{ flex: 1 }}>
+      <Appbar.Header>
+        {router.canGoBack() ? <Appbar.BackAction onPress={() => router.back()} /> : undefined}
+        <Appbar.Content title={"Liste des défis"} />
+      </Appbar.Header>
+      <FlatList
+        data={challenges}
+        keyExtractor={(challenge) => `challenge-list-item-${challenge.id}`}
+        ItemSeparatorComponent={() => <Divider />}
+        renderItem={(item) => <ChallengeListItem challenge={item.item} onPress={() => setDisplayedChallenge(item.item)} />} />
+      <Snackbar
+          key='success-snackbar'
+          visible={successSnackbarVisible}
+          icon={'close'}
+          onDismiss={() => setSuccessSnackbarVisible(false)}
+          onIconPress={() => setSuccessSnackbarVisible(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>
+      <FAB
+          icon='plus'
+          style={styles.addButton}
+          onPress={() => {
+            if (editChallengeId) {
+              setEditChallengeTitle("")
+              setEditChallengeDescription("")
+              setEditChallengeReward(0)
+              setEditChallengeId(null)
+            }
+            setEditChallengeVisible(true)
+          }} />
+      <Portal>
+        <Modal
+            visible={displayedChallenge !== null}
+            onDismiss={() => setDisplayedChallenge(null)}
+            contentContainerStyle={{ flex: 1, marginHorizontal: 20, marginVertical: 100 }}>
+          <ChallengeCard
+              challenge={displayedChallenge}
+              onEdit={() => {
+                setEditChallengeTitle(displayedChallenge?.title ?? "")
+                setEditChallengeDescription(displayedChallenge?.description ?? "")
+                setEditChallengeReward(displayedChallenge?.reward ?? 0)
+                setEditChallengeId(displayedChallenge?.id ?? null)
+                setEditChallengeVisible(true)
+              }}
+              onDelete={() => setConfirmDeleteVisible(true)}
+              style={{ flexGrow: 1 }} />
+        </Modal>
+        <Dialog visible={editChallengeVisible} onDismiss={() => setEditChallengeVisible(false)}>
+          <Dialog.Title>{editChallengeId ? "Modification d'un défi" : "Ajout d'un défi"}</Dialog.Title>
+          <Dialog.Content>
+            <TextInput
+                label="Titre"
+                defaultValue={editChallengeTitle}
+                onChangeText={setEditChallengeTitle}
+                error={!editChallengeTitle} />
+            <TextInput
+                label="Description"
+                defaultValue={editChallengeDescription}
+                multiline={true}
+                onChangeText={setEditChallengeDescription}
+                error={!editChallengeDescription} />
+            <TextInput
+                label="Récompense"
+                defaultValue={editChallengeReward ? editChallengeReward.toString() : ""}
+                inputMode='numeric'
+                onChangeText={(text) => setEditChallengeReward(+text)}
+                error={!editChallengeReward}
+                onEndEditing={() => { }} />
+          </Dialog.Content>
+          <Dialog.Actions>
+            <Button onPress={() => setEditChallengeVisible(false)}>Annuler</Button>
+            <Button
+                onPress={() => { }}
+                disabled={!editChallengeTitle || !editChallengeDescription || !editChallengeReward}>
+              Ajouter
+            </Button>
+          </Dialog.Actions>
+        </Dialog>
+        <Dialog visible={confirmDeletedVisible} onDismiss={() => setConfirmDeleteVisible(false)}>
+          <Dialog.Title>Êtes-vous sûre ?</Dialog.Title>
+          <Dialog.Content>
+            <Text variant='bodyMedium'>
+              Voulez-vous vraiment supprimer le défi « {displayedChallenge?.title} » ? Cette opération est irréversible !
+            </Text>
+          </Dialog.Content>
+          <Dialog.Actions>
+            <Button onPress={() => setConfirmDeleteVisible(false)}>Annuler</Button>
+            <Button onPress={() => { }}>Confirmer</Button>
+          </Dialog.Actions>
+        </Dialog>
+      </Portal>
+    </Surface>
+  )
+}
+
+function ChallengeListItem({ challenge, onPress }: { challenge: Challenge, onPress?: () => void }) {
+  const description = <Text>Récompense : {challenge.reward} <FontAwesome6 name='coins' /></Text>
+  return (
+    <List.Item
+        title={challenge.title}
+        description={description}
+        onPress={onPress} />
+  )
+}
+
+
+const styles = StyleSheet.create({
+  addButton: {
+    position: 'absolute',
+    right: 25,
+    bottom: 25,
+  }
+})
diff --git a/client/components/ChallengeCard.tsx b/client/components/ChallengeCard.tsx
index 6d951be..7ee8af2 100644
--- a/client/components/ChallengeCard.tsx
+++ b/client/components/ChallengeCard.tsx
@@ -1,29 +1,30 @@
 import { Challenge } from "@/utils/features/challenges/challengesSlice"
 import { FontAwesome6 } from "@expo/vector-icons"
-import { View } from "react-native"
+import { View, ViewStyle } from "react-native"
 import { Button, Card, IconButton, MD3Colors, Surface, Text } from "react-native-paper"
 
 export type ChallengeCardProps = {
-  challenge: Challenge,
+  challenge: Challenge | null,
   onSuccess?: () => void,
   onFail?: () => void,
   onDelete?: () => void,
   onEdit?: () => void,
+  style?: ViewStyle,
 }
 
-export default function ChallengeCard({ challenge, onSuccess, onFail, onDelete, onEdit }: ChallengeCardProps) {
+export default function ChallengeCard({ challenge, onSuccess, onFail, onDelete, onEdit, style }: ChallengeCardProps) {
   return (
-    <Surface elevation={2} style={{ flex: 1, margin: 20, borderRadius: 20 }}>
+    <Surface elevation={2} style={{ ...style, borderRadius: 20 }}>
       <Card.Title
-          title={challenge.title}
+          title={challenge?.title}
           titleStyle={{ textAlign: 'center' }}
           titleVariant='headlineMedium'
           right={(props) => onEdit ? <IconButton {...props} icon='file-document-edit-outline' onPress={() => onEdit()} /> : <></>} />
       <View style={{ flexGrow: 1 }}>
         <Surface elevation={5} mode='flat' style={{ flexGrow: 1, paddingHorizontal: 15, paddingVertical: 20 }}>
-          <Text variant='bodyLarge' style={{ flexGrow: 1 }}>{challenge.description}</Text>
+          <Text variant='bodyLarge' style={{ flexGrow: 1 }}>{challenge?.description}</Text>
           <Text variant='titleMedium'>
-            Récompense : {challenge.reward} <FontAwesome6 name='coins' />
+            Récompense : {challenge?.reward} <FontAwesome6 name='coins' />
           </Text>
         </Surface>
       </View>
@@ -34,7 +35,7 @@ export default function ChallengeCard({ challenge, onSuccess, onFail, onDelete,
         {onSuccess && <Button key='successBtn' mode='contained' icon='check' onPress={() => onSuccess()}>
           Terminer
         </Button>}
-        {onDelete && <Button key='deleteBtn' mode='contained' icon='delete'  onPress={() => onDelete()} buttonColor={MD3Colors.error60}>
+        {onDelete && <Button key='deleteBtn' mode='contained' icon='delete'  onPress={() => onDelete()} buttonColor={MD3Colors.error60} textColor={MD3Colors.secondary10}>
           Supprimer
         </Button>}
       </View>