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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.17.0-hack-alpha6",
+    "version": "1.17.0-hack-alpha7",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/commentPopup/README.md

@@ -4,6 +4,8 @@ A Lightning Web Component that allows users to leave comments on documentation s
 
 ## Features
 
+-   ✅ **API Integration**: Now actively tries to fetch from `/get-comments` endpoint
+-   ✅ **Fallback Support**: Falls back to localStorage if API is unavailable
 -   ✅ **New API Format**: Supports branch-based comment fetching
 -   ✅ **Pre-loaded Comments**: Comments are fetched when component is rendered, not when popup opens
 -   ✅ **Local Storage**: Comments persist across page refreshes during development
@@ -188,29 +190,55 @@ The component automatically creates a development UI when running on localhost.
 -   Clearing all comments
 -   Viewing statistics
 
-## Migration to Backend API
+## API Integration Status
 
-When the backend API is ready, follow these steps to migrate from localStorage:
+The component now actively tries to use the backend API with localStorage as a fallback:
 
-1. **Uncomment API calls**: In `commentPopup.ts`, uncomment the API implementation sections
-2. **Comment localStorage calls**: Comment out the localStorage implementation sections
-3. **Update API endpoints**: Ensure the API endpoints match your backend
-4. **Test API integration**: Use the development tools to test API calls
+### Current Behavior
 
-### Example Migration
+1. **Fetch Comments**: First tries `/get-comments?branch={branch}`, falls back to localStorage if API fails
+2. **Post Comments**: First tries `/post-comment`, falls back to localStorage if API fails
+3. **Error Handling**: Graceful degradation with console warnings for debugging
+4. **Backward Compatibility**: localStorage continues to work for development and offline scenarios
+
+### API Endpoints
+
+-   **GET** `/get-comments?branch={branch}` - Fetch all comments for a branch
+-   **POST** `/post-comment` - Add a new comment
+
+### Fallback Strategy
 
 ```typescript
-// Before (localStorage)
-await this.saveCommentToLocalStorage(payload);
-
-// After (API)
-const response = await fetch("/post-comment", {
-    method: "POST",
-    headers: {
-        "Content-Type": "application/json"
-    },
-    body: JSON.stringify(payload)
-});
+// Fetch comments with fallback
+try {
+    const response = await fetch(`/get-comments?${params.toString()}`);
+    if (response.ok) {
+        // Use API response
+        const data = await response.json();
+        this.comments = this.extractCommentsFromApiResponse(data);
+    } else {
+        // Fallback to localStorage
+        this.comments = await this.getCommentsFromLocalStorage();
+    }
+} catch (error) {
+    // Fallback to localStorage on network error
+    this.comments = await this.getCommentsFromLocalStorage();
+}
+```
+
+### Testing API Integration
+
+Use the development tools to test API integration:
+
+```javascript
+// Test API response format
+CommentDevHelper.testApiResponseFormat();
+
+// Simulate API call for a specific branch
+CommentDevHelper.simulateApiCall("main");
+
+// Check if API is available
+CommentDevHelper.checkApiAvailability();
 ```
 
 ## Testing

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

@@ -27,7 +27,8 @@ if (typeof window !== "undefined") {
         addComment,
         getCommentsForBranch,
         fetchCommentsForBranch,
-        extractCommentsFromApiResponse
+        extractCommentsFromApiResponse,
+        checkApiAvailability
     };
 }
 
@@ -301,6 +302,64 @@ export async function simulateApiCall(
     }
 }
 
+/**
+ * Check if the API endpoints are available
+ */
+export async function checkApiAvailability(): Promise<void> {
+    console.log("=== Checking API Availability ===");
+
+    try {
+        // Test GET endpoint
+        const getResponse = await fetch("/get-comments?branch=test");
+        console.log(
+            `GET /get-comments status: ${getResponse.status} ${getResponse.statusText}`
+        );
+
+        if (getResponse.ok) {
+            console.log("✅ GET /get-comments is available");
+        } else {
+            console.log("❌ GET /get-comments is not available");
+        }
+
+        // Test POST endpoint (with a test payload)
+        const testPayload = {
+            branch: "test",
+            file_path: "test.md",
+            heading_title: "Test",
+            start_line: "1",
+            end_line: "10",
+            comment: {
+                comment_text: "Test comment",
+                email: "test@example.com",
+                timestamp: new Date().toISOString()
+            }
+        };
+
+        const postResponse = await fetch("/post-comment", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify(testPayload)
+        });
+
+        console.log(
+            `POST /post-comment status: ${postResponse.status} ${postResponse.statusText}`
+        );
+
+        if (postResponse.ok) {
+            console.log("✅ POST /post-comment is available");
+        } else {
+            console.log("❌ POST /post-comment is not available");
+        }
+
+        console.log("=== API Availability Check Complete ===");
+    } catch (error) {
+        console.error("❌ API availability check failed:", error);
+        console.log("This is expected if the backend is not running");
+    }
+}
+
 // Add the helper functions to the global CommentDevHelper
 if (typeof window !== "undefined") {
     (window as any).CommentDevHelper = {

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

@@ -234,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
+                );
 
-        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
+                        }
+                    })
+                );
+            } 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 post
-        await this.fetchComments();
+                // 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)"
+                );
 
-        // Dispatch custom event
-        this.dispatchEvent(
-            new CustomEvent("commentadded", {
-                detail: {
-                    ...payload.comment,
-                    id: responseData.id // Include any ID returned by the API
-                }
-            })
-        );
-        */
+                // 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;
+            }
+        }
     }
 
     private async saveCommentToLocalStorage(payload: ApiCommentPayload) {
@@ -376,36 +410,58 @@ 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
             });
 
-            console.log('Fetching comments with params:', params.toString());
+            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 response = await fetch(
+                `https://cx-helper-engine-1-114ef038858c.herokuapp.com/get-comments?${params.toString()}`
+            );
+
+            if (response.ok) {
+                const data: ApiCommentResponse = await response.json();
+                console.log("Fetched comments from API:", data);
 
-            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;
-            */
+                // Find comments for this specific file path and heading title
+                const comments = this.extractCommentsFromApiResponse(data);
+                this.comments = comments;
+            } else {
+                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;
         }