aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/main.ts
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/main.ts')
-rw-r--r--frontend/src/main.ts56
1 files changed, 27 insertions, 29 deletions
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 3628147..d5f4d53 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,35 +1,33 @@
import './style.css'
-/*
-import typescriptLogo from './typescript.svg'
-import viteLogo from '/vite.svg'
-import { setupCounter } from './counter.ts'
-*/
-const response = await fetch('http://localhost:8080/');
-const text = await response.text();
const app = document.querySelector('#app');
-if (app) {
- app.innerHTML = text;
+if (!app) {
+ console.error('App container not found');
+ throw new Error('App container not found');
}
-/*
-document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
- <div>
- <a href="https://vite.dev" target="_blank">
- <img src="${viteLogo}" class="logo" alt="Vite logo" />
- </a>
- <a href="https://www.typescriptlang.org/" target="_blank">
- <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
- </a>
- <h1>Vite + TypeScript</h1>
- <div class="card">
- <button id="counter" type="button"></button>
- </div>
- <p class="read-the-docs">
- Click on the Vite and TypeScript logos to learn more
- </p>
- </div>
-`
+app.innerHTML = '<div class="spinner"></div>';
-setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
-*/ \ No newline at end of file
+try {
+ const response = await fetch('http://localhost:8080/api/posts');
+ if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+ const posts = await response.json();
+ app.innerHTML = '';
+
+ for (const post of posts) {
+ const postHTML = `
+ <div class="note">
+ <img class="note-avatar" src="https://cdn.bsky.app/img/avatar/plain/did:plc:hyyqbqqhpxt2bnn7s2e2iuxd/bafkreidoiynom7v2y5rpsm467l3d2cnr7ozvlfusrchjey3k2jtyquufq4@jpeg" alt="avatar">
+ <div class="note-content">
+ <div style="font-weight: bold">@${post.authorHandle}</div>
+ <div class="note-text">${post.text || '<br>'}</div>
+ <div style="font-size: 12px; color: #888">${new Date(post.createdAt).toLocaleString()}</div>
+ </div>
+ </div>
+ `;
+ app.innerHTML += postHTML;
+ }
+} catch (err) {
+ app.innerHTML = `<div style="color: #f88">error loading posts: ${err}</div>`;
+} \ No newline at end of file