Hacker News Clone

/** * This Hacker News clone uses Lucia for user authentication and SQLite for data storage. * It provides a simple interface for viewing, submitting, and upvoting stories, mimicking the HN style. * Users can upvote each post exactly once and comment on stories in an infinitely nested style. */ /** @jsxImportSource https://esm.sh/react */ 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 }) => (

{comment.content}

by {comment.username} | {comment.timestamp}

{user && ( )} {comment.replies && comment.replies.map(reply => ( ))}

); return ( Hacker News Clone

givenOliveScorpion

Version 3