this repo has no description
fix: Poll for AtprotoApi before initializing app
+137
-125
+137
-125
app.js
+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
});