Содержание
Обзор: Все представления и функциональность, связанные с работой, все вызываемые функции исходят от jobReducer.
Страница маршрута задания
внутри routes > job > job-page.tsx
импорты, которые помогают с компонентами для рендеринга и функциями для вызова. При монтировании я получаю все задания. Я обрабатываю состояния поиска и фильтрации, используя searchInput, и filteredData.
searchItems — фильтрует задания по поисковому запросу и устанавливает результаты в filteredData. Если поиск не проводился, filteredData устанавливается в значение по умолчанию jobs.
import { useEffect, useState } from 'react';
import BeatLoader from 'react-spinners/BeatLoader';
import { getPostedJobs } from '../../app/features/job/jobSlice';
import { JobData } from '../../app/features/job/jobTypes';
import { useAppDispatch, useAppSelector } from '../../app/hooks';
import Job from '../../components/job/job.component';
const JobsPage = () => {
const dispatch = useAppDispatch();
const { jobs, isLoading } = useAppSelector((state) => state.job);
const [searchInput, setSearchInput] = useState<string>('');
const [filteredData, setfilteredData] = useState<JobData[]>([]);
useEffect(() => {
dispatch(getPostedJobs());
}, []);
const searchItems = (value: string) => {
setSearchInput(value);
if (searchInput !== '') {
const filtered = jobs.filter((item) => {
return Object.values(item)
.join('')
.toLowerCase()
.includes(searchInput.toLowerCase());
});
setfilteredData(filtered);
} else {
setfilteredData(jobs);
}
};
return ({/* removed for simplicity */});
};
export default JobsPage;
UI
В двух словах, это отображение всех вакансий со строкой поиска. Поиск по названию вакансии, а также по местоположению покажет отфильтрованные результаты в компоненте Job.
const JobsPage = () => {
{/* removed for simplicity */}
return (
<>
{isLoading ? (
<div className="text-center p-20">
<BeatLoader color="#ffffff" />
</div>
) : (
<>
<div className="flex justify-center pt-20">
<div className="mb-3 w-1/2">
<div className="input-group relative flex items-stretch w-full mb-4">
<input
value={searchInput}
onChange={(e) => searchItems(e.target.value)}
type="search"
className="form-control relative flex-auto min-w-0 block w-full px-5 py-3 text-base font-normal font-color secondary-bg-color bg-clip-padding border border-solid border-gray-300 rounded-full transition ease-in-out m-0 focus:text-slate-200 focus:secondary-bg-color focus:border-indigo-700 focus:outline-none"
placeholder="Search for a job..."
aria-label="Search"
aria-describedby="button-addon2"
/>
</div>
</div>
</div>
<section className="text-gray-600 body-font overflow-hidden">
<div className="container px-5 py-24 mx-auto">
<div className="-my-8 divide-y-2 divide-gray-700">
{searchInput.length
? filteredData.map((job, index) => {
return <Job job={job} key={index} />;
})
: jobs.map((job, index) => {
return <Job job={job} key={index} />;
})}
</div>
</div>
</section>
</>
)}
</>
);
};
export default JobsPage;
Скриншоты
- без фильтрации
- когда фильтруется
внутри routes > job > job-detail.tsx
импорты, которые помогают с функциями для вызова. При монтировании я получаю одно задание по id, который я получаю из useParams. Я разбираю результат и устанавливаю его в локальное состояние jobData.
import { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import BeatLoader from 'react-spinners/BeatLoader';
import { getPostedJobById } from '../../app/features/job/jobSlice';
import { JobData } from '../../app/features/job/jobTypes';
import { useAppDispatch, useAppSelector } from '../../app/hooks';
const JobDetail = () => {
const { id } = useParams();
const [jobData, setjobData] = useState<JobData>({} as JobData);
const { isLoading } = useAppSelector((state) => state.job);
const dispatch = useAppDispatch();
useEffect(() => {
dispatch(getPostedJobById(id))
.unwrap()
.then((val) => {
setjobData(JSON.parse(val));
});
}, [dispatch, id]);
return ( {/* removed for simplicity */} );
};
export default JobDetail;
UI
В двух словах, это отображение деталей задания.
const JobDetail = () => {
{/* removed for simplicity */}
return (
<>
{isLoading ? (
<BeatLoader />
) : (
<>
<section style={{ backgroundColor: '#252731' }}>
<div className="md:px-12 lg:px-24 max-w-7xl relative items-center w-full px-5 py-20 mx-auto">
<div className="mx-auto flex flex-col w-full max-w-lg text-center">
<p className="mb-5 font-medium text-3xl text-white">
{jobData.position}
</p>
<div>
<span className="font-color">
{jobData.location} - {jobData.salary}
</span>
</div>
</div>
</div>
</section>
<section>
<div className="divide-y divide-gray-700">
<section className="text-gray-600 body-font mt-2">
<div className="container px-5 py-20 mx-auto">
<div className="flex flex-col w-full mx-auto">
<div className="w-full mx-auto">
<h2 className="xs:text-3xl text-2xl my-5 font-bold">
Job Description
</h2>
<div>
<p className="font-color">{jobData.description}</p>
</div>
</div>
</div>
</div>
</section>
<section className="text-gray-600 body-font mt-2">
<div className="container px-5 py-20 mx-auto">
<div className="flex flex-col w-full mx-auto">
<div className="w-full mx-auto">
<h2 className="xs:text-3xl text-2xl my-5 font-bold">
Job-Type
</h2>
<div>
<p className="font-color">{jobData.jobType}</p>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
</>
)}
</>
);
};
export default JobDetail;
Скриншот
Компонент задания
внутри components > job > job.component.tsx
Я создал вспомогательную функцию truncateString для слишком длинного текста. Если текст достигает максимальной длины, он показывает ....
Я получаю данные о работе из реквизита, так как я использую typescript, я определил тип данных реквизита, в моем случае JobData.
import React from 'react';
import { Link } from 'react-router-dom';
import { JobData } from '../../app/features/job/jobTypes';
import { truncateString } from '../../utils/truncateString';
interface JobProps {
job: JobData;
}
UI
Карточка вакансии со ссылками для просмотра подробностей, подачи заявки на вакансию, а также для просмотра компании, которая ее разместила.
const Job: React.FC<JobProps> = ({ job }) => {
return (
<div className="py-8 flex flex-wrap md:flex-nowrap">
<div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
<span className="font-semibold title-font text-indigo-500">
{job.companyName.toUpperCase()}
</span>
<span className="mt-1 font-color text-sm">{job.datePosted}</span>
</div>
<div className="md:flex-grow">
<h2 className="text-2xl font-medium text-white title-font mb-2">
{job.position}{' '}
<span className="text-indigo-500 text-sm">
({job.location}) - ({job.jobType})
</span>
</h2>
<p className="leading-relaxed font-color max-w-3xl">
{truncateString(job.description, 250)}
</p>
<a
href={job.applyUrl}
className="text-indigo-500 inline-flex items-center mt-4 mr-4"
>
APPLY NOW
<svg
className="w-4 h-4 ml-2"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
<Link
to={`job/${job.id}`}
className="text-indigo-500 inline-flex items-center mt-4 mr-3"
>
VIEW JOB
<svg
className="w-4 h-4 ml-2"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</Link>
<Link
to={`company/${job.id}`}
className="text-indigo-500 inline-flex items-center mt-4"
>
VIEW COMPANY
<svg
className="w-4 h-4 ml-2"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</Link>
</div>
</div>
);
};
export default Job;
Это все для UI/Job части проекта, следите за новостями!