read comment working

public/site/plugins/comments/index.php

@@ -12,5 +12,6 @@ Kirby::plugin('adrienpayet/kirby4-comments', [
     require(__DIR__ . '/routes/update.php'),
     require(__DIR__ . '/routes/delete.php'),
     require(__DIR__ . '/routes/reply.php'),
+    require(__DIR__ . '/routes/read.php'),
   ]
 ]);

public/site/plugins/comments/routes/delete.php

@@ -38,7 +38,7 @@ return [
       
       echo json_encode(getFileData($newFile));
       
-      kirby()->user()->deleteNotification($page, $data->id);
+      kirby()->user()->deleteNotification($page->managers()->toUsers(), $data->id);
 
       exit;
   }

public/site/plugins/comments/routes/read.php

@@ -0,0 +1,28 @@
+<?php
+
+return [
+  'pattern' => '(:all)read-comment.json',
+  'method' => 'POST',
+  'action'  => function () {
+      $json = file_get_contents('php://input');
+      $data = json_decode($json);
+
+      try {
+        $newNotification = kirby()->user()->readNotification($data->notificationId);
+        if ($newNotification) {
+          return [
+            "success" => "Notification read.",
+            "data" => $newNotification
+          ];
+        } else {
+          throw new Exception("Can't find corresponding notification.", 1);
+        }
+      } catch (\Throwable $th) {
+        return [
+          "error" => $th->getMessage(),
+          "notificationId" => $data->notificationId,
+          "userName" => kirby()->user()->name()->value()
+        ];
+      }
+  }
+];

public/site/plugins/comments/src/BaseComment.php

@@ -43,6 +43,7 @@ class BaseComment {
     $this->date = $date;
     $this->id = $id;
     $this->type = $type;
+    $this->isRead = false;
     $this->position = $position;
   }
 
@@ -78,6 +79,20 @@ class BaseComment {
     return $this->type;
   }
 
+  public function isRead() {
+    return $this->isRead;
+  }
+
+  public function read() {
+    $this->isRead = true;
+    return $this->isRead;
+  }
+  
+  public function unread() {
+    $this->isRead = false;
+    return $this->isRead;
+  }
+
   public function pageIndex() {
     $this->position['pageIndex'];
   }
@@ -93,6 +108,7 @@ class BaseComment {
         'date' => $this->date,
         'id' => $this->id,
         'type' => $this->type,
+        'isRead' => $this->isRead
     ];
   }
 }

public/site/plugins/notifications/index.php

@@ -1,11 +1,9 @@
 <?php
 
 Kirby::plugin('adrienpayet/pdc-notifications', [
-  // 'routes' => [
-  //   require(__DIR__ . '/routes/mark-as-read.php'),
-  // ],
   'userMethods' => [
     'sendNotification' => require(__DIR__ . '/user-methods/send.php'),
-    'deleteNotification' => require(__DIR__ . '/user-methods/delete.php')
+    'deleteNotification' => require(__DIR__ . '/user-methods/delete.php'),
+    'readNotification' => require(__DIR__ . '/user-methods/read.php')
   ]
 ]);

public/site/plugins/notifications/user-methods/delete.php

@@ -1,25 +1,22 @@
 <?php
 
