From 33ee18d7e2cf7ec4562a69fb25f68efda4ef7c4b Mon Sep 17 00:00:00 2001
From: Emmy D'Anello <emmy@luemy.eu>
Date: Wed, 11 Dec 2024 23:42:22 +0100
Subject: [PATCH] Enregistrement de trajet en train

---
 client/app/(tabs)/_layout.tsx              |  2 +-
 client/app/(tabs)/index.tsx                |  2 +-
 client/app/(tabs)/train.tsx                | 63 ++++++++++++++++++++--
 client/hooks/mutations/useTrainMutation.ts | 49 +++++++++++++++++
 4 files changed, 110 insertions(+), 6 deletions(-)
 create mode 100644 client/hooks/mutations/useTrainMutation.ts

diff --git a/client/app/(tabs)/_layout.tsx b/client/app/(tabs)/_layout.tsx
index 92b529c..8d4e7a3 100644
--- a/client/app/(tabs)/_layout.tsx
+++ b/client/app/(tabs)/_layout.tsx
@@ -33,7 +33,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="train"
         options={{
-          title: 'Ajouter un trajet',
+          title: 'Trains',
           headerTitleStyle: {fontSize: 32},
           tabBarIcon: ({ color }) => <FontAwesome6 name="train" size={24} color={color} />,
         }}
diff --git a/client/app/(tabs)/index.tsx b/client/app/(tabs)/index.tsx
index 2bbb9f9..7960bc4 100644
--- a/client/app/(tabs)/index.tsx
+++ b/client/app/(tabs)/index.tsx
@@ -27,7 +27,7 @@ export default function MapScreen() {
           visible={game.gameStarted || game.money > 0}
           size='small'
           color='black'
-          icon={game.currentRunner ? 'run-fast' : 'police-badge'}
+          icon={game.currentRunner ? 'run-fast' : () => <FontAwesome6 name='cat' size={20} />}
           label={game.currentRunner ? "Coureuse" : "Poursuiveuse"} />
     </Surface>
   )
diff --git a/client/app/(tabs)/train.tsx b/client/app/(tabs)/train.tsx
index ecc5f3d..20bb034 100644
--- a/client/app/(tabs)/train.tsx
+++ b/client/app/(tabs)/train.tsx
@@ -1,10 +1,65 @@
-import { ScrollView } from 'react-native'
-import { Surface, Text } from 'react-native-paper'
+import { useAddTrainMutation } from '@/hooks/mutations/useTrainMutation'
+import { useAuth } from '@/hooks/useAuth'
+import { useMemo, useState } from 'react'
+import { StyleSheet } from 'react-native'
+import { Button, Dialog, FAB, HelperText, Portal, 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 auth = useAuth()
+  const addTrainMutation = useAddTrainMutation({
+    auth,
+    onPostSuccess: () => setAddTrainVisible(false)
+  })
+
   return (
-    <Surface>
-      <Text>Ici on aura la page pour ajouter un trajet en train depuis Rail Planner</Text>
+    <Surface style={{ flex: 1 }}>
+      <Text variant='bodyMedium'>Ici on aura la page pour ajouter un trajet en train depuis Rail Planner</Text>
+      <FAB
+          icon='plus'
+          style={styles.addTrainButton}
+          onPress={() => setAddTrainVisible(true)} />
+      <Portal>
+        <Dialog visible={addTrainVisible} onDismiss={() => setAddTrainVisible(false)}>
+          <Dialog.Title>Ajout d'un train</Dialog.Title>
+          <Dialog.Content>
+            <TextInput
+                label="URL de partage RailPlanner"
+                autoComplete='url'
+                inputMode='url'
+                defaultValue={addTrainUrl}
+                multiline={true}
+                onChangeText={setAddTrainUrl}
+                error={!trainId}
+                onEndEditing={() => {
+                  if (trainId !== undefined)
+                    addTrainMutation.mutate(trainId)
+                }}
+                placeholder="https://eurailapp.com/share/journey?id=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX&type=list&brand=interrail" />
+            <HelperText type='error' visible={!trainId && addTrainVisible}>
+              Le champ doit contenir l'identifiant d'un voyage au format UUID. {trainId}
+            </HelperText>
+          </Dialog.Content>
+          <Dialog.Actions>
+            <Button onPress={() => setAddTrainVisible(false)}>Annuler</Button>
+            <Button onPress={() => {
+              if (trainId !== undefined)
+                addTrainMutation.mutate(trainId)
+            }} disabled={trainId === undefined || addTrainMutation.isPending}>Ajouter</Button>
+          </Dialog.Actions>
+        </Dialog>
+      </Portal>
     </Surface>
   )
 }
+
+const styles = StyleSheet.create({
+  addTrainButton: {
+    position: 'absolute',
+    right: 25,
+    bottom: 25,
+  }
+})
diff --git a/client/hooks/mutations/useTrainMutation.ts b/client/hooks/mutations/useTrainMutation.ts
new file mode 100644
index 0000000..fd08f1f
--- /dev/null
+++ b/client/hooks/mutations/useTrainMutation.ts
@@ -0,0 +1,49 @@
+import { AuthState } from "@/utils/features/auth/authSlice"
+import { useMutation } from "@tanstack/react-query"
+
+type ErrorResponse = {
+  error: string
+  message: string
+  statusCode: number
+}
+
+type onPostSuccessFunc = () => void
+type ErrorFuncProps = { response?: ErrorResponse, error?: Error }
+type onErrorFunc = (props: ErrorFuncProps) => void
+
+type TrainProps = {
+  // addTrain: (payload: TrainPayload) => { payload: GamePayload, type: "train/addTrain" }
+  auth: AuthState
+  onPostSuccess?: onPostSuccessFunc
+  onError?: onErrorFunc
+}
+
+export const useAddTrainMutation = ({ auth, onPostSuccess, onError }: TrainProps) => {
+  return useMutation({
+    mutationFn: async (trainId: string) => {
+      return fetch(`${process.env.EXPO_PUBLIC_TRAINTRAPE_MOI_SERVER}/trains/import/`, {
+        method: "POST",
+        headers: {
+          "Authorization": `Bearer ${auth.token}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          id: trainId,
+        }),
+      }).then(resp => resp.json())
+    },
+    onSuccess: async (data) => {
+      if (data.error) {
+        if (onError)
+          onError({ response: data })
+        return
+      }
+      if (onPostSuccess)
+        onPostSuccess()
+    },
+    onError: async (error: Error) => {
+      if (onError)
+        onError({ error: error })
+    }
+  })
+}