\n {/* Header */}\n

💼 JobBoard

Find your next opportunity

\n \n {/* Username input */}\n

\n Your name:\n setUsername(e.target.value)}\n placeholder=\"Enter your name\"\n className=\"px-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

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

\n {[\n { id: 'jobs', label: '📋 Job Listings', icon: '📋' },\n { id: 'chat', label: '💬 Community Chat', icon: '💬' },\n { id: 'post', label: '➕ Post a Job', icon: '➕' }\n ].map((tab) => (\n setActiveTab(tab.id as any)}\n className={`py-4 px-1 border-b-2 font-medium text-sm ${\n activeTab === tab.id\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n {tab.label}\n \n ))}\n

\n\n {/* Main content */}\n

\n {activeTab === 'jobs' && }\n {activeTab === 'chat' && }\n {activeTab === 'post' && }\n

\n );\n}\n\nfunction JobListings({ jobs, setJobs, username, setMessages }: {\n jobs: JobPosting[];\n setJobs: React.Dispatch>;\n username: string;\n setMessages: React.Dispatch>;\n}) {\n const [filter, setFilter] = useState('');\n const [typeFilter, setTypeFilter] = useState('all');\n\n const filteredJobs = jobs.filter(job => {\n const matchesSearch = job.title.toLowerCase().includes(filter.toLowerCase()) ||\n job.company.toLowerCase().includes(filter.toLowerCase()) ||\n job.location.toLowerCase().includes(filter.toLowerCase());\n const matchesType = typeFilter === 'all' || job.type === typeFilter;\n return matchesSearch && matchesType;\n });\n\n const shareJobInChat = async (job: JobPosting) => {\n if (!username.trim()) {\n alert('Please enter your name first');\n return;\n }\n\n const message: CreateMessageRequest = {\n username,\n message: `Check out this job: ${job.title} at ${job.company}`,\n type: 'job_share',\n jobId: job.id\n };\n\n try {\n const response = await fetch('/api/chat', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(message)\n });\n\n if (response.ok) {\n const newMessage = await response.json();\n setMessages(prev => [...prev, newMessage]);\n alert('Job shared in chat!');\n }\n } catch (error) {\n console.error('Error sharing job:', error);\n }\n };\n\n return (\n

\n {/* Filters */}\n

\n setFilter(e.target.value)}\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n setTypeFilter(e.target.value)}\n className=\"px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n \n \n

\n\n {/* Job listings */}\n

\n {filteredJobs.map((job) => (\n

{job.title}

{job.company}

\n \n {job.type}\n \n {job.remote && (\n \n Remote\n \n )}\n

\n\n

📍 {job.location}

\n {job.salary &&

💰 {job.salary}

}\n

Posted by {job.postedBy}

\n\n

{job.description}

\n\n

\n \n Apply Now\n \n shareJobInChat(job)}\n className=\"text-gray-500 hover:text-blue-600 text-sm\"\n title=\"Share in chat\"\n >\n 💬 Share\n \n

\n ))}\n

\n\n {filteredJobs.length === 0 && (\n

No jobs found matching your criteria.

\n )}\n

\n );\n}\n\nfunction ChatRoom({ messages, setMessages, username, jobs }: {\n messages: ChatMessage[];\n setMessages: React.Dispatch>;\n username: string;\n jobs: JobPosting[];\n}) {\n const [newMessage, setNewMessage] = useState('');\n const [loading, setLoading] = useState(false);\n const messagesEndRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n const sendMessage = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!newMessage.trim() || !username.trim() || loading) return;\n\n setLoading(true);\n const message: CreateMessageRequest = {\n username,\n message: newMessage.trim()\n };\n\n try {\n const response = await fetch('/api/chat', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(message)\n });\n\n if (response.ok) {\n const createdMessage = await response.json();\n setMessages(prev => [...prev, createdMessage]);\n setNewMessage('');\n }\n } catch (error) {\n console.error('Error sending message:', error);\n } finally {\n setLoading(false);\n }\n };\n\n const getJobById = (id: number) => jobs.find(job => job.id === id);\n\n return (\n

Community Chat

Discuss opportunities, ask questions, and network with others

\n\n {/* Messages */}\n

\n {messages.map((message) => {\n const job = message.jobId ? getJobById(message.jobId) : null;\n \n return (\n

\n {message.username.charAt(0).toUpperCase()}\n

\n {message.username}\n \n {new Date(message.timestamp).toLocaleTimeString()}\n \n

{message.message}

\n \n {/* Job reference */}\n {job && (\n

{job.title}

{job.company} • {job.location}

\n \n Apply\n \n

\n )}\n

\n );\n })}\n

\n\n {/* Message input */}\n

\n {!username.trim() ? (\n

Please enter your name in the header to join the chat

\n ) : (\n

\n );\n}\n\nfunction PostJob({ setJobs, username }: {\n setJobs: React.Dispatch>;\n username: string;\n}) {\n const [loading, setLoading] = useState(false);\n const [formData, setFormData] = useState({\n title: '',\n company: '',\n location: '',\n type: 'full-time',\n remote: false,\n salary: '',\n description: '',\n requirements: '',\n contactEmail: '',\n postedBy: username\n });\n\n useEffect(() => {\n setFormData(prev => ({ ...prev, postedBy: username }));\n }, [username]);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!username.trim()) {\n alert('Please enter your name in the header first');\n return;\n }\n\n setLoading(true);\n try {\n const response = await fetch('/api/jobs', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(formData)\n });\n\n if (response.ok) {\n const newJob = await response.json();\n setJobs(prev => [newJob, ...prev]);\n \n // Reset form\n setFormData({\n title: '',\n company: '',\n location: '',\n type: 'full-time',\n remote: false,\n salary: '',\n description: '',\n requirements: '',\n contactEmail: '',\n postedBy: username\n });\n \n alert('Job posted successfully!');\n } else {\n const error = await response.json();\n alert(`Error: ${error.error}`);\n }\n } catch (error) {\n console.error('Error posting job:', error);\n alert('Failed to post job');\n } finally {\n setLoading(false);\n }\n };\n\n const handleChange = (e: React.ChangeEvent) => {\n const { name, value, type } = e.target;\n setFormData(prev => ({\n ...prev,\n [name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value\n }));\n };\n\n return (\n

Post a New Job

\n \n

\n Job Title *\n \n

\n\n

\n Company *\n \n

\n\n

\n Location *\n \n

\n\n

\n Job Type *\n \n \n \n \n \n \n

\n\n

\n Salary (optional)\n \n

\n\n

\n Contact Email *\n \n

\n\n

\n \n \n Remote work available\n \n

\n\n

\n Job Description *\n \n

\n\n

\n Requirements *\n \n

\n\n \n {loading ? 'Posting...' : 'Post Job'}\n \n\n {!username.trim() && (\n

\n Please enter your name in the header to post a job\n

\n )}\n \n

\n );\n}\n\n// Initialize the app\nconst root = createRoot(document.getElementById('root')!);\nroot.render();","deleted","label",[176,158],"frontend","permalink","https://www.val.town/x/yusufakanji/chatpapp/code/frontend/index.tsx","extension","actionData","errors"]