From 509ddef8fab6ebb93db38c917975438219d8aa29 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Mon, 23 Dec 2019 20:20:53 +0545 Subject: [PATCH 1/7] feat(jobs): Add background color --- client/src/App.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/src/App.css b/client/src/App.css index 2be5e9f..c75e20a 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -1,5 +1,7 @@ body { - margin: 20 40px; + margin: 20px 40px; + background-color: rgb(56, 62, 63); + color: white; } .job { From b15283d6573d715a742a60264084461a5c80fca4 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Mon, 23 Dec 2019 20:45:08 +0545 Subject: [PATCH 2/7] feat(location): Add Location view with css --- client/src/App.css | 13 ++++++++++ client/src/LocationRadio.js | 52 +++++++++++++++++++++++++++++++++++++ 2 files changed, 65 insertions(+) create mode 100644 client/src/LocationRadio.js diff --git a/client/src/App.css b/client/src/App.css index c75e20a..7e0013f 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -30,3 +30,16 @@ body { .job-title-location { margin-left: 20px; } + +.location { + width: 50%; + display: flex; + justify-content: space-between; + margin: 20px 0; + padding: 20px 10px; +} + +.location:hover { + cursor: pointer; + color: #666666; +} diff --git a/client/src/LocationRadio.js b/client/src/LocationRadio.js new file mode 100644 index 0000000..27ba4ad --- /dev/null +++ b/client/src/LocationRadio.js @@ -0,0 +1,52 @@ +import React from 'react'; +import Paper from '@material-ui/core/Paper'; +import Radio from '@material-ui/core/Radio'; +import RadioGroup from '@material-ui/core/RadioGroup'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormControl from '@material-ui/core/FormControl'; +import FormLabel from '@material-ui/core/FormLabel'; + +export default function LocationRadio({value, handleChange}) { + return ( + +
+ + Location + + } + label="All" + labelPlacement="start" + /> + } + label="U.S." + labelPlacement="start" + /> + } + label="International" + labelPlacement="start" + /> + } + label="Remote" + labelPlacement="start" + /> + + +
+ + ); +} From b4002089fbf2fc8cf0847b15f9a051a0f8c4edc7 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Mon, 23 Dec 2019 20:45:44 +0545 Subject: [PATCH 3/7] feat(location): Add location to jobs with hooks --- client/src/Jobs.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/client/src/Jobs.js b/client/src/Jobs.js index 8afdea9..90eabf6 100644 --- a/client/src/Jobs.js +++ b/client/src/Jobs.js @@ -7,8 +7,16 @@ import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'; import Job from './Job'; import JobModal from './JobModal'; +import LocationRadio from './LocationRadio'; export default function Jobs({jobs}) { + // Location + const [selectedLocation, setSelectedLocation] = React.useState('all'); + + const handleChange = event => { + setSelectedLocation(event.target.value); + }; + // modal const [open, setOpen] = React.useState(false); const [selectedJob, selectJob] = React.useState([]); @@ -55,6 +63,7 @@ export default function Jobs({jobs}) { Found {numJobs} Jobs + {jobsOnPage.map((job, i) => ( Date: Mon, 23 Dec 2019 21:26:30 +0545 Subject: [PATCH 4/7] refactor: Rename the variable and function --- client/src/Jobs.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/client/src/Jobs.js b/client/src/Jobs.js index 90eabf6..8eb4f73 100644 --- a/client/src/Jobs.js +++ b/client/src/Jobs.js @@ -10,8 +10,11 @@ import JobModal from './JobModal'; import LocationRadio from './LocationRadio'; export default function Jobs({jobs}) { - // Location - const [selectedLocation, setSelectedLocation] = React.useState('all'); + // location radio section + const [location, setLocation] = React.useState('all'); + const handleLocationChange = event => { + setLocation(event.target.value); + }; const handleChange = event => { setSelectedLocation(event.target.value); @@ -63,7 +66,7 @@ export default function Jobs({jobs}) { Found {numJobs} Jobs - + {jobsOnPage.map((job, i) => ( Date: Mon, 23 Dec 2019 21:27:00 +0545 Subject: [PATCH 5/7] feat(location): Cities of US --- client/src/constants.js | 138 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 client/src/constants.js diff --git a/client/src/constants.js b/client/src/constants.js new file mode 100644 index 0000000..f34cf27 --- /dev/null +++ b/client/src/constants.js @@ -0,0 +1,138 @@ +export const stateNames = [ + 'Alabama', + 'Alaska', + 'American Samoa', + 'Arizona', + 'Arkansas', + 'California', + 'Colorado', + 'Connecticut', + 'Delaware', + 'District of Columbia', + 'Federated States of Micronesia', + 'Florida', + 'Georgia', + 'Guam', + 'Hawaii', + 'Idaho', + 'Illinois', + 'Indiana', + 'Iowa', + 'Kansas', + 'Kentucky', + 'Louisiana', + 'Maine', + 'Marshall Islands', + 'Maryland', + 'Massachusetts', + 'Michigan', + 'Minnesota', + 'Mississippi', + 'Missouri', + 'Montana', + 'Nebraska', + 'Nevada', + 'New Hampshire', + 'New Jersey', + 'New Mexico', + 'New York', + 'North Carolina', + 'North Dakota', + 'Northern Mariana Islands', + 'Ohio', + 'Oklahoma', + 'Oregon', + 'Palau', + 'Pennsylvania', + 'Puerto Rico', + 'Rhode Island', + 'South Carolina', + 'South Dakota', + 'Tennessee', + 'Texas', + 'Utah', + 'Vermont', + 'Virgin Island', + 'Virginia', + 'Washington', + 'West Virginia', + 'Wisconsin', + 'Wyoming', +]; + +export const stateAbbrevs = [ + 'AK', + 'AL', + 'AR', + 'AZ', + 'CA', + 'CO', + 'CT', + 'DC', + 'DE', + 'FL', + 'GA', + 'HI', + 'IA', + 'ID', + 'IL', + 'IN', + 'KS', + 'KY', + 'LA', + 'MA', + 'MD', + 'ME', + 'MI', + 'MN', + 'MO', + 'MS', + 'MT', + 'NC', + 'ND', + 'NE', + 'NH', + 'NJ', + 'NM', + 'NV', + 'NY', + 'OH', + 'OK', + 'OR', + 'PA', + 'RI', + 'SC', + 'SD', + 'TN', + 'TX', + 'UT', + 'VA', + 'VT', + 'WA', + 'WI', + 'WV', + 'WY', +]; + +// common us cities +export const USCityNames = [ + 'Austin', + 'San Francisco', + 'Los Angeles', + 'Denver', + 'Houston', + 'Portland', + 'Seattle', + 'Dallas', + 'Boston', + 'D.C.', + 'Baltimore', + 'Atlanta', + 'Chicago', + 'St. Louis', + 'St Louis', + 'Miami', + 'Orlando', + 'Nashville', + 'New Orleans', +]; From a46008d2abfd4ae5b9d3dcb9c2c4f25a766be2b7 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Mon, 23 Dec 2019 21:27:29 +0545 Subject: [PATCH 6/7] feat(location): Add function to filter by location --- client/src/utils.js | 47 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 client/src/utils.js diff --git a/client/src/utils.js b/client/src/utils.js new file mode 100644 index 0000000..9078c72 --- /dev/null +++ b/client/src/utils.js @@ -0,0 +1,47 @@ +import {stateNames, stateAbbrevs, USCityNames} from './constants'; + +const jobIsRemote = job => + job.location.toLowerCase().includes('remote') || + job.location.toLowerCase().includes('anywhere'); +const jobIsInUs = job => { + return ( + stateNames.some(stateName => + job.location.toLowerCase().includes(stateName.toLowerCase()) + ) || + stateAbbrevs.some(stateAbbrev => { + const abbrev = new RegExp(`\\b${stateAbbrev}\\b`, 'gi'); + return abbrev.test(job.location); + }) || + USCityNames.some(cityName => { + return job.location.toLowerCase().includes(cityName.toLowerCase()); + }) + ); +}; +const jobIsNotInUS = job => { + return ( + stateNames.every( + state => !job.location.toLowerCase().includes(state.toLowerCase()) + ) && + stateAbbrevs.every(stateAbbrev => { + const abbrev = new RegExp(`\\b${stateAbbrev}\\b`, 'gi'); + return !abbrev.test(job.location); + }) && + USCityNames.every(cityName => { + return !job.location.toLowerCase().includes(cityName.toLowerCase()); + }) && + !jobIsRemote(job) + ); +}; + +export const filterJobsByLocation = (jobs, location) => { + switch (location) { + case 'us': + return jobs.filter(jobIsInUs); + case 'international': + return jobs.filter(jobIsNotInUS); + case 'remote': + return jobs.filter(jobIsRemote); + default: + return jobs; + } +}; From 75c7554ae1ad7fdff3b86384b5c9836654237394 Mon Sep 17 00:00:00 2001 From: Ajan Lal Shrestha Date: Mon, 23 Dec 2019 21:27:47 +0545 Subject: [PATCH 7/7] feat(jobs): Integrate filter by location of jobs --- client/src/Jobs.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/src/Jobs.js b/client/src/Jobs.js index 8eb4f73..dad92c7 100644 --- a/client/src/Jobs.js +++ b/client/src/Jobs.js @@ -8,6 +8,7 @@ import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'; import Job from './Job'; import JobModal from './JobModal'; import LocationRadio from './LocationRadio'; +import {filterJobsByLocation} from './utils'; export default function Jobs({jobs}) { // location radio section @@ -16,9 +17,8 @@ export default function Jobs({jobs}) { setLocation(event.target.value); }; - const handleChange = event => { - setSelectedLocation(event.target.value); - }; + // filter jobs based on location + const filteredJobs = filterJobsByLocation(jobs, location); // modal const [open, setOpen] = React.useState(false); @@ -31,10 +31,10 @@ export default function Jobs({jobs}) { }; // pagination - const numJobs = jobs.length; + const numJobs = filteredJobs.length; const numPages = Math.ceil(numJobs / 50); const [activeStep, setActiveStep] = React.useState(0); - const jobsOnPage = jobs.slice(activeStep * 50, activeStep * 50 + 50); + const jobsOnPage = filteredJobs.slice(activeStep * 50, activeStep * 50 + 50); // step == 0, show 0-49 // step == 1, show 50-99