fix(patients): fixes search when using special characters

package.json

@@ -10,6 +10,7 @@
     "@types/pouchdb-find": "~6.3.4",
     "bootstrap": "~4.4.1",
     "date-fns": "~2.12.0",
+    "escape-string-regexp": "~4.0.0",
     "i18next": "~19.4.0",
     "i18next-browser-languagedetector": "~4.1.0",
     "i18next-xhr-backend": "~3.2.2",

src/__tests__/clients/db/PatientRepository.test.ts

@@ -39,6 +39,15 @@ describe('patient repository', () => {
       await removeAllDocs()
     })
 
+    it('should escape all special chars from search text', async () => {
+      await patients.put({ _id: 'id9999', code: 'P00001', fullName: 'test -]?}(){*[\\$+.^test' })
+
+      const result = await PatientRepository.search('test -]?}(){*[\\$+.^test')
+
+      expect(result).toHaveLength(1)
+      expect(result[0].id).toEqual('id9999')
+    })
+
     it('should return all records that patient code matches search text', async () => {
       // same full name to prove that it is finding by patient code
       const expectedPatientCode = 'P00001'

src/clients/db/PatientRepository.ts

@@ -1,3 +1,4 @@
+import escapeStringRegexp from 'escape-string-regexp'
 import shortid from 'shortid'
 import Patient from '../../model/Patient'
 import Repository from './Repository'
@@ -13,12 +14,13 @@ export class PatientRepository extends Repository<Patient> {
   }
 
   async search(text: string): Promise<Patient[]> {
+    const escapedString = escapeStringRegexp(text)
     return super.search({
       selector: {
         $or: [
           {
             fullName: {
-              $regex: RegExp(text, 'i'),
+              $regex: RegExp(escapedString, 'i'),
             },
           },
           {

src/components/Sidebar.tsx

@@ -55,22 +55,20 @@ const Sidebar = () => {
     cursor: 'pointer',
     fontSize: 'small',
     borderBottomWidth: 0,
-    color:
-      (splittedPath[1].includes('patients') || splittedPath[1].includes('appointments')) &&
-      splittedPath.length > 2
-        ? 'white'
-        : 'black',
+    borderTopWidth: 0,
+    color: 'black',
+    padding: '.6rem 1.25rem',
+    backgroundColor: 'rgba(245,245,245,1)',
   }
 
   const listSubItemStyle: CSSProperties = {
     cursor: 'pointer',
     fontSize: 'small',
     borderBottomWidth: 0,
-    color:
-      (splittedPath[1].includes('patients') || splittedPath[1].includes('appointments')) &&
-      splittedPath.length < 3
-        ? 'white'
-        : 'black',
+    borderTopWidth: 0,
+    color: 'black',
+    padding: '.6rem 1.25rem',
+    backgroundColor: 'rgba(245,245,245,1)',
   }
 
   const getDashboardLink = () => (