Merge pull request #205 from sledilnik/195-provide-number-of-search-r…

…esults Add number of search results
sledilnik · Jan 8, 2022 · b7e987a · b7e987a
2 parents be991be + 5d62521
commit b7e987a
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 1 deletion.
diff --git a/src/components/Doctors/Map.js b/src/components/Doctors/Map.js
@@ -1,12 +1,17 @@
 import MarkerClusterGroup from 'react-leaflet-markercluster';
 import PropTypes from 'prop-types';
+import { t } from 'i18next';
 import { MAP } from 'const';
+
+import { withErrorBoundary } from 'components/Shared/ErrorBoundary';
 import Leaflet from 'components/Shared/Leaflet';
 import * as Markers from './Markers';
 import MapEvents from './MapEvents';
+
 import 'react-leaflet-markercluster/dist/styles.min.css';
-import { withErrorBoundary } from '../Shared/ErrorBoundary';
+
 import { DoctorPropType } from '../../types';
+import * as Styled from './styles';
 
 const { GEO_LOCATION } = MAP;
 
@@ -60,6 +65,11 @@ function withLeaflet(Component) {
           {markers}
         </MarkerClusterGroup>
         {userLocation && <Markers.User />}
+        {doctors?.length > 0 && (
+          <Styled.MapTotalResults>
+            {t('totalResults', { count: doctors?.length })}
+          </Styled.MapTotalResults>
+        )}
         <MapEvents />
       </Component>
     );

diff --git a/src/components/Doctors/index.js b/src/components/Doctors/index.js
@@ -82,6 +82,11 @@ const Doctors = function Doctors({ itemsPerPage = 10, useShow }) {
           hasMore={doctorsPagination?.length < doctors?.length}
           scrollableTarget="scrollableDiv"
         >
+          {!noResults && !dataLoading && (
+            <Styled.TotalResults>
+              {t('totalResults', { count: doctors?.length ?? 0 })}
+            </Styled.TotalResults>
+          )}
           {doctorsPagination?.map(doctor => (
             <DoctorCard
               key={doctor.key}

diff --git a/src/components/Doctors/styles/index.js b/src/components/Doctors/styles/index.js
@@ -132,3 +132,29 @@ export const InfoCard = styled(Card)(({ theme }) => ({
     },
   },
 }));
+
+export const TotalResults = styled('div')(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  padding: '10px 24px 7px',
+  borderBottom: `1px solid ${theme.customColors.borderLight}`,
+  color: theme.customColors.nickel,
+  fontSize: '0.75rem',
+  lineHeight: '0.75rem',
+}));
+
+export const MapTotalResults = styled('div')(({ theme }) => ({
+  position: 'absolute',
+  zIndex: '800',
+  top: '10px',
+  right: '10px',
+  padding: '5px',
+  backgroundColor: 'white',
+  borderRadius: '2px',
+  border: '2px solid rgba(black,0.2)',
+  backgroundClip: 'padding-box',
+
+  [theme.breakpoints.up('md')]: {
+    display: 'none',
+  },
+}));
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -27,6 +27,8 @@
     "filter": "Filter",
     "map": "Map",
     "list": "List",
+    "totalResults_one": "{{count}} hit",
+    "totalResults_other": "{{count}} hits",
     "noResults": "No doctor found based on your search criteria. Check if you have the right doctor type selected or zoom out the map.",
     "changedOn": "Changed on: ",
     "headQuotient": "Weighted person quotient",

diff --git a/src/locales/sl.json b/src/locales/sl.json
@@ -27,6 +27,10 @@
     "filter": "Filter",
     "map": "Zemljevid",
     "list": "Seznam",
+    "totalResults_one": "{{count}} zadetek",
+    "totalResults_two": "{{count}} zadetka",
+    "totalResults_few": "{{count}} zadetki",
+    "totalResults_other": "{{count}} zadetkov",
     "noResults": "Noben zdravnik ne ustreza iskalnim pogojem. Preverite, če imate označeno pravilno vrsto zdravnika ali razširite pogled na zemljevidu.",
     "changedOn": "Popravek od: ",
     "headQuotient": "Glavarinski količnik",