💼 JobChat

\n {user ? (\n

\n Welcome, {user.name}\n \n

\n ) : (\n \n )}\n

\n \n\n {view === 'login' && }\n {view === 'jobs' && }\n {view === 'post' && }\n {view === 'chat-rooms' && user && }\n {view === 'chat-room' && user && }\n

\n );\n}\n\n// ... [Previous components remain the same]\n\nfunction ChatRooms({ user }) {\n const [rooms, setRooms] = useState([]);\n const [newRoomName, setNewRoomName] = useState('');\n const [selectedRoom, setSelectedRoom] = useState(null);\n\n useEffect(() => {\n fetchRooms();\n }, []);\n\n const fetchRooms = async () => {\n try {\n const response = await fetch('/chat-rooms');\n const chatRooms = await response.json();\n setRooms(chatRooms);\n } catch (error) {\n console.error('Failed to fetch rooms', error);\n }\n };\n\n const createRoom = async (e) => {\n e.preventDefault();\n try {\n await fetch('/create-room', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ \n name: newRoomName, \n createdBy: user.id \n })\n });\n setNewRoomName('');\n fetchRooms();\n } catch (error) {\n alert('Failed to create room');\n }\n };\n\n const joinRoom = (room) => {\n setSelectedRoom(room);\n };\n\n if (selectedRoom) {\n return setSelectedRoom(null)} />;\n }\n\n return (\n

Chat Rooms

\n \n\n

\n {rooms.map(room => (\n

\n {room.name}\n {room.member_count} members\n \n

\n ))}\n

\n );\n}\n\nfunction ChatRoom({ user, room, onBack }) {\n const [messages, setMessages] = useState([]);\n const [newMessage, setNewMessage] = useState('');\n\n useEffect(() => {\n const fetchMessages = async () => {\n const response = await fetch(`/chat-messages?roomId=${room.id}`);\n const chatMessages = await response.json();\n setMessages(chatMessages);\n };\n fetchMessages();\n const interval = setInterval(fetchMessages, 5000);\n return () => clearInterval(interval);\n }, [room.id]);\n\n const sendMessage = async (e) => {\n e.preventDefault();\n try {\n await fetch('/send-message', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ \n userId: user.id, \n username: user.name, \n message: newMessage,\n roomId: room.id\n })\n });\n setNewMessage('');\n } catch (error) {\n alert('Failed to send message');\n }\n };\n\n return (\n

\n \n

{room.name}

\n {messages.map((msg, index) => (\n

\n {msg.username}: {msg.message}\n

\n ))}\n

\n \n

\n );\n}\n\n// ... [Rest of the previous code remains the same]\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"JobChatApp\";\n const SCHEMA_VERSION = 4;\n\n // Initialize tables with new chat rooms table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_users_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT UNIQUE NOT NULL,\n password TEXT NOT NULL\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n company TEXT NOT NULL,\n description TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_chat_rooms_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n created_by INTEGER NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_chat_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n room_id INTEGER NOT NULL,\n user_id INTEGER NOT NULL,\n username TEXT NOT NULL,\n message TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Handle different routes\n const url = new URL(request.url);\n \n // ... [Previous route handlers remain the same]\n\n // New route for fetching chat rooms\n if (request.method === 'GET' && url.pathname === '/chat-rooms') {\n const result = await sqlite.execute(`\n SELECT \n r.id, \n r.name, \n r.created_at, \n COUNT(DISTINCT c.user_id) as member_count \n FROM ${KEY}_chat_rooms_${SCHEMA_VERSION} r\n LEFT JOIN ${KEY}_chat_${SCHEMA_VERSION} c ON c.room_id = r.id\n GROUP BY r.id, r.name, r.created_at\n ORDER BY r.created_at DESC\n `);\n return new Response(JSON.stringify(result.rows), { \n headers: { 'Content-Type': 'application/json' } \n });\n }\n\n // Route for creating a new chat room\n if (request.method === 'POST' && url.pathname === '/create-room') {\n const { name, createdBy } = await request.json();\n const result = await sqlite.execute(\n `INSERT INTO ${KEY}_chat_rooms_${SCHEMA_VERSION} (name, created_by) VALUES (?, ?)`,\n [name, createdBy]\n );\n return new Response('Room created', { status: 200 });\n }\n\n // Modified chat messages route to support room-specific messages\n if (request.method === 'GET' && url.pathname === '/chat-messages') {\n const roomId = new URL(request.url).searchParams.get('roomId');\n const result = await sqlite.execute(\n `SELECT * FROM ${KEY}_chat_${SCHEMA_VERSION} \n WHERE room_id = ? \n ORDER BY created_at DESC \n LIMIT 50`,\n [roomId]\n );\n return new Response(JSON.stringify(result.rows), { \n headers: { 'Content-Type': 'application/json' } \n });\n }\n\n // Modified send message route to include room_id\n if (request.method === 'POST' && url.pathname === '/send-message') {\n const { userId, username, message, roomId } = await request.json();\n await sqlite.execute(\n `INSERT INTO ${KEY}_chat_${SCHEMA_VERSION} (room_id, user_id, username, message) VALUES (?, ?, ?, ?)`,\n [roomId, userId, username, message]\n );\n return new Response('Message sent', { status: 200 });\n }\n\n // ... [Rest of the server function remains the same]\n}\n\n// Update CSS to accommodate new chat rooms view\nconst css = `\n/* Previous CSS remains the same, with additions: */\n.chat-rooms {\n padding: 20px;\n}\n\n.rooms-list {\n margin-top: 20px;\n}\n\n.room-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n border-bottom: 1px solid #eee;\n}\n\n.chat-room-header {\n display: flex;\n align-items: center;\n background-color: #f0f0f0;\n padding: 10px;\n}\n\n.chat-room-header button {\n margin-right: 15px;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Kaycee1989/JobChatApp/code/main.tsx","extension","actionData","errors"]