@salesforcedevs/docs-components 1.17.0-hack-alpha3 → 1.17.0-hack-alpha5

package/src/modules/doc/commentPopup/commentPopup.ts

@@ -3,20 +3,34 @@ import { normalizeBoolean } from "dxUtils/normalizers";
 
 interface Comment {
     email: string;
-    comment: string;
-    url: string;
-    timestamp: Date;
+    comment_text: string;
+    timestamp: string;
 }
 
+interface ApiCommentPayload {
+    branch: string;
+    file_path: string;
+    heading_title: string;
+    start_line: string;
+    end_line: string;
+    comment: {
+        comment_text: string;
+        email: string;
+        timestamp: string;
+    };
+}
+
+// Local storage key for comments
+const COMMENTS_STORAGE_KEY = "dsc_comments";
+
 export default class CommentPopup extends LightningElement {
-    @api iconSymbol = "chat";
-    @api iconSize = "medium";
-    @api popupTitle = "Leave a Comment";
-    @api submitButtonLabel = "Post Comment";
-    @api emailPlaceholder = "Enter your email";
-    @api commentPlaceholder = "Enter your comment";
-    @api index?: string;
-    @api contentType?: string;
+    iconSymbol = "chat";
+    iconSize = "medium";
+    popupTitle = "Leave a Comment";
+    submitButtonLabel = "Post Comment";
+    emailPlaceholder = "Enter your email";
+    commentPlaceholder = "Enter your comment";
+
     @api headingTitle?: string;
     @api filePath?: string;
     @api startLine?: string;
@@ -37,10 +51,11 @@ export default class CommentPopup extends LightningElement {
     @track private emailError = "";
     @track private commentError = "";
     @track private isSubmitting = false;
+    @track private isLoading = false;
+    @track private apiError = "";
+    @track private submitSuccess = false;
 
     get showComments() {
-        const unwrapped = JSON.parse(JSON.stringify(this.comments));
-        console.log("Comments (JSON unwrapped):", unwrapped);
         return this.comments.length > 0;
     }
 
@@ -54,7 +69,9 @@ export default class CommentPopup extends LightningElement {
 
     get sortedComments() {
         return [...this.comments].sort(
-            (a, b) => b.timestamp.getTime() - a.timestamp.getTime()
+            (a, b) =>
+                new Date(b.timestamp).getTime() -
+                new Date(a.timestamp).getTime()
         );
     }
 
@@ -68,31 +85,49 @@ export default class CommentPopup extends LightningElement {
 
     handleIconClick() {
         this._open = !this._open;
+        if (this._open) {
+            this.fetchComments();
+        }
     }
 
     handleEmailChange(event: Event) {
         this.email = (event.target as HTMLInputElement).value;
         this.emailError = "";
+        this.apiError = "";
+        this.submitSuccess = false;
     }
 
     handleCommentChange(event: Event) {
         this.comment = (event.target as HTMLTextAreaElement).value;
         this.commentError = "";
+        this.apiError = "";
+        this.submitSuccess = false;
     }
 
-    handleSubmit() {
+    async handleSubmit() {
         if (!this.validateForm()) {
             return;
         }
 
         this.isSubmitting = true;
+        this.apiError = "";
+        this.submitSuccess = false;
 
-        // Simulate API call
-        setTimeout(() => {
-            this.addComment();
+        try {
+            await this.addComment();
             this.resetForm();
+            this.submitSuccess = true;
+
+            // Auto-hide success message after 3 seconds
+            setTimeout(() => {
+                this.submitSuccess = false;
+            }, 3000);
+        } catch (error) {
+            console.error("Error submitting comment:", error);
+            this.apiError = "Failed to post comment. Please try again.";
+        } finally {
             this.isSubmitting = false;
-        }, 500);
+        }
     }
 
     private validateForm(): boolean {
@@ -119,22 +154,115 @@ export default class CommentPopup extends LightningElement {
         return emailRegex.test(email);
     }
 
-    private addComment() {
-        const newComment: Comment = {
-            email: this.email.trim(),
-            comment: this.comment.trim(),
-            url: window.location.href,
-            timestamp: new Date()
+    private async addComment() {
+        // Validate required fields before creating payload
+        if (!this.currentBranch || !this.filePath || !this.headingTitle) {
+            throw new Error(
+                "Missing required fields: branch, file_path, or heading_title"
+            );
+        }
+
+        const payload: ApiCommentPayload = {
+            branch: this.currentBranch,
+            file_path: this.filePath,
+            heading_title: this.headingTitle,
+            start_line: this.startLine!,
+            end_line: this.endLine!,
+            comment: {
+                comment_text: this.comment.trim(),
+                email: this.email.trim(),
+                timestamp: new Date().toISOString()
+            }
         };
 
-        this.comments = [newComment, ...this.comments];
+        console.log(
+            "Posting comment with payload:",
+            JSON.stringify(payload, null, 2)
+        );
+
+        // LOCAL STORAGE IMPLEMENTATION (Temporary until backend is ready)
+        try {
+            await this.saveCommentToLocalStorage(payload);
+            console.log("Comment saved to local storage successfully");
+
+            // Refresh comments after successful save
+            await this.fetchComments();
+
+            // Dispatch custom event
+            this.dispatchEvent(
+                new CustomEvent("commentadded", {
+                    detail: {
+                        ...payload.comment,
+                        id: Date.now().toString() // Generate temporary ID
+                    }
+                })
+            );
+        } catch (error) {
+            console.error("Error saving comment to local storage:", error);
+            throw error;
+        }
+
+        // API IMPLEMENTATION (Commented until backend is ready)
+        /*
+        const response = await fetch('/post-comment', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(payload)
+        });
+
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`);
+        }
+
+        const responseData = await response.json();
+        console.log('Comment posted successfully:', responseData);
+
+        // Refresh comments after successful post
+        await this.fetchComments();
 
         // Dispatch custom event
         this.dispatchEvent(
             new CustomEvent("commentadded", {
-                detail: newComment
+                detail: {
+                    ...payload.comment,
+                    id: responseData.id // Include any ID returned by the API
+                }
             })
         );
+        */
+    }
+
+    private async saveCommentToLocalStorage(payload: ApiCommentPayload) {
+        try {
+            // Get existing comments from localStorage
+            const existingData = localStorage.getItem(COMMENTS_STORAGE_KEY);
+            const allComments = existingData ? JSON.parse(existingData) : {};
+
+            // Create a unique key for this specific comment location
+            const commentKey = `${payload.branch}_${payload.file_path}_${payload.heading_title}`;
+
+            // Initialize array for this location if it doesn't exist
+            if (!allComments[commentKey]) {
+                allComments[commentKey] = [];
+            }
+
+            // Add the new comment
+            allComments[commentKey].push(payload.comment);
+
+            // Save back to localStorage
+            localStorage.setItem(
+                COMMENTS_STORAGE_KEY,
+                JSON.stringify(allComments)
+            );
+
+            console.log("Comments saved to localStorage:", allComments);
+        } catch (error) {
+            console.error("Error saving to localStorage:", error);
+            throw new Error("Failed to save comment to local storage");
+        }
     }
 
     private resetForm() {
@@ -162,6 +290,8 @@ export default class CommentPopup extends LightningElement {
     handleClose() {
         this._open = false;
         this.resetForm();
+        this.apiError = "";
+        this.submitSuccess = false;
     }
 
     handleOverlayClick(event: Event) {
@@ -180,13 +310,83 @@ export default class CommentPopup extends LightningElement {
         document.addEventListener("keydown", this.handleKeyDown.bind(this));
     }
 
+    private async fetchComments() {
+        if (!this.currentBranch || !this.filePath || !this.headingTitle) {
+            console.warn("Cannot fetch comments: missing required parameters");
+            return;
+        }
+
+        this.isLoading = true;
+        this.apiError = "";
+
+        try {
+            // LOCAL STORAGE IMPLEMENTATION (Temporary until backend is ready)
+            const comments = await this.getCommentsFromLocalStorage();
+            console.log("Fetched comments from localStorage:", comments);
+            this.comments = comments;
+
+            // API IMPLEMENTATION (Commented until backend is ready)
+            /*
+            const params = new URLSearchParams({
+                branch: this.currentBranch,
+                file_path: this.filePath,
+                heading_title: this.headingTitle
+            });
+
+            console.log('Fetching comments with params:', params.toString());
+
+            const response = await fetch(`/api/comments?${params.toString()}`);
+            
+            if (!response.ok) {
+                throw new Error(`Failed to fetch comments: ${response.status} ${response.statusText}`);
+            }
+
+            const data = await response.json();
+            console.log('Fetched comments:', data);
+            
+            // Handle different response formats
+            if (Array.isArray(data)) {
+                this.comments = data;
+            } else if (data && Array.isArray(data.comments)) {
+                this.comments = data.comments;
+            } else {
+                this.comments = [];
+            }
+            */
+        } catch (error) {
+            console.error("Error fetching comments:", error);
+            this.apiError = "Failed to load comments. Please try again later.";
+            this.comments = [];
+        } finally {
+            this.isLoading = false;
+        }
+    }
+
+    private async getCommentsFromLocalStorage(): Promise<Comment[]> {
+        try {
+            const existingData = localStorage.getItem(COMMENTS_STORAGE_KEY);
+            if (!existingData) {
+                return [];
+            }
+
+            const allComments = JSON.parse(existingData);
+            const commentKey = `${this.currentBranch}_${this.filePath}_${this.headingTitle}`;
+
+            return allComments[commentKey] || [];
+        } catch (error) {
+            console.error("Error reading from localStorage:", error);
+            return [];
+        }
+    }
+
     disconnectedCallback() {
         document.removeEventListener("keydown", this.handleKeyDown.bind(this));
     }
 
-    private formatTimestamp(timestamp: Date): string {
+    private formatTimestamp(timestamp: string): string {
         const now = new Date();
-        const diff = now.getTime() - timestamp.getTime();
+        const commentDate = new Date(timestamp);
+        const diff = now.getTime() - commentDate.getTime();
         const minutes = Math.floor(diff / 60000);
         const hours = Math.floor(diff / 3600000);
         const days = Math.floor(diff / 86400000);
@@ -204,6 +404,7 @@ export default class CommentPopup extends LightningElement {
     get formattedComments() {
         return this.sortedComments.map((comment) => ({
             ...comment,
+            comment: comment.comment_text, // Map API field to template expectation
             formattedTimestamp: this.formatTimestamp(comment.timestamp),
             maskedEmail: this.maskEmail(comment.email)
         }));

package/src/modules/doc/commentPopup/commentUtils.ts

@@ -0,0 +1,250 @@
+// Utility functions for managing comments in localStorage
+// This file provides helper functions for comment management
+
+export interface Comment {
+    email: string;
+    comment_text: string;
+    timestamp: string;
+}
+
+export interface ApiCommentPayload {
+    branch: string;
+    file_path: string;
+    heading_title: string;
+    start_line: string;
+    end_line: string;
+    comment: {
+        comment_text: string;
+        email: string;
+        timestamp: string;
+    };
+}
+
+const COMMENTS_STORAGE_KEY = "dsc_comments";
+
+/**
+ * Export all comments from localStorage to a JSON file
+ */
+export function exportCommentsToFile(): void {
+    try {
+        const commentsData = localStorage.getItem(COMMENTS_STORAGE_KEY);
+        if (!commentsData) {
+            console.log("No comments found in localStorage");
+            return;
+        }
+
+        const comments = JSON.parse(commentsData);
+        const dataStr = JSON.stringify(comments, null, 2);
+        const dataBlob = new Blob([dataStr], { type: "application/json" });
+
+        const link = document.createElement("a");
+        link.href = URL.createObjectURL(dataBlob);
+        link.download = `dsc-comments-${
+            new Date().toISOString().split("T")[0]
+        }.json`;
+        link.click();
+
+        console.log("Comments exported successfully");
+    } catch (error) {
+        console.error("Error exporting comments:", error);
+    }
+}
+
+/**
+ * Import comments from a JSON file to localStorage
+ */
+export function importCommentsFromFile(file: File): Promise<void> {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+
+        reader.onload = (event) => {
+            try {
+                const content = event.target?.result as string;
+                const comments = JSON.parse(content);
+
+                // Validate the structure
+                if (typeof comments === "object" && comments !== null) {
+                    localStorage.setItem(
+                        COMMENTS_STORAGE_KEY,
+                        JSON.stringify(comments)
+                    );
+                    console.log("Comments imported successfully");
+                    resolve();
+                } else {
+                    reject(new Error("Invalid comments file format"));
+                }
+            } catch (error) {
+                reject(new Error("Failed to parse comments file"));
+            }
+        };
+
+        reader.onerror = () => {
+            reject(new Error("Failed to read file"));
+        };
+
+        reader.readAsText(file);
+    });
+}
+
+/**
+ * Get all comments from localStorage
+ */
+export function getAllComments(): Record<string, Comment[]> {
+    try {
+        const commentsData = localStorage.getItem(COMMENTS_STORAGE_KEY);
+        return commentsData ? JSON.parse(commentsData) : {};
+    } catch (error) {
+        console.error("Error reading comments from localStorage:", error);
+        return {};
+    }
+}
+
+/**
+ * Get comments for a specific location
+ */
+export function getCommentsForLocation(
+    branch: string,
+    filePath: string,
+    headingTitle: string
+): Comment[] {
+    try {
+        const allComments = getAllComments();
+        const commentKey = `${branch}_${filePath}_${headingTitle}`;
+        return allComments[commentKey] || [];
+    } catch (error) {
+        console.error("Error getting comments for location:", error);
+        return [];
+    }
+}
+
+/**
+ * Clear all comments from localStorage
+ */
+export function clearAllComments(): void {
+    try {
+        localStorage.removeItem(COMMENTS_STORAGE_KEY);
+        console.log("All comments cleared from localStorage");
+    } catch (error) {
+        console.error("Error clearing comments:", error);
+    }
+}
+
+/**
+ * Get statistics about stored comments
+ */
+export function getCommentsStats(): {
+    totalLocations: number;
+    totalComments: number;
+    locations: Array<{
+        key: string;
+        commentCount: number;
+        lastComment?: string;
+    }>;
+} {
+    try {
+        const allComments = getAllComments();
+        const locations = Object.keys(allComments);
+        let totalComments = 0;
+
+        const locationStats = locations.map((key) => {
+            const comments = allComments[key];
+            totalComments += comments.length;
+
+            return {
+                key,
+                commentCount: comments.length,
+                lastComment:
+                    comments.length > 0
+                        ? comments[comments.length - 1].timestamp
+                        : undefined
+            };
+        });
+
+        return {
+            totalLocations: locations.length,
+            totalComments,
+            locations: locationStats
+        };
+    } catch (error) {
+        console.error("Error getting comments stats:", error);
+        return {
+            totalLocations: 0,
+            totalComments: 0,
+            locations: []
+        };
+    }
+}
+
+/**
+ * Convert localStorage comments to API format for backend migration
+ */
+export function convertToApiFormat(): Array<{
+    branch: string;
+    file_path: string;
+    heading_title: string;
+    start_line: string;
+    end_line: string;
+    comments: Comment[];
+}> {
+    try {
+        const allComments = getAllComments();
+        const apiFormat: Array<{
+            branch: string;
+            file_path: string;
+            heading_title: string;
+            start_line: string;
+            end_line: string;
+            comments: Comment[];
+        }> = [];
+
+        Object.keys(allComments).forEach((key) => {
+            const [branch, file_path, heading_title, start_line, end_line] =
+                key.split("_", 5);
+            if (
+                branch &&
+                file_path &&
+                heading_title &&
+                start_line &&
+                end_line
+            ) {
+                apiFormat.push({
+                    branch,
+                    file_path,
+                    heading_title,
+                    start_line,
+                    end_line,
+                    comments: allComments[key]
+                });
+            }
+        });
+
+        return apiFormat;
+    } catch (error) {
+        console.error("Error converting to API format:", error);
+        return [];
+    }
+}
+
+/**
+ * Add a comment to localStorage
+ */
+export function addComment(payload: ApiCommentPayload): void {
+    try {
+        const existingData = localStorage.getItem(COMMENTS_STORAGE_KEY);
+        const allComments = existingData ? JSON.parse(existingData) : {};
+
+        const commentKey = `${payload.branch}_${payload.file_path}_${payload.heading_title}`;
+
+        if (!allComments[commentKey]) {
+            allComments[commentKey] = [];
+        }
+
+        allComments[commentKey].push(payload.comment);
+        localStorage.setItem(COMMENTS_STORAGE_KEY, JSON.stringify(allComments));
+
+        console.log("Comment added successfully");
+    } catch (error) {
+        console.error("Error adding comment:", error);
+        throw error;
+    }
+}

package/src/modules/doc/contentLayout/contentLayout.html

@@ -59,7 +59,6 @@
                         value={tocValue}
                     ></dx-toc>
                 </div>
-                <doc-comment-popup></doc-comment-popup>
             </div>
             <div lwc:if={showFooter} class="footer-container">
                 <dx-footer variant="no-signup"></dx-footer>