diff --git a/src/components/Filters/ToggleDoctorType.js b/src/components/Filters/ToggleDoctorType.js index d5e38d0d..b93e00f0 100644 --- a/src/components/Filters/ToggleDoctorType.js +++ b/src/components/Filters/ToggleDoctorType.js @@ -4,6 +4,9 @@ import { useFilter } from 'context/filterContext'; import { useTranslation } from 'react-i18next'; import { useEffect, useState } from 'react'; import { useLocation } from 'react-router'; + +import { useDoctorTypeExactPath } from 'hooks'; + import { IconToggleButton } from './Shared'; function withToggleGroup(Component) { @@ -11,9 +14,11 @@ function withToggleGroup(Component) { const { state } = useLocation(); const { t } = useTranslation(); + const { drType: drTypeFromPath, ageGroup: ageGroupFromPath } = useDoctorTypeExactPath(); + const { type: stateType, ageGroup: stateAgeGroup } = state ?? { - type: 'gp', - ageGroup: 'adults', + type: drTypeFromPath ?? 'gp', + ageGroup: ageGroupFromPath ?? 'adults', }; const { doctorType, setDoctorType } = useFilter(); @@ -34,6 +39,7 @@ function withToggleGroup(Component) { }; useEffect(() => { + // TODO refactor; maybe is not needed at all; we have age groups only for dentists const typeTranslate = { gp_adults: 'gp', gp_youth: 'gp', diff --git a/src/context/filterContext.js b/src/context/filterContext.js index 8b1ecb2f..e5da753b 100644 --- a/src/context/filterContext.js +++ b/src/context/filterContext.js @@ -1,4 +1,7 @@ import { createContext, useCallback, useContext, useState, useEffect, useMemo } from 'react'; + +import { useDoctorTypeExactPath } from 'hooks'; + import { filterBySearchValueInMapBounds } from '../utils'; import { useDoctors } from './doctorsContext'; import { useLeafletContext } from './leafletContext'; @@ -12,7 +15,9 @@ const FilterProvider = function FilterProvider({ children }) { const { map } = useLeafletContext(); const { doctors: _doctors } = useDoctors(); - const [doctorType, setDoctorType] = useState('gp'); + const { type } = useDoctorTypeExactPath(); + + const [doctorType, setDoctorType] = useState(type ?? 'gp'); const [accept, setAccept] = useState('vsi'); const [searchValue, setSearchValue] = useState(''); diff --git a/src/hooks/index.js b/src/hooks/index.js index 6359d5ce..a66c5114 100644 --- a/src/hooks/index.js +++ b/src/hooks/index.js @@ -3,3 +3,4 @@ export { default as useTimeout } from './useTimeout'; export { default as useDebounce } from './useDebounce'; export { default as useGeoLocation } from './useGeoLocation'; export { default as useEventListener } from './useEventListener'; +export { default as useDoctorTypeExactPath } from './useDoctorTypeExactPath'; diff --git a/src/hooks/useDoctorTypeExactPath.js b/src/hooks/useDoctorTypeExactPath.js new file mode 100644 index 00000000..4f6c8059 --- /dev/null +++ b/src/hooks/useDoctorTypeExactPath.js @@ -0,0 +1,34 @@ +import { useTranslation } from 'react-i18next'; +import { useLocation, matchPath } from 'react-router-dom'; + +import { DOCTORS } from 'const'; +import { useState } from 'react'; + +const AGE_GROUP_TRANLATE = { + gp: 'adults', + ped: 'youth', + gyn: 'adults', + den: 'adults', + 'den-y': 'youth', + 'den-s': 'students', +}; + +export default function useDoctorExactPath() { + const { + i18n: { languages }, + } = useTranslation(); + const location = useLocation(); + + const typePathObj = languages + .map(lang => matchPath(`/${lang}/:type`, location.pathname)) + .filter(paramKey => Boolean(paramKey))?.[0]; + + const type = typePathObj?.params?.type; + + const isValidPath = DOCTORS.TYPES.includes(type); + const [path] = useState(isValidPath ? type : null); + const [drType] = useState(isValidPath ? type.split('-')[0] : null); + const [ageGroup] = useState(isValidPath ? AGE_GROUP_TRANLATE[path] : null); + + return { pathObj: typePathObj, type: path, drType, ageGroup, isValidPath }; +} diff --git a/src/routes/index.js b/src/routes/index.js index 8d1d3c8d..4352e2cd 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -79,15 +79,30 @@ const Router = function Router() { /> )); + const doctorTypeRoutes = languages.map(lang => ( + }> + + + } + /> + )); + return ( } /> } /> } /> + {homeRoutes} {faqRoutes} {aboutRoutes} + {doctorTypeRoutes} {doctorPageRoutes} {notFoundRoutes}