No job postings yet. Be the first to post!

';\n return;\n }\n \n jobListings.innerHTML = jobs.map(job => `\n

${escapeHtml(job.title)}

\n ${formatDate(job.createdAt)}\n

\n ${escapeHtml(job.company)}\n •\n ${escapeHtml(job.location)}\n

${escapeHtml(job.description)}

\n \n Contact: ${escapeHtml(job.contactEmail)}\n \n Posted by: ${escapeHtml(job.postedBy)}\n

\n `).join('');\n};\n\nconst fetchJobs = async () => {\n try {\n const response = await fetch('/api/jobs');\n if (!response.ok) throw new Error('Failed to fetch jobs');\n jobs = await response.json();\n renderJobs();\n } catch (error) {\n console.error('Error fetching jobs:', error);\n }\n};\n\nconst handleJobSubmit = async (event: Event) => {\n event.preventDefault();\n \n // Ensure username is set\n if (!currentUsername) {\n alert(\"You must set a username before posting jobs\");\n usernameContainer.classList.remove(\"hidden\");\n mainContent.classList.add(\"hidden\");\n usernameInput.focus();\n return;\n }\n \n const titleInput = document.getElementById('job-title') as HTMLInputElement;\n const companyInput = document.getElementById('company') as HTMLInputElement;\n const locationInput = document.getElementById('location') as HTMLInputElement;\n const contactEmailInput = document.getElementById('contact-email') as HTMLInputElement;\n const descriptionInput = document.getElementById('description') as HTMLTextAreaElement;\n \n const newJob = {\n title: titleInput.value.trim(),\n company: companyInput.value.trim(),\n location: locationInput.value.trim(),\n contactEmail: contactEmailInput.value.trim(),\n description: descriptionInput.value.trim(),\n postedBy: currentUsername\n };\n \n try {\n const response = await fetch('/api/jobs', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(newJob)\n });\n \n if (!response.ok) throw new Error('Failed to create job');\n \n // Reset form\n jobForm.reset();\n \n // Refresh job listings\n await fetchJobs();\n \n // Add a chat message about the new job\n await sendChatMessage(`I just posted a new job: ${newJob.title} at ${newJob.company}`);\n \n } catch (error) {\n console.error('Error creating job:', error);\n alert('Failed to post job. Please try again.');\n }\n};\n\n// Chat functions\nconst renderChatMessages = () => {\n if (chatMessages.length === 0) {\n chatMessages_el.innerHTML = '

No messages yet. Start the conversation!

';\n return;\n }\n \n chatMessages_el.innerHTML = chatMessages.map(msg => `\n

\n ${escapeHtml(msg.username)}\n ${formatTime(msg.createdAt)}\n

${escapeHtml(msg.message)}

\n `).join('');\n \n // Scroll to bottom\n chatMessages_el.scrollTop = chatMessages_el.scrollHeight;\n};\n\nconst fetchChatMessages = async () => {\n try {\n const response = await fetch('/api/chat');\n if (!response.ok) throw new Error('Failed to fetch chat messages');\n const newMessages = await response.json();\n \n // Only update if there are new messages\n if (newMessages.length !== chatMessages.length || \n (newMessages.length > 0 && chatMessages.length > 0 && \n newMessages[newMessages.length - 1].id !== chatMessages[chatMessages.length - 1].id)) {\n chatMessages = newMessages;\n renderChatMessages();\n }\n } catch (error) {\n console.error('Error fetching chat messages:', error);\n }\n};\n\nconst sendChatMessage = async (messageText: string) => {\n if (!messageText.trim()) return;\n \n // Ensure username is set\n if (!currentUsername) {\n alert(\"You must set a username before sending messages\");\n usernameContainer.classList.remove(\"hidden\");\n mainContent.classList.add(\"hidden\");\n usernameInput.focus();\n return;\n }\n \n try {\n const response = await fetch('/api/chat', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n username: currentUsername,\n message: messageText\n })\n });\n \n if (!response.ok) {\n const errorData = await response.json();\n \n // Handle specific error for username requirement\n if (errorData.code === \"USERNAME_REQUIRED\") {\n alert(\"You must set a username before sending messages\");\n usernameContainer.classList.remove(\"hidden\");\n mainContent.classList.add(\"hidden\");\n usernameInput.focus();\n return;\n }\n \n throw new Error(errorData.error || 'Failed to send message');\n }\n \n // Refresh chat messages\n await fetchChatMessages();\n \n } catch (error) {\n console.error('Error sending message:', error);\n alert(`Error: ${error instanceof Error ? error.message : 'Failed to send message'}`);\n }\n};\n\nconst handleChatSubmit = async (event: Event) => {\n event.preventDefault();\n const message = chatInput.value.trim();\n if (message) {\n await sendChatMessage(message);\n chatInput.value = '';\n }\n};\n\nconst startChatPolling = () => {\n // Fetch immediately\n fetchChatMessages();\n \n // Then poll every 3 seconds\n if (chatPollingInterval === null) {\n chatPollingInterval = setInterval(fetchChatMessages, 3000) as unknown as number;\n }\n};\n\n// Utility functions\nconst escapeHtml = (str: string) => {\n const div = document.createElement('div');\n div.textContent = str;\n return div.innerHTML;\n};\n\nconst formatDate = (dateString: string) => {\n const date = new Date(dateString);\n return date.toLocaleDateString('en-US', { \n year: 'numeric', \n month: 'short', \n day: 'numeric' \n });\n};\n\nconst formatTime = (dateString: string) => {\n const date = new Date(dateString);\n return date.toLocaleTimeString('en-US', { \n hour: '2-digit', \n minute: '2-digit'\n });\n};\n\n// Initialize the app\nconst init = () => {\n // Set view source link\n setViewSourceLink();\n \n // Check if username is already set\n if (currentUsername) {\n usernameInput.value = currentUsername;\n usernameContainer.classList.add(\"hidden\");\n mainContent.classList.remove(\"hidden\");\n updateUsernameDisplay();\n startChatPolling();\n }\n \n // Render initial data\n renderJobs();\n renderChatMessages();\n \n // Set up event listeners\n usernameSubmit.addEventListener(\"click\", handleUsernameSubmit);\n usernameInput.addEventListener(\"keypress\", (e) => {\n if (e.key === \"Enter\") {\n e.preventDefault();\n handleUsernameSubmit();\n }\n });\n \n jobForm.addEventListener(\"submit\", handleJobSubmit);\n chatForm.addEventListener(\"submit\", handleChatSubmit);\n \n // Fetch fresh data\n fetchJobs();\n};\n\n// Start the app\ninit();","deleted","label",[168,149],"frontend","permalink","https://www.val.town/x/Oluremite/Job-posting/code/frontend/index.tsx","extension","actionData","errors"]