feat: 👽️ remove doctor id

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/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 });
     }
   }, [

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,

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,
     };
   }, {});
 }