fix: Refactor filters logic (#1164)

Refactor the filters logic by moving all of the implementation into each of the specific `ButtonGroup`, `Panels`, and `MultiSelect` components as well as separating out the filter heading description information, rather than keeping it wrapped together in `DimesionFilter`.

Author: cfreedman

package-lock.json

@@ -5,54 +5,10 @@ import { PiX } from 'react-icons/pi';
 import { ThemeButton } from './ThemeButton';
 import { BarClickOptions } from '@/app/find-properties/[[...opa_id]]/page';
 import { rcos, neighborhoods, zoning } from './Filters/filterOptions';
-import DimensionFilter from './Filters/DimensionFilter';
-
-const filters = [
-  {
-    property: 'priority_level',
-    display: 'Suggested Priority',
-    options: ['Low', 'Medium', 'High'],
-    type: 'buttonGroup',
-  },
-  {
-    property: 'get_access',
-    display: 'Get Access',
-    options: [
-      'TACTICAL_URBANISM',
-      'PRIVATE_LAND_USE',
-      'BUY_FROM_OWNER',
-      'SIDE_YARD',
-      'LAND_BANK',
-      'CONSERVATORSHIP',
-    ],
-    type: 'panels',
-  },
-  {
-    property: 'neighborhood',
-    display: 'Neighborhoods',
-    options: neighborhoods,
-    type: 'multiSelect',
-  },
-  {
-    property: 'rco_names',
-    display: 'Community Organizations',
-    options: rcos,
-    type: 'multiSelect',
-    useIndexOfFilter: true,
-  },
-  {
-    property: 'zoning_base_district',
-    display: 'Zoning',
-    options: zoning,
-    type: 'multiSelect',
-  },
-  {
-    property: 'parcel_type',
-    display: 'Property Type',
-    options: ['Land', 'Building'],
-    type: 'buttonGroup',
-  },
-];
+import FilterDescription from './Filters/FilterDescription';
+import ButtonGroup from './Filters/ButtonGroup';
+import MultiSelect from './Filters/MultiSelect';
+import Panels from './Filters/Panels';
 
 interface FilterViewProps {
   updateCurrentView: (view: BarClickOptions) => void;
@@ -72,9 +28,62 @@ const FilterView: FC<FilterViewProps> = ({ updateCurrentView }) => {
           updateCurrentView('filter');
         }}
       />
-      {filters.map((attr) => (
-        <DimensionFilter key={attr.property} {...attr} />
-      ))}
+      <div className="pt-3 pb-6">
+        <FilterDescription
+          title="Suggested Priority"
+          description="Find properties based on how much they can reduce gun violence considering the gun violence, cleanliness, and tree canopy nearby. "
+          link="/methodology/#priority-method"
+        />
+        <ButtonGroup
+          property="priority_level"
+          options={['Low', 'Medium', 'High']}
+          aria_describedby_label="Suggested Priority"
+        />
+      </div>
+      <div className="pt-3 pb-6">
+        <FilterDescription
+          title="Get Access"
+          description="Find properties based on what we think the easiest method to get legal access to them is, based on the data available to us."
+          link="/methodology/#access-method"
+        />
+        <Panels />
+      </div>
+      <div className="pt-3 pb-6">
+        <FilterDescription title="Neighborhoods" />
+        <MultiSelect
+          property="neighborhood"
+          options={neighborhoods}
+          aria_describedby_label="Neighborhoods"
+          useIndexOfFilter={false}
+        />
+      </div>
+      <div className="pt-3 pb-6">
+        <FilterDescription title="Community Organizations" />
+        <MultiSelect
+          property="rco_names"
+          options={rcos}
+          aria_describedby_label="Community_Organizations"
+          useIndexOfFilter={true}
+        />
+      </div>
+
+      <div className="pt-3 pb-6">
+        <FilterDescription title="Zoning" />
+        <MultiSelect
+          property="zoning_base_district"
+          options={zoning}
+          aria_describedby_label="Zoning"
+          useIndexOfFilter={false}
+        />
+      </div>
+      <div className="pt-3 pb-6">
+        <FilterDescription title="Property Type" />
+        <ButtonGroup
+          property="parcel_type"
+          options={['Land', 'Building']}
+          aria_describedby_label="Property_Type"
+        />
+      </div>
     </div>
   );
 };

src/components/FilterView.tsx

@@ -1,24 +1,36 @@
 'use client';
 
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { Button } from '@nextui-org/react';
 import { Check } from '@phosphor-icons/react';
+import { useFilter } from '@/context/FilterContext';
 
 type ButtonGroupProps = {
+  property: string;
   options: string[];
-  selectedKeys: string[];
   aria_describedby_label?: string;
-  toggleDimension: (dimension: string) => void;
-  displayOptions?: { [key: string]: string };
 };
 
-const ButtonGroup: FC<ButtonGroupProps> = ({
+const ButtonGroup = ({
+  property,
   options,
-  selectedKeys,
-  toggleDimension,
   aria_describedby_label,
-  displayOptions = {},
-}) => {
+}: ButtonGroupProps): JSX.Element => {
+  const { dispatch, appFilter } = useFilter();
+  const currentFilterKeys = appFilter[property]?.values || [];
+
+  const toggleDimension = (dimension: string) => {
+    const updatedKeys = currentFilterKeys.includes(dimension)
+      ? currentFilterKeys.filter((item) => item !== dimension)
+      : [...currentFilterKeys, dimension];
+
+    dispatch({
+      type: 'SET_DIMENSIONS',
+      property,
+      dimensions: updatedKeys,
+    });
+  };
+
   return (
     <div className="flex flex-wrap gap-x-2 min-h-[33.5px]">
       {options.map((option, index) => (
@@ -28,23 +40,25 @@ const ButtonGroup: FC<ButtonGroupProps> = ({
           role="checkbox"
           onPress={() => toggleDimension(option)}
           size="sm"
-          color={selectedKeys.includes(option) ? 'success' : 'default'}
+          color={currentFilterKeys.includes(option) ? 'success' : 'default'}
           className={
-            (selectedKeys.includes(option) ? 'tagSelected' : 'tagDefault') +
+            (currentFilterKeys.includes(option)
+              ? 'tagSelected'
+              : 'tagDefault') +
             (option === 'Private Land Use Agreement'
               ? ' max-[475px]:mt-2 sm:max-[1103px]:mt-2'
               : '')
           }
           radius="full"
-          aria-checked={selectedKeys.includes(option)}
+          aria-checked={currentFilterKeys.includes(option)}
           aria-describedby={aria_describedby_label}
           startContent={
-            selectedKeys.includes(option) ? (
-              <Check className="w-3 w-3.5 max-h-6" />
+            currentFilterKeys.includes(option) ? (
+              <Check className="w-3 max-h-6" />
             ) : undefined
           }
         >
-          {displayOptions[option] || option}
+          {option}
         </Button>
       ))}
     </div>