MainPage dynamique (profile)

2024-06-08 12:01:36 -04:00
parent 6e3d467acb
commit e1e5dd04a5
3 changed files with 94 additions and 46 deletions
--- a/src/layouts/MainPage.vue
+++ b/src/layouts/MainPage.vue
@@ -0,0 +1,91 @@
+<template>
+    <v-container style="margin-top: 5%;">
+        <v-row style="background-color: #c4c4c4;">
+            <v-col align="center">
+                <div>
+                    <p>Router : {{ selectedUsername }}</p>
+                    <div v-if="PublicCreatorData">
+                        <h1>{{ PublicCreatorData.userName }}</h1>
+                        <h1>{{ PublicCreatorData.firstName }} {{ PublicCreatorData.lastName }}</h1>
+                    </div>
+                    <div v-else>
+                        <p v-if="errorMessage">{{ errorMessage }}</p>
+                    </div>
+
+                    <form @submit.prevent="manualFetch">
+                        <input v-model="manualUsername" placeholder="Enter username" />
+                        <button type="submit">Fetch User</button>
+                    </form>
+                </div>
+            </v-col>
+        </v-row>
+    </v-container>
+
+    <v-snackbar v-model="errorSnackBar">
+        {{ snackBarMessage }}
+        <template v-slot:actions>
+            <v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
+        </template>
+    </v-snackbar>
+</template>
+
+<script setup>
+import { useClient } from "@/plugins/api.js";
+import { onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+const PublicCreatorData = ref(null);
+const selectedUsername = ref('');
+const manualUsername = ref('');
+const route = useRoute();
+const client = useClient();
+
+let errorSnackBar = ref(false);
+let snackBarMessage = ref('');
+const errorMessage = ref('');
+
+const fetchUser = async (username) => {
+    console.log(`Fetching user: ${username}`);
+    try {
+        const response = await client.get(`/api/GetCreatorInfo`, {
+            params: {
+                UserName: username
+            }
+        });
+        const data = response.data;
+        console.log(`Data received: `, data);
+        if (data && Object.keys(data).length > 0 && (data.userName || data.firstName || data.lastName)) {
+            PublicCreatorData.value = data; // Met à jour la référence réactive
+            errorMessage.value = '';
+            errorSnackBar.value = false;
+        } else {
+            PublicCreatorData.value = null; // Réinitialise la référence si l'utilisateur n'est pas trouvé
+            errorMessage.value = "Utilisateur non trouvé";
+            snackBarMessage.value = "Utilisateur non trouvé";
+            errorSnackBar.value = true;
+        }
+    } catch (error) {
+        console.error(`Error fetching user: ${error}`);
+        PublicCreatorData.value = null;
+        errorMessage.value = "Erreur lors de la récupération des données";
+        snackBarMessage.value = "Erreur lors de la récupération des données";
+        errorSnackBar.value = true;
+    }
+};
+
+const updateUser = () => {
+    selectedUsername.value = route.params.username;
+    console.log(`Route username: ${selectedUsername.value}`);
+    if (selectedUsername.value) {
+        fetchUser(selectedUsername.value);
+    }
+};
+
+const manualFetch = () => {
+    fetchUser(manualUsername.value);
+};
+
+onMounted(updateUser);
+
+watch(() => route.params.username, updateUser);
+</script>