@salesforcedevs/docs-components 1.17.0-hack-alpha4 → 1.17.0-hack-alpha6

package/src/modules/doc/commentPopup/commentPopup.css

@@ -133,6 +133,72 @@
     padding: 0 24px 24px;
 }
 
+/* Success Message */
+.success-message {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: #e8f5e8;
+    color: #2e7d32;
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    border-left: 4px solid #4caf50;
+    font-size: 14px;
+}
+
+.success-message dx-icon {
+    --sds-c-icon-color-foreground: #4caf50;
+}
+
+/* API Error Message */
+.api-error {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: #ffebee;
+    color: #c62828;
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    border-left: 4px solid #f44336;
+    font-size: 14px;
+}
+
+.api-error dx-icon {
+    --sds-c-icon-color-foreground: #f44336;
+}
+
+/* Loading Message */
+.loading-message {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: #e3f2fd;
+    color: #1565c0;
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    border-left: 4px solid #2196f3;
+    font-size: 14px;
+}
+
+.loading-message dx-icon {
+    --sds-c-icon-color-foreground: #2196f3;
+
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 /* Comment Form */
 .comment-form {
     margin-bottom: 24px;
@@ -277,6 +343,13 @@
         padding: 0 16px 16px;
     }
 
+    .success-message,
+    .api-error,
+    .loading-message {
+        padding: 10px 12px;
+        font-size: 13px;
+    }
+
     .comments-section {
         padding-top: 16px;
     }
@@ -297,6 +370,24 @@
         border-bottom-color: #424242;
     }
 
+    .success-message {
+        background: #1b5e20;
+        color: #a5d6a7;
+        border-left-color: #4caf50;
+    }
+
+    .api-error {
+        background: #b71c1c;
+        color: #ef9a9a;
+        border-left-color: #f44336;
+    }
+
+    .loading-message {
+        background: #0d47a1;
+        color: #90caf9;
+        border-left-color: #2196f3;
+    }
+
     .form-label {
         color: #e0e0e0;
     }

package/src/modules/doc/commentPopup/commentPopup.html

@@ -35,8 +35,27 @@
                 ></dx-button>
             </div>
 
-            <!-- Comment Form -->
+            <!-- Popup Content -->
             <div class="popup-content">
+                <!-- Success Message -->
+                <div if:true={submitSuccess} class="success-message">
+                    <dx-icon icon-symbol="success" icon-size="small"></dx-icon>
+                    <span>Comment posted successfully!</span>
+                </div>
+
+                <!-- API Error Message -->
+                <div if:true={apiError} class="error-message api-error">
+                    <dx-icon icon-symbol="error" icon-size="small"></dx-icon>
+                    <span>{apiError}</span>
+                </div>
+
+                <!-- Loading State -->
+                <div if:true={isLoading} class="loading-message">
+                    <dx-icon icon-symbol="spinner" icon-size="small"></dx-icon>
+                    <span>Loading comments...</span>
+                </div>
+
+                <!-- Comment Form -->
                 <form class="comment-form" onsubmit={handleSubmit}>
                     <div class="form-group">
                         <label for="email-input" class="form-label">

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

@@ -3,25 +3,88 @@ 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;
+    };
+}
+
+interface ApiCommentResponse {
+    request_branch: string;
+    paths: Array<{
+        path: string;
+        titles: Array<{
+            title: string;
+            comments: Comment[];
+        }>;
+    }>;
+}
+
+// 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;
-    @api headingTitle?: string;
-    @api filePath?: string;
-    @api startLine?: string;
-    @api endLine?: string;
-    @api currentBranch?: string;
+    iconSymbol = "chat";
+    iconSize = "medium";
+    popupTitle = "Leave a Comment";
+    submitButtonLabel = "Post Comment";
+    emailPlaceholder = "Enter your email";
+    commentPlaceholder = "Enter your comment";
+
+    private _headingTitle?: string;
+    private _filePath?: string;
+    private _startLine?: string;
+    private _endLine?: string;
+    private _currentBranch?: string;
+
+    @api get headingTitle() {
+        return this._headingTitle;
+    }
+    set headingTitle(value) {
+        this._headingTitle = value;
+        this.handlePropertyChange();
+    }
+
+    @api get filePath() {
+        return this._filePath;
+    }
+    set filePath(value) {
+        this._filePath = value;
+        this.handlePropertyChange();
+    }
+
+    @api get startLine() {
+        return this._startLine;
+    }
+    set startLine(value) {
+        this._startLine = value;
+    }
+
+    @api get endLine() {
+        return this._endLine;
+    }
+    set endLine(value) {
+        this._endLine = value;
+    }
+
+    @api get currentBranch() {
+        return this._currentBranch;
+    }
+    set currentBranch(value) {
+        this._currentBranch = value;
+        this.handlePropertyChange();
+    }
 
     private _open = false;
     @api get open() {
@@ -37,10 +100,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 +118,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 +134,54 @@ export default class CommentPopup extends LightningElement {
 
     handleIconClick() {
         this._open = !this._open;
+        // Comments are already loaded when component is connected, no need to fetch again
+    }
+
+    private handlePropertyChange() {
+        // Only fetch comments if component has required properties
+        if (this._currentBranch && this._filePath && this._headingTitle) {
+            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 +208,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 +344,8 @@ export default class CommentPopup extends LightningElement {
     handleClose() {
         this._open = false;
         this.resetForm();
+        this.apiError = "";
+        this.submitSuccess = false;
     }
 
     handleOverlayClick(event: Event) {
@@ -178,15 +362,121 @@ export default class CommentPopup extends LightningElement {
 
     connectedCallback() {
         document.addEventListener("keydown", this.handleKeyDown.bind(this));
+        // Fetch comments when component is connected
+        this.fetchComments();
+    }
+
+    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
+            });
+
+            console.log('Fetching comments with params:', params.toString());
+
+            const response = await fetch(`/get-comments?${params.toString()}`);
+            
+            if (!response.ok) {
+                throw new Error(`Failed to fetch comments: ${response.status} ${response.statusText}`);
+            }
+
+            const data: ApiCommentResponse = await response.json();
+            console.log('Fetched comments from API:', data);
+            
+            // Find comments for this specific file path and heading title
+            const comments = this.extractCommentsFromApiResponse(data);
+            this.comments = 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 extractCommentsFromApiResponse(
+        data: ApiCommentResponse
+    ): Comment[] {
+        try {
+            // Find the path that matches our file path
+            const matchingPath = data.paths.find(
+                (path) => path.path === this._filePath
+            );
+
+            if (!matchingPath) {
+                console.log(
+                    `No comments found for file path: ${this._filePath}`
+                );
+                return [];
+            }
+
+            // Find the title that matches our heading title
+            const matchingTitle = matchingPath.titles.find(
+                (title) => title.title === this._headingTitle
+            );
+
+            if (!matchingTitle) {
+                console.log(
+                    `No comments found for heading title: ${this._headingTitle}`
+                );
+                return [];
+            }
+
+            console.log(
+                `Found ${matchingTitle.comments.length} comments for ${this._filePath} - ${this._headingTitle}`
+            );
+            return matchingTitle.comments;
+        } catch (error) {
+            console.error(
+                "Error extracting comments from API response:",
+                error
+            );
+            return [];
+        }
+    }
+
+    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 +494,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)
         }));