this repo has no description
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: Poll for AtprotoApi before initializing app

+137 -125
+137 -125
app.js
··· 1 1 document.addEventListener('DOMContentLoaded', () => { 2 - // Main application code 3 - let currentCursor = null; 4 - const recordsContainer = document.getElementById("recordsContainer"); 5 - const loadMoreButton = document.getElementById("loadMoreButton"); 6 - const loadButton = document.getElementById("loadButton"); 7 - const repoInput = document.getElementById("repoInput"); 2 + const initializeApp = () => { 3 + // Main application code 4 + let currentCursor = null; 5 + const recordsContainer = document.getElementById("recordsContainer"); 6 + const loadMoreButton = document.getElementById("loadMoreButton"); 7 + const loadButton = document.getElementById("loadButton"); 8 + const repoInput = document.getElementById("repoInput"); 8 9 9 - // Initialize the AT Protocol client - FIXED VERSION // lol claude wrote that 10 - const agent = new window.AtprotoApi.AtpAgent({ 11 - service: "https://bsky.social", 12 - }); 10 + // Initialize the AT Protocol client - FIXED VERSION // lol claude wrote that 11 + const agent = new window.AtprotoApi.AtpAgent({ 12 + service: "https://bsky.social", 13 + }); 13 14 14 - // Event listeners 15 - loadButton.addEventListener("click", () => { 16 - const repo = repoInput.value.trim(); 17 - if (!repo) { 18 - alert("Please enter a valid repository DID or handle"); 19 - return; 20 - } 15 + // Event listeners 16 + loadButton.addEventListener("click", () => { 17 + const repo = repoInput.value.trim(); 18 + if (!repo) { 19 + alert("Please enter a valid repository DID or handle"); 20 + return; 21 + } 21 22 22 - // Clear previous records and reset cursor 23 - recordsContainer.innerHTML = ""; 24 - currentCursor = null; 25 - loadMoreButton.style.display = "none"; 23 + // Clear previous records and reset cursor 24 + recordsContainer.innerHTML = ""; 25 + currentCursor = null; 26 + loadMoreButton.style.display = "none"; 27 + 28 + // Load the first batch of records 29 + loadRecords(repo); 30 + }); 26 31 27 - // Load the first batch of records 28 - loadRecords(repo); 29 - }); 32 + loadMoreButton.addEventListener("click", () => { 33 + loadRecords(repoInput.value.trim()); 34 + }); 30 35 31 - loadMoreButton.addEventListener("click", () => { 32 - loadRecords(repoInput.value.trim()); 33 - }); 36 + // Function to load records from the repository 37 + async function loadRecords(repo) { 38 + try { 39 + loadButton.disabled = true; 40 + loadMoreButton.disabled = true; 41 + loadMoreButton.textContent = "Loading..."; 34 42 35 - // Function to load records from the repository 36 - async function loadRecords(repo) { 37 - try { 38 - loadButton.disabled = true; 39 - loadMoreButton.disabled = true; 40 - loadMoreButton.textContent = "Loading..."; 43 + // Call the AT Protocol API to list records 44 + const response = await agent.com.atproto.repo.listRecords({ 45 + repo: repo, 46 + collection: "me.comind.blip.thought", 47 + limit: 10, 48 + cursor: currentCursor, 49 + }); 41 50 42 - // Call the AT Protocol API to list records 43 - const response = await agent.com.atproto.repo.listRecords({ 44 - repo: repo, 45 - collection: "me.comind.blip.thought", 46 - limit: 10, 47 - cursor: currentCursor, 48 - }); 51 + // Update the cursor for pagination 52 + currentCursor = response.data.cursor; 49 53 50 - // Update the cursor for pagination 51 - currentCursor = response.data.cursor; 54 + // Show or hide the "Load More" button based on cursor availability 55 + if (currentCursor) { 56 + loadMoreButton.style.display = "block"; 57 + } else { 58 + loadMoreButton.style.display = "none"; 59 + } 52 60 53 - // Show or hide the "Load More" button based on cursor availability 54 - if (currentCursor) { 55 - loadMoreButton.style.display = "block"; 56 - } else { 57 - loadMoreButton.style.display = "none"; 61 + // Render the records 62 + renderRecords(response.data.records); 63 + } catch (error) { 64 + console.error("Error loading records:", error); 65 + alert(`Error: ${error.message || "Failed to load records"}`); 66 + } finally { 67 + loadButton.disabled = false; 68 + loadMoreButton.disabled = false; 69 + loadMoreButton.textContent = "Load More"; 70 + } 58 71 } 59 72 60 - // Render the records 61 - renderRecords(response.data.records); 62 - } catch (error) { 63 - console.error("Error loading records:", error); 64 - alert(`Error: ${error.message || "Failed to load records"}`); 65 - } finally { 66 - loadButton.disabled = false; 67 - loadMoreButton.disabled = false; 68 - loadMoreButton.textContent = "Load More"; 69 - } 70 - } 71 - 72 - // Function to render the records 73 - function renderRecords(records) { 74 - if (records.length === 0) { 75 - recordsContainer.innerHTML += 76 - '<div class="alert alert-info">No records found</div>'; 77 - return; 78 - } 73 + // Function to render the records 74 + function renderRecords(records) { 75 + if (records.length === 0) { 76 + recordsContainer.innerHTML += 77 + '<div class="alert alert-info">No records found</div>'; 78 + return; 79 + } 79 80 80 - records.forEach((record) => { 81 - const { value } = record; 82 - const thoughtEl = document.createElement("div"); 83 - thoughtEl.className = "card thought-card p-3"; 81 + records.forEach((record) => { 82 + const { value } = record; 83 + const thoughtEl = document.createElement("div"); 84 + thoughtEl.className = "card thought-card p-3"; 84 85 85 - // Format the date/time 86 - const createdAt = new Date(value.createdAt); 87 - const formattedDate = createdAt.toLocaleString(); 86 + // Format the date/time 87 + const createdAt = new Date(value.createdAt); 88 + const formattedDate = createdAt.toLocaleString(); 88 89 89 - // Get the thought data 90 - const thought = value.generated; 90 + // Get the thought data 91 + const thought = value.generated; 91 92 92 - // Build the HTML 93 - thoughtEl.innerHTML = ` 94 - <div class="card-body"> 95 - <div class="d-flex justify-content-between align-items-start"> 96 - <span class="thought-type">${thought.thoughtType}</span> 97 - <small class="text-muted">${formattedDate}</small> 98 - </div> 93 + // Build the HTML 94 + thoughtEl.innerHTML = ` 95 + <div class="card-body"> 96 + <div class="d-flex justify-content-between align-items-start"> 97 + <span class="thought-type">${thought.thoughtType}</span> 98 + <small class="text-muted">${formattedDate}</small> 99 + </div> 99 100 100 - ${thought.context ? `<p class="text-muted mb-2">${thought.context}</p>` : ""} 101 + ${thought.context ? `<p class="text-muted mb-2">${thought.context}</p>` : ""} 101 102 102 - <p class="card-text">${thought.text}</p> 103 + <p class="card-text">${thought.text}</p> 103 104 104 - ${ 105 - thought.evidence.length > 0 106 - ? ` 107 - <div class="mt-3"> 108 - <h6>Evidence:</h6> 109 - <div class="evidence-list"> 110 - ${thought.evidence 111 - .map( 112 - (item) => ` 113 - <div class="evidence-item">${item}</div> 114 - `, 115 - ) 116 - .join("")} 105 + ${ 106 + thought.evidence.length > 0 107 + ? ` 108 + <div class="mt-3"> 109 + <h6>Evidence:</h6> 110 + <div class="evidence-list"> 111 + ${thought.evidence 112 + .map( 113 + (item) => ` 114 + <div class="evidence-item">${item}</div> 115 + `, 116 + ) 117 + .join("")} 118 + </div> 117 119 </div> 118 - </div> 119 - ` 120 - : "" 121 - } 120 + ` 121 + : "" 122 + } 122 123 123 - ${ 124 - thought.alternatives.length > 0 125 - ? ` 126 - <div class="mt-3"> 127 - <h6>Alternative Thoughts:</h6> 128 - <div class="alternatives-list"> 129 - ${thought.alternatives 130 - .map( 131 - (item) => ` 132 - <div class="alternative-item">${item}</div> 133 - `, 134 - ) 135 - .join("")} 124 + ${ 125 + thought.alternatives.length > 0 126 + ? ` 127 + <div class="mt-3"> 128 + <h6>Alternative Thoughts:</h6> 129 + <div class="alternatives-list"> 130 + ${thought.alternatives 131 + .map( 132 + (item) => ` 133 + <div class="alternative-item">${item}</div> 134 + `, 135 + ) 136 + .join("")} 137 + </div> 136 138 </div> 137 - </div> 138 - ` 139 - : "" 140 - } 139 + ` 140 + : "" 141 + } 141 142 142 - <div class="mt-2"> 143 - <small class="text-muted">URI: ${record.uri}</small> 143 + <div class="mt-2"> 144 + <small class="text-muted">URI: ${record.uri}</small> 145 + </div> 144 146 </div> 145 - </div> 146 - `; 147 + `; 147 148 148 - recordsContainer.appendChild(thoughtEl); 149 - }); 150 - } 149 + recordsContainer.appendChild(thoughtEl); 150 + }); 151 + } 152 + }; 153 + 154 + const checkApiReady = () => { 155 + if (window.AtprotoApi && window.AtprotoApi.AtpAgent) { 156 + initializeApp(); 157 + } else { 158 + setTimeout(checkApiReady, 50); // Poll every 50ms 159 + } 160 + }; 161 + 162 + checkApiReady(); 151 163 });