From 1693e5f542b7bead83dd0495b2fb2dc4398b3319 Mon Sep 17 00:00:00 2001
From: John Darke <52716187+JDarke@users.noreply.github.com>
Date: Fri, 1 May 2020 00:20:04 +0100
Subject: [PATCH] fix(patients): fixes search when using special characters
 (#2012)

---
 package.json                                   |  1 +
 .../clients/db/PatientRepository.test.ts       |  9 +++++++++
 src/clients/db/PatientRepository.ts            |  4 +++-
 src/components/Sidebar.tsx                     | 18 ++++++++----------
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 793b81ee1e..c23dd474ec 100644
--- a/package.json
+++ b/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",
diff --git a/src/__tests__/clients/db/PatientRepository.test.ts b/src/__tests__/clients/db/PatientRepository.test.ts
index 1aa405e332..e45cd7262b 100644
--- a/src/__tests__/clients/db/PatientRepository.test.ts
+++ b/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'
diff --git a/src/clients/db/PatientRepository.ts b/src/clients/db/PatientRepository.ts
index 5fb5937ed0..99a239685e 100644
--- a/src/clients/db/PatientRepository.ts
+++ b/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'),
             },
           },
           {
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index d4ed204d4f..e70dfcd5e3 100644
--- a/src/components/Sidebar.tsx
+++ b/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 = () => (