Post a Job 💼

\n setNewJobTitle(e.target.value)}\n required \n />\n setNewJobCompany(e.target.value)}\n required \n />\n

setNewJobDescription(e.target.value)}\n              required \n            />\n            <button type=\"submit\">Post Job</button>\n          </form>\n\n          <div className=\"job-list\">\n            <h3>Current Job Openings</h3>\n            {jobs.map((job) => (\n              <div \n                key={job.id} \n                className=\"job-item\"\n                onClick={() => {\n                  setSelectedJob(job);\n                  setActiveTab('chat');\n                }}\n              >\n                <h4>{job.title} @ {job.company}</h4>\n                <p>{job.description}</p>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {activeTab === 'chat' && (\n        <div className=\"chat-section\">\n          {selectedJob ? (\n            <>\n              <h2>Chat for {selectedJob.title} 💬</h2>\n              <div className=\"username-input\">\n                <input \n                  type=\"text\" \n                  placeholder=\"Your Username\" \n                  value={username}\n                  onChange={(e) => setUsername(e.target.value)}\n                />\n              </div>\n              <div className=\"chat-messages\">\n                {chatMessages.map((msg) => (\n                  <div key={msg.id} className=\"chat-message\">\n                    <div className=\"message-content\">\n                      <strong>{msg.username}</strong>: {msg.content}\n                    </div>\n                    <div className=\"message-votes\">\n                      <button \n                        onClick={() => handleVote(msg.id, 'upvote')}\n                        className=\"vote-button upvote\"\n                      >\n                        👍 {msg.upvotes || 0}\n                      </button>\n                      <button \n                        onClick={() => handleVote(msg.id, 'downvote')}\n                        className=\"vote-button downvote\"\n                      >\n                        👎 {msg.downvotes || 0}\n                      </button>\n                    </div>\n                  </div>\n                ))}\n              </div>\n              <form onSubmit={handleSendMessage} className=\"chat-input\">\n                <input \n                  type=\"text\" \n                  placeholder=\"Type a message...\" \n                  value={newChatMessage}\n                  onChange={(e) => setNewChatMessage(e.target.value)}\n                  required \n                />\n                <button type=\"submit\">Send</button>\n              </form>\n            </>\n          ) : (\n            <p>Select a job to start chatting</p>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<JobBoard />);\n}\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 = \"kindPurpleSwan\";\n  const SCHEMA_VERSION = 2;\n\n  // Create jobs table\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  // Create messages table with job_id and voting\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      job_id INTEGER NOT NULL,\n      username TEXT NOT NULL,\n      content TEXT NOT NULL,\n      upvotes INTEGER DEFAULT 0,\n      downvotes INTEGER DEFAULT 0,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n      FOREIGN KEY(job_id) REFERENCES ${KEY}_jobs_${SCHEMA_VERSION}(id)\n    )\n  `);\n\n  // Create votes table to prevent multiple votes\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_votes_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      message_id INTEGER NOT NULL,\n      username TEXT NOT NULL,\n      vote_type TEXT NOT NULL,\n      UNIQUE(message_id, username)\n    )\n  `);\n\n  // Handle different routes\n  const url = new URL(request.url);\n  \n  if (request.method === 'GET' && url.pathname === '/jobs') {\n    const jobs = await sqlite.execute(`\n      SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} \n      ORDER BY created_at DESC \n      LIMIT 10\n    `);\n    return new Response(JSON.stringify(jobs.rows), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  if (request.method === 'POST' && url.pathname === '/jobs') {\n    const { title, description, company } = await request.json();\n    const result = await sqlite.execute(`\n      INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} \n      (title, description, company) \n      VALUES (?, ?, ?)\n    `, [title, description, company]);\n    return new Response(JSON.stringify({ id: result.lastInsertRowid }), { status: 200 });\n  }\n\n  if (request.method === 'GET' && url.pathname === '/messages') {\n    const jobId = url.searchParams.get('jobId');\n    const messages = await sqlite.execute(`\n      SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} \n      WHERE job_id = ? \n      ORDER BY created_at DESC \n      LIMIT 50\n    `, [jobId]);\n    return new Response(JSON.stringify(messages.rows.reverse()), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  if (request.method === 'POST' && url.pathname === '/messages') {\n    const { username, content, jobId } = await request.json();\n    await sqlite.execute(`\n      INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} \n      (job_id, username, content) \n      VALUES (?, ?, ?)\n    `, [jobId, username, content]);\n    return new Response('Message sent', { status: 200 });\n  }\n\n  if (request.method === 'POST' && url.pathname === '/vote') {\n    const { messageId, voteType, username } = await request.json();\n    \n    // Check if user has already voted\n    const existingVote = await sqlite.execute(`\n      SELECT * FROM ${KEY}_votes_${SCHEMA_VERSION} \n      WHERE message_id = ? AND username = ?\n    `, [messageId, username]);\n\n    if (existingVote.rows.length > 0) {\n      return new Response('Already voted', { status: 400 });\n    }\n\n    // Record the vote\n    await sqlite.execute(`\n      INSERT INTO ${KEY}_votes_${SCHEMA_VERSION} \n      (message_id, username, vote_type) \n      VALUES (?, ?, ?)\n    `, [messageId, username, voteType]);\n\n    // Update vote count\n    if (voteType === 'upvote') {\n      await sqlite.execute(`\n        UPDATE ${KEY}_messages_${SCHEMA_VERSION} \n        SET upvotes = upvotes + 1 \n        WHERE id = ?\n      `, [messageId]);\n    } else {\n      await sqlite.execute(`\n        UPDATE ${KEY}_messages_${SCHEMA_VERSION} \n        SET downvotes = downvotes + 1 \n        WHERE id = ?\n      `, [messageId]);\n    }\n\n    return new Response('Voted', { status: 200 });\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>Job Board & Community Chat</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.job-board-container {\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n}\n\n.tab-navigation {\n  display: flex;\n  margin-bottom: 20px;\n}\n\n.tab-navigation button {\n  flex: 1;\n  padding: 10px;\n  background-color: #e0e0e0;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.3s;\n}\n\n.tab-navigation button.active {\n  background-color: #4CAF50;\n  color: white;\n}\n\n.job-posting-section, .chat-section {\n  background-color: white;\n  border-radius: 8px;\n  padding: 20px;\n  box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\ninput, textarea {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\nbutton {\n  padding: 10px;\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-list, .chat-messages {\n  max-height: 400px;\n  overflow-y: auto;\n}\n\n.job-item {\n  border-bottom: 1px solid #eee;\n  padding: 10px 0;\n  cursor: pointer;\n  transition: background-color 0.2s;\n}\n\n.job-item:hover {\n  background-color: #f0f0f0;\n}\n\n.chat-messages {\n  border: 1px solid #ddd;\n  padding: 10px;\n  margin-bottom: 10px;\n}\n\n.chat-message {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 10px;\n  padding: 5px;\n  background-color: #f9f9f9;\n  border-radius: 4px;\n}\n\n.message-votes {\n  display: flex;\n  gap: 10px;\n}\n\n.vote-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n}\n\n.vote-button.upvote:hover {\n  color: green;\n}\n\n.vote-button.downvote:hover {\n  color: red;\n}\n\n.username-input {\n  margin-bottom: 10px;\n}\n\n@media (max-width: 600px) {\n  .job-board-container {\n    padding: 10px;\n  }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/AJIyanu/kindPurpleSwan/code/main.tsx","extension","actionData","errors"]
</article></body></html>