diff --git a/src/components/DoctorCard/index.js b/src/components/DoctorCard/index.js index 2feda124..79ea8fc2 100644 --- a/src/components/DoctorCard/index.js +++ b/src/components/DoctorCard/index.js @@ -1,4 +1,5 @@ import { memo } from 'react'; +import slugify from 'slugify'; import CardContent from '@mui/material/CardContent'; import CardMedia from '@mui/material/CardMedia'; @@ -17,9 +18,11 @@ const DoctorCard = function DoctorCard({ doctor, isPage = false, isReportError } map.flyTo([lat, lon], 13); }; + const id = `${doctor.type}-${slugify(doctor.name).toLowerCase()}`; + if (isPage) { return ( - + @@ -33,11 +36,11 @@ const DoctorCard = function DoctorCard({ doctor, isPage = false, isReportError } } return ( - + ); }; -const propsAreEqual = (prevProps, nextProps) => prevProps.doctor.id === nextProps.doctor.id; +const propsAreEqual = (prevProps, nextProps) => prevProps.doctor.key === nextProps.doctor.key; export default memo(DoctorCard, propsAreEqual); diff --git a/src/components/Doctors/Map.js b/src/components/Doctors/Map.js index 2c49f6fd..24ab2a40 100644 --- a/src/components/Doctors/Map.js +++ b/src/components/Doctors/Map.js @@ -18,7 +18,7 @@ function withLeaflet(Component) { userLocation = false, ...other }) { - const markers = doctors?.map(doctor => ); + const markers = doctors?.map(doctor => ); const injectedProps = { center, zoom, diff --git a/src/components/Doctors/Markers.js b/src/components/Doctors/Markers.js index 26ef34fd..dd342bf0 100644 --- a/src/components/Doctors/Markers.js +++ b/src/components/Doctors/Markers.js @@ -40,7 +40,7 @@ const PopUpData = function PopUpData({ doctor }) { ); }; -const areEqual = (prevProps, nextProps) => prevProps.doctor.id === nextProps.doctor.id; +const areEqual = (prevProps, nextProps) => prevProps.doctor.key === nextProps.doctor.key; export const Doctor = memo(({ doctor }) => { const ref = createRef(null); const theme = useTheme(); diff --git a/src/context/doctorsContext.js b/src/context/doctorsContext.js index a208c70d..afee2521 100644 --- a/src/context/doctorsContext.js +++ b/src/context/doctorsContext.js @@ -31,10 +31,17 @@ const DoctorsProvider = function DoctorsProvider({ children }) { useEffect(() => { if (doctorsFetched) { const doctorsDict = fromArrayWithHeader(doctorsRequest.parsed); - const institutionsDict = fromArrayWithHeader(institutionsRequest.parsed); - const typesDict = fromArrayWithHeader(doctorTypesRequest.parsed); + const institutionsDict = fromArrayWithHeader(institutionsRequest.parsed, 'id_inst'); + const typesDict = fromArrayWithHeader(doctorTypesRequest.parsed, 'id'); - setDoctors(createDoctors(doctorsDict, institutionsDict, typesDict)); + setDoctors( + createDoctors({ + doctorsDict, + institutionsDict, + typesDict, + keys: { instKey: 'id_inst', typeKey: 'type' }, + }), + ); setDicts({ doctors: doctorsDict, institutions: institutionsDict, types: typesDict }); } }, [ diff --git a/src/services/doctors.js b/src/services/doctors.js index fccad8b8..3aea718e 100644 --- a/src/services/doctors.js +++ b/src/services/doctors.js @@ -1,5 +1,4 @@ import { t } from 'i18next'; -import { v4 as uuidv4 } from 'uuid'; const trimString = str => str.replace(/\s+/g, ' ').trim(); @@ -37,15 +36,11 @@ export function createDoctor(doctor, type, institution) { post: _post, }; - const uuid = uuidv4(); const { availability, load } = doctor; return Object.freeze({ get key() { - return uuid; - }, - get id() { - return doctor.id; + return doctor.key; }, get type() { return doctor.type; @@ -88,19 +83,24 @@ export function createDoctor(doctor, type, institution) { }); } -export default function createDoctors(doctorsDict, institutionsDict, typesDict) { +export default function createDoctors({ + doctorsDict, + institutionsDict, + typesDict, + keys = { instKey: 'id_inst', typesKey: 'type' }, +}) { + const { instKey, typeKey } = keys; + const doctors = Object.entries(doctorsDict).reduce((acc, [doctorId, doctorData]) => { const doctor = createDoctor( doctorData, - typesDict[doctorData.type], - institutionsDict[doctorData.id_inst], + typesDict[doctorData[typeKey]], + institutionsDict[doctorData[instKey]], ); acc[doctorId] = doctor; return acc; }, {}); - const getById = id => doctors[`${id}`]; - const doctorValues = Object.values(doctors); const doctorsValues = Intl.Collator ? doctorValues.sort((a, b) => new Intl.Collator('sl').compare(a.name, b.name)) @@ -125,7 +125,6 @@ export default function createDoctors(doctorsDict, institutionsDict, typesDict) return Object.freeze({ all: doctorsValues, - getById, types, filterByType, typesDict, diff --git a/src/utils/index.js b/src/utils/index.js index ddd5e7d6..1766d188 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,7 +1,14 @@ import L from 'leaflet'; +import { v4 as uuidv4 } from 'uuid'; -export function fromArrayWithHeader(arr = []) { +export function fromArrayWithHeader(arr = [], uniqueFieldName = '') { const header = arr[0]; + + // it's dirty but quick fix while doctor's id might to be available in the future. + const idIndex = header.findIndex(item => item === uniqueFieldName); + if (uniqueFieldName && idIndex === -1) + throw new Error(`Field "${uniqueFieldName}" does not exist!`); + const data = arr.slice(1, -1); return data.reduce((acc1, dataItem) => { const type = dataItem.reduce( @@ -11,9 +18,15 @@ export function fromArrayWithHeader(arr = []) { }), {}, ); + + const key = idIndex !== -1 ? dataItem[idIndex] : uuidv4(); + + if (idIndex === -1) { + type.key = key; + } return { ...acc1, - [dataItem[0]]: type, + [key]: type, }; }, {}); }