Job Board & Community Chat 💼💬

\n \n {/* Tab Navigation */}\n

\n \n \n

\n\n {/* Conditional Rendering Based on Tab */}\n {currentTab === 'jobs' && (\n

Post a Job

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

setNewJob({...newJob, description: e.target.value})}\n              required\n            />\n            <button type=\"submit\">Post Job</button>\n          </form>\n\n          <div className=\"job-list\">\n            <h2>Current Job Postings</h2>\n            {jobs.map((job, index) => (\n              <div key={index} 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        </div>\n      )}\n\n      {currentTab === 'chat' && (\n        <div className=\"chat-section\">\n          <h2>Community Chat (Logged in as: {username})</h2>\n          <div className=\"message-list\">\n            {messages.map((msg, index) => (\n              <div key={index} className=\"message\">\n                <strong>{msg.username || 'Anonymous'}</strong>: {msg.text}\n              </div>\n            ))}\n          </div>\n          <form onSubmit={handleMessageSubmit}>\n            <input \n              placeholder=\"Type a message...\" \n              value={newMessage}\n              onChange={(e) => setNewMessage(e.target.value)}\n              required\n            />\n            <button type=\"submit\">Send</button>\n          </form>\n          <button \n            onClick={() => {\n              localStorage.removeItem('chatUsername');\n              setUsername('');\n              setIsUsernameModalOpen(true);\n            }} \n            className=\"change-username-btn\"\n          >\n            Change Username\n          </button>\n        </div>\n      )}\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  try {\n    const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n    const KEY = \"jobChatApp\";\n    const SCHEMA_VERSION = 5; // Increment schema version to force table recreation\n\n    // Wrap table creation in try-catch to handle potential errors\n    try {\n      await sqlite.execute(`\n        DROP TABLE IF EXISTS ${KEY}_jobs_${SCHEMA_VERSION - 1};\n        DROP TABLE IF EXISTS ${KEY}_messages_${SCHEMA_VERSION - 1};\n      `);\n    } catch (dropError) {\n      console.warn(\"Error dropping previous tables:\", dropError);\n    }\n\n    // Use IF NOT EXISTS and add error handling\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          created_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          username TEXT NOT NULL,\n          created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n        )\n      `);\n    } catch (createTableError) {\n      console.error(\"Error creating tables:\", createTableError);\n      return new Response(JSON.stringify({ \n        error: 'Database initialization failed', \n        details: createTableError.toString() \n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    if (request.method === 'POST' && new URL(request.url).pathname === '/jobs') {\n      const jobData = await request.json();\n      try {\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, description, company) VALUES (?, ?, ?)`,\n          [jobData.title, jobData.description, jobData.company]\n        );\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobInsertError) {\n        console.error(\"Job insert error:\", jobInsertError);\n        return new Response(JSON.stringify({ \n          error: 'Job insertion failed', \n          details: jobInsertError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'POST' && new URL(request.url).pathname === '/messages') {\n      const messageData = await request.json();\n      if (!messageData.username) {\n        return new Response(JSON.stringify({ error: 'Username is required' }), { \n          status: 400,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n      try {\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (text, username) VALUES (?, ?)`,\n          [messageData.text, messageData.username]\n        );\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (messageInsertError) {\n        console.error(\"Message insert error:\", messageInsertError);\n        return new Response(JSON.stringify({ \n          error: 'Message insertion failed', \n          details: messageInsertError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'GET' && new URL(request.url).pathname === '/jobs') {\n      try {\n        const jobsResult = await sqlite.execute(\n          `SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} ORDER BY created_at DESC LIMIT 20`\n        );\n        return new Response(JSON.stringify(jobsResult.rows), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobsFetchError) {\n        console.error(\"Jobs fetch error:\", jobsFetchError);\n        return new Response(JSON.stringify({ \n          error: 'Jobs fetch failed', \n          details: jobsFetchError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'GET' && new URL(request.url).pathname === '/messages') {\n      try {\n        const messagesResult = await sqlite.execute(\n          `SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} ORDER BY created_at DESC LIMIT 50`\n        );\n        return new Response(JSON.stringify(messagesResult.rows), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (messagesFetchError) {\n        console.error(\"Messages fetch error:\", messagesFetchError);\n        return new Response(JSON.stringify({ \n          error: 'Messages fetch failed', \n          details: messagesFetchError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\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  } catch (globalError) {\n    console.error(\"Global server error:\", globalError);\n    return new Response(JSON.stringify({ \n      error: 'Server initialization failed', \n      details: globalError.toString() \n    }), { \n      status: 500,\n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n}\n\nconst css = `\nbody {\n  font-family: 'Arial', sans-serif;\n  line-height: 1.6;\n  margin: 0;\n  padding: 20px;\n  background-color: #f4f4f4;\n}\n.container {\n  max-width: 800px;\n  margin: 0 auto;\n  background: white;\n  padding: 20px;\n  box-shadow: 0 0 10px rgba(0,0,0,0.1);\n}\nh1 {\n  text-align: center;\n  color: #333;\n}\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\ninput, textarea {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\nbutton {\n  padding: 10px;\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n}\n.job-card, .message {\n  background-color: #f9f9f9;\n  border: 1px solid #e0e0e0;\n  padding: 10px;\n  margin-bottom: 10px;\n  border-radius: 4px;\n}\n.message-list {\n  max-height: 300px;\n  overflow-y: auto;\n}\nfooter {\n  text-align: center;\n  margin-top: 20px;\n  font-size: 0.8em;\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.username-modal form {\n  background: white;\n  padding: 30px;\n  border-radius: 10px;\n  width: 300px;\n  text-align: center;\n}\n.change-username-btn {\n  background-color: #f0ad4e;\n  margin-top: 10px;\n}\n\n/* New Tab Navigation Styles */\n.tab-navigation {\n  display: flex;\n  justify-content: center;\n  margin-bottom: 20px;\n}\n.tab-btn {\n  padding: 10px 20px;\n  margin: 0 10px;\n  background-color: #e0e0e0;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n.tab-btn.active {\n  background-color: #4CAF50;\n  color: white;\n}\n.tab-btn:hover {\n  background-color: #d0d0d0;\n}\n.tab-btn.active:hover {\n  background-color: #45a049;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Psalms/jobChatApp/code/main.tsx","extension","actionData","errors"]
</article></body></html>

Choose Your Username

Job Board & Community Chat 💼💬

Post a Job