From 09c54983fc2268ab2e556f93e9149726f35e627a Mon Sep 17 00:00:00 2001
From: Jaka Daneu <44704999+jalezi@users.noreply.github.com>
Date: Wed, 15 Dec 2021 01:31:38 +0100
Subject: [PATCH 1/2] =?UTF-8?q?fix(Doctors):=20=F0=9F=9A=B8=20smaller=20zo?=
=?UTF-8?q?om=20on=20mobile=20#96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Doctors/index.js | 12 ++++++++++--
src/const/index.js | 3 ++-
2 files changed, 12 insertions(+), 3 deletions(-)
diff --git a/src/components/Doctors/index.js b/src/components/Doctors/index.js
index 239e74c3..0dec035f 100644
--- a/src/components/Doctors/index.js
+++ b/src/components/Doctors/index.js
@@ -1,5 +1,8 @@
import { useEffect, useMemo, useState } from 'react';
import { useLocation } from 'react-router-dom';
+import { useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import PropTypes from 'prop-types';
import { filterContext } from 'context';
import DoctorCard from 'components/DoctorCard';
@@ -46,12 +49,17 @@ const Doctors = function Doctors({ itemsPerPage = 10 }) {
map.flyTo([lat, lon], MAP.MAX_ZOOM);
};
- const zoom = state?.zoom ?? MAP.ZOOM;
+ const theme = useTheme();
+ const matches = useMediaQuery(theme.breakpoints.up('sm'));
+
+ const breakpointDefaultZoom = matches ? MAP.ZOOM : MAP.ZOOM_BELOW_SMALL;
+
+ const zoom = state?.zoom ?? breakpointDefaultZoom;
const center = state?.center ?? MAP.GEO_LOCATION.SL_CENTER;
return (
<Styled.Wrapper>
- <MainMap whenCreated={setMap} doctors={doctors} center={center} zoom={zoom} />
+ <MainMap key={matches} whenCreated={setMap} doctors={doctors} center={center} zoom={zoom} />
<Styled.WrapperInfinite id="scrollableDiv">
<Styled.InfiniteScroll
id="infiniteScroll"
diff --git a/src/const/index.js b/src/const/index.js
index cd7ed3be..e1f3048d 100644
--- a/src/const/index.js
+++ b/src/const/index.js
@@ -5,6 +5,7 @@ export * as SIZES from './sizes';
export * as CSV_URL from './csvURL';
export { default as THEME } from './theme';
+const ZOOM_BELOW_SMALL = 7;
const ZOOM = 8;
const MIN_ZOOM = 6;
const MAX_ZOOM = 16;
@@ -21,4 +22,4 @@ const BOUNDS = {
},
};
-export const MAP = { ZOOM, MIN_ZOOM, MAX_ZOOM, GEO_LOCATION, BOUNDS };
+export const MAP = { ZOOM, ZOOM_BELOW_SMALL, MIN_ZOOM, MAX_ZOOM, GEO_LOCATION, BOUNDS };
From f04d4b27c7728d963542d3d493db28c34de10586 Mon Sep 17 00:00:00 2001
From: Jaka Daneu <44704999+jalezi@users.noreply.github.com>
Date: Wed, 15 Dec 2021 01:35:57 +0100
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=F0=9F=9A=A8=20add=20prop-types=20to?=
=?UTF-8?q?=20Doctors=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Doctors/index.js | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/src/components/Doctors/index.js b/src/components/Doctors/index.js
index 0dec035f..69128607 100644
--- a/src/components/Doctors/index.js
+++ b/src/components/Doctors/index.js
@@ -82,6 +82,14 @@ const Doctors = function Doctors({ itemsPerPage = 10 }) {
);
};
+Doctors.defaultProps = {
+ itemsPerPage: 10,
+};
+
+Doctors.propTypes = {
+ itemsPerPage: PropTypes.number,
+};
+
export default Doctors;
export function getCenter(doctors) {