change notifications structure from object to array

src/components/comments/Comment.vue

@@ -2,7 +2,7 @@
   <article class="comment | flow" :data-status="setStatus(comment)">
     <header>
       <p>
-        <strong>{{ comment.user.name ?? comment.user.email }}</strong>
+        <strong>{{ comment.author.name ?? comment.author.email }}</strong>
         <template v-if="commentIndex">
           <span class="comment__id">#{{ commentIndex }}</span>
           •

src/components/comments/Comments.vue

@@ -5,9 +5,9 @@
       <template v-if="comments">
         <template v-if="!openedComment">
           <Comment
-            v-for="(comment, commentIndex) in Object.values(comments).reverse()"
+            v-for="(comment, commentIndex) in sortedComments"
             :comment="comment"
-            :commentIndex="commentIndex + 1"
+            :commentIndex="comments.length - commentIndex"
             :key="comment.id"
             @click="openedComment = comment"
           />
@@ -88,7 +88,7 @@
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
 import uniqid from "uniqid";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { useUserStore } from "../../stores/user";
 import { usePageStore } from "../../stores/page";
 import { useApiStore } from "../../stores/api";
@@ -99,7 +99,7 @@ dayjs.locale("fr");
 const { currentPageIndex, file, comments } = defineProps({
   currentPageIndex: Number,
   file: Object,
-  comments: Object,
+  comments: Array,
 });
 
 const { user } = useUserStore();
@@ -111,6 +111,9 @@ const openedComment = ref(null);
 const newCommentText = ref("");
 const isAddOpen = ref(false);
 const emits = defineEmits(["update:file"]);
+const sortedComments = computed(() => {
+  return comments.reverse();
+});
 
 // Functions
 function handleSubmit(event) {