From 301a296f7a94ccd0e9b1e860a437134f6254ddbf Mon Sep 17 00:00:00 2001
From: root <root@DESKTOP-UKV0O21>
Date: Sat, 5 Oct 2024 17:39:42 -0400
Subject: [PATCH] fixed bug that showed invalid areas of focus

---
 static/js/redux/ui/SearchResult.tsx | 15 ++++++++++++---
 tsconfig.json                       |  2 +-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/static/js/redux/ui/SearchResult.tsx b/static/js/redux/ui/SearchResult.tsx
index ac82a628e8..7fdf28a6b9 100644
--- a/static/js/redux/ui/SearchResult.tsx
+++ b/static/js/redux/ui/SearchResult.tsx
@@ -141,16 +141,25 @@ const SearchResult = (props: SearchResultProps) => {
 };
 
 type AreaBubbleProps = { areas: string[] };
-export const AreaBubble = ({ areas }: AreaBubbleProps) =>
-  areas.length > 0 ? (
+export const AreaBubble = ({ areas }: AreaBubbleProps) => {
+  const isValidArea = (rawAreaSingle: string) : boolean => {
+    const validAreas = ['H', 'S', 'N', 'E', 'Q', 'writing'];
+    return validAreas.includes(rawAreaSingle);
+  }
+
+  const validAreas = areas.filter((areaCandidate) => isValidArea(areaCandidate));
+
+  return validAreas.length > 0 ? (
     <div className="areas">
-      {areas.map((area) => (
+      {validAreas.map((area) => (
         <div className={`bubble ${area}`} key={area}>
           {area}
         </div>
       ))}
     </div>
   ) : null;
+}
+  
 
 type WritingIntensiveProps = { isWritingIntensive: string };
 export const WritingIntensive = ({ isWritingIntensive }: WritingIntensiveProps) =>
diff --git a/tsconfig.json b/tsconfig.json
index 54e9e7a213..2f87badd22 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,6 +10,6 @@
     "allowJs": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "lib": ["es2015", "DOM"]
+    "lib": ["es2015", "DOM", "es2016"]
   }
 }