fix: to composition api

front/MyINPulse-front/src/components/canvas/CanvasItem.vue

@@ -9,46 +9,36 @@
     </div>
 </template>
   
-<script>
-import { ref, onMounted } from "vue";
+<script setup lang="ts">
+import { ref, defineProps, onMounted } from "vue";
 import axios from "axios";
 
-export default {
-  props: {
-    title: String,
-    description: String,
-  },
+const props = defineProps<{  
+    title: string;
+    description: string;
+}>();
 
-  setup(props) {
-    const expanded = ref(false);
-    const currentDescription = ref(props.description);
+const expanded = ref(false);
+const currentDescription = ref(props.description);
 
-    const fetchData = async () => {
-      try {
-        const response = await axios.get("http://localhost:5000/data"); // to edit later!
-        currentDescription.value = response.data[0].canva_data;
-
-      } catch (error) {
-        console.error("Erreur lors de la récupération des données :", error);
-      }
-    };
-
-    const toggleExpand = async () => {
-      if (!expanded.value) {
-        await fetchData();
-      } else {
-        currentDescription.value = props.description;
-      }
-      expanded.value = !expanded.value;
-    };
-
-    return {
-      expanded,
-      currentDescription,
-      toggleExpand
-    };
+const fetchData = async () => {
+  try {
+    const response = await axios.get("http://localhost:5000/data"); // Update the URL if needed
+    currentDescription.value = response.data[0].canva_data;
+  } catch (error) {
+    console.error("Erreur lors de la récupération des données :", error);
   }
 };
+
+const toggleExpand = async () => {
+  if (!expanded.value) {
+    await fetchData();
+  } else {
+    currentDescription.value = props.description;
+  }
+  expanded.value = !expanded.value;
+};
+
 </script>