Preserve current filter state in URL #34

src/App.js

@@ -3,12 +3,13 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { doctorsContext, filterContext, leafletContext, timestampsContext } from 'context';
 import { Accessibility } from 'components/Shared';
 import Header from 'components/Header';
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
 import { THEME } from 'const';
 import Router from 'routes';
 
 const App = function App() {
   const theme = createTheme(THEME);
+  const { t } = useTranslation();
   return (
     <>
       <CssBaseline />

src/components/DoctorCard/Info/index.js

@@ -1,4 +1,5 @@
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { CardContent, Stack, Typography } from '@mui/material';
 
 import { useLeafletContext } from 'context/leafletContext';
@@ -10,8 +11,10 @@ import * as Shared from '../Shared';
 import { DoctorPropType } from '../../../types';
 
 const Info = function Info({ doctor, handleZoom = () => {}, isMarker = false }) {
-  const { lng } = useParams();
   const { map } = useLeafletContext();
+  const {
+    i18n: { language },
+  } = useTranslation();
   const [type, ageGroup] = doctor.type.split('-');
 
   const navigate = useNavigate();
@@ -20,7 +23,7 @@ const Info = function Info({ doctor, handleZoom = () => {}, isMarker = false })
   const slug = doctor?.nameSlug;
   const instId = doctor?.instId;
 
-  const path = `/${lng}/${drPath}/${slug}/${instId}`;
+  const path = `/${language}/${drPath}/${slug}/${instId}`;
 
   const handleDoctorCard = (event, isReportError) => {
     event.preventDefault();
@@ -29,10 +32,8 @@ const Info = function Info({ doctor, handleZoom = () => {}, isMarker = false })
     navigate(path, {
       state: {
         zoom: map?.getZoom(),
-        center: center ? [center.lat, center.lng] : undefined,
+        center: center ? [center.lat.toFixed(5), center.lng.toFixed(5)] : undefined,
         isReportError,
-        type,
-        ageGroup: ageGroup ?? 'adults',
       },
     });
   };
@@ -60,13 +61,13 @@ const Info = function Info({ doctor, handleZoom = () => {}, isMarker = false })
             <Shared.HeadQuotient
               load={doctor.load}
               note={doctor.note}
-              date={doctor.updatedAt && doctor.formatUpdatedAt(lng)}
+              date={doctor.updatedAt && doctor.formatUpdatedAt(language)}
               accepts={doctor.accepts}
               hasOverride={doctor.acceptsOverride || doctor.note ? true : undefined}
             />
             <Shared.Availability
               availability={doctor.availability}
-              date={doctor.updatedAt && doctor.formatUpdatedAt(lng)}
+              date={doctor.updatedAt && doctor.formatUpdatedAt(language)}
               hasOverride={doctor.availabilityOverride ? true : undefined}
             />
           </Stack>

src/components/DoctorCard/PageInfo/index.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { CardContent, Typography, Stack, Alert, Tooltip } from '@mui/material';
-import { useNavigate, useLocation, useParams } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import IconButton from '@mui/material/IconButton';
@@ -15,16 +15,16 @@ import PhoneLinks from './PhoneLinks';
 import * as Styled from '../styles';
 import * as Shared from '../Shared';
 
-import { AgeGroupTranslate } from '../dicts';
 import { DoctorPropType } from '../../../types';
 
 const PageInfo = function PageInfo({ doctor }) {
-  const { t } = useTranslation();
-  const { searchValue } = useFilter();
+  const {
+    t,
+    i18n: { language },
+  } = useTranslation();
+  const { searchValue, accept } = useFilter();
   const { state } = useLocation();
 
-  const { lng } = useParams();
-
   const [type, ageGroup] = doctor.type.split('-');
 
   const emailText = doctor.email;
@@ -33,15 +33,11 @@ const PageInfo = function PageInfo({ doctor }) {
 
   const navigate = useNavigate();
   const handleBackButton = () => {
-    navigate(`/${lng}/`, {
-      state: {
-        searchValue,
-        zoom: state?.zoom ?? MAP.ZOOM,
-        center: state?.center ?? MAP.GEO_LOCATION.SL_CENTER,
-        type,
-        ageGroup: AgeGroupTranslate[ageGroup] ?? 'adults',
-      },
-    });
+    const zoom = state?.zoom ?? MAP.ZOOM;
+    const center = state?.center ?? MAP.GEO_LOCATION.SL_CENTER;
+    navigate(
+      `/${language}/${doctor.type}/#a-${accept}|l-${zoom}/${center.join('/')}|s-${searchValue}`,
+    );
   };
 
   const [isEditing, setIsEditing] = useState(isReportError);
@@ -97,13 +93,13 @@ const PageInfo = function PageInfo({ doctor }) {
             <Shared.HeadQuotient
               load={doctor.load}
               note={doctor.note}
-              date={doctor.updatedAt && doctor.formatUpdatedAt(lng)}
+              date={doctor.updatedAt && doctor.formatUpdatedAt(language)}
               accepts={doctor.accepts}
               hasOverride={doctor.acceptsOverride || doctor.note ? true : undefined}
             />
             <Shared.Availability
               availability={doctor.availability}
-              date={doctor.updatedAt && doctor.formatUpdatedAt(lng)}
+              date={doctor.updatedAt && doctor.formatUpdatedAt(language)}
               hasOverride={doctor.availabilityOverride ? true : undefined}
             />
           </Stack>
@@ -164,7 +160,7 @@ const PageInfo = function PageInfo({ doctor }) {
             <Tooltip
               title={
                 <Shared.Tooltip.Updated
-                  date={doctor.formatUpdatedAt(lng)}
+                  date={doctor.formatUpdatedAt(language)}
                   note={doctor.note}
                   acceptsOverride={doctor.acceptsOverride}
                   acceptsZZZS={doctor.acceptsZZZS}
@@ -176,7 +172,7 @@ const PageInfo = function PageInfo({ doctor }) {
               enterTouchDelay={50}
             >
               <Styled.PageInfo.Override direction="row" alignItems="center" spacing={1}>
-                <Icons.Icon name="Edit" /> {doctor.formatUpdatedAt(lng)}
+                <Icons.Icon name="Edit" /> {doctor.formatUpdatedAt(language)}
               </Styled.PageInfo.Override>
             </Tooltip>
           )}

src/components/DoctorCard/ReportError/index.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { CardContent, Typography, Stack, Button, Alert } from '@mui/material';
 import { useTranslation } from 'react-i18next';
@@ -10,19 +10,21 @@ import { SelectEdit, TextareaEdit } from './InlineEdit';
 import { toPercent } from '../utils';
 
 const ReportError = function ReportError({ doctorFormData, setIsEditing, setMessage }) {
-  const { t } = useTranslation();
-  const { lng } = useParams();
+  const {
+    t,
+    i18n: { language },
+  } = useTranslation();
   const navigate = useNavigate();
   const meta = [{ name: 'robots', content: 'noindex' }];
 
   const accepts = doctorFormData.accepts === 'y';
   const [type, ageGroup] = doctorFormData.type.split('-');
-  const availabilityText = toPercent(doctorFormData.availability, lng);
+  const availabilityText = toPercent(doctorFormData.availability, language);
 
   const drPath = doctorFormData.type;
   const slug = slugify(doctorFormData?.name?.toLowerCase());
   const { instId } = doctorFormData;
-  const path = `/${lng}/${drPath}/${slug}/${instId}`;
+  const path = `/${language}/${drPath}/${slug}/${instId}`;
 
   const [inputAddress, setInputAddress] = useState(doctorFormData.fullAddress);
   const [inputAccepts, setInputAccepts] = useState(accepts ? 'y' : 'n');
@@ -177,7 +179,7 @@ const ReportError = function ReportError({ doctorFormData, setIsEditing, setMess
 
   return (
     <>
-      <SEO.Dynamic title={t('SEO.title.home')} meta={meta} lang={lng} />
+      <SEO.Dynamic title={t('SEO.title.home')} meta={meta} lang={language} />
       <CardContent
         sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
       >

src/components/DoctorCard/Shared/Accepts.js

@@ -1,9 +1,11 @@
 import * as Icons from 'components/Shared/Icons';
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import * as Styled from '../styles';
 
 const Accepts = function Accepts({ accepts }) {
+  const { t } = useTranslation();
+
   const iconName = accepts === 'y' ? 'CheckGreen' : 'BanRed';
   const text = accepts === 'y' ? t('accepts').toUpperCase() : t('rejects').toUpperCase();
 

src/components/DoctorCard/Shared/Tooltips.js

@@ -5,7 +5,6 @@ import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import { useTranslation } from 'react-i18next';
 import { styled } from '@mui/material/styles';
-import { useParams } from 'react-router-dom';
 import { toPercent } from '../utils';
 
 export const HeadQuotient = function HeadQuotient({ load, note, date, hasOverride }) {
@@ -78,15 +77,16 @@ export const Updated = function Updated({
   availabilityZZZS,
   note,
 }) {
-  const { t } = useTranslation();
-
-  const { lng } = useParams();
+  const {
+    t,
+    i18n: { language },
+  } = useTranslation();
 
   const acceptsOverrideText = acceptsOverride === 'y' ? t('accepts') : t('rejects');
   const acceptsZZZSText = acceptsZZZS === 'y' ? t('accepts') : t('rejects');
 
-  const availabilityZZZSText = toPercent(availabilityZZZS, lng);
-  const availabilityOverrideText = toPercent(availabilityOverride, lng);
+  const availabilityZZZSText = toPercent(availabilityZZZS, language);
+  const availabilityOverrideText = toPercent(availabilityOverride, language);
 
   return (
     <Stack sx={{ textAlign: 'left' }}>

src/components/DoctorCard/Shared/index.js

@@ -1,4 +1,3 @@
-import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import Tooltip from '@mui/material/Tooltip';
 
@@ -67,7 +66,7 @@ DoubleChip.defaultProps = {
 
 DoubleChip.propTypes = {
   type: PropTypes.string.isRequired,
-  ageGroup: PropTypes.oneOf([undefined, 'students', 'youth']),
+  ageGroup: PropTypes.oneOf([undefined, 's', 'y']),
 };
 
 export const HeadQuotient = function HeadQuotient({ load, note, date, accepts, hasOverride }) {
@@ -99,8 +98,10 @@ HeadQuotient.propTypes = {
 };
 
 export const Availability = function Availability({ date, availability, hasOverride }) {
-  const { lng } = useParams();
-  const availabilityText = toPercent(availability, lng);
+  const {
+    i18n: { language },
+  } = useTranslation();
+  const availabilityText = toPercent(availability, language);
 
   return (
     <Tooltip

src/components/DoctorCard/index.js

@@ -24,7 +24,7 @@ const DoctorCard = function DoctorCard({ doctor, isPage = false, handleRoomIconC
 
   if (isPage) {
     return (
-      <Styled.PageInfoCard id={id} accepts={accepts.toString()}>
+      <Styled.PageInfoCard id={id} accepts={accepts ? 1 : 0}>
         <Styled.PageInfoBox id="doctor-box">
           <PageInfo doctor={doctor} handleZoom={handleZoom} />
           <CardContent>
@@ -38,7 +38,7 @@ const DoctorCard = function DoctorCard({ doctor, isPage = false, handleRoomIconC
   }
 
   return (
-    <Styled.InfoCard id={id} accepts={accepts.toString()}>
+    <Styled.InfoCard id={id} accepts={accepts ? 1 : 0}>
       <Info doctor={doctor} handleZoom={handleRoomIconClick} />
     </Styled.InfoCard>
   );

src/components/DoctorCard/styles/index.js

@@ -17,7 +17,7 @@ const Card = styled(MuiCard)(() => ({
 
 export const PageInfoCard = styled(Card)(({ theme, accepts }) => {
   const { customColors } = theme;
-  const acceptsColor = accepts === 'true' ? customColors.success : customColors.danger;
+  const acceptsColor = accepts ? customColors.success : customColors.danger;
   return {
     width: '100%',
     borderRadius: '5px',
@@ -102,7 +102,7 @@ export const PageInfoBox = styled(Stack)(({ theme }) => ({
 }));
 export const InfoCard = styled(Card)(({ theme, accepts }) => {
   const { customColors } = theme;
-  const acceptsColor = accepts === 'true' ? customColors.success : customColors.danger;
+  const acceptsColor = accepts ? customColors.success : customColors.danger;
 
   return {
     justifySelf: 'center',

src/components/Doctors/Map.js

@@ -1,6 +1,6 @@
 import MarkerClusterGroup from 'react-leaflet-markercluster';
 import PropTypes from 'prop-types';
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
 import { MAP } from 'const';
 
 import { withErrorBoundary } from 'components/Shared/ErrorBoundary';
@@ -15,11 +15,10 @@ import * as Styled from './styles';
 
 const { GEO_LOCATION } = MAP;
 
-const createClusterCustomIcon = function (cluster) {
-  let n;
+const createClusterCustomIcon = function createClusterCustomIcon(cluster) {
   let acceptsCnt = 0;
   // eslint-disable-next-line no-restricted-syntax
-  for (n in cluster.getAllChildMarkers()) {
+  for (const n in cluster.getAllChildMarkers()) {
     if (Object.prototype.hasOwnProperty.call(cluster.getAllChildMarkers(), n)) {
       acceptsCnt += cluster.getAllChildMarkers()[n].options.accepts === 'y' ? 1 : 0;
     }
@@ -50,6 +49,8 @@ function withLeaflet(Component) {
     userLocation = false,
     ...other
   }) {
+    const { t } = useTranslation();
+
     const markers = doctors?.map(doctor => <Markers.Doctor key={doctor.key} doctor={doctor} />);
     const injectedProps = {
       center,

src/components/Doctors/MapEvents.js

@@ -1,9 +1,12 @@
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useMapEvents } from 'react-leaflet';
 import { useFilter } from 'context/filterContext';
-import { filterBySearchValueInMapBounds } from '../../utils';
+import { filterBySearchValueInMapBounds, reduceHash } from 'utils';
 
 const MapEvents = function MapEvents() {
   const { allDoctors, setDoctors, searchValue } = useFilter();
+  const location = useLocation();
+  const navigate = useNavigate();
 
   const map = useMapEvents({
     moveend() {
@@ -16,6 +19,24 @@ const MapEvents = function MapEvents() {
         searchValue,
       });
       setDoctors(mapDoctors);
+      const newZoom = map.getZoom();
+      const newCenter = map.getCenter();
+
+      const oldHash = location.hash.replace('#', '').split('|');
+
+      const oldHashValues = oldHash?.reduce(reduceHash, {
+        search: null,
+        loc: null,
+        zoom: null,
+        accepts: null,
+      });
+
+      const hash = `a-${oldHashValues.accepts}|l-${newZoom}/${[
+        newCenter.lat.toFixed(5),
+        newCenter.lng.toFixed(5),
+      ].join('/')}|s-${oldHashValues.search}`;
+
+      navigate(`./#${hash}`, { replace: true });
     },
   });
   return null;

src/components/Doctors/Markers.js

@@ -3,14 +3,15 @@ import { useMap } from 'react-leaflet';
 import { useTheme } from '@mui/material/styles';
 
 import { Markers } from 'components/Shared/Leaflet';
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
 import * as Styled from './styles';
 import Info from '../DoctorCard/Info';
 import { DoctorPropType } from '../../types';
 
 export const User = function User() {
   const [position, setPosition] = useState(null);
   const map = useMap();
+  const { t } = useTranslation();
 
   useEffect(() => {
     map.locate().on('locationfound', e => {