Merge pull request #139 from sledilnik/slugify-once

⚡ Only slugify once instead of at every search keypress
sledilnik · Dec 22, 2021 · 2a8032e · 2a8032e
2 parents 233499e + d304634
commit 2a8032e
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/src/components/DoctorCard/Info.js b/src/components/DoctorCard/Info.js
@@ -12,7 +12,6 @@ import {
   Typography,
 } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import slugify from 'slugify';
 
 import { useLeafletContext } from 'context/leafletContext';
 import * as Icons from 'components/Shared/Icons';
@@ -34,7 +33,7 @@ const Info = function Info({ doctor, handleZoom = () => {}, isMarker = false })
   const navigate = useNavigate();
 
   const drPath = doctor?.type;
-  const slug = slugify(doctor?.name?.toLowerCase());
+  const slug = doctor?.nameSlug;
   let path = `/${lng}/${drPath}/${slug}`;
 
   const handleDoctorCard = (event, isReportError) => {

diff --git a/src/components/DoctorCard/index.js b/src/components/DoctorCard/index.js
@@ -1,5 +1,4 @@
 import { memo } from 'react';
-import slugify from 'slugify';
 import CardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 
@@ -23,7 +22,7 @@ const DoctorCard = function DoctorCard({
     map.flyTo([lat, lon], 13);
   };
 
-  const id = `${doctor.type}-${slugify(doctor.name).toLowerCase()}`;
+  const id = `${doctor.type}#${doctor.nameSlug}`;
 
   if (isPage) {
     return (

diff --git a/src/pages/Doctor.js b/src/pages/Doctor.js
@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useParams, Navigate } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import slugify from 'slugify';
 
 import DoctorCard from 'components/DoctorCard';
 import { Loader } from 'components/Shared';
@@ -19,7 +18,7 @@ const Doctor = function Doctor({ isReportError = false }) {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    setDoctor(doctors?.all.find(d => d.type === type && slugify(d.name.toLowerCase()) === name));
+    setDoctor(doctors?.all.find(d => d.type === type && d.nameSlug === name));
   }, [doctors, doctor, lng, type, name]);
 
   useEffect(() => {

diff --git a/src/services/doctors.js b/src/services/doctors.js
@@ -1,4 +1,5 @@
 import { t } from 'i18next';
+import slugify from 'slugify';
 
 const trimString = str => str.replace(/\s+/g, ' ').trim();
 
@@ -18,6 +19,7 @@ export function createDoctor(doctor, type, institution) {
   const getAcceptText = () => (doctor.accepts === 'y' ? t('accepts') : t('rejects'));
 
   const name = trimString(doctor.doctor);
+  const nameSlug = slugify(name.toLowerCase());
 
   const manUnit = trimString(institution.unit);
   const provider = trimString(institution.name);
@@ -48,6 +50,9 @@ export function createDoctor(doctor, type, institution) {
     get name() {
       return name;
     },
+    get nameSlug() {
+      return nameSlug;
+    },
     get accepts() {
       return doctor.accepts;
     },