diff --git a/src/components/Doctors/index.js b/src/components/Doctors/index.js index e66a1e12..ed0bf657 100644 --- 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 ( + {noResults && ( + + {t('noResults')} + + )} + {dataLoading && } ))} - {areDoctors && } + {!dataLoading && } diff --git a/src/components/Shared/Loader.js b/src/components/Shared/Loader.js index 1f297c12..a00c1d57 100644 --- a/src/components/Shared/Loader.js +++ b/src/components/Shared/Loader.js @@ -24,6 +24,10 @@ export const WrapperCenter = styled(Wrapper)(({ theme }) => ({ }, })); +export const WrapperCardsList = styled(WrapperCenter)(() => ({ + width: '100%', +})); + export const Base = function Base() { return ( @@ -31,6 +35,7 @@ export const Base = function Base() { ); }; + export const Center = function Center({ component = 'div' }) { return ( @@ -41,6 +46,14 @@ export const Center = function Center({ component = 'div' }) { ); }; +export const CardsList = function CardsList({ component = 'div' }) { + return ( + + + + ); +}; + Center.defaultProps = { component: 'div', }; diff --git a/src/locales/en.json b/src/locales/en.json index 6e36ea83..4c42126d 100644 --- 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 index cd4fb069..98e4effe 100644 --- 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).",