diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx index 6dc0f61..815f351 100644 --- a/src/components/Filter/Filter.tsx +++ b/src/components/Filter/Filter.tsx @@ -49,10 +49,6 @@ const Filter = () => { } } }); - - filtersDispatch(actions.addMinWage(String(minSalary))); - filtersDispatch(actions.addMaxWage(String(maxSalary))); - queryDispatch(queryActions.setQuery(buildQueryString(filters))); } }, [filters.technologies, visibleTechCount, isLoaded]); diff --git a/src/components/RecentVacancies/RecentVacancies.tsx b/src/components/RecentVacancies/RecentVacancies.tsx index dd56653..b604977 100644 --- a/src/components/RecentVacancies/RecentVacancies.tsx +++ b/src/components/RecentVacancies/RecentVacancies.tsx @@ -44,6 +44,7 @@ const RecentVacancies = () => { location={data.location} technologies={data.technologies} vacancyRole={data.vacancyRole} + id={data.id} /> ))} diff --git a/src/components/VacancyCard/VacancyCard.test.tsx b/src/components/VacancyCard/VacancyCard.test.tsx index 293f8c4..fd26523 100644 --- a/src/components/VacancyCard/VacancyCard.test.tsx +++ b/src/components/VacancyCard/VacancyCard.test.tsx @@ -1,5 +1,6 @@ import { render, screen } from '@testing-library/react'; import { expect } from '@jest/globals'; +import { BrowserRouter } from 'react-router-dom'; import VacancyCard from './VacancyCard'; describe('VancancyCard component', () => { @@ -7,11 +8,14 @@ describe('VancancyCard component', () => { beforeEach(() => { container = render( - , + + + , ).container; }); diff --git a/src/components/VacancyCard/VacancyCard.tsx b/src/components/VacancyCard/VacancyCard.tsx index fe98145..75056d9 100644 --- a/src/components/VacancyCard/VacancyCard.tsx +++ b/src/components/VacancyCard/VacancyCard.tsx @@ -1,23 +1,33 @@ import BaseCard from '@components/BaseCard'; import Text from '@components/Text'; +import useFilters from '@hooks/useFilters'; import * as S from './styles'; import * as I from '@assets/db.icons'; import useUser from '@hooks/useUser'; +import { actions } from '@contexts/filters'; type props = { location: string; technologies: Technology[]; vacancyRole: string; + id: string; }; -const VacancyCard = ({ location, technologies, vacancyRole }: props) => { +const VacancyCard = ({ location, technologies, vacancyRole, id }: props) => { const { user } = useUser(); + const { filtersDispatch } = useFilters(); const technologyElements = technologies .map((technology, index) => {technology.techName}) .slice(0, 1); + const handleFilter = () => { + filtersDispatch(actions.addId(id)); + filtersDispatch(actions.addLocation(location)); + filtersDispatch(actions.addTechnology(technologies[0].techName)); + }; + return ( @@ -43,7 +53,11 @@ const VacancyCard = ({ location, technologies, vacancyRole }: props) => { fontColor="dark-gray" /> - + {}} + to={user ? '/vacancies' : '/register'} + data-cy="link" + > { cy.mount( <> - + , ); @@ -17,7 +17,7 @@ describe('', () => { cy.mount( <> - + , ); diff --git a/src/components/VacancyCard/styles.ts b/src/components/VacancyCard/styles.ts index 7d2ad70..031aea2 100644 --- a/src/components/VacancyCard/styles.ts +++ b/src/components/VacancyCard/styles.ts @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import { Link as RouterLink } from 'react-router-dom'; export const Card = styled.div` display: flex; @@ -25,7 +26,7 @@ export const Container = styled.div` } `; -export const Link = styled.a` +export const Link = styled(RouterLink)` display: flex; text-decoration: none; `; diff --git a/src/contexts/filters/actions.ts b/src/contexts/filters/actions.ts index 88f8fe9..d2c36fe 100644 --- a/src/contexts/filters/actions.ts +++ b/src/contexts/filters/actions.ts @@ -135,3 +135,17 @@ export const resetFilters = () => { payload: '', }; }; + +export const addId = (id: string) => { + return { + type: 'ADD_ID', + payload: id, + }; +}; + +export const removeId = () => { + return { + type: 'REMOVE_ID', + payload: '', + }; +}; diff --git a/src/contexts/filters/dispatcher.ts b/src/contexts/filters/dispatcher.ts index 1bc67c6..f86048b 100644 --- a/src/contexts/filters/dispatcher.ts +++ b/src/contexts/filters/dispatcher.ts @@ -1,6 +1,7 @@ import { Action } from './actions'; export type Filters = { + id: string; location: string; technologies: string[]; vacancyTypes: string[]; @@ -14,6 +15,7 @@ export type Filters = { }; export const initialState: Filters = { + id: '', location: '', technologies: [], vacancyTypes: [], @@ -129,6 +131,16 @@ export const filtersDispatcher = ( ...state, description: '', }; + case 'ADD_ID': + return { + ...state, + id: action.payload, + }; + case 'REMOVE_ID': + return { + ...state, + id: action.payload, + }; case 'RESET_FILTERS': return initialState; default: diff --git a/src/pages/VacanciesPage/VacanciesPage.tsx b/src/pages/VacanciesPage/VacanciesPage.tsx index 8ffe346..37b58e2 100644 --- a/src/pages/VacanciesPage/VacanciesPage.tsx +++ b/src/pages/VacanciesPage/VacanciesPage.tsx @@ -29,11 +29,7 @@ const VacanciesPage = () => { const [vacancies, vacancyService, vacanciesCount] = useResource(url); - const isLoaded = useFetchResource(vacancyService, [ - query, - currentPage, - filters.technologies, - ]); + const isLoaded = useFetchResource(vacancyService, [query, currentPage]); useEffect(() => { setCurrentPage(1);