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

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

@@ -20,6 +20,17 @@ interface ApiCommentPayload {
     };
 }
 
+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";
 
@@ -31,11 +42,49 @@ export default class CommentPopup extends LightningElement {
     emailPlaceholder = "Enter your email";
     commentPlaceholder = "Enter your comment";
 
-    @api headingTitle?: string;
-    @api filePath?: string;
-    @api startLine?: string;
-    @api endLine?: string;
-    @api currentBranch?: string;
+    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() {
@@ -85,7 +134,12 @@ export default class CommentPopup extends LightningElement {
 
     handleIconClick() {
         this._open = !this._open;
-        if (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();
         }
     }
@@ -156,18 +210,18 @@ export default class CommentPopup extends LightningElement {
 
     private async addComment() {
         // Validate required fields before creating payload
-        if (!this.currentBranch || !this.filePath || !this.headingTitle) {
+        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!,
+            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(),
@@ -180,59 +234,93 @@ export default class CommentPopup extends LightningElement {
             JSON.stringify(payload, null, 2)
         );
 
-        // LOCAL STORAGE IMPLEMENTATION (Temporary until backend is ready)
+        // Try API first, fallback to localStorage
         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
-                    }
-                })
+            const response = await fetch(
+                "https://cx-helper-engine-1-114ef038858c.herokuapp.com/post-comment",
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json"
+                    },
+                    body: JSON.stringify(payload)
+                }
             );
-        } 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}`);
+            if (response.ok) {
+                const responseData = await response.json();
+                console.log(
+                    "Comment posted successfully via API:",
+                    responseData
+                );
+
+                // Refresh comments after successful post
+                await this.fetchComments();
+
+                // Dispatch custom event
+                this.dispatchEvent(
+                    new CustomEvent("commentadded", {
+                        detail: {
+                            ...payload.comment,
+                            id: responseData.id // Include any ID returned by the API
+                        }
+                    })
+                );
+            } else {
+                console.warn(
+                    `API call failed (${response.status}): ${response.statusText}, falling back to localStorage`
+                );
+                // Fallback to localStorage if API fails
+                await this.saveCommentToLocalStorage(payload);
+                console.log(
+                    "Comment saved to local storage successfully (fallback)"
+                );
+
+                // 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 posting comment via API, falling back to localStorage:",
+                error
+            );
+            // Fallback to localStorage if API call throws an error
+            try {
+                await this.saveCommentToLocalStorage(payload);
+                console.log(
+                    "Comment saved to local storage successfully (fallback)"
+                );
+
+                // 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 (localStorageError) {
+                console.error(
+                    "Error saving comment to local storage:",
+                    localStorageError
+                );
+                throw localStorageError;
+            }
         }
-
-        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: {
-                    ...payload.comment,
-                    id: responseData.id // Include any ID returned by the API
-                }
-            })
-        );
-        */
     }
 
     private async saveCommentToLocalStorage(payload: ApiCommentPayload) {
@@ -308,10 +396,12 @@ 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) {
+        if (!this._currentBranch || !this._filePath || !this._headingTitle) {
             console.warn("Cannot fetch comments: missing required parameters");
             return;
         }
@@ -320,48 +410,104 @@ export default class CommentPopup extends LightningElement {
         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)
-            /*
+            // API IMPLEMENTATION - Try to fetch from /get-comments endpoint
             const params = new URLSearchParams({
-                branch: this.currentBranch,
-                file_path: this.filePath,
-                heading_title: this.headingTitle
+                branch: this._currentBranch
             });
 
-            console.log('Fetching comments with params:', params.toString());
+            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 response = await fetch(
+                `https://cx-helper-engine-1-114ef038858c.herokuapp.com/get-comments?${params.toString()}`
+            );
 
-            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;
+            if (response.ok) {
+                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;
             } else {
-                this.comments = [];
+                console.warn(
+                    `API call failed (${response.status}): ${response.statusText}, falling back to localStorage`
+                );
+                // Fallback to localStorage if API fails
+                const comments = await this.getCommentsFromLocalStorage();
+                console.log(
+                    "Fetched comments from localStorage (fallback):",
+                    comments
+                );
+                this.comments = comments;
             }
-            */
         } catch (error) {
-            console.error("Error fetching comments:", error);
-            this.apiError = "Failed to load comments. Please try again later.";
-            this.comments = [];
+            console.error(
+                "Error fetching comments from API, falling back to localStorage:",
+                error
+            );
+            // Fallback to localStorage if API call throws an error
+            try {
+                const comments = await this.getCommentsFromLocalStorage();
+                console.log(
+                    "Fetched comments from localStorage (fallback):",
+                    comments
+                );
+                this.comments = comments;
+            } catch (localStorageError) {
+                console.error(
+                    "Error fetching comments from localStorage:",
+                    localStorageError
+                );
+                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);
@@ -370,7 +516,7 @@ export default class CommentPopup extends LightningElement {
             }
 
             const allComments = JSON.parse(existingData);
-            const commentKey = `${this.currentBranch}_${this.filePath}_${this.headingTitle}`;
+            const commentKey = `${this._currentBranch}_${this._filePath}_${this._headingTitle}`;
 
             return allComments[commentKey] || [];
         } catch (error) {

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

@@ -20,6 +20,17 @@ export interface ApiCommentPayload {
     };
 }
 
