\n \n

\n );\n}\n\nfunction JobPostForm({ userName, onJobPost }) {\n const [title, setTitle] = useState('');\n const [description, setDescription] = useState('');\n const [company, setCompany] = useState('');\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n const jobData = { \n title, \n description, \n company, \n postedBy: userName,\n postedAt: new Date().toISOString() \n };\n\n try {\n const response = await fetch('/post-job', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(jobData)\n });\n\n if (response.ok) {\n onJobPost(jobData);\n setTitle('');\n setDescription('');\n setCompany('');\n }\n } catch (error) {\n console.error('Error posting job:', error);\n }\n };\n\n return (\n

Post a Job 💼

\n setTitle(e.target.value)}\n required \n style={inputStyle}\n />\n setCompany(e.target.value)}\n required \n style={inputStyle}\n />\n

setDescription(e.target.value)}\n        required \n        style={{...inputStyle, height: '100px'}}\n      />\n      <button type=\"submit\" style={submitButtonStyle}>\n        Post Job\n      </button>\n    </form>\n  );\n}\n\nfunction JobList({ jobs }) {\n  return (\n    <div style={jobListStyle}>\n      <h2>Recent Job Postings 📋</h2>\n      {jobs.map((job, index) => (\n        <div key={index} style={jobItemStyle}>\n          <h3>{job.title} @ {job.company}</h3>\n          <p>{job.description}</p>\n          <small>Posted by {job.postedBy}</small>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction ChatRoom({ userName }) {\n  const [message, setMessage] = useState('');\n  const [messages, setMessages] = useState([]);\n\n  const handleSendMessage = async (e) => {\n    e.preventDefault();\n    if (!message.trim()) return;\n\n    const chatMessage = {\n      text: message,\n      sender: userName,\n      sentAt: new Date().toISOString()\n    };\n\n    try {\n      const response = await fetch('/send-message', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify(chatMessage)\n      });\n\n      if (response.ok) {\n        setMessages([...messages, chatMessage]);\n        setMessage('');\n      }\n    } catch (error) {\n      console.error('Error sending message:', error);\n    }\n  };\n\n  useEffect(() => {\n    async function fetchMessages() {\n      try {\n        const response = await fetch('/get-messages');\n        const fetchedMessages = await response.json();\n        setMessages(fetchedMessages);\n      } catch (error) {\n        console.error('Error fetching messages:', error);\n      }\n    }\n    fetchMessages();\n    const interval = setInterval(fetchMessages, 5000);\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div style={chatRoomStyle}>\n      <div style={messagesStyle}>\n        {messages.map((msg, index) => (\n          <div \n            key={index} \n            style={msg.sender === userName ? userMessageStyle : otherMessageStyle}\n          >\n            <strong>{msg.sender}</strong>: {msg.text}\n          </div>\n        ))}\n      </div>\n      <form onSubmit={handleSendMessage} style={chatFormStyle}>\n        <input \n          type=\"text\" \n          value={message}\n          onChange={(e) => setMessage(e.target.value)}\n          placeholder=\"Type a message...\"\n          style={inputStyle}\n        />\n        <button type=\"submit\" style={submitButtonStyle}>\n          Send\n        </button>\n      </form>\n    </div>\n  );\n}\n\nfunction App() {\n  const [userName, setUserName] = useState(localStorage.getItem('userName') || '');\n  const [jobs, setJobs] = useState([]);\n\n  useEffect(() => {\n    async function fetchJobs() {\n      try {\n        const response = await fetch('/get-jobs');\n        const fetchedJobs = await response.json();\n        setJobs(fetchedJobs);\n      } catch (error) {\n        console.error('Error fetching jobs:', error);\n      }\n    }\n    if (userName) {\n      fetchJobs();\n    }\n  }, [userName]);\n\n  const handleJobPost = (newJob) => {\n    setJobs([newJob, ...jobs]);\n  };\n\n  if (!userName) {\n    return <NameModal onNameSet={setUserName} />;\n  }\n\n  return (\n    <div style={appStyle}>\n      <h1>Community Job Board 🌟</h1>\n      <p>Welcome, {userName}!</p>\n      <div style={contentStyle}>\n        <div style={leftColumnStyle}>\n          <JobPostForm userName={userName} onJobPost={handleJobPost} />\n          <JobList jobs={jobs} />\n        </div>\n        <div style={rightColumnStyle}>\n          <ChatRoom userName={userName} />\n        </div>\n      </div>\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 = \"jobBoardWithChatApp\";\n  const SCHEMA_VERSION = 1;\n\n  try {\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        description TEXT NOT NULL,\n        company TEXT NOT NULL,\n        posted_by TEXT NOT NULL,\n        posted_at DATETIME DEFAULT CURRENT_TIMESTAMP\n      )\n    `);\n\n    await sqlite.execute(`\n      CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        text TEXT NOT NULL,\n        sender TEXT NOT NULL,\n        sent_at DATETIME DEFAULT CURRENT_TIMESTAMP\n      )\n    `);\n  } catch (error) {\n    console.error(\"Database initialization error:\", error);\n    return new Response(`Database error: ${error.message}`, { status: 500 });\n  }\n\n  if (request.method === 'POST' && new URL(request.url).pathname === '/post-job') {\n    const jobData = await request.json();\n    try {\n      await sqlite.execute(\n        `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, description, company, posted_by) VALUES (?, ?, ?, ?)`, \n        [jobData.title, jobData.description, jobData.company, jobData.postedBy]\n      );\n      return new Response(JSON.stringify({ success: true }), { \n        headers: { 'Content-Type': 'application/json' } \n      });\n    } catch (error) {\n      console.error(\"Job posting error:\", error);\n      return new Response(`Job posting error: ${error.message}`, { status: 500 });\n    }\n  }\n\n  if (request.method === 'POST' && new URL(request.url).pathname === '/send-message') {\n    const messageData = await request.json();\n    try {\n      await sqlite.execute(\n        `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (text, sender) VALUES (?, ?)`, \n        [messageData.text, messageData.sender]\n      );\n      return new Response(JSON.stringify({ success: true }), { \n        headers: { 'Content-Type': 'application/json' } \n      });\n    } catch (error) {\n      console.error(\"Message sending error:\", error);\n      return new Response(`Message sending error: ${error.message}`, { status: 500 });\n    }\n  }\n\n  if (request.method === 'GET' && new URL(request.url).pathname === '/get-jobs') {\n    try {\n      const result = await sqlite.execute(`\n        SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} \n        ORDER BY posted_at DESC \n        LIMIT 20\n      `);\n      return new Response(JSON.stringify(result.rows), { \n        headers: { 'Content-Type': 'application/json' } \n      });\n    } catch (error) {\n      console.error(\"Job fetching error:\", error);\n      return new Response(`Job fetching error: ${error.message}`, { status: 500 });\n    }\n  }\n\n  if (request.method === 'GET' && new URL(request.url).pathname === '/get-messages') {\n    try {\n      const result = await sqlite.execute(`\n        SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} \n        ORDER BY sent_at DESC \n        LIMIT 50\n      `);\n      return new Response(JSON.stringify(result.rows.reverse()), { \n        headers: { 'Content-Type': 'application/json' } \n      });\n    } catch (error) {\n      console.error(\"Message fetching error:\", error);\n      return new Response(`Message fetching error: ${error.message}`, { status: 500 });\n    }\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>Community Job Board</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: 'Arial', sans-serif;\n  margin: 0;\n  padding: 0;\n  background-color: #f4f4f4;\n  color: #333;\n  line-height: 1.6;\n}\n`;\n\nconst modalStyle = {\n  position: 'fixed', \n  top: 0, \n  left: 0, \n  width: '100%', \n  height: '100%', \n  backgroundColor: 'rgba(0,0,0,0.7)', \n  display: 'flex', \n  justifyContent: 'center', \n  alignItems: 'center',\n  zIndex: 1000\n};\n\nconst modalFormStyle = {\n  backgroundColor: 'white', \n  padding: '2rem', \n  borderRadius: '8px', \n  textAlign: 'center',\n  boxShadow: '0 4px 6px rgba(0,0,0,0.1)',\n  maxWidth: '400px',\n  width: '90%'\n};\n\nconst appStyle = {\n  maxWidth: '1200px',\n  margin: '0 auto',\n  padding: '20px'\n};\n\nconst contentStyle = {\n  display: 'flex',\n  gap: '20px'\n};\n\nconst leftColumnStyle = {\n  flex: '1',\n  maxWidth: '500px'\n};\n\nconst rightColumnStyle = {\n  flex: '1',\n  maxWidth: '500px'\n};\n\nconst formStyle = {\n  backgroundColor: 'white',\n  borderRadius: '8px',\n  padding: '20px',\n  marginBottom: '20px',\n  boxShadow: '0 2px 5px rgba(0,0,0,0.1)'\n};\n\nconst inputStyle = {\n  width: '100%',\n  padding: '10px',\n  margin: '10px 0',\n  border: '1px solid #ddd',\n  borderRadius: '5px',\n  boxSizing: 'border-box'\n};\n\nconst buttonStyle = {\n  backgroundColor: '#4CAF50',\n  color: 'white',\n  border: 'none',\n  padding: '10px 20px',\n  borderRadius: '5px',\n  cursor: 'pointer'\n};\n\nconst submitButtonStyle = {\n  ...buttonStyle,\n  width: '100%',\n  marginTop: '10px'\n};\n\nconst jobListStyle = {\n  backgroundColor: 'white',\n  borderRadius: '8px',\n  padding: '20px',\n  boxShadow: '0 2px 5px rgba(0,0,0,0.1)'\n};\n\nconst jobItemStyle = {\n  borderBottom: '1px solid #eee',\n  paddingBottom: '10px',\n  marginBottom: '10px'\n};\n\nconst chatRoomStyle = {\n  backgroundColor: 'white',\n  borderRadius: '8px',\n  display: 'flex',\n  flexDirection: 'column',\n  height: '600px',\n  boxShadow: '0 2px 5px rgba(0,0,0,0.1)'\n};\n\nconst messagesStyle = {\n  flex: '1',\n  overflowY: 'auto',\n  padding: '20px'\n};\n\nconst chatFormStyle = {\n  display: 'flex',\n  padding: '10px',\n  borderTop: '1px solid #eee'\n};\n\nconst userMessageStyle = {\n  textAlign: 'right',\n  backgroundColor: '#e6f2ff',\n  padding: '5px',\n  margin: '5px 0',\n  borderRadius: '5px'\n};\n\nconst otherMessageStyle = {\n  textAlign: 'left',\n  backgroundColor: '#f0f0f0',\n  padding: '5px',\n  margin: '5px 0',\n  borderRadius: '5px'\n};","deleted","label",[98],"permalink","https://www.val.town/x/Mrigbalode/jobBoardWithChatApp/code/main.tsx","extension","actionData","errors"]
</article></body></html>

Job Board & Chat

Post a Job 💼