Merge pull request #169 from sledilnik/no-results-msg

No results msg
sledilnik · Dec 26, 2021 · e89954a · e89954a
2 parents 9d96a5a + a80fafa
commit e89954a
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 1 deletion.
diff --git a/src/components/Doctors/index.js b/src/components/Doctors/index.js
@@ -5,11 +5,14 @@ import { filterContext } from 'context';
 import DoctorCard from 'components/DoctorCard';
 import { useLeafletContext } from 'context/leafletContext';
 import { MAP } from 'const';
+import { t } from 'i18next';
 import L from 'leaflet';
+import { Alert } from '@mui/material';
 import * as Styled from './styles';
 import { MainScrollTop } from '../Shared/ScrollTop';
 import MainMap from './Map';
 import FooterInfoCard from '../Shared/FooterInfo';
+import { CardsList } from '../Shared/Loader';
 
 const { GEO_LOCATION, BOUNDS } = MAP;
 
@@ -53,11 +56,19 @@ const Doctors = function Doctors({ itemsPerPage = 10, useShow }) {
   const center = state?.center ?? MAP.GEO_LOCATION.SL_CENTER;
 
   const areDoctors = Array.isArray(doctors) && doctors.length !== 0;
+  const dataLoading = !Array.isArray(doctors);
+  const noResults = !areDoctors && !dataLoading;
 
   return (
     <Styled.Wrapper show={show}>
       <MainMap className="map" whenCreated={setMap} doctors={doctors} center={center} zoom={zoom} />
       <Styled.WrapperInfinite id="scrollableDiv" className="cards">
+        {noResults && (
+          <Alert sx={{ margin: '24px', borderRadius: '5px' }} severity="info">
+            {t('noResults')}
+          </Alert>
+        )}
+        {dataLoading && <CardsList />}
         <Styled.InfiniteScroll
           id="infiniteScroll"
           dataLength={doctorsPagination?.length ?? 0}
@@ -73,7 +84,7 @@ const Doctors = function Doctors({ itemsPerPage = 10, useShow }) {
             />
           ))}
         </Styled.InfiniteScroll>
-        {areDoctors && <FooterInfoCard />}
+        {!dataLoading && <FooterInfoCard />}
         <MainScrollTop />
       </Styled.WrapperInfinite>
     </Styled.Wrapper>

diff --git a/src/components/Shared/Loader.js b/src/components/Shared/Loader.js
@@ -24,13 +24,18 @@ export const WrapperCenter = styled(Wrapper)(({ theme }) => ({
   },
 }));
 
+export const WrapperCardsList = styled(WrapperCenter)(() => ({
+  width: '100%',
+}));
+
 export const Base = function Base() {
   return (
     <Wrapper>
       <CircularProgress />
     </Wrapper>
   );
 };
+
 export const Center = function Center({ component = 'div' }) {
   return (
     <WrapperCenter component={component}>
@@ -41,6 +46,14 @@ export const Center = function Center({ component = 'div' }) {
   );
 };
 
+export const CardsList = function CardsList({ component = 'div' }) {
+  return (
+    <WrapperCardsList component={component}>
+      <CircularProgress disableShrink />
+    </WrapperCardsList>
+  );
+};
+
 Center.defaultProps = {
   component: 'div',
 };

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -27,6 +27,7 @@
     "filter": "Filter",
     "map": "Map",
     "list": "List",
+    "noResults": "No doctors found based on your search criteria. Check if you have the right doctor type selected.",
     "changedOn": "Changed on: ",
     "headQuotient": "Weighted person quotient",
     "doctorAvailability": "Availability can be lower than 100% for doctors that work part time on preventive programs or in other units (e.g. dentist working with adults and youth).",

diff --git a/src/locales/sl.json b/src/locales/sl.json
@@ -27,6 +27,7 @@
     "filter": "Filter",
     "map": "Zemljevid",
     "list": "Seznam",
+    "noResults": "Noben zdravnik ne ustreza iskalnim pogojem. Preverite če imate označen pravilen tip zdravnika.",
     "changedOn": "Popravek od: ",
     "headQuotient": "Glavarinski količnik",
     "doctorAvailability": "Obseg zaposlitve: delež je lahko nižji od 100 %, ker zdravnik določen del časa dela na preventivnih programih ali na drugih dejavnostih (recimo zobozdravnik za odrasle in mladino).",