\n \n \n

\n        <input \n          type=\"text\" \n          name=\"location\"\n          placeholder=\"Location (City, Country)\" \n          value={jobDetails.location}\n          onChange={handleChange}\n        />\n        <select \n          name=\"jobType\"\n          value={jobDetails.jobType}\n          onChange={handleChange}\n        >\n          <option value=\"Full-time\">Full-time</option>\n          <option value=\"Part-time\">Part-time</option>\n          <option value=\"Contract\">Contract</option>\n          <option value=\"Remote\">Remote</option>\n          <option value=\"Freelance\">Freelance</option>\n        </select>\n        <div className=\"salary-range\">\n          <input \n            type=\"number\" \n            name=\"salaryMin\"\n            placeholder=\"Minimum Salary\" \n            value={jobDetails.salaryMin}\n            onChange={handleChange}\n          />\n          <input \n            type=\"number\" \n            name=\"salaryMax\"\n            placeholder=\"Maximum Salary\" \n            value={jobDetails.salaryMax}\n            onChange={handleChange}\n          />\n        </div>\n        <input \n          type=\"text\" \n          name=\"skills\"\n          placeholder=\"Required Skills (comma-separated)\" \n          value={jobDetails.skills}\n          onChange={handleChange}\n        />\n        <input \n          type=\"email\" \n          name=\"contactEmail\"\n          placeholder=\"Contact Email\" \n          value={jobDetails.contactEmail}\n          onChange={handleChange}\n        />\n        <button type=\"submit\">Post Job</button>\n      </div>\n    </form>\n  );\n}\n\nfunction JobListings() {\n  const [jobs, setJobs] = useState([]);\n  const [savedJobs, setSavedJobs] = useState([]);\n  const [filters, setFilters] = useState({\n    jobType: \"\",\n    minSalary: \"\",\n    location: \"\"\n  });\n  const [sortBy, setSortBy] = useState(\"newest\");\n\n  const fetchJobs = async () => {\n    const response = await fetch(\"/get-jobs\");\n    const data = await response.json();\n    setJobs(data);\n  };\n\n  const fetchSavedJobs = async () => {\n    const response = await fetch(\"/get-saved-jobs\");\n    const data = await response.json();\n    setSavedJobs(data);\n  };\n\n  const filteredAndSortedJobs = useMemo(() => {\n    return jobs\n      .filter(job => \n        (!filters.jobType || job.job_type === filters.jobType) &&\n        (!filters.minSalary || \n          (job.salary_min && parseInt(job.salary_min) >= parseInt(filters.minSalary)) &&\n        (!filters.location || \n          job.location.toLowerCase().includes(filters.location.toLowerCase()))\n      )\n      .sort((a, b) => {\n        switch(sortBy) {\n          case \"salaryAsc\":\n            return (a.salary_min || 0) - (b.salary_min || 0);\n          case \"salaryDesc\":\n            return (b.salary_min || 0) - (a.salary_min || 0);\n          case \"oldest\":\n            return new Date(a.created_at) - new Date(b.created_at);\n          default: // newest\n            return new Date(b.created_at) - new Date(a.created_at);\n        }\n      });\n  }, [jobs, filters, sortBy]);\n\n  const saveJob = async (job) => {\n    const response = await fetch(\"/save-job\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify(job)\n    });\n    if (response.ok) {\n      fetchSavedJobs();\n    }\n  };\n\n  const removeJob = async (jobId) => {\n    const response = await fetch(`/remove-saved-job/${jobId}`, {\n      method: \"DELETE\"\n    });\n    if (response.ok) {\n      fetchSavedJobs();\n    }\n  };\n\n  useEffect(() => {\n    fetchJobs();\n    fetchSavedJobs();\n  }, []);\n\n  return (\n    <div className=\"job-listings-container\">\n      <div className=\"job-filters\">\n        <select \n          value={filters.jobType} \n          onChange={(e) => setFilters(prev => ({...prev, jobType: e.target.value}))}\n        >\n          <option value=\"\">All Job Types</option>\n          <option value=\"Full-time\">Full-time</option>\n          <option value=\"Part-time\">Part-time</option>\n          <option value=\"Contract\">Contract</option>\n          <option value=\"Remote\">Remote</option>\n          <option value=\"Freelance\">Freelance</option>\n        </select>\n        <input \n          type=\"number\" \n          placeholder=\"Minimum Salary\" \n          value={filters.minSalary}\n          onChange={(e) => setFilters(prev => ({...prev, minSalary: e.target.value}))}\n        />\n        <input \n          type=\"text\" \n          placeholder=\"Location\" \n          value={filters.location}\n          onChange={(e) => setFilters(prev => ({...prev, location: e.target.value}))}\n        />\n        <select \n          value={sortBy} \n          onChange={(e) => setSortBy(e.target.value)}\n        >\n          <option value=\"newest\">Newest First</option>\n          <option value=\"oldest\">Oldest First</option>\n          <option value=\"salaryAsc\">Salary Low to High</option>\n          <option value=\"salaryDesc\">Salary High to Low</option>\n        </select>\n      </div>\n      <div className=\"job-listings\">\n        <JobPostingForm onSubmit={fetchJobs} />\n        <h2>Current Job Postings</h2>\n        {filteredAndSortedJobs.length === 0 ? (\n          <p>No job postings match your filters. Try broadening your search!</p>\n        ) : (\n          filteredAndSortedJobs.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><strong>Location:</strong> {job.location}</p>\n              <p><strong>Job Type:</strong> {job.job_type}</p>\n              {job.salary_min && job.salary_max && (\n                <p>\n                  <strong>Salary Range:</strong> ${job.salary_min} - ${job.salary_max}\n                </p>\n              )}\n              <p><strong>Skills:</strong> {job.skills}</p>\n              <p>{job.description}</p>\n              <div className=\"job-card-actions\">\n                {job.contact_email && (\n                  <a \n                    href={`mailto:${job.contact_email}`} \n                    className=\"contact-btn\"\n                  >\n                    📧 Contact\n                  </a>\n                )}\n                <button \n                  onClick={() => saveJob(job)}\n                  className=\"save-job-btn\"\n                >\n                  💾 Save Job\n                </button>\n              </div>\n            </div>\n          ))\n        )}\n      </div>\n      <div className=\"saved-jobs\">\n        <h2>Saved Jobs</h2>\n        {savedJobs.length === 0 ? (\n          <p>No saved jobs yet. Click \"Save Job\" to bookmark opportunities!</p>\n        ) : (\n          savedJobs.map((job, index) => (\n            <div key={index} className=\"saved-job-card\">\n              <h3>{job.title}</h3>\n              <p><strong>Company:</strong> {job.company}</p>\n              <p><strong>Location:</strong> {job.location}</p>\n              <p><strong>Job Type:</strong> {job.job_type}</p>\n              {job.salary_min && job.salary_max && (\n                <p>\n                  <strong>Salary Range:</strong> ${job.salary_min} - ${job.salary_max}\n                </p>\n              )}\n              <p><strong>Skills:</strong> {job.skills}</p>\n              <p>{job.description}</p>\n              <button \n                onClick={() => removeJob(job.id)}\n                className=\"remove-job-btn\"\n              >\n                🗑️ Remove\n              </button>\n            </div>\n          ))\n        )}\n      </div>\n    </div>\n  );\n}\n\n// [Rest of the previous code remains the same]\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"eloquentIvoryFish\";\n  const SCHEMA_VERSION = 9; // Incrementing schema version to reset tables\n\n  // Updated jobs table with more fields\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      location TEXT,\n      job_type TEXT,\n      salary_min INTEGER,\n      salary_max INTEGER,\n      skills TEXT,\n      contact_email TEXT,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Update saved jobs table to match new schema\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_saved_jobs_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      original_job_id INTEGER,\n      title TEXT NOT NULL,\n      company TEXT NOT NULL,\n      description TEXT NOT NULL,\n      location TEXT,\n      job_type TEXT,\n      salary_min INTEGER,\n      salary_max INTEGER,\n      skills TEXT,\n      contact_email TEXT,\n      saved_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Previous messages table and other routes remain the same\n\n  if (request.method === \"POST\" && url.pathname === \"/post-job\") {\n    const { \n      title, \n      company, \n      description, \n      location, \n      jobType, \n      salaryMin, \n      salaryMax, \n      skills,\n      contactEmail \n    } = await request.json();\n\n    await sqlite.execute(\n      `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} \n      (title, company, description, location, job_type, salary_min, salary_max, skills, contact_email) \n      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n      [\n        title, \n        company, \n        description, \n        location, \n        jobType, \n        salaryMin || null, \n        salaryMax || null, \n        skills,\n        contactEmail\n      ]\n    );\n    return new Response(JSON.stringify({ success: true }), { \n      headers: { \"Content-Type\": \"application/json\" } \n    });\n  }\n\n  // [Rest of the server function remains the same]\n}\n\n// Update CSS to support new layout\nconst css = `\n  /* Previous CSS remains the same */\n  .job-filters {\n    display: flex;\n    gap: 10px;\n    margin-bottom: 20px;\n  }\n\n  .job-filters select, \n  .job-filters input {\n    padding: 5px;\n    flex-grow: 1;\n  }\n\n  .job-card-actions {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 10px;\n  }\n\n  .contact-btn {\n    text-decoration: none;\n    background-color: #4CAF50;\n    color: white;\n    padding: 5px 10px;\n    border-radius: 4px;\n  }\n\n  .form-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 10px;\n  }\n\n  .form-grid textarea {\n    grid-column: span 2;\n  }\n\n  .salary-range {\n    display: flex;\n    gap: 10px;\n  }\n`;","deleted","label",[99],"permalink","https://www.val.town/x/Marcyatieno/eloquentIvoryFish/code/main.tsx","extension","actionData","errors"]
</article></body></html>