From 20d8d18f0ac169801a378e1056e7ee98e10f7d33 Mon Sep 17 00:00:00 2001 From: marwa Date: Sun, 13 Nov 2022 22:09:57 +0200 Subject: [PATCH 1/2] fixed the design of the jobs page and worked on the functionality of the first two filters --- src/App.jsx | 198 +++++++++--------- .../CombiningFilterComponents.jsx | 7 +- .../FilterResults/FilterResults.jsx | 13 +- .../OurCollaborators/OurCollaborators.jsx | 14 +- .../__tests__/OurCollaborators.test.jsx | 8 +- .../_test_/CompanyShowcaseComponent.test.jsx | 7 +- src/components/filter/Filter.jsx | 48 ++++- src/data/filterData.js | 9 +- 8 files changed, 164 insertions(+), 140 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 65a675b..1d4c871 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,110 +1,110 @@ import React from "react"; -import { useTranslation } from "react-i18next"; -import Hero from "./components/Hero/Hero"; -import AboutHero from "./components/aboutHero/AboutHero"; -import Localize from "./Localize"; -import MeetOurTeam from "./components/MeetOurTeam/MeetOurTeam"; -import { teamMembers } from "./data/teamData"; -import Contact from "./components/contact/Contact"; -import WyChooseUs from "./components/whyChooseUs/WhyChooseUs"; -import CompanyShowcaseComponent from "./components/companyShowcaseComponent/CompanyShowcaseComponent"; -import { showCaseData } from "./data/showCaseData"; -import FilterResults from "./components/FilterResults/FilterResults"; -import {filterData} from "./data/filterData" +// import { useTranslation } from "react-i18next"; +// import Hero from "./components/Hero/Hero"; +// import AboutHero from "./components/aboutHero/AboutHero"; +// import Localize from "./Localize"; +// import MeetOurTeam from "./components/MeetOurTeam/MeetOurTeam"; +// import { teamMembers } from "./data/teamData"; +// import Contact from "./components/contact/Contact"; +// import WyChooseUs from "./components/whyChooseUs/WhyChooseUs"; +// import CompanyShowcaseComponent from "./components/companyShowcaseComponent/CompanyShowcaseComponent"; +// import { showCaseData } from "./data/showCaseData"; +// import FilterResults from "./components/FilterResults/FilterResults"; +// import {filterData} from "./data/filterData" import "./App.css"; -import JobsShowcase from "./components/JobsShowcase/JobsShowcase"; -import { showcaseData } from "./data"; -import Categories from "./components/Categories/Categories"; -import Education from "./components/EducationAndExperience/Education"; -import Experience from "./components/EducationAndExperience/Experience"; -import LatestJobs from "./components/LatestJob/LatestJobs"; -import HowItWorks from "./components/About/HowItWorks/HowItWorks"; -import OurCollaborators from "./components/OurCollaborators/OurCollaborators"; -import JobsFinder from "./components/Hero/JobsFinder"; -import RoadMaps from "./components/Roadmaps/RoadMaps"; -import Navbar from "./components/Navbar/Navbar" +// import JobsShowcase from "./components/JobsShowcase/JobsShowcase"; +// import { showcaseData } from "./data"; +// import Categories from "./components/Categories/Categories"; +// import Education from "./components/EducationAndExperience/Education"; +// import Experience from "./components/EducationAndExperience/Experience"; +// import LatestJobs from "./components/LatestJob/LatestJobs"; +// import HowItWorks from "./components/About/HowItWorks/HowItWorks"; +// import OurCollaborators from "./components/OurCollaborators/OurCollaborators"; +// import JobsFinder from "./components/Hero/JobsFinder"; +// import RoadMaps from "./components/Roadmaps/RoadMaps"; +// import Navbar from "./components/Navbar/Navbar" import CombiningFilterComponents from "./components/CombiningComponents/CombiningFilterComponents"; -import Filter from './components/filter/Filter'; +// import Filter from './components/filter/Filter'; -const data = [ - { - position: "Web Developer f", - salary: "2000$-3000$", - date: "10/10/2022", - fullTime: true, - partTime: false, - remote: false, - id: 1, - }, - { - position: "Web Developer p", - salary: "2000$-3000$", - date: "10/10/2022", - fullTime: false, - partTime: true, - remote: false, - id: 2, - }, - { - position: "Web Developer fr", - salary: "2000$-3000$", - date: "10/10/2022", - fullTime: true, - partTime: false, - remote: true, - id: 3, - }, - { - position: "Web Developer pr", - salary: "2000$-3000$", - date: "10/10/2022", - fullTime: false, - partTime: true, - remote: true, - id: 4, - }, - { - position: "Web Developer fr", - salary: "2000$-3000$", - date: "10/10/2022", - fullTime: true, - partTime: false, - remote: true, - id: 5, - }, - { - position: "Web Developer r", - salary: "2000$-3000$", - date: "10/10/2022", - fullTime: false, - partTime: false, - remote: true, - id: 6, - }, - { - position: "Web Developer fp", - salary: "2000$-3000$", - date: "10/10/2022", - fullTime: true, - partTime: true, - remote: false, - id: 7, - }, -]; -const header = [ - { title: "Position", id: 1 }, - { title: "Salary", id: 2 }, - { title: "Date", id: 3 }, - { title: "", id: 4 }, -]; +// const data = [ +// { +// position: "Web Developer f", +// salary: "2000$-3000$", +// date: "10/10/2022", +// fullTime: true, +// partTime: false, +// remote: false, +// id: 1, +// }, +// { +// position: "Web Developer p", +// salary: "2000$-3000$", +// date: "10/10/2022", +// fullTime: false, +// partTime: true, +// remote: false, +// id: 2, +// }, +// { +// position: "Web Developer fr", +// salary: "2000$-3000$", +// date: "10/10/2022", +// fullTime: true, +// partTime: false, +// remote: true, +// id: 3, +// }, +// { +// position: "Web Developer pr", +// salary: "2000$-3000$", +// date: "10/10/2022", +// fullTime: false, +// partTime: true, +// remote: true, +// id: 4, +// }, +// { +// position: "Web Developer fr", +// salary: "2000$-3000$", +// date: "10/10/2022", +// fullTime: true, +// partTime: false, +// remote: true, +// id: 5, +// }, +// { +// position: "Web Developer r", +// salary: "2000$-3000$", +// date: "10/10/2022", +// fullTime: false, +// partTime: false, +// remote: true, +// id: 6, +// }, +// { +// position: "Web Developer fp", +// salary: "2000$-3000$", +// date: "10/10/2022", +// fullTime: true, +// partTime: true, +// remote: false, +// id: 7, +// }, +// ]; +// const header = [ +// { title: "Position", id: 1 }, +// { title: "Salary", id: 2 }, +// { title: "Date", id: 3 }, +// { title: "", id: 4 }, +// ]; function App() { - const { t } = useTranslation(); + // const { t } = useTranslation(); return (
- + {/* */} - + {/* @@ -124,7 +124,7 @@ function App() { - + */}
); diff --git a/src/components/CombiningComponents/CombiningFilterComponents.jsx b/src/components/CombiningComponents/CombiningFilterComponents.jsx index b5be437..7586512 100644 --- a/src/components/CombiningComponents/CombiningFilterComponents.jsx +++ b/src/components/CombiningComponents/CombiningFilterComponents.jsx @@ -8,16 +8,17 @@ function CombiningFilterComponents() { const [data, setData] = useState(filterData); return ( -
+
{" "}
- + {/* here we check if result exists if yes pass it to card else pass the data instead */} - {data && } + + {/* {data && } */}
); diff --git a/src/components/FilterResults/FilterResults.jsx b/src/components/FilterResults/FilterResults.jsx index e3ae586..9b2ed28 100644 --- a/src/components/FilterResults/FilterResults.jsx +++ b/src/components/FilterResults/FilterResults.jsx @@ -1,40 +1,31 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBookmark } from "@fortawesome/free-regular-svg-icons"; import FilterButton from "./FilterButton"; -import { filterData } from "../../data/filterData"; function FilterResults({ setData, data }) { - console.log(data); - console.log(setData); - - // console.log(newArray) - const handleChange = (props) => { const newArray = data?.map((key) => ({ ...key, date: new Date(key.postingDate), })); - // console.log(props) if (props === "newest") { const sortingDataByNewest = newArray.sort((a, b) => b.date - a.date); - // console.log('newest newArray', sortingDataByNewest) setData(sortingDataByNewest); } else { const sortingDataByOldest = newArray.sort((a, b) => a.date - b.date); - // console.log('oldest data', sortingDataByOldest) setData(sortingDataByOldest); } }; return ( -
+

{" "} Total{" "} {" "} - {filterData.length}{" "} + {data.length}{" "} Results

diff --git a/src/components/OurCollaborators/OurCollaborators.jsx b/src/components/OurCollaborators/OurCollaborators.jsx index a93c77f..ab3f82b 100644 --- a/src/components/OurCollaborators/OurCollaborators.jsx +++ b/src/components/OurCollaborators/OurCollaborators.jsx @@ -1,12 +1,12 @@ import CompanyDisplay from "../companyShowcaseComponent/CompanyDisplay"; -function OurCollaborators({ showCaseData }) { - return ( -
-

- Our Collaborators -

- +function OurCollaborators({showCaseData}) { + return ( +
+

+ Our Collaborators +

+
); } diff --git a/src/components/OurCollaborators/__tests__/OurCollaborators.test.jsx b/src/components/OurCollaborators/__tests__/OurCollaborators.test.jsx index 0332cd1..7c9b5d1 100644 --- a/src/components/OurCollaborators/__tests__/OurCollaborators.test.jsx +++ b/src/components/OurCollaborators/__tests__/OurCollaborators.test.jsx @@ -1,8 +1,8 @@ -import renderer from "react-test-renderer"; -import OurCollaborators from "../OurCollaborators.jsx"; -import { showCaseData } from "../../../data/showCaseData"; +import renderer from 'react-test-renderer'; +import OurCollaborators from "../OurCollaborators.jsx" +import { showCaseData } from "../../../data/showCaseData" -it("renders Our Collaborators Component correctly", () => { +it('renders Our Collaborators Component correctly', () => { const tree = renderer .create() .toJSON(); diff --git a/src/components/companyShowcaseComponent/_test_/CompanyShowcaseComponent.test.jsx b/src/components/companyShowcaseComponent/_test_/CompanyShowcaseComponent.test.jsx index 8db5731..d1aff73 100644 --- a/src/components/companyShowcaseComponent/_test_/CompanyShowcaseComponent.test.jsx +++ b/src/components/companyShowcaseComponent/_test_/CompanyShowcaseComponent.test.jsx @@ -1,8 +1,7 @@ -import renderer from "react-test-renderer"; -import CompanyShowcaseComponent from "../CompanyShowcaseComponent.jsx"; -import { showCaseData } from "../../../data/showCaseData"; +import renderer from 'react-test-renderer'; +import CompanyShowcaseComponent from '../CompanyShowcaseComponent.jsx'; -it("renders Company Showcase Component correctly", () => { +it('renders Company Showcase Component correctly', () => { const tree = renderer .create() .toJSON(); diff --git a/src/components/filter/Filter.jsx b/src/components/filter/Filter.jsx index 9bb0fa9..2500840 100644 --- a/src/components/filter/Filter.jsx +++ b/src/components/filter/Filter.jsx @@ -1,6 +1,6 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; -const Filter = () => { +const Filter = ({ setData, filterData }) => { const [filter, setFilter] = useState({ salary: { min: '', @@ -21,7 +21,7 @@ const Filter = () => { salary: { ...filter.salary, min: e.target.value, - }, + } }); } else { setFilter({ @@ -32,17 +32,40 @@ const Filter = () => { }, }); } - console.log(filter); - }; + } + + useEffect(()=>{ + setData( + filterData.filter((item)=> { + // console.log(item) + const salaryRange = item.salary.split('-') + const salaryAsNum = salaryRange.map(number => number.substring(1)) + const maxSalary = salaryAsNum.splice(1) + const minSalary = salaryAsNum.splice(salaryAsNum.length-1) + if (minSalary>=filter.salary.min && maxSalary<=filter.salary.max){ + return item + } + return null; + }) + ) + },[filter.salary]) - const locationHandler = (e) => { + const locationHandler = (e) => { setFilter({ ...filter, location: e.target.value, }); + + setData( + filterData.filter((item)=>{ + if (item.location === e.target.value){ + return item; + } + return null; + })) + } - }; const employmentTypeHandler = (e) => { setFilter({ @@ -94,10 +117,9 @@ handleCheck(e); return (
-
+

Filter

-
{/* SALARY */}
@@ -153,7 +175,11 @@ handleCheck(e); fillRule="nonzero" /> - locationHandler(e)}> @@ -162,6 +188,7 @@ handleCheck(e); + {/* */}
@@ -279,7 +306,6 @@ handleCheck(e);
-
); }; diff --git a/src/data/filterData.js b/src/data/filterData.js index 1e25a5d..a782b79 100644 --- a/src/data/filterData.js +++ b/src/data/filterData.js @@ -3,11 +3,12 @@ export const filterData = [ src: "/assets/filterResults/Murex.png", position: "DevOps Engineer", jobModel: "Remote", - salary: "$5000-$1000", + salary: "$1000-$5000", employer: "Murex", jobType: "Full Time", payFreq: "Monthly", postingDate: "07/12/2022", + location: "Iraq", id: "1", }, { @@ -19,6 +20,7 @@ export const filterData = [ jobType: "Internship", payFreq: "Monthly", postingDate: "06/26/2022", + location: "Lebanon", id: "2", }, { @@ -30,6 +32,7 @@ export const filterData = [ jobType: "Part Time", payFreq: "Monthly", postingDate: "06/19/2022", + location: "Iraq", id: "3", }, { @@ -41,6 +44,7 @@ export const filterData = [ jobType: "Full Time", payFreq: "Monthly", postingDate: "06/19/2022", + location: "Syria", id: "4", }, { @@ -52,6 +56,7 @@ export const filterData = [ jobType: "Full Time", payFreq: "Monthly", postingDate: "06/19/2022", + location: "Yemen", id: "5", }, { @@ -63,6 +68,7 @@ export const filterData = [ jobType: "Full Time", payFreq: "Monthly", postingDate: "06/05/2021", + location: "Kuwait", id: "6", }, { @@ -74,6 +80,7 @@ export const filterData = [ jobType: "Full Time", payFreq: "Monthly", postingDate: "01/01/2022", + location: "Lebanon", id: "7", }, ]; From 81e554d6162c49e3bb0f46ec0735d1d0b20d385f Mon Sep 17 00:00:00 2001 From: marwa Date: Mon, 14 Nov 2022 21:20:14 +0200 Subject: [PATCH 2/2] finalized working on the first two filtering components in the Filter component and amended the filterData.js --- src/App.jsx | 198 +++++++++--------- .../CombiningFilterComponents.jsx | 1 - .../FilterResults/FilterResults.jsx | 8 +- .../__tests__/FilterResults.test.jsx | 2 +- .../__snapshots__/FilterResults.test.jsx.snap | 12 +- .../_test_/CompanyShowcaseComponent.test.jsx | 1 + src/components/filter/Filter.jsx | 30 +-- src/data/filterData.js | 32 ++- 8 files changed, 139 insertions(+), 145 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 1d4c871..65a675b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,110 +1,110 @@ import React from "react"; -// import { useTranslation } from "react-i18next"; -// import Hero from "./components/Hero/Hero"; -// import AboutHero from "./components/aboutHero/AboutHero"; -// import Localize from "./Localize"; -// import MeetOurTeam from "./components/MeetOurTeam/MeetOurTeam"; -// import { teamMembers } from "./data/teamData"; -// import Contact from "./components/contact/Contact"; -// import WyChooseUs from "./components/whyChooseUs/WhyChooseUs"; -// import CompanyShowcaseComponent from "./components/companyShowcaseComponent/CompanyShowcaseComponent"; -// import { showCaseData } from "./data/showCaseData"; -// import FilterResults from "./components/FilterResults/FilterResults"; -// import {filterData} from "./data/filterData" +import { useTranslation } from "react-i18next"; +import Hero from "./components/Hero/Hero"; +import AboutHero from "./components/aboutHero/AboutHero"; +import Localize from "./Localize"; +import MeetOurTeam from "./components/MeetOurTeam/MeetOurTeam"; +import { teamMembers } from "./data/teamData"; +import Contact from "./components/contact/Contact"; +import WyChooseUs from "./components/whyChooseUs/WhyChooseUs"; +import CompanyShowcaseComponent from "./components/companyShowcaseComponent/CompanyShowcaseComponent"; +import { showCaseData } from "./data/showCaseData"; +import FilterResults from "./components/FilterResults/FilterResults"; +import {filterData} from "./data/filterData" import "./App.css"; -// import JobsShowcase from "./components/JobsShowcase/JobsShowcase"; -// import { showcaseData } from "./data"; -// import Categories from "./components/Categories/Categories"; -// import Education from "./components/EducationAndExperience/Education"; -// import Experience from "./components/EducationAndExperience/Experience"; -// import LatestJobs from "./components/LatestJob/LatestJobs"; -// import HowItWorks from "./components/About/HowItWorks/HowItWorks"; -// import OurCollaborators from "./components/OurCollaborators/OurCollaborators"; -// import JobsFinder from "./components/Hero/JobsFinder"; -// import RoadMaps from "./components/Roadmaps/RoadMaps"; -// import Navbar from "./components/Navbar/Navbar" +import JobsShowcase from "./components/JobsShowcase/JobsShowcase"; +import { showcaseData } from "./data"; +import Categories from "./components/Categories/Categories"; +import Education from "./components/EducationAndExperience/Education"; +import Experience from "./components/EducationAndExperience/Experience"; +import LatestJobs from "./components/LatestJob/LatestJobs"; +import HowItWorks from "./components/About/HowItWorks/HowItWorks"; +import OurCollaborators from "./components/OurCollaborators/OurCollaborators"; +import JobsFinder from "./components/Hero/JobsFinder"; +import RoadMaps from "./components/Roadmaps/RoadMaps"; +import Navbar from "./components/Navbar/Navbar" import CombiningFilterComponents from "./components/CombiningComponents/CombiningFilterComponents"; -// import Filter from './components/filter/Filter'; +import Filter from './components/filter/Filter'; -// const data = [ -// { -// position: "Web Developer f", -// salary: "2000$-3000$", -// date: "10/10/2022", -// fullTime: true, -// partTime: false, -// remote: false, -// id: 1, -// }, -// { -// position: "Web Developer p", -// salary: "2000$-3000$", -// date: "10/10/2022", -// fullTime: false, -// partTime: true, -// remote: false, -// id: 2, -// }, -// { -// position: "Web Developer fr", -// salary: "2000$-3000$", -// date: "10/10/2022", -// fullTime: true, -// partTime: false, -// remote: true, -// id: 3, -// }, -// { -// position: "Web Developer pr", -// salary: "2000$-3000$", -// date: "10/10/2022", -// fullTime: false, -// partTime: true, -// remote: true, -// id: 4, -// }, -// { -// position: "Web Developer fr", -// salary: "2000$-3000$", -// date: "10/10/2022", -// fullTime: true, -// partTime: false, -// remote: true, -// id: 5, -// }, -// { -// position: "Web Developer r", -// salary: "2000$-3000$", -// date: "10/10/2022", -// fullTime: false, -// partTime: false, -// remote: true, -// id: 6, -// }, -// { -// position: "Web Developer fp", -// salary: "2000$-3000$", -// date: "10/10/2022", -// fullTime: true, -// partTime: true, -// remote: false, -// id: 7, -// }, -// ]; -// const header = [ -// { title: "Position", id: 1 }, -// { title: "Salary", id: 2 }, -// { title: "Date", id: 3 }, -// { title: "", id: 4 }, -// ]; +const data = [ + { + position: "Web Developer f", + salary: "2000$-3000$", + date: "10/10/2022", + fullTime: true, + partTime: false, + remote: false, + id: 1, + }, + { + position: "Web Developer p", + salary: "2000$-3000$", + date: "10/10/2022", + fullTime: false, + partTime: true, + remote: false, + id: 2, + }, + { + position: "Web Developer fr", + salary: "2000$-3000$", + date: "10/10/2022", + fullTime: true, + partTime: false, + remote: true, + id: 3, + }, + { + position: "Web Developer pr", + salary: "2000$-3000$", + date: "10/10/2022", + fullTime: false, + partTime: true, + remote: true, + id: 4, + }, + { + position: "Web Developer fr", + salary: "2000$-3000$", + date: "10/10/2022", + fullTime: true, + partTime: false, + remote: true, + id: 5, + }, + { + position: "Web Developer r", + salary: "2000$-3000$", + date: "10/10/2022", + fullTime: false, + partTime: false, + remote: true, + id: 6, + }, + { + position: "Web Developer fp", + salary: "2000$-3000$", + date: "10/10/2022", + fullTime: true, + partTime: true, + remote: false, + id: 7, + }, +]; +const header = [ + { title: "Position", id: 1 }, + { title: "Salary", id: 2 }, + { title: "Date", id: 3 }, + { title: "", id: 4 }, +]; function App() { - // const { t } = useTranslation(); + const { t } = useTranslation(); return (
- {/* */} + - {/* + @@ -124,7 +124,7 @@ function App() { - */} +
); diff --git a/src/components/CombiningComponents/CombiningFilterComponents.jsx b/src/components/CombiningComponents/CombiningFilterComponents.jsx index 7586512..abdb802 100644 --- a/src/components/CombiningComponents/CombiningFilterComponents.jsx +++ b/src/components/CombiningComponents/CombiningFilterComponents.jsx @@ -18,7 +18,6 @@ function CombiningFilterComponents() { {/* here we check if result exists if yes pass it to card else pass the data instead */} - {/* {data && } */}
); diff --git a/src/components/FilterResults/FilterResults.jsx b/src/components/FilterResults/FilterResults.jsx index 9b2ed28..87a6dc6 100644 --- a/src/components/FilterResults/FilterResults.jsx +++ b/src/components/FilterResults/FilterResults.jsx @@ -3,6 +3,7 @@ import { faBookmark } from "@fortawesome/free-regular-svg-icons"; import FilterButton from "./FilterButton"; function FilterResults({ setData, data }) { + const handleChange = (props) => { const newArray = data?.map((key) => ({ ...key, @@ -23,9 +24,8 @@ function FilterResults({ setData, data }) {

{" "} Total{" "} - - {" "} - {data.length}{" "} + + {data?.length} Results

@@ -50,7 +50,7 @@ function FilterResults({ setData, data }) { {job.jobModel}

- {job.salary} + ${job.minSalary} - ${job.maxSalary}

{ +it("renders FilterResults Component correctly", () => { const tree = renderer .create() .toJSON(); diff --git a/src/components/FilterResults/__tests__/__snapshots__/FilterResults.test.jsx.snap b/src/components/FilterResults/__tests__/__snapshots__/FilterResults.test.jsx.snap index 38dc3b9..1a359c1 100644 --- a/src/components/FilterResults/__tests__/__snapshots__/FilterResults.test.jsx.snap +++ b/src/components/FilterResults/__tests__/__snapshots__/FilterResults.test.jsx.snap @@ -1,8 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`renders Company Showcase Component correctly 1`] = ` +exports[`renders FilterResults Component correctly 1`] = `
- - 7 - - + className="text-accent mr-1 font-semibold" + /> Results
{ const tree = renderer diff --git a/src/components/filter/Filter.jsx b/src/components/filter/Filter.jsx index 2500840..6b60250 100644 --- a/src/components/filter/Filter.jsx +++ b/src/components/filter/Filter.jsx @@ -1,10 +1,19 @@ import { useEffect, useState } from 'react'; const Filter = ({ setData, filterData }) => { + +// obtaining min and max values for salary range from filterData.js to be set as initial states // + const minSalaryArray = filterData.map(item=>(item.minSalary)) + const minSalaryValue = Math.min(...minSalaryArray) + + const maximumSalaryArray = filterData.map(item=>(item.maxSalary)) + const maxSalaryValue = Math.max(...maximumSalaryArray) + + const [filter, setFilter] = useState({ salary: { - min: '', - max: '', + min: `${minSalaryValue}`, + max: `${maxSalaryValue}`, }, location: '', @@ -37,17 +46,12 @@ const Filter = ({ setData, filterData }) => { useEffect(()=>{ setData( filterData.filter((item)=> { - // console.log(item) - const salaryRange = item.salary.split('-') - const salaryAsNum = salaryRange.map(number => number.substring(1)) - const maxSalary = salaryAsNum.splice(1) - const minSalary = salaryAsNum.splice(salaryAsNum.length-1) - if (minSalary>=filter.salary.min && maxSalary<=filter.salary.max){ - return item - } - return null; - }) - ) + if (item.minSalary>=filter.salary.min && item.minSalary<=filter.salary.max){ + return item + } + return null; + }) + ) },[filter.salary]) diff --git a/src/data/filterData.js b/src/data/filterData.js index a782b79..cda2f37 100644 --- a/src/data/filterData.js +++ b/src/data/filterData.js @@ -3,7 +3,8 @@ export const filterData = [ src: "/assets/filterResults/Murex.png", position: "DevOps Engineer", jobModel: "Remote", - salary: "$1000-$5000", + minSalary:"1000", + maxSalary:"5000", employer: "Murex", jobType: "Full Time", payFreq: "Monthly", @@ -15,7 +16,8 @@ export const filterData = [ src: "/assets/filterResults/Murex.png", position: "DevOps Engineer", jobModel: "Remote", - salary: "$4000-$6000", + minSalary:"4000", + maxSalary:"6000", employer: "Murex", jobType: "Internship", payFreq: "Monthly", @@ -27,7 +29,8 @@ export const filterData = [ src: "/assets/filterResults/EAB.png", position: "Associate Data Scientist", jobModel: "Remote", - salary: "$2500-$4500", + minSalary:"2500", + maxSalary:"4500", employer: "EAB", jobType: "Part Time", payFreq: "Monthly", @@ -39,7 +42,8 @@ export const filterData = [ src: "/assets/filterResults/EAB.png", position: "Data Analyst", jobModel: "Remote", - salary: "$6500-$8000", + minSalary:"6500", + maxSalary:"8000", employer: "EAB", jobType: "Full Time", payFreq: "Monthly", @@ -51,7 +55,8 @@ export const filterData = [ src: "/assets/filterResults/EAB.png", position: "Network Engineer", jobModel: "Remote", - salary: "$5000-$8000", + minSalary:"5000", + maxSalary:"8000", employer: "EAB", jobType: "Full Time", payFreq: "Monthly", @@ -59,28 +64,17 @@ export const filterData = [ location: "Yemen", id: "5", }, - { - src: "/assets/filterResults/EAB.png", - position: "Junior Netwoek Engineer", - jobModel: "Remote", - salary: "$-$", - employer: "EAB", - jobType: "Full Time", - payFreq: "Monthly", - postingDate: "06/05/2021", - location: "Kuwait", - id: "6", - }, { src: "/assets/filterResults/EAB.png", position: "Creative Project Manager", jobModel: "Remote", - salary: "$5000-$6000", + minSalary:"5000", + maxSalary:"6000", employer: "EAB", jobType: "Full Time", payFreq: "Monthly", postingDate: "01/01/2022", location: "Lebanon", - id: "7", + id: "6", }, ];