Skip to content

Commit 26ff9b1

Browse files
bradtraversybradtraversy
committed
Update listing
1 parent 0e437ab commit 26ff9b1

File tree

4 files changed

+265
-3
lines changed

4 files changed

+265
-3
lines changed

‎src/App.jsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import JobsPage from './pages/JobsPage';
1010
import NotFoundPage from './pages/NotFoundPage';
1111
import JobPage, { jobLoader } from './pages/JobPage';
1212
import AddJobPage from './pages/AddJobPage';
13+
import EditJobPage from './pages/EditJobPage';
1314

1415
const App = () => {
1516
// Add New Job
@@ -32,12 +33,29 @@ const App = () => {
3233
return;
3334
};
3435

36+
// Update Job
37+
const updateJob = async (job) => {
38+
const res = await fetch(`/api/jobs/${job.id}`, {
39+
method: 'PUT',
40+
headers: {
41+
'Content-Type': 'application/json',
42+
},
43+
body: JSON.stringify(job),
44+
});
45+
return;
46+
};
47+
3548
const router = createBrowserRouter(
3649
createRoutesFromElements(
3750
<Route path='/' element={<MainLayout />}>
3851
<Route index element={<HomePage />} />
3952
<Route path='/jobs' element={<JobsPage />} />
4053
<Route path='/add-job' element={<AddJobPage addJobSubmit={addJob} />} />
54+
<Route
55+
path='/edit-job/:id'
56+
element={<EditJobPage updateJobSubmit={updateJob} />}
57+
loader={jobLoader}
58+
/>
4159
<Route
4260
path='/jobs/:id'
4361
element={<JobPage deleteJob={deleteJob} />}

‎src/jobs.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@
3030
},
3131
{
3232
"id": "3",
33-
"title": "React.js Developer",
33+
"title": "React.js Dev",
3434
"type": "Full-Time",
35-
"description": "Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference. We offer competitive compensation and a collaborative work environment where your ideas are valued.",
3635
"location": "Brooklyn, NY",
36+
"description": "Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference. We offer competitive compensation and a collaborative work environment where your ideas are valued.",
3737
"salary": "$70K - $80K",
3838
"company": {
3939
"name": "Dolor Cloud",

‎src/pages/EditJobPage.jsx

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
import { useState } from 'react';
2+
import { useParams, useLoaderData, useNavigate } from 'react-router-dom';
3+
import { toast } from 'react-toastify';
4+
5+
const EditJobPage = ({ updateJobSubmit }) => {
6+
const job = useLoaderData();
7+
const [title, setTitle] = useState(job.title);
8+
const [type, setType] = useState(job.type);
9+
const [location, setLocation] = useState(job.location);
10+
const [description, setDescription] = useState(job.description);
11+
const [salary, setSalary] = useState(job.salary);
12+
const [companyName, setCompanyName] = useState(job.company.name);
13+
const [companyDescription, setCompanyDescription] = useState(
14+
job.company.description
15+
);
16+
const [contactEmail, setContactEmail] = useState(job.company.contactEmail);
17+
const [contactPhone, setContactPhone] = useState(job.company.contactPhone);
18+
19+
const navigate = useNavigate();
20+
const { id } = useParams();
21+
22+
const submitForm = (e) => {
23+
e.preventDefault();
24+
25+
const updatedJob = {
26+
id,
27+
title,
28+
type,
29+
location,
30+
description,
31+
salary,
32+
company: {
33+
name: companyName,
34+
description: companyDescription,
35+
contactEmail,
36+
contactPhone,
37+
},
38+
};
39+
40+
updateJobSubmit(updatedJob);
41+
42+
toast.success('Job Updated Successfully');
43+
44+
return navigate(`/jobs/${id}`);
45+
};
46+
47+
return (
48+
<section className='bg-indigo-50'>
49+
<div className='container m-auto max-w-2xl py-24'>
50+
<div className='bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0'>
51+
<form onSubmit={submitForm}>
52+
<h2 className='text-3xl text-center font-semibold mb-6'>
53+
Update Job
54+
</h2>
55+
56+
<div className='mb-4'>
57+
<label
58+
htmlFor='type'
59+
className='block text-gray-700 font-bold mb-2'
60+
>
61+
Job Type
62+
</label>
63+
<select
64+
id='type'
65+
name='type'
66+
className='border rounded w-full py-2 px-3'
67+
required
68+
value={type}
69+
onChange={(e) => setType(e.target.value)}
70+
>
71+
<option value='Full-Time'>Full-Time</option>
72+
<option value='Part-Time'>Part-Time</option>
73+
<option value='Remote'>Remote</option>
74+
<option value='Internship'>Internship</option>
75+
</select>
76+
</div>
77+
78+
<div className='mb-4'>
79+
<label className='block text-gray-700 font-bold mb-2'>
80+
Job Listing Name
81+
</label>
82+
<input
83+
type='text'
84+
id='title'
85+
name='title'
86+
className='border rounded w-full py-2 px-3 mb-2'
87+
placeholder='eg. Beautiful Apartment In Miami'
88+
required
89+
value={title}
90+
onChange={(e) => setTitle(e.target.value)}
91+
/>
92+
</div>
93+
<div className='mb-4'>
94+
<label
95+
htmlFor='description'
96+
className='block text-gray-700 font-bold mb-2'
97+
>
98+
Description
99+
</label>
100+
<textarea
101+
id='description'
102+
name='description'
103+
className='border rounded w-full py-2 px-3'
104+
rows='4'
105+
placeholder='Add any job duties, expectations, requirements, etc'
106+
value={description}
107+
onChange={(e) => setDescription(e.target.value)}
108+
></textarea>
109+
</div>
110+
111+
<div className='mb-4'>
112+
<label
113+
htmlFor='type'
114+
className='block text-gray-700 font-bold mb-2'
115+
>
116+
Salary
117+
</label>
118+
<select
119+
id='salary'
120+
name='salary'
121+
className='border rounded w-full py-2 px-3'
122+
required
123+
value={salary}
124+
onChange={(e) => setSalary(e.target.value)}
125+
>
126+
<option value='Under $50K'>Under $50K</option>
127+
<option value='$50K - 60K'>$50K - $60K</option>
128+
<option value='$60K - 70K'>$60K - $70K</option>
129+
<option value='$70K - 80K'>$70K - $80K</option>
130+
<option value='$80K - 90K'>$80K - $90K</option>
131+
<option value='$90K - 100K'>$90K - $100K</option>
132+
<option value='$100K - 125K'>$100K - $125K</option>
133+
<option value='$125K - 150K'>$125K - $150K</option>
134+
<option value='$150K - 175K'>$150K - $175K</option>
135+
<option value='$175K - 200K'>$175K - $200K</option>
136+
<option value='Over $200K'>Over $200K</option>
137+
</select>
138+
</div>
139+
140+
<div className='mb-4'>
141+
<label className='block text-gray-700 font-bold mb-2'>
142+
Location
143+
</label>
144+
<input
145+
type='text'
146+
id='location'
147+
name='location'
148+
className='border rounded w-full py-2 px-3 mb-2'
149+
placeholder='Company Location'
150+
required
151+
value={location}
152+
onChange={(e) => setLocation(e.target.value)}
153+
/>
154+
</div>
155+
156+
<h3 className='text-2xl mb-5'>Company Info</h3>
157+
158+
<div className='mb-4'>
159+
<label
160+
htmlFor='company'
161+
className='block text-gray-700 font-bold mb-2'
162+
>
163+
Company Name
164+
</label>
165+
<input
166+
type='text'
167+
id='company'
168+
name='company'
169+
className='border rounded w-full py-2 px-3'
170+
placeholder='Company Name'
171+
value={companyName}
172+
onChange={(e) => setCompanyName(e.target.value)}
173+
/>
174+
</div>
175+
176+
<div className='mb-4'>
177+
<label
178+
htmlFor='company_description'
179+
className='block text-gray-700 font-bold mb-2'
180+
>
181+
Company Description
182+
</label>
183+
<textarea
184+
id='company_description'
185+
name='company_description'
186+
className='border rounded w-full py-2 px-3'
187+
rows='4'
188+
placeholder='What does your company do?'
189+
value={companyDescription}
190+
onChange={(e) => setCompanyDescription(e.target.value)}
191+
></textarea>
192+
</div>
193+
194+
<div className='mb-4'>
195+
<label
196+
htmlFor='contact_email'
197+
className='block text-gray-700 font-bold mb-2'
198+
>
199+
Contact Email
200+
</label>
201+
<input
202+
type='email'
203+
id='contact_email'
204+
name='contact_email'
205+
className='border rounded w-full py-2 px-3'
206+
placeholder='Email address for applicants'
207+
required
208+
value={contactEmail}
209+
onChange={(e) => setContactEmail(e.target.value)}
210+
/>
211+
</div>
212+
<div className='mb-4'>
213+
<label
214+
htmlFor='contact_phone'
215+
className='block text-gray-700 font-bold mb-2'
216+
>
217+
Contact Phone
218+
</label>
219+
<input
220+
type='tel'
221+
id='contact_phone'
222+
name='contact_phone'
223+
className='border rounded w-full py-2 px-3'
224+
placeholder='Optional phone for applicants'
225+
value={contactPhone}
226+
onChange={(e) => setContactPhone(e.target.value)}
227+
/>
228+
</div>
229+
230+
<div>
231+
<button
232+
className='bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline'
233+
type='submit'
234+
>
235+
Update Job
236+
</button>
237+
</div>
238+
</form>
239+
</div>
240+
</div>
241+
</section>
242+
);
243+
};
244+
export default EditJobPage;

‎src/pages/JobPage.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ const JobPage = ({ deleteJob }) => {
9191
<div className='bg-white p-6 rounded-lg shadow-md mt-6'>
9292
<h3 className='text-xl font-bold mb-6'>Manage Job</h3>
9393
<Link
94-
to={`/jobs/edit/${job.id}`}
94+
to={`/edit-job/${job.id}`}
9595
className='bg-indigo-500 hover:bg-indigo-600 text-white text-center font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block'
9696
>
9797
Edit Job

0 commit comments

Comments
 (0)