From e81b9e88be335c15a2c8a8706d58e333c9c5a934 Mon Sep 17 00:00:00 2001
From: Jaka Daneu <44704999+jalezi@users.noreply.github.com>
Date: Mon, 17 Jan 2022 12:41:44 +0100
Subject: [PATCH] =?UTF-8?q?feat(Router):=20=E2=9C=A8=20dr=20type=20preserv?=
 =?UTF-8?q?ed=20in=20URL?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UPDATE #34
---
 src/components/Filters/ToggleDoctorType.js | 10 +++++--
 src/context/filterContext.js               |  7 ++++-
 src/hooks/index.js                         |  1 +
 src/hooks/useDoctorTypeExactPath.js        | 34 ++++++++++++++++++++++
 src/routes/index.js                        | 15 ++++++++++
 5 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 src/hooks/useDoctorTypeExactPath.js

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 => (
+    <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}