-return function($project, $notificationId) {
-  $projectManagers = $project->managers()->toUsers();
-  
-  foreach ($projectManagers as $user) {
-    try {
-      $notifications = $user->notifications()->isNotEmpty() 
-          ? Yaml::decode($user->notifications()->value())
-          : [];          
-          
-      foreach ($notifications as $key => $notification) {
-        if ($notification['id'] === $notificationId) {
-          unset($notifications[$key]);
-        }
+return function($notificationId) { 
+  $user = kirby()->user();
+  try {
+    $notifications = $user->notifications()->isNotEmpty() 
+        ? Yaml::decode($user->notifications()->value())
+        : [];          
+        
+    foreach ($notifications as $key => $notification) {
+      if ($notification['id'] === $notificationId) {
+        unset($notifications[$key]);
       }
-
-      $user->update([
-        'notifications' => Yaml::encode(array_values($notifications))
-      ]);
-    } catch (\Throwable $th) {
-      throw new Exception("Error updating notifications: " . $th->getMessage() . ' line ' . $th->getLine(), 1);
     }
+
+    $user->update([
+      'notifications' => Yaml::encode(array_values($notifications))
+    ]);
+  } catch (\Throwable $th) {
+    throw new Exception("Error updating notifications: " . $th->getMessage() . ' line ' . $th->getLine(), 1);
   }
 };

public/site/plugins/notifications/user-methods/read.php

@@ -1,16 +1,26 @@
 <?php
 
-return function ($group, $notificationId) {
-  $notifications = Yaml::decode($this->notifications()->value());
+return function($notificationId) { 
 
   try {
-    $notifications[$group][$notificationId]['isRead'] = true;
+    $notifications = $this->notifications()->isNotEmpty() 
+        ? Yaml::decode($this->notifications()->value())
+        : [];            
+    
+    $newNotification = null;
+    foreach ($notifications as $key => $notification) {
+      if ($notification['id'] === $notificationId) {
+        $notifications[$key]['isRead'] = true;
+        $newNotification = $notifications[$key];
+      }
+    }
+
+    $this->update([
+      'notifications' => Yaml::encode(array_values($notifications))
+    ]);
+
+    return $newNotification;
   } catch (\Throwable $th) {
-    //throw $th;
+    throw new Exception("Error updating notifications: " . $th->getMessage() . ' line ' . $th->getLine(), 1);
   }
-  
-  $this->update([
-    "notifications" => $notifications
-  ]);
-  return $notifications;
 };

public/site/plugins/notifications/user-methods/send.php

@@ -14,11 +14,11 @@
  */
 
 return function ($projectUri, $notificationData) {
-  $notificationData['isRead'] = false;
   $recipients = page($projectUri)->managers()->toUsers()->not($this); 
   
   if (!$recipients) return;
   
+  $notificationData['isRead'];
   foreach ($recipients as $otherUser) {
     try {
       $notifications = $otherUser->notifications()->isNotEmpty() 

src/components/comments/Comment.vue

@@ -3,6 +3,7 @@
     :id="`comment-${comment.id}`"
     class="comment | flow"
     :data-status="status"
+    @click="read()"
   >
     <header>
       <p>
@@ -15,7 +16,7 @@
         <time
           class="comment__date"
           :datetime="dayjs(comment.date).format('YYYY-MM-DD')"
-          >{{ formatDate(comment.date) }}</time
+          >{{ formatDate() }}</time
         >
       </p>
     </header>
@@ -29,7 +30,7 @@
         }}
       </p>
       <div
-        v-if="comment.author.uuid === user.uuid"
+        v-if="comment.author.uuid === userStore.user.uuid"
         class="comment__ctas | mt-8"
       >
         <button class="btn btn--transparent btn--icon btn--sm" data-icon="edit">
@@ -38,7 +39,7 @@
         <button
           class="btn btn--transparent btn--icon btn--sm"
           data-icon="delete"
-          @click="deleteComment($event, comment)"
+          @click="deleteComment($event)"
         >
           <span class="sr-only">Supprimer</span>
         </button>
@@ -54,6 +55,7 @@ import { useUserStore } from "../../stores/user";
 import { useApiStore } from "../../stores/api";
 import { useDialogStore } from "../../stores/dialog";
 import { computed } from "vue";
+import { storeToRefs } from "pinia";
 
 dayjs.locale("fr");
 
@@ -64,22 +66,25 @@ const { comment, commentIndex } = defineProps({
 
 const emits = defineEmits(["update:file", "close:comment"]);
 
-const { user } = useUserStore();
+const userStore = useUserStore();
 const api = useApiStore();
 const dialog = useDialogStore();
 
 //  Functions
 const status = computed(() => {
-  const correspondingNotification = user.notifications.find(
+  const correspondingNotification = userStore.notifications.find(
     (notification) => notification.id === comment.id
   );
-  if (!correspondingNotification) return undefined;
-  return correspondingNotification.isRead ? undefined : "unread";
+  if (!correspondingNotification.isRead) {
+    return "unread";
+  } else {
+    return undefined;
+  }
 });
 
-function formatDate(date) {
+function formatDate() {
   const todayNumber = parseInt(dayjs().format("YYMMD"));
-  const dateNumber = parseInt(dayjs(date).format("YYMMD"));
+  const dateNumber = parseInt(dayjs(comment.date).format("YYMMD"));
 
   if (dateNumber === todayNumber) {
     return "Aujourd'hui";
@@ -97,17 +102,17 @@ function closeAddField() {
   newCommentText.value = "";
 }
 
-async function readNotification(notificationId) {
-  const newNotifications = await api.readNotification(
-    user.uuid,
-    "comments",
-    notificationId
-  );
-
-  user.notifications = newNotifications;
+async function read() {
+  if (status.value !== "unread") return;
+  try {
+    const newNotification = await api.readNotification(comment.id);
+    userStore.readNotification(comment.id);
+  } catch (error) {
+    console.log("Erreur lors de la lecture de la notification : ", error);
+  }
 }
 
-async function deleteComment(event, comment) {
+async function deleteComment(event) {
   event.stopPropagation();
   const newFile = await api.deleteComment(comment);
   dialog.updateFile(newFile);

src/components/comments/Comments.vue

@@ -12,10 +12,7 @@
             :comment="comment"
             :commentIndex="comments.length - commentIndex"
             :key="comment.id"
-            @click="
-              readNotification(comment);
-              openComment(comment);
-            "
+            @click="openComment(comment)"
             @update:file="changeFile"
             @close:comment="closeComment"
           />
@@ -248,16 +245,6 @@ function handleCommentPositionClick(event) {
   toggleCommentPositionMode(false);
 }
 
-function readNotification(comment) {
-  const correspondingNotification = user.notifications.find(
-    (notification) => notification.id === comment.id
-  );
-
-  if (correspondingNotification) {
-    correspondingNotification.isRead = true;
-  }
-}
-
 function openComment(comment) {
   if (comment.replies.length) {
     openedComment.value = comment;

src/stores/api.js

@@ -189,28 +189,25 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
-  async function readNotification(userUuid, group, notificationId) {
+  async function readNotification(notificationId) {
     const headers = {
       method: "POST",
       body: JSON.stringify({
-        userUuid,
         notificationId,
-        group,
       }),
     };
     try {
-      const response = await fetch("/mark-as-read.json", headers);
+      const response = await fetch("/read-comment.json", headers);
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
-      const newNotifications = await response.json();
-      return newNotifications;
+      const data = await response.json();
+      if (data.error) {
+        throw new Error(data);
+      } else {
+        return data;
+      }
     } catch (error) {
-      console.error(
-        "Une erreur s'est produite lors de la lecture de la notification n°",
-        notificationId,
-        error
-      );
       throw error;
     }
   }

src/stores/user.js

@@ -10,5 +10,13 @@ export const useUserStore = defineStore("user", () => {
       : Object.values(user.value.notifications);
   });
 
-  return { user, notifications };
+  function readNotification(notificationId) {
+    user.value.notifications.forEach((notification) => {
+      if (notification.id === notificationId) {
+        notification.isRead = true;
+      }
+    });
+  }
+
+  return { user, notifications, readNotification };
 });