{isRegister ? \"Register\" : \"Login\"}

\n \n

\n );\n}\n\nfunction JobPostingForm({ onSubmit, user }) {\n const [title, setTitle] = useState(\"\");\n const [company, setCompany] = useState(\"\");\n const [description, setDescription] = useState(\"\");\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n const response = await fetch(\"/post-job\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ \n title, \n company, \n description, \n userId: user.id \n })\n });\n if (response.ok) {\n setTitle(\"\");\n setCompany(\"\");\n setDescription(\"\");\n onSubmit();\n }\n };\n\n return (\n

\n Posting as: {user.username}\n

\n setTitle(e.target.value)}\n required \n />\n setCompany(e.target.value)}\n required \n />\n

setDescription(e.target.value)}\n        required \n      />\n      <button type=\"submit\">Post Job</button>\n    </form>\n  );\n}\n\nfunction JobListings() {\n  const [jobs, setJobs] = useState([]);\n\n  const fetchJobs = async () => {\n    const response = await fetch(\"/get-jobs\");\n    const data = await response.json();\n    setJobs(data);\n  };\n\n  useEffect(() => {\n    fetchJobs();\n  }, []);\n\n  return (\n    <div className=\"job-listings\">\n      <h2>Current Job Postings</h2>\n      {jobs.map((job, index) => (\n        <div key={index} className=\"job-card\">\n          <h3>{job.title}</h3>\n          <h4>{job.company}</h4>\n          <p>{job.description}</p>\n          <div className=\"job-poster\">Posted by: {job.username}</div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction ChatRoom({ user }) {\n  const [messages, setMessages] = useState([]);\n  const [newMessage, setNewMessage] = useState(\"\");\n\n  const fetchMessages = async () => {\n    const response = await fetch(\"/get-messages\");\n    const data = await response.json();\n    setMessages(data);\n  };\n\n  const sendMessage = async (e) => {\n    e.preventDefault();\n    const response = await fetch(\"/send-message\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ \n        content: newMessage, \n        userId: user.id \n      })\n    });\n    if (response.ok) {\n      setNewMessage(\"\");\n      fetchMessages();\n    }\n  };\n\n  useEffect(() => {\n    fetchMessages();\n    const interval = setInterval(fetchMessages, 5000);\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div className=\"chat-room\">\n      <h2>Community Chat</h2>\n      <div className=\"username-display\">\n        Chatting as: <strong>{user.username}</strong>\n      </div>\n      <div className=\"message-list\">\n        {messages.map((msg, index) => (\n          <div key={index} className=\"message\">\n            <strong>{msg.username}</strong>: {msg.content}\n          </div>\n        ))}\n      </div>\n      <form onSubmit={sendMessage} className=\"message-form\">\n        <input \n          type=\"text\" \n          value={newMessage}\n          onChange={(e) => setNewMessage(e.target.value)}\n          placeholder=\"Type a message...\"\n          required \n        />\n        <button type=\"submit\">Send</button>\n      </form>\n    </div>\n  );\n}\n\nfunction App() {\n  const [refreshJobs, setRefreshJobs] = useState(0);\n  const [user, setUser] = useState(\n    JSON.parse(localStorage.getItem('jobBoardUser')) || null\n  );\n\n  const handleLogout = () => {\n    localStorage.removeItem('jobBoardUser');\n    setUser(null);\n  };\n\n  return (\n    <div className=\"job-board-app\">\n      {!user && (\n        <LoginModal \n          onLogin={setUser} \n          onRegister={setUser} \n        />\n      )}\n      <h1>🚀 Community Job Board</h1>\n      {user && (\n        <div className=\"user-actions\">\n          <span>Welcome, {user.username}</span>\n          <button onClick={handleLogout}>Logout</button>\n        </div>\n      )}\n      {user && (\n        <div className=\"app-container\">\n          <div className=\"left-panel\">\n            <JobPostingForm \n              onSubmit={() => setRefreshJobs(r => r + 1)} \n              user={user}\n            />\n            <JobListings key={refreshJobs} />\n          </div>\n          <div className=\"right-panel\">\n            <ChatRoom user={user} />\n          </div>\n        </div>\n      )}\n      <footer>\n        <a href={import.meta.url.replace(\"esm.town\", \"val.town\")} target=\"_top\">View Source</a>\n      </footer>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"jobBoardApp\";\n  const SCHEMA_VERSION = 5;\n\n  // Create users 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      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Create jobs table with user reference\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      user_id INTEGER NOT NULL,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n      FOREIGN KEY(user_id) REFERENCES ${KEY}_users_${SCHEMA_VERSION}(id)\n    )\n  `);\n\n  // Create messages table with user reference\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      user_id INTEGER NOT NULL,\n      content TEXT NOT NULL,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n      FOREIGN KEY(user_id) REFERENCES ${KEY}_users_${SCHEMA_VERSION}(id)\n    )\n  `);\n\n  const url = new URL(request.url);\n  \n  // User Registration\n  if (request.method === \"POST\" && url.pathname === \"/register\") {\n    const { username, password } = await request.json();\n    \n    // Basic validation\n    if (!username || username.trim().length < 3 || !password || password.length < 6) {\n      return new Response(JSON.stringify({ \n        success: false, \n        message: \"Invalid username or password\" \n      }), { \n        status: 400,\n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    }\n\n    try {\n      // Check if username already exists\n      const existingUser = await sqlite.execute(\n        `SELECT * FROM ${KEY}_users_${SCHEMA_VERSION} WHERE username = ?`,\n        [username]\n      );\n\n      if (existingUser.rows.length > 0) {\n        return new Response(JSON.stringify({ \n          success: false, \n          message: \"Username already exists\" \n        }), { \n          status: 400,\n          headers: { \"Content-Type\": \"application/json\" } \n        });\n      }\n\n      // Insert new user\n      const result = await sqlite.execute(\n        `INSERT INTO ${KEY}_users_${SCHEMA_VERSION} (username, password) VALUES (?, ?)`,\n        [username, password]  // Note: In production, use proper password hashing\n      );\n\n      const newUser = {\n        id: result.lastInsertRowid,\n        username: username\n      };\n\n      return new Response(JSON.stringify({ \n        success: true, \n        user: newUser \n      }), { \n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    } catch (error) {\n      return new Response(JSON.stringify({ \n        success: false, \n        message: \"Registration failed\" \n      }), { \n        status: 500,\n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    }\n  }\n\n  // User Login\n  if (request.method === \"POST\" && url.pathname === \"/login\") {\n    const { username, password } = await request.json();\n    \n    try {\n      const result = await sqlite.execute(\n        `SELECT * FROM ${KEY}_users_${SCHEMA_VERSION} WHERE username = ? AND password = ?`,\n        [username, password]  // Note: In production, use proper password verification\n      );\n\n      if (result.rows.length > 0) {\n        const user = result.rows[0];\n        return new Response(JSON.stringify({ \n          success: true, \n          user: { \n            id: user.id, \n            username: user.username \n          } \n        }), { \n          headers: { \"Content-Type\": \"application/json\" } \n        });\n      } else {\n        return new Response(JSON.stringify({ \n          success: false, \n          message: \"Invalid credentials\" \n        }), { \n          status: 401,\n          headers: { \"Content-Type\": \"application/json\" } \n        });\n      }\n    } catch (error) {\n      return new Response(JSON.stringify({ \n        success: false, \n        message: \"Login failed\" \n      }), { \n        status: 500,\n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    }\n  }\n\n  // Post Job\n  if (request.method === \"POST\" && url.pathname === \"/post-job\") {\n    const { title, company, description, userId } = await request.json();\n    \n    await sqlite.execute(\n      `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, company, description, user_id) VALUES (?, ?, ?, ?)`,\n      [title, company, description, userId]\n    );\n    return new Response(JSON.stringify({ success: true }), { \n      headers: { \"Content-Type\": \"application/json\" } \n    });\n  }\n\n  // Get Jobs (with username)\n  if (request.method === \"GET\" && url.pathname === \"/get-jobs\") {\n    const result = await sqlite.execute(`\n      SELECT j.*, u.username \n      FROM ${KEY}_jobs_${SCHEMA_VERSION} j\n      JOIN ${KEY}_users_${SCHEMA_VERSION} u ON j.user_id = u.id\n      ORDER BY j.created_at DESC \n      LIMIT 20\n    `);\n    return new Response(JSON.stringify(result.rows), { \n      headers: { \"Content-Type\": \"application/json\" } \n    });\n  }\n\n  // Send Message\n  if (request.method === \"POST\" && url.pathname === \"/send-message\") {\n    const { content, userId } = await request.json();\n    \n    await sqlite.execute(\n      `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (content, user_id) VALUES (?, ?)`,\n      [content, userId]\n    );\n    return new Response(JSON.stringify({ success: true }), { \n      headers: { \"Content-Type\": \"application/json\" } \n    });\n  }\n\n  // Get Messages (with username)\n  if (request.method === \"GET\" && url.pathname === \"/get-messages\") {\n    const result = await sqlite.execute(`\n      SELECT m.*, u.username \n      FROM ${KEY}_messages_${SCHEMA_VERSION} m\n      JOIN ${KEY}_users_${SCHEMA_VERSION} u ON m.user_id = u.id\n      ORDER BY m.created_at DESC \n      LIMIT 50\n    `);\n    return new Response(JSON.stringify(result.rows), { \n      headers: { \"Content-Type\": \"application/json\" } \n    });\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>Community Job Board</title>\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { \"Content-Type\": \"text/html\" }\n  });\n}\n\nconst css = `\nbody {\n  font-family: 'Arial', sans-serif;\n  margin: 0;\n  padding: 0;\n  background-color: #f4f4f4;\n}\n\n.username-modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0,0,0,0.7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n}\n\n.username-content {\n  background: white;\n  padding: 30px;\n  border-radius: 8px;\n  text-align: center;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n  width: 300px;\n}\n\n.username-content input {\n  width: 100%;\n  padding: 10px;\n  margin: 10px 0;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n.username-display {\n  margin-bottom: 10px;\n  font-size: 0.9em;\n  color: #666;\n}\n\n.user-actions {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 10px 20px;\n  background-color: #f0f0f0;\n}\n\n.user-actions span {\n  margin-right: 15px;\n}\n\n.user-actions button {\n  background-color: #f44336;\n  color: white;\n  border: none;\n  padding: 5px 10px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-board-app {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 20px;\n}\n\n.app-container {\n  display: flex;\n  gap: 20px;\n}\n\n.left-panel, .right-panel {\n  flex: 1;\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\n.job-form {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.job-form input, .job-form textarea {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.job-form button {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-listings .job-card {\n  border-bottom: 1px solid #eee;\n  padding: 10px 0;\n}\n\n.job-poster {\n  font-size: 0.8em;\n  color: #666;\n  margin-top: 5px;\n}\n\n.chat-room .message-list {\n  height: 400px;\n  overflow-y: auto;\n  border: 1px solid #ddd;\n  padding: 10px;\n}\n\n.message-form {\n  display: flex;\n  margin-top: 10px;\n}\n\n.message-form input {\n  flex-grow: 1;\n  padding: 10px;\n}\n\n.message-form button {\n  background-color: #2196F3;\n  color: white;\n  border: none;\n  padding: 10px;\n  cursor: pointer;\n}\n\nfooter {\n  text-align: center;\n  margin-top: 20px;\n  font-size: 0.8em;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Tiph/jobBoardApp/code/main.tsx","extension","actionData","errors"]
</article></body></html>