feat: 👽️ remove doctor id

doctor.csv will no longer have "id" field

BREAKING CHANGE: #115

Author: jalezi

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 (
-      <Styled.PageInfoCard id={doctor.id} accepts={accepts.toString()}>
+      <Styled.PageInfoCard id={id} accepts={accepts.toString()}>
         <Styled.PageInfoBox id="doctor-box">
           <PageInfo doctor={doctor} handleZoom={handleZoom} isReportError={isReportError} />
           <CardContent>
@@ -33,11 +36,11 @@ const DoctorCard = function DoctorCard({ doctor, isPage = false, isReportError }
   }
 
   return (
-    <Styled.InfoCard id={doctor.id} accepts={accepts.toString()}>
+    <Styled.InfoCard id={id} accepts={accepts.toString()}>
       <Info doctor={doctor} handleZoom={handleZoom} />
     </Styled.InfoCard>
   );
 };
 
-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);

src/components/Doctors/Map.js

@@ -18,7 +18,7 @@ function withLeaflet(Component) {
     userLocation = false,
     ...other
   }) {
-    const markers = doctors?.map(doctor => <Markers.Doctor key={doctor.id} doctor={doctor} />);
+    const markers = doctors?.map(doctor => <Markers.Doctor key={doctor.key} doctor={doctor} />);
     const injectedProps = {
       center,
       zoom,

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();

src/services/doctors.js

@@ -44,9 +44,6 @@ export function createDoctor(doctor, type, institution) {
     get key() {
       return uuid;
     },
-    get id() {
-      return doctor.id;
-    },
     get type() {
       return doctor.type;
     },
@@ -99,8 +96,6 @@ export default function createDoctors(doctorsDict, institutionsDict, typesDict)
     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 +120,6 @@ export default function createDoctors(doctorsDict, institutionsDict, typesDict)
 
   return Object.freeze({
     all: doctorsValues,
-    getById,
     types,
     filterByType,
     typesDict,