Merge pull request #697 from zheyichn/zheyichn/592-reword-filter-display

Issue592 reword filter content
CodeForPhilly · Jun 15, 2024 · f87259e · f87259e
2 parents 9ecd5ae + 36ea785
commit f87259e
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 37 deletions.
diff --git a/src/components/FilterView.tsx b/src/components/FilterView.tsx
@@ -5,7 +5,6 @@ import { BarClickOptions } from "@/app/find-properties/[[...opa_id]]/page";
 import { ThemeButton } from "./ThemeButton";
 import { rcos, neighborhoods, zoning } from "./Filters/filterOptions";
 
-
 const filters = [
   {
     property: "priority_level",
@@ -16,7 +15,14 @@ const filters = [
   {
     property: "get_access",
     display: "Get Access",
-    options: ["TACTICAL_URBANISM", "PRIVATE_LAND_USE", "BUY_FROM_OWNER", "SIDE_YARD", "LAND_BANK", "CONSERVATORSHIP"],
+    options: [
+      "TACTICAL_URBANISM",
+      "PRIVATE_LAND_USE",
+      "BUY_FROM_OWNER",
+      "SIDE_YARD",
+      "LAND_BANK",
+      "CONSERVATORSHIP",
+    ],
     type: "panels",
   },
   {
@@ -40,13 +46,13 @@ const filters = [
   },
   {
     property: "parcel_type",
-    display: "Parcel Type",
+    display: "Property Type",
     options: ["Land", "Building"],
     type: "buttonGroup",
   },
   {
     property: "llc_owner",
-    display: "LLC Owner",
+    display: "Owner",
     options: ["Yes", "No"],
     type: "buttonGroup",
   },

diff --git a/src/components/Filters/ButtonGroup.tsx b/src/components/Filters/ButtonGroup.tsx
@@ -8,12 +8,14 @@ type ButtonGroupProps = {
   options: string[];
   selectedKeys: string[];
   toggleDimension: (dimension: string) => void;
+  displayOptions?: { [key: string]: string };
 };
 
 const ButtonGroup: FC<ButtonGroupProps> = ({
   options,
   selectedKeys,
   toggleDimension,
+  displayOptions = {},
 }) => {
   return (
     <div className="flex flex-wrap gap-x-2 min-h-[33.5px]">
@@ -38,7 +40,7 @@ const ButtonGroup: FC<ButtonGroupProps> = ({
             ) : undefined
           }
         >
-          {option}
+          {displayOptions[option] || option}
         </Button>
       ))}
     </div>

diff --git a/src/components/Filters/DimensionFilter.tsx b/src/components/Filters/DimensionFilter.tsx
@@ -14,6 +14,17 @@ type DimensionFilterProps = {
   useIndexOfFilter?: boolean;
 };
 
+type OptionDisplayMapping = {
+  [key: string]: { [key: string]: string };
+};
+
+const optionsDisplayMapping: OptionDisplayMapping = {
+  "llc_owner": {
+    "Yes": "Business",
+    "No": "Individual",
+  },
+};
+
 const DimensionFilter: FC<DimensionFilterProps> = ({
   property,
   display,
@@ -37,19 +48,24 @@ const DimensionFilter: FC<DimensionFilterProps> = ({
   const toggleDimensionForPanel = (dimension: string, panel_property: string) => {
     let newSelectedPanelKeys
     if (selectedPanelKeys[panel_property]) {
-      newSelectedPanelKeys = selectedPanelKeys[panel_property].includes(dimension)
+      newSelectedPanelKeys = selectedPanelKeys[panel_property].includes(
+        dimension
+      )
         ? selectedPanelKeys[panel_property].filter((key) => key !== dimension)
         : [...selectedPanelKeys[panel_property], dimension];
     } else {
-      newSelectedPanelKeys = [dimension]
+      newSelectedPanelKeys = [dimension];
     }
-    setSelectedPanelkeys({...selectedPanelKeys, [panel_property]: newSelectedPanelKeys});
+    setSelectedPanelkeys({
+      ...selectedPanelKeys,
+      [panel_property]: newSelectedPanelKeys,
+    });
     dispatch({
       type: "SET_DIMENSIONS",
       property: panel_property,
       dimensions: newSelectedPanelKeys,
     });
-  }
+  };
 
   const toggleDimension = (dimension: string) => {
     const newSelectedKeys = selectedKeys.includes(dimension)
@@ -75,34 +91,35 @@ const DimensionFilter: FC<DimensionFilterProps> = ({
   };
 
   const filter = useMemo(() => {
-      if (type === "buttonGroup") {
-        return (
-          <ButtonGroup
-            options={options}
-            selectedKeys={selectedKeys}
-            toggleDimension={toggleDimension}
-          />
-        );
-      } else if (type === "panels") {
-        return (
-          <Panels 
-            options={options}
-            selectedPanelKeys={selectedPanelKeys}
-            toggleDimensionForPanel={toggleDimensionForPanel}
-          />
-        )
-      } else {
-        return (
-          <MultiSelect
-            display={display}
-            options={options}
-            selectedKeys={selectedKeys}
-            toggleDimension={toggleDimension}
-            handleSelectionChange={handleSelectionChange}
-          />
-        );
-      }
-    }, [selectedKeys, selectedPanelKeys])
+    if (type === "buttonGroup") {
+      return (
+        <ButtonGroup
+          options={options}
+          selectedKeys={selectedKeys}
+          toggleDimension={toggleDimension}
+          displayOptions={optionsDisplayMapping[property]}
+        />
+      );
+    } else if (type === "panels") {
+      return (
+        <Panels
+          options={options}
+          selectedPanelKeys={selectedPanelKeys}
+          toggleDimensionForPanel={toggleDimensionForPanel}
+        />
+      );
+    } else {
+      return (
+        <MultiSelect
+          display={display}
+          options={options}
+          selectedKeys={selectedKeys}
+          toggleDimension={toggleDimension}
+          handleSelectionChange={handleSelectionChange}
+        />
+      );
+    }
+  }, [selectedKeys, selectedPanelKeys]);
 
   const filterDescription =
     property === "priority_level"