Post a Job 💼

\n setNewJob({...newJob, title: e.target.value})}\n />\n setNewJob({...newJob, company: e.target.value})}\n />\n

setNewJob({...newJob, description: e.target.value})}\n                />\n                <input \n                  placeholder=\"Location\" \n                  value={newJob.location}\n                  onChange={(e) => setNewJob({...newJob, location: e.target.value})}\n                />\n                <input \n                  placeholder=\"Salary\" \n                  value={newJob.salary}\n                  onChange={(e) => setNewJob({...newJob, salary: e.target.value})}\n                />\n                <input \n                  placeholder=\"Job Type\" \n                  value={newJob.jobType}\n                  onChange={(e) => setNewJob({...newJob, jobType: e.target.value})}\n                />\n                <input \n                  placeholder=\"Required Skills\" \n                  value={newJob.skills}\n                  onChange={(e) => setNewJob({...newJob, skills: e.target.value})}\n                />\n                <button type=\"submit\">Post Job</button>\n              </form>\n            </div>\n\n            <div>\n              <h2>Job Listings 📋</h2>\n              {jobs.map(job => (\n                <div key={job.id} style={{\n                  border: '1px solid #eee', \n                  padding: '10px', \n                  marginBottom: '10px'\n                }}>\n                  <h3>{job.title} at {job.company}</h3>\n                  <p><strong>Location:</strong> {job.location}</p>\n                  <p><strong>Salary:</strong> {job.salary}</p>\n                  <p><strong>Job Type:</strong> {job.jobType}</p>\n                  <p><strong>Skills Required:</strong> {job.skills}</p>\n                  <p>{job.description}</p>\n                </div>\n              ))}\n            </div>\n          </>\n        );\n      case 'chat':\n        return (\n          <div>\n            <h2>Community Chat 💬</h2>\n            <div>\n              {messages.map(msg => (\n                <div key={msg.id} style={{\n                  marginBottom: '10px', \n                  padding: '5px', \n                  backgroundColor: '#f4f4f4'\n                }}>\n                  <strong>{msg.username || 'Anonymous'}</strong>: {msg.text}\n                </div>\n              ))}\n            </div>\n            <form onSubmit={handleMessageSubmit}>\n              <input \n                value={newMessage}\n                onChange={(e) => setNewMessage(e.target.value)}\n                placeholder=\"Type a message...\"\n                disabled={!username}\n              />\n              <button type=\"submit\" disabled={!username}>Send</button>\n            </form>\n          </div>\n        );\n      default:\n        return null;\n    }\n  };\n\n  return (\n    <div>\n      <h1>🚀 Job Board & Community Chat</h1>\n      \n      <div>\n        <h2>Username 👤</h2>\n        <input \n          placeholder=\"Enter your username\" \n          value={username}\n          onChange={(e) => setUsername(e.target.value)}\n        />\n      </div>\n      \n      <div style={{ \n        display: 'flex', \n        marginBottom: '20px',\n        borderBottom: '1px solid #eee'\n      }}>\n        <button \n          onClick={() => setActiveTab('jobs')}\n          style={{\n            padding: '10px 20px',\n            backgroundColor: activeTab === 'jobs' ? '#007bff' : 'transparent',\n            color: activeTab === 'jobs' ? 'white' : 'black',\n            border: 'none',\n            cursor: 'pointer'\n          }}\n        >\n          Jobs 💼\n        </button>\n        <button \n          onClick={() => setActiveTab('chat')}\n          style={{\n            padding: '10px 20px',\n            backgroundColor: activeTab === 'chat' ? '#007bff' : 'transparent',\n            color: activeTab === 'chat' ? 'white' : 'black',\n            border: 'none',\n            cursor: 'pointer'\n          }}\n        >\n          Chat 💬\n        </button>\n      </div>\n\n      {renderTabContent()}\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 { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n  const openai = new OpenAI();\n\n  const KEY = \"Job_Board_and_Community_Chat\";\n  const JOBS_TABLE = `${KEY}_jobs`;\n  const CHAT_TABLE = `${KEY}_messages`;\n\n  // Safely add username column if it doesn't exist\n  try {\n    // Check if username column exists\n    const tableInfo = await sqlite.execute(`PRAGMA table_info(${CHAT_TABLE})`);\n    const usernameColumnExists = tableInfo.rows.some(row => row.name === 'username');\n\n    if (!usernameColumnExists) {\n      // Add username column with a default value\n      await sqlite.execute(`\n        ALTER TABLE ${CHAT_TABLE} \n        ADD COLUMN username TEXT DEFAULT 'Anonymous'\n      `);\n    }\n  } catch (error) {\n    console.error('Error checking/adding username column:', error);\n  }\n\n  // Ensure tables exist with username column\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${JOBS_TABLE} (\n      id TEXT PRIMARY KEY,\n      title TEXT,\n      company TEXT,\n      description TEXT,\n      location TEXT,\n      salary TEXT,\n      job_type TEXT,\n      skills TEXT,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${CHAT_TABLE} (\n      id TEXT PRIMARY KEY,\n      username TEXT DEFAULT 'Anonymous',\n      text TEXT,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Insert sample job if no jobs exist\n  const existingJobs = await sqlite.execute(`SELECT COUNT(*) as count FROM ${JOBS_TABLE}`);\n  if (existingJobs.rows[0].count === 0) {\n    const sampleJobId = generateId();\n    await sqlite.execute(\n      `INSERT INTO ${JOBS_TABLE} (id, title, company, description, location, salary, job_type, skills) \n       VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n      [\n        sampleJobId,\n        'Senior Software Engineer',\n        'TechInnovate Solutions',\n        'We are seeking a passionate software engineer to join our cutting-edge AI team. The ideal candidate will have experience with machine learning, cloud infrastructure, and modern web technologies.',\n        'San Francisco, CA',\n        '$150,000 - $180,000',\n        'Full-time',\n        'React, TypeScript, Machine Learning, AWS'\n      ]\n    );\n  }\n\n  // Handle different routes\n  const url = new URL(request.url);\n  \n  if (request.method === 'POST' && url.pathname === '/postJob') {\n    const job = await request.json();\n    const jobId = generateId();\n    \n    await sqlite.execute(\n      `INSERT INTO ${JOBS_TABLE} (id, title, company, description, location, salary, job_type, skills) \n       VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n      [\n        jobId, \n        job.title, \n        job.company, \n        job.description, \n        job.location, \n        job.salary, \n        job.jobType, \n        job.skills\n      ]\n    );\n\n    // Basic AI job matching\n    const matchPrompt = `Given a job for ${job.title} at ${job.company}, \n      suggest the top 3 skills a candidate should have to be successful.`;\n    \n    const aiSuggestion = await openai.chat.completions.create({\n      messages: [{ role: \"user\", content: matchPrompt }],\n      model: \"gpt-4o-mini\",\n      max_tokens: 100\n    });\n\n    return new Response(JSON.stringify({\n      ...job,\n      id: jobId,\n      aiSkillSuggestions: aiSuggestion.choices[0].message.content\n    }), { \n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n\n  if (request.method === 'GET' && url.pathname === '/jobs') {\n    const jobs = await sqlite.execute(`SELECT * FROM ${JOBS_TABLE} ORDER BY created_at DESC LIMIT 20`);\n    return new Response(JSON.stringify(jobs.rows), { \n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n\n  if (request.method === 'GET' && url.pathname === '/messages') {\n    const messages = await sqlite.execute(`SELECT * FROM ${CHAT_TABLE} ORDER BY created_at DESC LIMIT 20`);\n    return new Response(JSON.stringify(messages.rows), { \n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n\n  if (request.method === 'POST' && url.pathname === '/chat') {\n    const { message, username } = await request.json();\n    const messageId = generateId();\n\n    await sqlite.execute(\n      `INSERT INTO ${CHAT_TABLE} (id, username, text) VALUES (?, ?, ?)`,\n      [messageId, username || 'Anonymous', message]\n    );\n\n    return new Response(JSON.stringify({ \n      id: messageId, \n      username: username || 'Anonymous',\n      text: message \n    }), { \n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n\n  // Render HTML\n  return new Response(`\n    <html>\n      <head>\n        <title>Job Board & Community</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\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: system-ui, sans-serif; \n  max-width: 800px; \n  margin: 0 auto; \n  padding: 20px; \n}\ninput, textarea { \n  width: 100%; \n  margin: 10px 0; \n  padding: 10px; \n}\nform { \n  display: flex; \n  flex-direction: column; \n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Rockjunior/Job_Board_and_Community_Chat/code/main.tsx","extension","actionData","errors"]
</article></body></html>