1274 ipv subcategory sort (#1315)

* Remove unused eligibility tags from IPV flow * 1274 Add logic to sort sidebar algolia subcategory refinements by the order received from the API --------- Co-authored-by: Brian Schroer <[email protected]>
ShelterTechSF · Feb 9, 2024 · 55a5849 · 55a5849
1 parent 5bff0bd
commit 55a5849
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 27 deletions.
diff --git a/app/components/search/Sidebar/Sidebar.tsx b/app/components/search/Sidebar/Sidebar.tsx
@@ -1,5 +1,7 @@
 import React, { useState, useMemo } from "react";
 
+import type { Category } from "models/Meta";
+
 import {
   eligibilitiesMapping,
   categoriesMapping,
@@ -21,20 +23,42 @@ const Sidebar = ({
   categorySlug = "",
   subcategories = [],
   subcategoryNames = [],
+  sortAlgoliaSubcategoryRefinements = false,
 }: {
   setSearchRadius: (radius: string) => void;
   searchRadius: string;
   isSearchResultsPage: boolean;
   eligibilities?: object[];
   categorySlug?: string;
-  subcategories?: object[];
+  subcategories?: Category[];
   subcategoryNames?: string[];
+  sortAlgoliaSubcategoryRefinements?: boolean;
 }) => {
   const [filterMenuVisible, setfilterMenuVisible] = useState(false);
   let categoryRefinementJsx: React.ReactElement | null = null;
   let eligibilityRefinementJsx: React.ReactElement | null = null;
   const orderByLabel = (a: { label: string }, b: { label: string }) =>
     a.label.localeCompare(b.label);
+
+  const orderByPriorityRanking = (
+    a: { label: string },
+    b: { label: string }
+  ) => {
+    // Our API has the ability to sort subcategories using the "child_priority_rank" on the
+    // CategoryRelationship table. In cases where we want to sort our sidebar categories
+    // following this order, we can use this sorting function, which sorts the categories
+    // that we receive from Algolia using the order that we get from the API.
+    const priorityA = subcategoryNames.indexOf(a.label);
+    const priorityB = subcategoryNames.indexOf(b.label);
+
+    // If an element in the data returned from Algolia does not exist in the API's ordered array
+    // (i.e., Algolia is out of sync with our API), move the element to the back of the list.
+    if (priorityA < 0) return 1;
+    if (priorityB < 0) return -1;
+
+    return priorityA - priorityB;
+  };
+
   const onChangeValue = (evt: React.ChangeEvent<HTMLInputElement>) => {
     setSearchRadius(evt.target.value);
   };
@@ -128,7 +152,11 @@ const Sidebar = ({
           transformItems={(items: { label: string }[]) =>
             items
               .filter(({ label }) => subcategoryNames.includes(label))
-              .sort(orderByLabel)
+              .sort(
+                sortAlgoliaSubcategoryRefinements
+                  ? orderByPriorityRanking
+                  : orderByLabel
+              )
           }
         />
       );

diff --git a/app/components/ucsf/RefinementLists/ucsfEligibilitiesMap.ts b/app/components/ucsf/RefinementLists/ucsfEligibilitiesMap.ts
@@ -388,25 +388,13 @@ export const eligibilityMap: Readonly<UcsfEligibilityMap> = {
           name: "See All",
           checked: false,
         },
-        {
-          isSeeAll: false,
-          checkedId: "52",
-          name: "African/Black",
-          checked: false,
-        },
         {
           isSeeAll: false,
           checkedId: "47",
           name: "API (Asian/Pacific Islander)",
           alias: "Asian and Pacific Islander",
           checked: false,
         },
-        {
-          isSeeAll: false,
-          checkedId: "53",
-          name: "Jewish",
-          checked: false,
-        },
         {
           isSeeAll: false,
           checkedId: "48",
@@ -420,12 +408,6 @@ export const eligibilityMap: Readonly<UcsfEligibilityMap> = {
           name: "LGBTQ+",
           checked: false,
         },
-        {
-          isSeeAll: false,
-          checkedId: "49",
-          name: "Middle Eastern and North African",
-          checked: false,
-        },
         {
           isSeeAll: false,
           checkedId: "51",

diff --git a/app/pages/ServiceDiscoveryForm/constants.ts b/app/pages/ServiceDiscoveryForm/constants.ts
@@ -9,6 +9,7 @@ export interface ServiceCategory {
   algoliaCategoryName: string;
   sortBy24HourAvailability?: boolean;
   disableGeoLocation?: boolean;
+  sortAlgoliaSubcategoryRefinements?: boolean;
   id: string;
   name: string;
   abbreviatedName?: string;
@@ -174,5 +175,6 @@ export const CATEGORIES: Readonly<ServiceCategory[]> = [
     slug: "ucsf-partner-violence-resources",
     steps: ["subcategories", "eligibilities", "results"],
     subcategorySubheading: defaultSubheading,
+    sortAlgoliaSubcategoryRefinements: true,
   },
 ];
diff --git a/app/pages/ServiceDiscoveryResults/ServiceDiscoveryResults.tsx b/app/pages/ServiceDiscoveryResults/ServiceDiscoveryResults.tsx
@@ -140,7 +140,12 @@ const InnerServiceDiscoveryResults = ({
   userLatLng: string;
 }) => {
   const subcategoryNames = subcategories.map((c) => c.name);
-  const { name: categoryName, slug: categorySlug, id: categoryId } = category;
+  const {
+    name: categoryName,
+    slug: categorySlug,
+    id: categoryId,
+    sortAlgoliaSubcategoryRefinements,
+  } = category;
 
   return (
     <div className={styles.container}>
@@ -182,6 +187,9 @@ const InnerServiceDiscoveryResults = ({
             categorySlug={categorySlug}
             subcategories={subcategories}
             subcategoryNames={subcategoryNames}
+            sortAlgoliaSubcategoryRefinements={
+              sortAlgoliaSubcategoryRefinements
+            }
           />
 
           <div className={styles.results}>

diff --git a/app/pages/UcsfDiscoveryForm/UcsfDiscoveryForm.tsx b/app/pages/UcsfDiscoveryForm/UcsfDiscoveryForm.tsx
@@ -8,6 +8,8 @@ import qs from "qs";
 import ReactGA from "react-ga";
 import ReactGA_4 from "react-ga4";
 
+import type { Category } from "models/Meta";
+
 import { icon } from "assets";
 import { Button } from "components/ui/inline/Button/Button";
 import { Section } from "components/ucsf/Section/Section";
@@ -30,11 +32,6 @@ import { useSubcategoriesForCategory } from "../../hooks/APIHooks";
 
 import styles from "./UcsfDiscoveryForm.module.scss";
 
-interface SubcategoryRefinement {
-  name: string;
-  id: number;
-}
-
 const seeAllPseudoId = -1;
 
 const Page = () => {
@@ -55,7 +52,7 @@ const Page = () => {
     useState<SelectedSubcategories>(defaultSelectedSubcategories);
   const [currentStep, setCurrentStep] = useState(0);
 
-  const subcategories: SubcategoryRefinement[] =
+  const subcategories: Category[] =
     useSubcategoriesForCategory(category?.id ?? null) || [];
 
   const selectedResource = UCSF_RESOURCES.find(