+export interface ApiCommentResponse {
+    request_branch: string;
+    paths: Array<{
+        path: string;
+        titles: Array<{
+            title: string;
+            comments: Comment[];
+        }>;
+    }>;
+}
+
 const COMMENTS_STORAGE_KEY = "dsc_comments";
 
 /**
@@ -117,6 +128,68 @@ export function getCommentsForLocation(
     }
 }
 
+/**
+ * Get all comments for a specific branch (simulating API response format)
+ */
+export function getCommentsForBranch(branch: string): ApiCommentResponse {
+    try {
+        const allComments = getAllComments();
+        const branchComments: ApiCommentResponse = {
+            request_branch: branch,
+            paths: []
+        };
+
+        // Group comments by file path and title
+        const pathMap = new Map<string, Map<string, Comment[]>>();
+
+        Object.keys(allComments).forEach((key) => {
+            const [commentBranch, filePath, headingTitle] = key.split("_", 3);
+
+            if (commentBranch === branch) {
+                if (!pathMap.has(filePath)) {
+                    pathMap.set(filePath, new Map());
+                }
+
+                const titleMap = pathMap.get(filePath)!;
+                if (!titleMap.has(headingTitle)) {
+                    titleMap.set(headingTitle, []);
+                }
+
+                titleMap.get(headingTitle)!.push(...allComments[key]);
+            }
+        });
+
+        // Convert to API response format
+        pathMap.forEach((titleMap, filePath) => {
+            const titles: Array<{ title: string; comments: Comment[] }> = [];
+
+            titleMap.forEach((comments, title) => {
+                titles.push({
+                    title,
+                    comments: comments.sort(
+                        (a, b) =>
+                            new Date(b.timestamp).getTime() -
+                            new Date(a.timestamp).getTime()
+                    )
+                });
+            });
+
+            branchComments.paths.push({
+                path: filePath,
+                titles
+            });
+        });
+
+        return branchComments;
+    } catch (error) {
+        console.error("Error getting comments for branch:", error);
+        return {
+            request_branch: branch,
+            paths: []
+        };
+    }
+}
+
 /**
  * Clear all comments from localStorage
  */
@@ -135,8 +208,12 @@ export function clearAllComments(): void {
 export function getCommentsStats(): {
     totalLocations: number;
     totalComments: number;
+    branches: string[];
     locations: Array<{
         key: string;
+        branch: string;
+        filePath: string;
+        headingTitle: string;
         commentCount: number;
         lastComment?: string;
     }>;
@@ -145,13 +222,19 @@ export function getCommentsStats(): {
         const allComments = getAllComments();
         const locations = Object.keys(allComments);
         let totalComments = 0;
+        const branches = new Set<string>();
 
         const locationStats = locations.map((key) => {
+            const [branch, filePath, headingTitle] = key.split("_", 3);
             const comments = allComments[key];
             totalComments += comments.length;
+            branches.add(branch);
 
             return {
                 key,
+                branch,
+                filePath,
+                headingTitle,
                 commentCount: comments.length,
                 lastComment:
                     comments.length > 0
@@ -163,6 +246,7 @@ export function getCommentsStats(): {
         return {
             totalLocations: locations.length,
             totalComments,
+            branches: Array.from(branches),
             locations: locationStats
         };
     } catch (error) {
@@ -170,6 +254,7 @@ export function getCommentsStats(): {
         return {
             totalLocations: 0,
             totalComments: 0,
+            branches: [],
             locations: []
         };
     }
@@ -198,21 +283,14 @@ export function convertToApiFormat(): Array<{
         }> = [];
 
         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
-            ) {
+            const [branch, file_path, heading_title] = key.split("_", 3);
+            if (branch && file_path && heading_title) {
                 apiFormat.push({
                     branch,
                     file_path,
                     heading_title,
-                    start_line,
-                    end_line,
+                    start_line: "",
+                    end_line: "",
                     comments: allComments[key]
                 });
             }
@@ -248,3 +326,57 @@ export function addComment(payload: ApiCommentPayload): void {
         throw error;
     }
 }
+
+/**
+ * Simulate API call to get comments for a branch
+ */
+export async function fetchCommentsForBranch(
+    branch: string
+): Promise<ApiCommentResponse> {
+    try {
+        // Simulate API delay
+        await new Promise((resolve) => setTimeout(resolve, 100));
+
+        return getCommentsForBranch(branch);
+    } catch (error) {
+        console.error("Error fetching comments for branch:", error);
+        throw error;
+    }
+}
+
+/**
+ * Extract comments for specific file path and heading title from API response
+ */
+export function extractCommentsFromApiResponse(
+    data: ApiCommentResponse,
+    filePath: string,
+    headingTitle: string
+): Comment[] {
+    try {
+        // Find the path that matches our file path
+        const matchingPath = data.paths.find((path) => path.path === filePath);
+
+        if (!matchingPath) {
+            console.log(`No comments found for file path: ${filePath}`);
+            return [];
+        }
+
+        // Find the title that matches our heading title
+        const matchingTitle = matchingPath.titles.find(
+            (title) => title.title === headingTitle
+        );
+
+        if (!matchingTitle) {
+            console.log(`No comments found for heading title: ${headingTitle}`);
+            return [];
+        }
+
+        console.log(
+            `Found ${matchingTitle.comments.length} comments for ${filePath} - ${headingTitle}`
+        );
+        return matchingTitle.comments;
+    } catch (error) {
+        console.error("Error extracting comments from API response:", error);
+        return [];
+    }
+}