\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 JobBoard({ jobs }) {\n  return (\n    <div className=\"job-board\">\n      <h2>Current Job Postings</h2>\n      {jobs.map((job) => (\n        <div key={job.id} className=\"job-card\">\n          <h3>{job.title}</h3>\n          <p><strong>Company:</strong> {job.company}</p>\n          <p>{job.description}</p>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction UsernameModal({ onSetUsername }) {\n  const [username, setUsername] = useState(\"\");\n  const [error, setError] = useState(\"\");\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (username.trim().length < 2) {\n      setError(\"Username must be at least 2 characters long\");\n      return;\n    }\n    localStorage.setItem('chatUsername', username.trim());\n    onSetUsername(username.trim());\n  };\n\n  return (\n    <div className=\"username-modal-overlay\">\n      <div className=\"username-modal\">\n        <h2>Set Your Username</h2>\n        <form onSubmit={handleSubmit}>\n          <input \n            type=\"text\" \n            placeholder=\"Enter your username\" \n            value={username}\n            onChange={(e) => {\n              setUsername(e.target.value);\n              setError(\"\");\n            }}\n            required \n          />\n          {error && <p className=\"error-message\">{error}</p>}\n          <button type=\"submit\">Join Chat</button>\n        </form>\n      </div>\n    </div>\n  );\n}\n\nfunction ChatRoom() {\n  const [messages, setMessages] = useState([]);\n  const [newMessage, setNewMessage] = useState(\"\");\n  const [username, setUsername] = useState(\"\");\n\n  useEffect(() => {\n    // Check for existing username in local storage\n    const storedUsername = localStorage.getItem('chatUsername');\n    if (storedUsername) {\n      setUsername(storedUsername);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (username) {\n      fetchMessages();\n      const interval = setInterval(fetchMessages, 5000);\n      return () => clearInterval(interval);\n    }\n  }, [username]);\n\n  const fetchMessages = async () => {\n    try {\n      const response = await fetch(\"/api/chat-messages\");\n      const data = await response.json();\n      setMessages(data);\n    } catch (error) {\n      console.error(\"Error fetching messages\", error);\n    }\n  };\n\n  const handleSendMessage = async (e: React.FormEvent) => {\n    e.preventDefault();\n    try {\n      const response = await fetch(\"/api/chat-messages\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ \n          content: newMessage,\n          username: username\n        })\n      });\n      if (response.ok) {\n        setNewMessage(\"\");\n        fetchMessages();\n      }\n    } catch (error) {\n      console.error(\"Error sending message\", error);\n    }\n  };\n\n  // If no username is set, show the username modal\n  if (!username) {\n    return <UsernameModal onSetUsername={setUsername} />;\n  }\n\n  return (\n    <div className=\"chat-room\">\n      <h2>Opportunity Chat (Logged in as {username})</h2>\n      <div className=\"message-list\">\n        {messages.map((msg) => (\n          <div key={msg.id} className=\"message\">\n            <strong>{msg.username}</strong>: {msg.content}\n          </div>\n        ))}\n      </div>\n      <form onSubmit={handleSendMessage} 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 TabNavigation({ activeTab, onTabChange }) {\n  return (\n    <div className=\"tab-navigation\">\n      <button \n        className={activeTab === 'jobs' ? 'active' : ''}\n        onClick={() => onTabChange('jobs')}\n      >\n        Job Postings\n      </button>\n      <button \n        className={activeTab === 'chat' ? 'active' : ''}\n        onClick={() => onTabChange('chat')}\n      >\n        Community Chat\n      </button>\n    </div>\n  );\n}\n\nfunction App() {\n  const [jobs, setJobs] = useState([]);\n  const [activeTab, setActiveTab] = useState('jobs');\n\n  useEffect(() => {\n    const fetchJobs = async () => {\n      try {\n        const response = await fetch(\"/api/job-postings\");\n        const data = await response.json();\n        setJobs(data);\n      } catch (error) {\n        console.error(\"Error fetching jobs\", error);\n      }\n    };\n    fetchJobs();\n  }, []);\n\n  return (\n    <div className=\"app-container\">\n      <h1>Job Opportunities Platform</h1>\n      <TabNavigation \n        activeTab={activeTab} \n        onTabChange={setActiveTab} \n      />\n      <div className=\"tab-content\">\n        {activeTab === 'jobs' && (\n          <div className=\"job-section\">\n            <JobPostingForm />\n            <JobBoard jobs={jobs} />\n          </div>\n        )}\n        {activeTab === 'chat' && <ChatRoom />}\n      </div>\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        className=\"source-link\"\n      >\n        View Source\n      </a>\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 SCHEMA_VERSION = 2; // Increment schema version\n  const KEY = \"superPeachParrotfish\";\n\n  // Create job postings table\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_job_postings_${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 chat messages table\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_chat_messages_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      username TEXT NOT NULL, \n      content TEXT NOT NULL,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Handle API routes\n  const url = new URL(request.url);\n  \n  // Job Postings API\n  if (url.pathname === \"/api/job-postings\") {\n    if (request.method === \"GET\") {\n      const jobs = await sqlite.execute(`\n        SELECT * FROM ${KEY}_job_postings_${SCHEMA_VERSION} \n        ORDER BY created_at DESC \n        LIMIT 50\n      `);\n      return Response.json(jobs.rows);\n    }\n    \n    if (request.method === \"POST\") {\n      const { title, company, description } = await request.json();\n      await sqlite.execute(`\n        INSERT INTO ${KEY}_job_postings_${SCHEMA_VERSION} \n        (title, company, description) \n        VALUES (?, ?, ?)\n      `, [title, company, description]);\n      return Response.json({ success: true });\n    }\n  }\n\n  // Chat Messages API\n  if (url.pathname === \"/api/chat-messages\") {\n    if (request.method === \"GET\") {\n      const messages = await sqlite.execute(`\n        SELECT * FROM ${KEY}_chat_messages_${SCHEMA_VERSION} \n        ORDER BY created_at DESC \n        LIMIT 50\n      `);\n      return Response.json(messages.rows.reverse());\n    }\n    \n    if (request.method === \"POST\") {\n      const { content, username } = await request.json();\n      if (!username) {\n        return new Response(JSON.stringify({ error: \"Username is required\" }), { \n          status: 400,\n          headers: { \"Content-Type\": \"application/json\" }\n        });\n      }\n      await sqlite.execute(`\n        INSERT INTO ${KEY}_chat_messages_${SCHEMA_VERSION} \n        (content, username) \n        VALUES (?, ?)\n      `, [content, username]);\n      return Response.json({ success: true });\n    }\n  }\n\n  // Serve HTML\n  return new Response(`\n    <html>\n      <head>\n        <title>Job Opportunities Platform</title>\n        <style>${css}</style>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n      </head>\n      <body>\n        <div id=\"root\"></div>\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  line-height: 1.6;\n  margin: 0;\n  padding: 0;\n  background-color: #f4f4f4;\n}\n\n.app-container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 20px;\n}\n\nh1 {\n  text-align: center;\n  color: #333;\n}\n\n.tab-navigation {\n  display: flex;\n  justify-content: center;\n  margin-bottom: 20px;\n}\n\n.tab-navigation button {\n  background-color: #f1f1f1;\n  border: none;\n  padding: 10px 20px;\n  cursor: pointer;\n  transition: background-color 0.3s;\n  margin: 0 10px;\n  border-radius: 5px;\n}\n\n.tab-navigation button.active {\n  background-color: #5cb85c;\n  color: white;\n}\n\n.tab-content {\n  background: white;\n  border-radius: 5px;\n  padding: 20px;\n  box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\n.job-form, .job-board, .chat-room {\n  background: white;\n  border-radius: 5px;\n  padding: 20px;\n}\n\n.job-form input, \n.job-form textarea, \n.message-form input,\n.username-modal input {\n  width: 100%;\n  padding: 10px;\n  margin-bottom: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.job-form button, \n.message-form button,\n.username-modal button {\n  background-color: #5cb85c;\n  color: white;\n  border: none;\n  padding: 10px 15px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-card {\n  border-bottom: 1px solid #eee;\n  padding-bottom: 10px;\n  margin-bottom: 10px;\n}\n\n.message-list {\n  height: 300px;\n  overflow-y: auto;\n  border: 1px solid #ddd;\n  padding: 10px;\n  margin-bottom: 10px;\n}\n\n.source-link {\n  display: block;\n  text-align: center;\n  margin-top: 20px;\n  color: #666;\n  text-decoration: none;\n}\n\n.username-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0,0,0,0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n}\n\n.username-modal {\n  background: white;\n  padding: 30px;\n  border-radius: 10px;\n  width: 300px;\n  text-align: center;\n}\n\n.error-message {\n  color: red;\n  margin-bottom: 10px;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/nadaamiinn/superPeachParrotfish/code/main.tsx","extension","actionData","errors"]
</article></body></html>