code review change

www/assets/js/components/FacetDisplay.test.tsx

@@ -9,7 +9,8 @@ describe("FacetDisplay component", () => {
   const facetMap: FacetManifest = [
     ["topic", "Topics", false, false],
     ["resource_type", "Types", false, false],
-    ["department", "Departments", false, true]
+    ["department", "Departments", false, true],
+    ["level", "Level", false, true]
   ]
 
   function setup() {
@@ -38,8 +39,8 @@ describe("FacetDisplay component", () => {
     const { render } = setup()
     const wrapper = render()
     const facets = wrapper.children()
-    expect(facets).toHaveLength(4)
-    facets.slice(1, 4).map((facet, key) => {
+    expect(facets).toHaveLength(5)
+    facets.slice(1, 5).map((facet, key) => {
       expect(facet.prop("name")).toBe(facetMap[key][0])
       expect(facet.prop("title")).toBe(facetMap[key][1])
       expect(facet.prop("expandedOnLoad")).toBe(facetMap[key][3])
@@ -73,4 +74,26 @@ describe("FacetDisplay component", () => {
     wrapper.find(".clear-all-filters-button").simulate("click")
     expect(clearAllFilters).toHaveBeenCalled()
   })
+
+  test("accepts department and level names and converts them to codes", () => {
+    const activeFacets: Facets = {
+      topic:         [],
+      resource_type: [],
+      department:    ["1", "Literature"],
+      level:         ["graduate", "Non-Credit"]
+    }
+
+    const { render, clearAllFilters } = setup()
+    const wrapper = render({
+      activeFacets
+    })
+    expect(
+      wrapper
+        .find(".active-search-filters")
+        .find("SearchFilter")
+        .map(el => el.prop("value"))
+    ).toEqual(["1", "21L", "graduate", "noncredit"])
+    wrapper.find(".clear-all-filters-button").simulate("click")
+    expect(clearAllFilters).toHaveBeenCalled()
+  })
 })

www/assets/js/components/FacetDisplay.tsx

@@ -3,10 +3,14 @@ import React from "react"
 import FilterableFacet from "./FilterableFacet"
 import Facet from "./Facet"
 import SearchFilter from "./SearchFilter"
-import { Aggregation, Facets } from "@mitodl/course-search-utils"
-import { FacetManifest } from "../LearningResources"
-import { FACET_OPTIONS, levelsMap } from "../lib/constants"
-import departments from "../../../../base-theme/data/departments.json"
+import {
+  Aggregation,
+  Facets,
+  LEVELS,
+  DEPARTMENTS
+} from "@mitodl/course-search-utils"
+import type { FacetManifest } from "../LearningResources"
+import { FACET_OPTIONS } from "../lib/constants"
 
 interface Props {
   facetMap: FacetManifest
@@ -17,33 +21,60 @@ interface Props {
   toggleFacet: (name: string, value: string, isEnabled: boolean) => void
 }
 
+const reverseObject = (
+  stringObject: Record<string, string>
+): Record<string, string> => {
+  return Object.fromEntries(
+    Object.entries(stringObject).map(([key, value]) => [value, key])
+  )
+}
+
 const sanitizeActiveFacets = (activeFacets: Facets): void => {
+  const reverseLevels = reverseObject(LEVELS)
+  const reverseDepartments = reverseObject(DEPARTMENTS)
+
   if (activeFacets) {
     Object.entries(activeFacets).forEach(([facet, values]) => {
       if (Object.keys(FACET_OPTIONS).indexOf(facet) > -1) {
-        // @ts-expect-error TODO facet is a key of activeFacets
-        activeFacets[facet] = values.filter(
-          // @ts-expect-error TODO we checked that facet is also a key of FACET_OPTIONS
-          facetValue => FACET_OPTIONS[facet].indexOf(facetValue) > -1
+        activeFacets[facet as keyof typeof activeFacets] = values.flatMap(
+          (facetValue: string) => {
+            if (
+              // @ts-expect-error we checked that facet is also a key of FACET_OPTION
+              FACET_OPTIONS[facet as keyof typeof FACET_OPTIONS].indexOf(
+                facetValue
+              ) > -1
+            ) {
+              return facetValue
+            } else if (facet === "level" && facetValue in reverseLevels) {
+              return reverseLevels[facetValue]
+            } else if (
+              facet === "department" &&
+              facetValue in reverseDepartments
+            ) {
+              return reverseDepartments[facetValue]
+            } else {
+              return []
+            }
+          }
         )
       }
     })
   }
 }
 
 const departmentName = (departmentId: string): string | null => {
-  if (departmentId in departments) {
-    return departments[departmentId as keyof typeof departments].title
+  if (departmentId in DEPARTMENTS) {
+    return DEPARTMENTS[departmentId as keyof typeof DEPARTMENTS]
   } else {
-    return null
+    return departmentId
   }
 }
 
 const levelName = (levelValue: string): string | null => {
-  if (levelValue in levelsMap) {
-    return levelsMap[levelValue as keyof typeof levelsMap]
+  if (levelValue in LEVELS) {
+    return LEVELS[levelValue as keyof typeof LEVELS]
   } else {
-    return null
+    return levelValue
   }
 }
 

www/assets/js/components/SearchPage.tsx

@@ -1,12 +1,15 @@
 import React, { useState, useCallback } from "react"
 import InfiniteScroll from "react-infinite-scroller"
 import {
-  Aggregations,
   useCourseSearch,
   LearningResourceType,
   LEARNING_RESOURCE_ENDPOINT,
-  CONTENT_FILE_ENDPOINT
+  CONTENT_FILE_ENDPOINT,
+  Aggregations,
+  CourseResource,
+  ContentFile
 } from "@mitodl/course-search-utils"
+
 import { without } from "ramda"
 import { History as RouterHistory } from "history"
 
@@ -29,7 +32,6 @@ import {
 } from "../lib/constants"
 import { emptyOrNil, isDoubleQuoted } from "../lib/util"
 import { FacetManifest } from "../LearningResources"
-import { CourseResource, ContentFile } from "../open_api_generated/api"
 
 const COURSE_FACETS: FacetManifest = [
   ["department", "Departments", true, true],
@@ -207,7 +209,7 @@ export default function SearchPage(props: SearchPageProps) {
       toggleFacets(toggledFacets)
       updateEndpoint(nextResourceFilterState)
     },
-    [toggleFacets, activeFacets, endpoint, updateEndpoint]
+    [toggleFacets, activeFacets, endpoint, updateEndpoint, sort, updateSort]
   )
 
   const facetMap =

www/assets/js/factories/search.ts

@@ -2,10 +2,10 @@
 import casual from "casual-browserify"
 import { CourseJSON, ResourceJSON } from "../LearningResources"
 
-import {
+import type {
   CourseResource as CourseSearchResult,
   ContentFile as ContentFileSearchResult
-} from "../open_api_generated/api"
+} from "@mitodl/course-search-utils"
 
 import { DATE_FORMAT, RESOURCE_TYPE } from "../lib/constants"
 

www/assets/js/lib/constants.ts

@@ -1,6 +1,9 @@
-import { LearningResourceType, Facets } from "@mitodl/course-search-utils"
-import { LearningResourcesListLevelEnum } from "../open_api_generated/api"
-import departments from "../../../../base-theme/data/departments.json"
+import {
+  LearningResourceType,
+  LEVELS,
+  DEPARTMENTS
+} from "@mitodl/course-search-utils"
+import type { Facets } from "@mitodl/course-search-utils"
 export const CONTENT_TYPE_PDF = "pdf"
 export const CONTENT_TYPE_PAGE = "page"
 export const CONTENT_TYPE_VIDEO = LearningResourceType.Video
@@ -66,10 +69,6 @@ export const STATUS_CODES = {
   HTTP_300_MULTIPLE_CHOICES: 300
 }
 
-export const levelsMap = Object.fromEntries(
-  Object.entries(LearningResourcesListLevelEnum).map(a => a.reverse())
-)
-
 const RESOURCE_TYPES = [
   "Activity Assignments",
   "Activity Assignments with Examples",
@@ -458,8 +457,8 @@ export const FACET_OPTIONS: Facets = {
     "World History"
   ],
   resource_type:        ["course"],
-  department:           Object.keys(departments),
-  level:                Object.keys(levelsMap),
+  department:           Object.keys(DEPARTMENTS),
+  level:                Object.keys(LEVELS),
   course_feature:       RESOURCE_TYPES,
   content_feature_type: RESOURCE_TYPES
 }

www/assets/js/lib/search.ts

@@ -9,19 +9,19 @@ import {
   ContentType
 } from "./constants"
 import { LearningResourceType } from "@mitodl/course-search-utils"
-import {
+import type {
   CourseJSON,
   LearningResource,
   ResourceJSON,
   Level
 } from "../LearningResources"
-import {
+import type {
   CourseResource as CourseSearchResult,
   ContentFile as ContentFileSearchResult,
   LearningResourceTopic,
   CourseNumber,
   LearningResourceRun
-} from "../open_api_generated/api"
+} from "@mitodl/course-search-utils"
 
 const formatCourseJSONTopics = (courseJSON: CourseJSON) =>
   courseJSON.topics ?