[{"_1":2,"_171":-5,"_172":-5},"loaderData",{"_3":4,"_91":92,"_158":159,"_170":-5},"root",{"_5":6,"_32":33,"_58":59,"_89":90},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":31},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","e0489e7a699ffd54eb05407c777726bbdb4b433c","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","API_URL","https://api.val.town","WORKER_FINGERPRINT","d0746fd0512e0614e3f717607f0da4cd","clerkState",{"_60":61},"__internal_clerk_state",{"_62":63,"_64":43,"_65":66,"_67":66,"_68":26,"_69":66,"_70":66,"_71":66,"_72":66,"_73":66,"_74":66,"_75":66,"_76":66,"_77":78,"_87":26,"_88":26},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_79":26,"_80":66,"_81":82,"_83":66,"_84":43,"_85":26,"_86":66},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_93":94,"_95":96,"_94":97,"_153":-5,"_154":-5,"_155":156,"_129":130,"_137":138,"_100":101,"_98":99,"_117":-7,"_50":51,"_157":26},"type","val","author","7e1e8ba0-ed12-11ef-8139-5783405cc753",{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":-5,"_104":105,"_106":-5,"_107":108,"_109":110,"_111":26,"_112":110,"_113":114,"_115":116,"_117":118,"_119":26,"_120":31,"_121":31,"_122":31,"_123":124,"_125":31,"_126":31,"_127":-5,"_20":128,"_133":-5,"_134":-7,"_135":136,"_137":138,"_139":140},"name","jobBoardApp","valNameId","f5e85364-ed12-11ef-9f3e-e6cdfca9ef9f","parentFolderId","isOwned","privacy","public","readme","valType","http","currentVersion","8e111d8c-ed14-11ef-83e0-e6cdfca9ef9f","legacyPrivate","id","code","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction JobPostingForm({ onSubmit }) {\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 try {\n const response = await fetch(`${window.location.origin}/job`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ title, description, company })\n });\n \n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error || 'Failed to post job');\n }\n \n setTitle(\"\");\n setDescription(\"\");\n setCompany(\"\");\n onSubmit();\n } catch (error) {\n console.error(\"Job posting error:\", error);\n alert(error.message);\n }\n };\n\n return (\n

\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 JobList({ onReset }) {\n  const [jobs, setJobs] = useState([]);\n  const [error, setError] = useState(null);\n\n  const fetchJobs = async () => {\n    try {\n      const response = await fetch(`${window.location.origin}/jobs`);\n      \n      if (!response.ok) {\n        const errorData = await response.json();\n        throw new Error(errorData.error || 'Failed to fetch jobs');\n      }\n      \n      const data = await response.json();\n      setJobs(data);\n    } catch (error) {\n      console.error(\"Jobs fetch error:\", error);\n      setError(error.message);\n    }\n  };\n\n  useEffect(() => {\n    fetchJobs();\n  }, []);\n\n  const handleReset = async () => {\n    const confirmReset = window.confirm(\"Are you sure you want to clear all job postings? This cannot be undone.\");\n    if (confirmReset) {\n      try {\n        const response = await fetch(`${window.location.origin}/reset-jobs`, { method: 'POST' });\n        if (!response.ok) {\n          throw new Error('Failed to reset jobs');\n        }\n        fetchJobs();\n        onReset();\n      } catch (error) {\n        console.error(\"Reset jobs error:\", error);\n        alert(error.message);\n      }\n    }\n  };\n\n  if (error) {\n    return <div className=\"error\">Error: {error}</div>;\n  }\n\n  return (\n    <div className=\"job-list\">\n      <div className=\"job-list-header\">\n        <h2>Current Job Postings</h2>\n        {jobs.length > 0 && (\n          <button \n            onClick={handleReset} \n            className=\"reset-button\"\n          >\n            🗑️ Clear All Jobs\n          </button>\n        )}\n      </div>\n      {jobs.map((job) => (\n        <div key={job.id} className=\"job-card\">\n          <h3>{job.title}</h3>\n          <p>{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) => {\n    e.preventDefault();\n    const trimmedUsername = username.trim();\n    if (trimmedUsername.length < 2) {\n      setError(\"Username must be at least 2 characters long\");\n      return;\n    }\n    if (trimmedUsername.length > 20) {\n      setError(\"Username must be 20 characters or less\");\n      return;\n    }\n    onSetUsername(trimmedUsername);\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            value={username}\n            onChange={(e) => {\n              setUsername(e.target.value);\n              setError(\"\");\n            }}\n            placeholder=\"Enter your username\"\n            maxLength={20}\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(localStorage.getItem('chatUsername') || \"\");\n  const [error, setError] = useState(null);\n\n  const fetchMessages = async () => {\n    try {\n      const response = await fetch(`${window.location.origin}/messages`);\n      \n      if (!response.ok) {\n        const errorData = await response.json();\n        throw new Error(errorData.error || 'Failed to fetch messages');\n      }\n      \n      const data = await response.json();\n      setMessages(data);\n    } catch (error) {\n      console.error(\"Messages fetch error:\", error);\n      setError(error.message);\n    }\n  };\n\n  const sendMessage = async (e) => {\n    e.preventDefault();\n    try {\n      const response = await fetch(`${window.location.origin}/chat`, {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ \n          content: newMessage, \n          username: username \n        })\n      });\n      \n      if (!response.ok) {\n        const errorData = await response.json();\n        throw new Error(errorData.error || 'Failed to send message');\n      }\n      \n      setNewMessage(\"\");\n      fetchMessages();\n    } catch (error) {\n      console.error(\"Message send error:\", error);\n      alert(error.message);\n    }\n  };\n\n  const handleReset = async () => {\n    const confirmReset = window.confirm(\"Are you sure you want to clear all chat messages? This cannot be undone.\");\n    if (confirmReset) {\n      try {\n        const response = await fetch(`${window.location.origin}/reset-messages`, { method: 'POST' });\n        if (!response.ok) {\n          throw new Error('Failed to reset messages');\n        }\n        fetchMessages();\n      } catch (error) {\n        console.error(\"Reset messages error:\", error);\n        alert(error.message);\n      }\n    }\n  };\n\n  const handleSetUsername = (newUsername) => {\n    setUsername(newUsername);\n    localStorage.setItem('chatUsername', newUsername);\n  };\n\n  useEffect(() => {\n    fetchMessages();\n    const interval = setInterval(fetchMessages, 5000);\n    return () => clearInterval(interval);\n  }, []);\n\n  if (!username) {\n    return <UsernameModal onSetUsername={handleSetUsername} />;\n  }\n\n  if (error) {\n    return <div className=\"error\">Error: {error}</div>;\n  }\n\n  return (\n    <div className=\"chat-room\">\n      <div className=\"chat-header\">\n        <h2>Job Opportunities Chat</h2>\n        {messages.length > 0 && (\n          <button \n            onClick={handleReset} \n            className=\"reset-button\"\n          >\n            🗑️ Clear Chat\n          </button>\n        )}\n      </div>\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={sendMessage} 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 App() {\n  const [refreshJobs, setRefreshJobs] = useState(0);\n\n  return (\n    <div className=\"job-board-app\">\n      <h1>Job Opportunities Platform</h1>\n      <div className=\"app-container\">\n        <div className=\"left-panel\">\n          <JobPostingForm onSubmit={() => setRefreshJobs(r => r + 1)} />\n          <JobList \n            key={refreshJobs} \n            onReset={() => setRefreshJobs(r => r + 1)} \n          />\n        </div>\n        <div className=\"right-panel\">\n          <ChatRoom />\n        </div>\n      </div>\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{ color: '#888', fontSize: '0.8em', textDecoration: 'none' }}\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 KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n  const SCHEMA_VERSION = 6;\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\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_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 job posting\n  if (request.method === \"POST\" && new URL(request.url).pathname.endsWith(\"/job\")) {\n    try {\n      const body = await request.json();\n      await sqlite.execute(\n        `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, company, description) VALUES (?, ?, ?)`,\n        [body.title, body.company, body.description]\n      );\n      return new Response(JSON.stringify({ success: true }), { \n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    } catch (error) {\n      return new Response(JSON.stringify({ error: error.message }), { \n        status: 500,\n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    }\n  }\n\n  // Handle chat message\n  if (request.method === \"POST\" && new URL(request.url).pathname.endsWith(\"/chat\")) {\n    try {\n      const body = await request.json();\n      // Validate username and message content\n      if (!body.username || !body.content) {\n        return new Response(JSON.stringify({ error: \"Username and message are required\" }), { \n          status: 400,\n          headers: { \"Content-Type\": \"application/json\" } \n        });\n      }\n      await sqlite.execute(\n        `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (username, content) VALUES (?, ?)`,\n        [body.username, body.content]\n      );\n      return new Response(JSON.stringify({ success: true }), { \n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    } catch (error) {\n      return new Response(JSON.stringify({ error: error.message }), { \n        status: 500,\n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    }\n  }\n\n  // Reset jobs\n  if (request.method === \"POST\" && new URL(request.url).pathname.endsWith(\"/reset-jobs\")) {\n    try {\n      await sqlite.execute(`DELETE FROM ${KEY}_jobs_${SCHEMA_VERSION}`);\n      return new Response(JSON.stringify({ success: true }), { \n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    } catch (error) {\n      return new Response(JSON.stringify({ error: error.message }), { \n        status: 500,\n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    }\n  }\n\n  // Reset messages\n  if (request.method === \"POST\" && new URL(request.url).pathname.endsWith(\"/reset-messages\")) {\n    try {\n      await sqlite.execute(`DELETE FROM ${KEY}_messages_${SCHEMA_VERSION}`);\n      return new Response(JSON.stringify({ success: true }), { \n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    } catch (error) {\n      return new Response(JSON.stringify({ error: error.message }), { \n        status: 500,\n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    }\n  }\n\n  // Fetch jobs\n  if (request.method === \"GET\" && new URL(request.url).pathname.endsWith(\"/jobs\")) {\n    try {\n      const jobs = await sqlite.execute(\n        `SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} ORDER BY created_at DESC LIMIT 20`\n      );\n      return new Response(JSON.stringify(jobs.rows), { \n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    } catch (error) {\n      return new Response(JSON.stringify({ error: error.message }), { \n        status: 500,\n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    }\n  }\n\n  // Fetch messages\n  if (request.method === \"GET\" && new URL(request.url).pathname.endsWith(\"/messages\")) {\n    try {\n      const messages = await sqlite.execute(\n        `SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} ORDER BY created_at DESC LIMIT 50`\n      );\n      return new Response(JSON.stringify(messages.rows), { \n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    } catch (error) {\n      return new Response(JSON.stringify({ error: error.message }), { \n        status: 500,\n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    }\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>Job Opportunities Platform</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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  margin: 0;\n  padding: 20px;\n  background-color: #f4f4f4;\n}\n\n.job-board-app {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.app-container {\n  display: flex;\n  gap: 20px;\n}\n\n.left-panel, .right-panel {\n  flex: 1;\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\n.job-form {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\n.job-form input, .job-form textarea {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.job-form button {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-list-header, .chat-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 10px;\n}\n\n.reset-button {\n  background: none;\n  border: 1px solid #ff4d4d;\n  color: #ff4d4d;\n  padding: 5px 10px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 0.8em;\n}\n\n.job-list .job-card {\n  border: 1px solid #eee;\n  padding: 15px;\n  margin-bottom: 10px;\n  border-radius: 4px;\n}\n\n.chat-room .message-list {\n  height: 400px;\n  overflow-y: auto;\n  border: 1px solid #eee;\n  padding: 10px;\n  margin-bottom: 10px;\n}\n\n.chat-room .message-form {\n  display: flex;\n}\n\n.chat-room .message-form input {\n  flex-grow: 1;\n  padding: 10px;\n  border: 1px solid #ddd;\n}\n\n.chat-room .message-form button {\n  background-color: #2196F3;\n  color: white;\n  border: none;\n  padding: 10px;\n  cursor: pointer;\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: 8px;\n  width: 300px;\n  text-align: center;\n}\n\n.username-modal input {\n  width: 100%;\n  padding: 10px;\n  margin: 10px 0;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.username-modal button {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n  width: 100%;\n}\n\n.error-message {\n  color: red;\n  font-size: 0.8em;\n  margin: 5px 0;\n}\n\n.error {\n  color: red;\n  text-align: center;\n  padding: 20px;\n}\n`;","createdAt",["D",1739785801023],"version",3,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","aiuser254","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ0QUJEeWoyQU9Kckl3bkNCekdNNllEVDlnYiJ9","forkedVal","interval","slug","aiuser254/jobBoardApp","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[141,144,147,150],{"_117":118,"_142":-5,"_115":143,"_112":110},"prId",["D",1739785801023],{"_117":90,"_142":-5,"_115":145,"_112":146},["D",1739785680317],"461e9018-ed14-11ef-a1af-e6cdfca9ef9f",{"_117":124,"_142":-5,"_115":148,"_112":149},["D",1739785191635],"22d76662-ed13-11ef-bda3-e6cdfca9ef9f",{"_117":31,"_142":-5,"_115":151,"_112":152},["D",1739785116255],"f5eac13a-ed12-11ef-9f3e-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":160,"_161":162,"_94":163},"single","redirect","/v/aiuser254/jobBoardApp/versions",{"_112":146,"_113":164,"_117":90,"_115":165,"_166":99,"_100":101,"_107":108,"_129":130,"_11":96,"_167":-5,"_168":-5,"_169":-5,"_157":26,"_135":136},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction JobPostingForm({ onSubmit }) {\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    try {\n      const response = await fetch(`${window.location.origin}/job`, {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ title, description, company })\n      });\n      \n      if (!response.ok) {\n        const errorData = await response.json();\n        throw new Error(errorData.error || 'Failed to post job');\n      }\n      \n      setTitle(\"\");\n      setDescription(\"\");\n      setCompany(\"\");\n      onSubmit();\n    } catch (error) {\n      console.error(\"Job posting error:\", error);\n      alert(error.message);\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"job-form\">\n      <input \n        type=\"text\" \n        placeholder=\"Job Title\" \n        value={title}\n        onChange={(e) => setTitle(e.target.value)}\n        required \n      />\n      <input \n        type=\"text\" \n        placeholder=\"Company\" \n        value={company}\n        onChange={(e) => setCompany(e.target.value)}\n        required \n      />\n      <textarea \n        placeholder=\"Job Description\" \n        value={description}\n        onChange={(e) => setDescription(e.target.value)}\n        required \n      />\n      <button type=\"submit\">Post Job</button>\n    </form>\n  );\n}\n\nfunction JobList() {\n  const [jobs, setJobs] = useState([]);\n  const [error, setError] = useState(null);\n\n  const fetchJobs = async () => {\n    try {\n      const response = await fetch(`${window.location.origin}/jobs`);\n      \n      if (!response.ok) {\n        const errorData = await response.json();\n        throw new Error(errorData.error || 'Failed to fetch jobs');\n      }\n      \n      const data = await response.json();\n      setJobs(data);\n    } catch (error) {\n      console.error(\"Jobs fetch error:\", error);\n      setError(error.message);\n    }\n  };\n\n  useEffect(() => {\n    fetchJobs();\n  }, []);\n\n  if (error) {\n    return <div className=\"error\">Error: {error}</div>;\n  }\n\n  return (\n    <div className=\"job-list\">\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>{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) => {\n    e.preventDefault();\n    const trimmedUsername = username.trim();\n    if (trimmedUsername.length < 2) {\n      setError(\"Username must be at least 2 characters long\");\n      return;\n    }\n    if (trimmedUsername.length > 20) {\n      setError(\"Username must be 20 characters or less\");\n      return;\n    }\n    onSetUsername(trimmedUsername);\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            value={username}\n            onChange={(e) => {\n              setUsername(e.target.value);\n              setError(\"\");\n            }}\n            placeholder=\"Enter your username\"\n            maxLength={20}\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(localStorage.getItem('chatUsername') || \"\");\n  const [error, setError] = useState(null);\n\n  const fetchMessages = async () => {\n    try {\n      const response = await fetch(`${window.location.origin}/messages`);\n      \n      if (!response.ok) {\n        const errorData = await response.json();\n        throw new Error(errorData.error || 'Failed to fetch messages');\n      }\n      \n      const data = await response.json();\n      setMessages(data);\n    } catch (error) {\n      console.error(\"Messages fetch error:\", error);\n      setError(error.message);\n    }\n  };\n\n  const sendMessage = async (e) => {\n    e.preventDefault();\n    try {\n      const response = await fetch(`${window.location.origin}/chat`, {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ \n          content: newMessage, \n          username: username \n        })\n      });\n      \n      if (!response.ok) {\n        const errorData = await response.json();\n        throw new Error(errorData.error || 'Failed to send message');\n      }\n      \n      setNewMessage(\"\");\n      fetchMessages();\n    } catch (error) {\n      console.error(\"Message send error:\", error);\n      alert(error.message);\n    }\n  };\n\n  const handleSetUsername = (newUsername) => {\n    setUsername(newUsername);\n    localStorage.setItem('chatUsername', newUsername);\n  };\n\n  useEffect(() => {\n    fetchMessages();\n    const interval = setInterval(fetchMessages, 5000);\n    return () => clearInterval(interval);\n  }, []);\n\n  if (!username) {\n    return <UsernameModal onSetUsername={handleSetUsername} />;\n  }\n\n  if (error) {\n    return <div className=\"error\">Error: {error}</div>;\n  }\n\n  return (\n    <div className=\"chat-room\">\n      <h2>Job Opportunities Chat</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={sendMessage} 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 App() {\n  const [refreshJobs, setRefreshJobs] = useState(0);\n\n  return (\n    <div className=\"job-board-app\">\n      <h1>Job Opportunities Platform</h1>\n      <div className=\"app-container\">\n        <div className=\"left-panel\">\n          <JobPostingForm onSubmit={() => setRefreshJobs(r => r + 1)} />\n          <JobList key={refreshJobs} />\n        </div>\n        <div className=\"right-panel\">\n          <ChatRoom />\n        </div>\n      </div>\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{ color: '#888', fontSize: '0.8em', textDecoration: 'none' }}\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 KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n  const SCHEMA_VERSION = 5;\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\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_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 job posting\n  if (request.method === \"POST\" && new URL(request.url).pathname.endsWith(\"/job\")) {\n    try {\n      const body = await request.json();\n      await sqlite.execute(\n        `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, company, description) VALUES (?, ?, ?)`,\n        [body.title, body.company, body.description]\n      );\n      return new Response(JSON.stringify({ success: true }), { \n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    } catch (error) {\n      return new Response(JSON.stringify({ error: error.message }), { \n        status: 500,\n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    }\n  }\n\n  // Handle chat message\n  if (request.method === \"POST\" && new URL(request.url).pathname.endsWith(\"/chat\")) {\n    try {\n      const body = await request.json();\n      // Validate username and message content\n      if (!body.username || !body.content) {\n        return new Response(JSON.stringify({ error: \"Username and message are required\" }), { \n          status: 400,\n          headers: { \"Content-Type\": \"application/json\" } \n        });\n      }\n      await sqlite.execute(\n        `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (username, content) VALUES (?, ?)`,\n        [body.username, body.content]\n      );\n      return new Response(JSON.stringify({ success: true }), { \n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    } catch (error) {\n      return new Response(JSON.stringify({ error: error.message }), { \n        status: 500,\n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    }\n  }\n\n  // Fetch jobs\n  if (request.method === \"GET\" && new URL(request.url).pathname.endsWith(\"/jobs\")) {\n    try {\n      const jobs = await sqlite.execute(\n        `SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} ORDER BY created_at DESC LIMIT 20`\n      );\n      return new Response(JSON.stringify(jobs.rows), { \n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    } catch (error) {\n      return new Response(JSON.stringify({ error: error.message }), { \n        status: 500,\n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    }\n  }\n\n  // Fetch messages\n  if (request.method === \"GET\" && new URL(request.url).pathname.endsWith(\"/messages\")) {\n    try {\n      const messages = await sqlite.execute(\n        `SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} ORDER BY created_at DESC LIMIT 50`\n      );\n      return new Response(JSON.stringify(messages.rows), { \n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    } catch (error) {\n      return new Response(JSON.stringify({ error: error.message }), { \n        status: 500,\n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    }\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>Job Opportunities Platform</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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  margin: 0;\n  padding: 20px;\n  background-color: #f4f4f4;\n}\n\n.job-board-app {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.app-container {\n  display: flex;\n  gap: 20px;\n}\n\n.left-panel, .right-panel {\n  flex: 1;\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\n.job-form {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\n.job-form input, .job-form textarea {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.job-form button {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-list .job-card {\n  border: 1px solid #eee;\n  padding: 15px;\n  margin-bottom: 10px;\n  border-radius: 4px;\n}\n\n.chat-room .message-list {\n  height: 400px;\n  overflow-y: auto;\n  border: 1px solid #eee;\n  padding: 10px;\n  margin-bottom: 10px;\n}\n\n.chat-room .message-form {\n  display: flex;\n}\n\n.chat-room .message-form input {\n  flex-grow: 1;\n  padding: 10px;\n  border: 1px solid #ddd;\n}\n\n.chat-room .message-form button {\n  background-color: #2196F3;\n  color: white;\n  border: none;\n  padding: 10px;\n  cursor: pointer;\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: 8px;\n  width: 300px;\n  text-align: center;\n}\n\n.username-modal input {\n  width: 100%;\n  padding: 10px;\n  margin: 10px 0;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.username-modal button {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n  width: 100%;\n}\n\n.error-message {\n  color: red;\n  font-size: 0.8em;\n  margin: 5px 0;\n}\n\n.error {\n  color: red;\n  text-align: center;\n  padding: 20px;\n}\n`;",["D",1739785680317],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]
</article></body></html>

jobBoardApp

Version 2