feat(Router): ✨ dr type preserved in URL

UPDATE #34

src/components/Filters/ToggleDoctorType.js

@@ -4,16 +4,21 @@ 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) {
   return function ToggleDoctorType(props) {
     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',

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('');
 

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';

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 };
+}

src/routes/index.js

@@ -79,15 +79,30 @@ const Router = function Router() {
     />
   ));
 
+  const doctorTypeRoutes = languages.map(lang => (
+    <Route
+      key={`${lang}-dr-type-page`}
+      exact
+      path={`/${lang}/:type`}
+      element={
+        <Suspense fallback={<Loader.Center />}>
+          <Home />
+        </Suspense>
+      }
+    />
+  ));
+
   return (
     <HelmetProvider>
       <Routes>
         <Route exact path="/" element={<Navigate to={`/${language}/`} />} />
         <Route exact path="/faq" element={<Navigate to={`/${language}/faq`} />} />
         <Route exact path="/about" element={<Navigate to={`/${language}/about`} />} />
+
         {homeRoutes}
         {faqRoutes}
         {aboutRoutes}
+        {doctorTypeRoutes}
         {doctorPageRoutes}
         {notFoundRoutes}