import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import { luciaMiddleware } from "https://esm.town/v/stevekrouse/lucia_middleware_safe";
function App() {
const [stories, setStories] = useState([]);
const [user, setUser] = useState(null);
const [currentStory, setCurrentStory] = useState(null);
const [comments, setComments] = useState([]);
useEffect(() => {
fetchStories();
fetchUser();
}, []);
const fetchStories = async () => {
const response = await fetch('/stories');
const data = await response.json();
setStories(data);
};
const fetchUser = async () => {
const response = await fetch('/user');
const data = await response.json();
setUser(data.username);
};
const fetchComments = async (storyId) => {
const response = await fetch(`/comments/${storyId}`);
const data = await response.json();
setComments(data);
};
const submitStory = async (event) => {
event.preventDefault();
const title = event.target.title.value;
const url = event.target.url.value;
await fetch('/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title, url }),
});
fetchStories();
event.target.reset();
};
const upvoteStory = async (storyId) => {
if (!user) return;
await fetch('/upvote', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ storyId }),
});
fetchStories();
};
const submitComment = async (event, parentId = null) => {
event.preventDefault();
const content = event.target.content.value;
await fetch('/comment', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ storyId: currentStory.id, content, parentId }),
});
fetchComments(currentStory.id);
event.target.reset();
};
const CommentComponent = ({ comment }) => (
<div className="comment">
<div>{comment.content}</div>
<div className="comment-details">
by {comment.username} | {comment.timestamp}
</div>
{user && (
<form onSubmit={(e) => submitComment(e, comment.id)}>
<textarea name="content" required></textarea>
<button type="submit">Reply</button>
</form>
)}
{comment.replies && comment.replies.map(reply => (
<CommentComponent key={reply.id} comment={reply} />
))}
</div>
);
return (
<html>
<head>
<title>Hacker News Clone</title>
<style dangerouslySetInnerHTML={{ __html: css }} />
</head>
<body>
<div className="header">