add interactions to comments

lib/fetchers.js

@@ -0,0 +1,73 @@
+
+/**
+ * Fetch and update articles data with likes and dislikes.
+ * @param {Ref<Array>} articles - Reactive array of articles.
+ */
+export const fetchArticlesData = async (articles) => {
+    try {
+        const response = await $fetch(`/api/articles`, { method: 'GET' });
+
+        if (response.success && response.data) {
+            articles.value = articles.value.map((article) => {
+                const updatedArticle = response.data.find((data) => data.id === article.id);
+                return updatedArticle
+                    ? { ...article, likes: updatedArticle.likes, dislikes: updatedArticle.dislikes }
+                    : article;
+            });
+        } else {
+            console.error('Failed to fetch articles:', response.message || 'Unknown error');
+        }
+    } catch (error) {
+        console.error('Error fetching articles data:', error);
+    }
+};
+
+/**
+ * Fetch and attach comments to their respective articles.
+ * @param {Ref<Array>} articles - Reactive array of articles.
+ */
+export const fetchCommentsData = async (articles) => {
+    try {
+        const response = await $fetch(`/api/comments`, { method: 'GET' });
+
+        if (response.success && response.data) {
+            articles.value = articles.value.map((article) => {
+                const relatedComments = response.data.filter((data) => data.articleId === article.id);
+                return { ...article, comments: relatedComments };
+            });
+        } else {
+            console.error('Failed to fetch comments:', response.message || 'Unknown error');
+        }
+    } catch (error) {
+        console.error('Error fetching comments data:', error);
+    }
+};
+
+/**
+ * Fetch and format signatures data.
+ * @param {Ref<Array>} signatures - Reactive array of signatures.
+ */
+export const fetchSignatures = async (signatures) => {
+    try {
+        const response = await $fetch(`/api/charte`, { method: 'GET' });
+
+        if (response.success && Array.isArray(response.data)) {
+            signatures.value = response.data.map((signature) => ({
+                ...signature,
+                createdAt: new Intl.DateTimeFormat('en-US', {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                }).format(new Date(signature.createdAt)),
+            }));
+        } else if (response.success) {
+            console.error('Unexpected data format:', response.data);
+        } else {
+            console.error('Failed to fetch signatures:', response.message || 'Unknown error');
+        }
+    } catch (error) {
+        console.error('Error fetching signatures data:', error);
+    }
+};

lib/likes.ts

@@ -0,0 +1,54 @@
+
+/**
+ * Updates likes or dislikes for an article or comment dynamically.
+ * @param {string} type - 'article' or 'comment'.
+ * @param {string} action - 'like' or 'dislike'.
+ * @param {string} id - ID of the article or comment.
+ * @param {string} articleId - (Optional) ID of the parent article if updating a comment.
+ * @param {Array} articles - The articles array.
+ */
+export const updateLikeDislike = async ({ type, action, id, articleId = null, articles }) => {
+    try {
+        // Find the target item
+        let target;
+        if (type === 'article') {
+            target = articles.value.find((a) => a.id === id);
+        } else if (type === 'comment') {
+            const article = articles.value.find((a) => a.id === articleId);
+            if (article) {
+                target = article.comments.find((c) => c.id === id);
+            }
+        }
+
+        if (!target) {
+            console.error(`Target ${type} not found`);
+            return;
+        }
+
+        // Increment the likes or dislikes
+        if (action === 'like') {
+            target.likes += 1;
+        } else if (action === 'dislike') {
+            target.dislikes += 1;
+        } else {
+            console.error('Invalid action specified');
+            return;
+        }
+
+        // Determine API endpoint
+        const endpoint = type === 'article' ? `/api/articles/${id}` : `/api/comments/${id}`;
+
+        // Make the API call
+        await $fetch(endpoint, {
+            method: 'PUT',
+            body: {
+                [action === 'like' ? 'likes' : 'dislikes']: action === 'like' ? target.likes : target.dislikes,
+                ...(type === 'comment' && { articleId }),
+            },
+        });
+
+        console.log(`${type} ${action} updated successfully`);
+    } catch (error) {
+        console.error(`Error updating ${type} ${action}:`, error);
+    }
+};

lib/overlayHandler.js

@@ -0,0 +1,21 @@
+
+/**
+ * Display overlay with dynamic parameters.
+ * @param {Object} options - Overlay configuration.
+ * @param {string} options.icon - Icon to display in the overlay.
+ * @param {string} options.message - Message to display in the overlay.
+ * @param {string} options.buttonText - Button text to display in the overlay.
+ * @param {string} options.iconColor - Icon color to display in the overlay.
+ * @param {Ref<boolean>} overlay - Reactive overlay state.
+ */
+export const showOverlay = (options, overlay) => {
+    const { icon, message, buttonText, iconColor } = options;
+
+   overlay.value = {
+        icon,
+        message,
+        buttonText,
+        iconColor,
+        visible: true,
+    };
+};