highlight matched search text

pedrolivaresanchez · Nov 15, 2024 · cb8fb88 · cb8fb88
1 parent 51608d1
commit cb8fb88
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/src/components/solicitudes/SolicitudCard.tsx b/src/components/solicitudes/SolicitudCard.tsx
@@ -10,26 +10,47 @@ import DeleteHelpRequest from '../DeleteHelpRequest';
 import { textWithEllipsis } from '@/helpers/utils';
 import { useTowns } from '@/context/TownProvider';
 import { useRole } from '@/context/RoleProvider';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import ChangeUrgencyHelpRequest from '../ChangeUrgencyHelpRequest';
 import ChangeStatusButton from '../ChangeStatusButton';
 import ChangeCRMStatus from '../ChangeCRMStatus';
 import { UserRoles } from '@/helpers/constants';
 import CRMNotes from '@/components/CRMNotes';
 import CRMLog from '@/components/CRMLog';
 
+export const getHighlightedText = (text: string, highlight: string) => {
+  if (highlight === '') return text;
+  const regEscape = (v: string) => v.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+  const textChunks = text.split(new RegExp(regEscape(highlight), 'ig'));
+  let sliceIdx = 0;
+  return textChunks.map((chunk, index) => {
+    const currentSliceIdx = sliceIdx + chunk.length;
+    sliceIdx += chunk.length + highlight.length;
+    return (
+      <Fragment key={index}>
+        {chunk}
+        {currentSliceIdx < text.length && (
+          <span className="inline-block bg-blue-100">{text.slice(currentSliceIdx, sliceIdx)}</span>
+        )}
+      </Fragment>
+    );
+  });
+};
+
 type SolicitudCardProps = {
   caso: SelectedHelpData;
   showLink?: boolean;
   showEdit?: boolean;
   format?: 'small' | 'large';
+  highlightedText?: string;
 };
 
 export default function SolicitudCard({
   caso,
   showLink = true,
   showEdit = false,
   format = 'large',
+  highlightedText = '',
 }: SolicitudCardProps) {
   const session = useSession();
   const role = useRole();
@@ -42,6 +63,8 @@ export default function SolicitudCard({
   const isMyRequest = session.user?.id && session.user.id === caso.user_id;
   const [updateUrgency, setUpdateUrgency] = useState(caso.urgency);
   const [updateStatus, setUpdateStatus] = useState(caso.status);
+
+  const description = format === 'small' ? textWithEllipsis(caso.description, 250) : caso.description;
   return (
     !deleted && (
       <div key={caso.id} className="rounded-2xl bg-white shadow-lg ring-1 ring-gray-900/5">
@@ -92,7 +115,7 @@ export default function SolicitudCard({
         </div>
         <div className="px-6 py-4">
           <p className="text-gray-700 first-letter:capitalize" style={{ wordBreak: 'break-word' }}>
-            {format === 'small' ? textWithEllipsis(caso.description, 250) : caso.description}
+            {description && getHighlightedText(description, highlightedText)}
           </p>
         </div>
         <div className="flex flex-col sm:flex-row justify-between items-start md:items-end gap-4 px-6 pb-4">

diff --git a/src/components/solicitudes/SolicitudList.tsx b/src/components/solicitudes/SolicitudList.tsx
@@ -126,7 +126,13 @@ export default function SolicitudList({ data, count, filtersData, onDataFilterCh
             data={data}
             itemContent={(_, caso) => (
               <div key={caso.id} className="py-2">
-                <SolicitudCard format="small" showLink={true} showEdit={true} caso={caso as HelpRequestData} />
+                <SolicitudCard
+                  format="small"
+                  showLink={true}
+                  showEdit={true}
+                  caso={caso as HelpRequestData}
+                  highlightedText={filtersData.search}
+                />
               </div>
             )}
           />